feat: support component in the table header

Support custom component in the table header of the list page, the custom component is placed in front of the magicSearch component

Change-Id: I980552818bcb6375d3b412b63732c02597ff2a94

src/components/Tables/Base/index.jsx

@@ -98,6 +98,7 @@ export class BaseTable extends React.Component {
     primaryActionsExtra: PropTypes.any,
     isAdminPage: PropTypes.bool,
     containerProps: PropTypes.any,
+    middleComponentInHeader: PropTypes.node,
   };
 
   static defaultProps = {
@@ -653,6 +654,14 @@ export class BaseTable extends React.Component {
     );
   }
 
+  renderMiddleInHeader() {
+    const { middleComponentInHeader } = this.props;
+    if (middleComponentInHeader) {
+      return middleComponentInHeader;
+    }
+    return null;
+  }
+
   renderActions() {
     const {
       isAdminPage,
@@ -791,6 +800,7 @@ export class BaseTable extends React.Component {
           {this.renderRefreshAuto()}
         </div>
         {this.renderTimeFilter()}
+        {this.renderMiddleInHeader()}
         {this.renderSearch()}
       </div>
     );

src/containers/List/index.jsx

@@ -440,6 +440,10 @@ export default class BaseList extends React.Component {
     return false;
   }
 
+  get middleComponentInTableHeader() {
+    return null;
+  }
+
   setRefreshDataTimerTransition = () => {
     this.stopRefreshAuto();
     if (this.dataTimerTransition) {
@@ -557,6 +561,7 @@ export default class BaseList extends React.Component {
       primaryActionsExtra: this.primaryActionsExtra,
       isAdminPage: this.isAdminPage,
       initFilter: this.initFilter,
+      middleComponentInHeader: this.middleComponentInTableHeader,
       ...this.getEnabledTableProps(),
     };
   }