feat: Refactor project list page

1. Refactor project list page
2. Remove useless func

Change-Id: I65ae489bf29e61e9745a987c0a42d9aeafc97014

src/components/Tables/Base/index.jsx

@@ -705,29 +705,6 @@ export default class BaseTable extends React.Component {
         </div>
       );
     }
-
-    // if (searchType === 'keyword') {
-    //   const placeholder =
-    //     this.props.placeholder || t('Please input a keyword to find');
-
-    //   return (
-    //     <div className={styles['search-row']}>
-    //       <MagicInput
-    //         filterParams={searchFilters}
-    //         onInputChange={this.handleFilterInput}
-    //         initValue={filters}
-    //       />
-    //       {/* <Input.Search
-    //         className={styles['search-input']}
-    //         value={keyword}
-    //         onSearch={this.handleSearch}
-    //         placeholder={placeholder}
-    //         allowClear
-    //       /> */}
-    //     </div>
-    //   );
-    // }
-    // return null;
     return (
       <div className={styles['search-row']}>
         <Input

src/pages/identity/containers/Domain/index.jsx

@@ -39,14 +39,6 @@ export default class Domains extends Base {
     return false;
   }
 
-  getTableProps() {
-    const baseProps = Base.prototype.getTableProps.call(this);
-    return {
-      ...baseProps,
-      searchType: 'keyword',
-    };
-  }
-
   getColumns = () => [
     {
       title: t('Domain ID/Name'),

src/pages/identity/containers/Project/index.jsx

@@ -16,14 +16,18 @@ import React from 'react';
 import { observer, inject } from 'mobx-react';
 import { Divider, Badge, Tag, Tooltip } from 'antd';
 import Base from 'containers/List';
-import globalProjectStore from 'stores/keystone/project';
+import globalProjectStore, { ProjectStore } from 'stores/keystone/project';
-import { yesNoOptions, projectTagsColors } from 'utils/constants';
+import {
+  yesNoOptions,
+  projectTagsColors,
+  emptyActionConfig,
+} from 'utils/constants';
 import actionConfigs from './actions';
 import styles from './index.less';
 
 export class Projects extends Base {
   init() {
-    this.store = globalProjectStore;
+    this.store = this.inDetailPage ? new ProjectStore() : globalProjectStore;
   }
 
   get tabs() {
@@ -42,19 +46,23 @@ export class Projects extends Base {
     return false;
   }
 
-  getTableProps() {
+  get inProject() {
-    const baseProps = Base.prototype.getTableProps.call(this);
+    const { pathname } = this.props.location;
-    return {
+    return pathname.includes('project-admin');
-      ...baseProps,
-      searchType: 'keyword',
-    };
   }
 
-  getColumns = () => {
+  get inUserDetail() {
-    const {
+    const { pathname } = this.props.location;
-      match: { path },
+    return this.inDetailPage && pathname.includes('user-admin/detail');
-    } = this.props;
+  }
-    const components = [
+
+  get inUserGroupDetail() {
+    const { pathname } = this.props.location;
+    return this.inDetailPage && pathname.includes('user-group-admin/detail');
+  }
+
+  getColumns() {
+    const columns = [
       {
         title: t('Project ID/Name'),
         dataIndex: 'name',
@@ -64,17 +72,13 @@ export class Projects extends Base {
         title: t('Role'),
         dataIndex: 'projectRole',
         render: (roles, value) => {
-          const rolesAll = [...(roles || [])];
+          const { groupProjectRole = [] } = value;
-          if (value.groupProjectRole) {
+          const rolesAll = [...(roles || []), ...(groupProjectRole || [])];
-            rolesAll.push(...value.groupProjectRole);
-          }
           return (rolesAll || []).map((it) => <div>{it}</div>);
         },
         stringify: (roles, value) => {
-          const rolesAll = [...(roles || [])];
+          const { groupProjectRole = [] } = value;
-          if (value.groupProjectRole) {
+          const rolesAll = [...(roles || []), ...(groupProjectRole || [])];
-            rolesAll.push(...value.groupProjectRole);
-          }
           return (rolesAll || []).join(';');
         },
       },
@@ -154,26 +158,16 @@ export class Projects extends Base {
       },
     ];
 
-    if (path.indexOf('project-admin') >= 0) {
+    if (this.inProject) {
-      components.splice(1, 1);
+      return columns.filter((it) => it.dataIndex !== 'projectRole');
     }
 
-    return components;
+    return columns;
-  };
+  }
 
   get actionConfigs() {
-    const {
+    if (this.inUserDetail || this.inUserGroupDetail) {
-      match: { path },
+      return emptyActionConfig;
-    } = this.props;
-    if (
-      path.indexOf('user-admin/detail') >= 0 ||
-      path.indexOf('user-group-admin/detail') >= 0
-    ) {
-      return {
-        batchActions: [],
-        primaryActions: [],
-        rowActions: [],
-      };
     }
     return actionConfigs;
   }
@@ -202,15 +196,13 @@ export class Projects extends Base {
 
   async getData({ silent, ...params } = {}) {
     const { match } = this.props;
-    const { path } = match;
+    const { id } = match.params || {};
     const newParams = { ...params };
     silent && (this.list.silent = true);
-    if (path.indexOf('user-admin/detail') >= 0) {
+    if (this.inUserDetail) {
-      const { id } = match.params;
       newParams.userId = id;
       await this.store.fetchListInUserDetail(newParams);
-    } else if (path.indexOf('user-group-admin/detail') >= 0) {
+    } else if (this.inUserGroupDetail) {
-      const { id } = match.params;
       newParams.groupId = id;
       await this.store.fetchListInGroupDetail(newParams);
     } else {

src/pages/identity/containers/Role/index.jsx

@@ -41,14 +41,6 @@ export default class Role extends Base {
     return false;
   }
 
-  getTableProps() {
-    const baseProps = Base.prototype.getTableProps.call(this);
-    return {
-      ...baseProps,
-      searchType: 'keyword',
-    };
-  }
-
   getColumns = () => [
     {
       title: t('Role Name'),