feat: update id/name column display

1. only show the first 8 characters of the id in table
2. can copy the id
3. bold the name to make it stand out
4. update cypress command clickLinkInColumn, click link with the left
position, to avoid clicking the copy button on the right

Change-Id: I91046cac9631bd8d2da5dfd236a8e1f14196e6f9

src/styles/base.less

@@ -206,4 +206,12 @@
     cursor: pointer;
     user-select: none;
   }
+
+  .no-wrap {
+    white-space: nowrap;
+  }
+
+  .no-margin-bottom {
+    margin-bottom: 0 !important;
+  }
 }

src/utils/table.jsx

@@ -14,6 +14,7 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Typography } from 'antd';
 import {
   isArray,
   get,
@@ -26,6 +27,9 @@ import {
 import Status from 'components/Status';
 import { renderFilterMap } from 'utils/index';
 import { getLinkRender } from 'utils/route-map';
+import classnames from 'classnames';
+
+const { Paragraph } = Typography;
 
 export function getStringValue(value) {
   if (
@@ -147,6 +151,33 @@ const getLinkUrl = (prefix, id) => {
   return `${prefix}/${id}`;
 };
 
+export const getIdRender = (value, copyable = true, isLink = true) => {
+  const short = (value || '').substring(0, 8);
+  const shortRender = isLink ? (
+    <span className="link-class">{short}</span>
+  ) : (
+    short
+  );
+  if (!copyable) {
+    return shortRender;
+  }
+  return (
+    <Paragraph
+      copyable={{ text: value }}
+      className={classnames('no-wrap', 'no-margin-bottom')}
+    >
+      {shortRender}
+    </Paragraph>
+  );
+};
+
+export const getNameRenderWithStyle = (name) => {
+  const style = {
+    fontWeight: 'bold',
+  };
+  return <div style={style}>{name || '-'}</div>;
+};
+
 export const getNameRender = (render, column, rowKey) => {
   if (render) {
     return render;
@@ -158,6 +189,7 @@ export const getNameRender = (render, column, rowKey) => {
     linkPrefixFunc,
     linkFunc,
     hasNoDetail = false,
+    copyable = true,
   } = column;
   return (value, record) => {
     const idValue = get(record, idKey || rowKey);
@@ -171,23 +203,25 @@ export const getNameRender = (render, column, rowKey) => {
       url = getLinkUrl(linkValue, idValue);
     }
     const nameValue = value || get(record, dataIndex) || '-';
+    const nameRender = getNameRenderWithStyle(nameValue);
+    const idRender = getIdRender(idValue, copyable, !!url);
     if (hasNoDetail) {
       return (
         <div>
-          <div>{idValue}</div>
-          <div>{nameValue}</div>
+          <div>{idRender}</div>
+          {nameRender}
         </div>
       );
     }
     if (!url && !hasNoDetail) {
-      return nameValue;
+      return nameRender;
     }
     return (
       <div>
         <div>
-          <Link to={url}>{idValue}</Link>
+          <Link to={url}>{idRender}</Link>
         </div>
-        <div>{nameValue}</div>
+        {nameRender}
       </div>
     );
   };
@@ -205,13 +239,19 @@ export const getNameRenderByRouter = (render, column, rowKey) => {
     routeQuery = {},
     routeParamsFunc,
     withoutName = false,
+    copyable = true,
   } = column;
   return (value, record) => {
     const nameValue = value || get(record, dataIndex) || '-';
+    const nameRender = getNameRenderWithStyle(nameValue);
     if (!routeName) {
       return nameValue;
     }
     const idValue = get(record, idKey || rowKey);
+    if (!idValue) {
+      return '-';
+    }
+    const idRender = getIdRender(idValue, copyable, true);
     const params = routeParamsFunc
       ? routeParamsFunc(record)
       : { [routeParamsKey]: idValue };
@@ -220,12 +260,12 @@ export const getNameRenderByRouter = (render, column, rowKey) => {
       key: routeName,
       params,
       query,
-      value: idValue,
+      value: idRender,
     });
     return (
       <div>
         <div>{link}</div>
-        {!withoutName && <div>{nameValue}</div>}
+        {!withoutName && nameRender}
       </div>
     );
   };

test/e2e/support/table-commands.js

@@ -276,7 +276,7 @@ Cypress.Commands.add('clickLinkInColumn', (columnIndex, waitTime = 5000) => {
     .find('td')
     .eq(columnIndex)
     .find('a')
-    .click(waitTime);
+    .click('left', waitTime);
 });
 
 Cypress.Commands.add('goToDetail', (index = 1, waitTime) => {