fix: Update List component to support init filter

Update List component to support init filter

Change-Id: I0a20e9d57b958be73b144e7eb026459f05699d9f

src/components/MagicInput/index.jsx

@@ -39,28 +39,36 @@ const filterParam = PropTypes.shape({
   isTime: PropTypes.bool,
 });
 
-// eslint-disable-next-line no-unused-vars
+export const getTags = (initValue, filterParams) => {
-const getTags = (props) => {
+  if (!initValue || isEmpty(initValue)) {
-  // eslint-disable-next-line no-shadow
+    return {};
-  const { initValue, filterParams } = props;
-  if (!initValue) {
-    return [];
   }
   if (isEmpty(filterParams)) {
-    return [];
+    return {};
   }
   const tags = [];
+  const checkValues = [];
   Object.keys(initValue).forEach((key) => {
     const item = filterParams.find((it) => it.name === key);
     if (item) {
+      const { options = [] } = item;
       const value = initValue[key];
+      if (options.length) {
+        const optionItem = options.find((op) => op.key === value);
+        if (optionItem && optionItem.isQuick) {
+          checkValues.push(`${item.name}--${value}`);
+        }
+      }
       tags.push({
         value,
         filter: item,
       });
     }
   });
-  return tags;
+  return {
+    tags,
+    checkValues,
+  };
 };
 
 class MagicInput extends PureComponent {
@@ -221,37 +229,20 @@ class MagicInput extends PureComponent {
   };
 
   initTags(props) {
-    // eslint-disable-next-line no-shadow
     const { initValue, filterParams } = props;
-    if (!initValue) {
+    const { tags = [], checkValues } = getTags(initValue, filterParams);
+    if (!tags.length) {
       return;
     }
-    if (isEmpty(filterParams)) {
+    this.setState(
-      return;
+      {
-    }
+        tags,
-    const tags = [];
+        checkValues,
-    const checkValues = [];
+      },
-    Object.keys(initValue).forEach((key) => {
+      () => {
-      const item = filterParams.find((it) => it.name === key);
+        this.onTagsChange();
-      if (item) {
-        const { options = [] } = item;
-        const value = initValue[key];
-        if (options.length) {
-          const optionItem = options.find((op) => op.key === value);
-          if (optionItem && optionItem.isQuick) {
-            checkValues.push(`${item.name}--${value}`);
-          }
-        }
-        tags.push({
-          value,
-          filter: item,
-        });
       }
-    });
+    );
-    this.setState({
-      tags,
-      checkValues,
-    });
   }
 
   renderKey() {

src/components/Tables/Base/index.jsx

@@ -649,7 +649,7 @@ export default class BaseTable extends React.Component {
   }
 
   renderSearch() {
-    const { hideSearch, searchFilters } = this.props;
+    const { hideSearch, searchFilters, initFilter = {} } = this.props;
 
     if (hideSearch) {
       return null;
@@ -660,6 +660,7 @@ export default class BaseTable extends React.Component {
         <div className={styles['search-row']}>
           <MagicInput
             filterParams={searchFilters}
+            initValue={initFilter}
             onInputChange={this.handleFilterInput}
             onInputFocus={this.handleInputFocus}
             placeholder={t('Multiple filter tags are separated by enter')}

src/containers/List/index.jsx

@@ -33,6 +33,7 @@ import Notify from 'components/Notify';
 import { checkTimeIn } from 'utils/time';
 import checkItemPolicy from 'resources/policy';
 import NotFound from 'components/Cards/NotFound';
+import { getTags } from 'components/MagicInput';
 import styles from './index.less';
 
 const tabOtherHeight = 326;
@@ -80,11 +81,13 @@ export default class BaseList extends React.Component {
         location.pathname === this.props.match.url &&
         location.key === this.props.location.key
       ) {
-        const params = parse(location.search.slice(1));
+        const params = this.initFilter;
-        // this.getDataWithPolicy(params);
+        const { tags = [] } = getTags(params, this.searchFilters);
-        const { limit, page } = this.store.list;
+        if (!tags.length && !this.filterTimeKey) {
-        this.list.filters = {};
+          const { limit, page } = this.store.list;
-        this.handleFetch({ ...params, limit, page }, true);
+          this.list.filters = {};
+          this.handleFetch({ ...params, limit, page }, true);
+        }
       }
     });
     window.addEventListener('resize', this.debounceSetTableHeight);
@@ -222,6 +225,11 @@ export default class BaseList extends React.Component {
     return this.checkEndpoint && !this.endpoint;
   }
 
+  get initFilter() {
+    const params = parse(this.location.search.slice(1));
+    return params || {};
+  }
+
   get hintHeight() {
     let height = 0;
     if (this.infoMessage) {
@@ -1031,6 +1039,7 @@ export default class BaseList extends React.Component {
           hideDownload={this.hideDownload}
           primaryActionsExtra={this.primaryActionsExtra}
           isAdminPage={this.isAdminPage}
+          initFilter={this.initFilter}
           {...this.getEnabledTableProps()}
         />
       );