feat: update project id/name column display

Update project column in the list page and selectTable component:

1. update project id to the first 8 characters
2. support copy the project id

Change-Id: Ic7563db2b3d3e99a5bc2b100e7c7d6fc5d54ca68

src/components/Tables/Base/index.jsx

@@ -43,12 +43,12 @@ import {
   columnRender,
   getValueMapRender,
   getUnitRender,
+  getProjectRender,
+  getProjectId,
 } from 'utils/table';
 import { getNoValue } from 'utils/index';
 import { getLocalStorageItem, setLocalStorageItem } from 'utils/local-storage';
-import { getLinkRender } from 'utils/route-map';
 import { inject } from 'mobx-react';
-import globalRootStore from 'stores/root';
 import CustomColumns from './CustomColumns';
 import ItemActionButtons from './ItemActionButtons';
 import PrimaryActionButtons from './PrimaryActionButtons';
@@ -322,32 +322,6 @@ export class BaseTable extends React.Component {
     return actionList && actionList.length > 0;
   };
 
-  getProjectId = (record) =>
-    record.project_id || record.owner || record.fingerprint || record.tenant;
-
-  getProjectRender = (render) => {
-    if (render) {
-      return render;
-    }
-    return (value, record) => {
-      const projectId = this.getProjectId(record);
-      if (!projectId) {
-        return '-';
-      }
-      const link = getLinkRender({
-        key: 'projectDetailAdmin',
-        params: { id: projectId },
-        value: projectId,
-      });
-      return (
-        <>
-          <div>{globalRootStore.hasAdminRole ? link : projectId}</div>
-          <div>{value || '-'}</div>
-        </>
-      );
-    };
-  };
-
   getNoValueRender = (render) => {
     if (render) {
       return render;
@@ -439,7 +413,7 @@ export class BaseTable extends React.Component {
         newRender = this.getNoValueRender(newRender);
       }
       if (dataIndex === 'project_name') {
-        newRender = this.getProjectRender(newRender);
+        newRender = getProjectRender(newRender);
       }
       if ((dataIndex === 'name' && routeName) || isLink) {
         const { rowKey } = this.props;
@@ -565,7 +539,7 @@ export class BaseTable extends React.Component {
             it.dataIndex === 'project_name'
           ) {
             fIndex = 'project_id';
-            render = (_, record) => this.getProjectId(record);
+            render = (_, record) => getProjectId(record);
           }
           return [
             {

src/components/Tables/SimpleTable/index.jsx

@@ -28,8 +28,8 @@ import {
   getNameRenderByRouter,
   getValueMapRender,
   getUnitRender,
+  getProjectRender,
 } from 'utils/table';
-import { Link } from 'react-router-dom';
 import { getNoValue } from 'utils/index';
 import styles from './index.less';
 
@@ -111,7 +111,7 @@ export default class SimpleTable extends React.Component {
         newRender = this.getNoValueRender(newRender);
       }
       if (dataIndex === 'project_name') {
-        newRender = this.getProjectRender(newRender);
+        newRender = getProjectRender(newRender);
       }
       if ((dataIndex === 'name' && routeName) || isLink) {
         const { rowKey } = this.props;
@@ -141,30 +141,6 @@ export default class SimpleTable extends React.Component {
       return newColumn;
     });
 
-  getProjectId = (record) =>
-    record.project_id || record.owner || record.fingerprint || record.tenant;
-
-  getProjectRender = (render) => {
-    if (render) {
-      return render;
-    }
-    return (value, record) => {
-      const projectId = this.getProjectId(record);
-      if (!projectId) {
-        return '-';
-      }
-      const url = `/identity/project-admin/detail/${projectId}`;
-      return (
-        <>
-          <div>
-            <Link to={url}>{projectId}</Link>
-          </div>
-          <div>{value || '-'}</div>
-        </>
-      );
-    };
-  };
-
   getNoValueRender = (render) => {
     if (render) {
       return render;

src/utils/table.jsx

@@ -28,6 +28,7 @@ import Status from 'components/Status';
 import { renderFilterMap } from 'utils/index';
 import { getLinkRender } from 'utils/route-map';
 import classnames from 'classnames';
+import globalRootStore from 'stores/root';
 
 const { Paragraph } = Typography;
 
@@ -312,3 +313,30 @@ export const getUnitRender = (column) => {
   }
   return null;
 };
+
+export const getProjectRender = (render) => {
+  if (render) {
+    return render;
+  }
+  return (value, record) => {
+    const projectId = getProjectId(record);
+    if (!projectId) {
+      return '-';
+    }
+    const { hasAdminRole } = globalRootStore;
+    const hasLink = !!hasAdminRole;
+    let idRender = null;
+    if (hasLink) {
+      const url = `/identity/project-admin/detail/${projectId}`;
+      idRender = <Link to={url}>{getIdRender(projectId, true, true)}</Link>;
+    } else {
+      idRender = getIdRender(projectId, true, false);
+    }
+    return (
+      <>
+        <div>{idRender}</div>
+        <div>{value || '-'}</div>
+      </>
+    );
+  };
+};