From 3026f4fca4a9feca6e4a90aa72f5d26063702f43 Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Mon, 10 Oct 2022 13:55:30 +0800
Subject: [PATCH] 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               |  8 +++++
 src/utils/table.jsx                | 54 ++++++++++++++++++++++++++----
 test/e2e/support/table-commands.js |  2 +-
 3 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/styles/base.less b/src/styles/base.less
index 6f62f0c8..e217d619 100644
--- a/src/styles/base.less
+++ b/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;
+  }
 }
diff --git a/src/utils/table.jsx b/src/utils/table.jsx
index ee528170..84369d2c 100644
--- a/src/utils/table.jsx
+++ b/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>
     );
   };
diff --git a/test/e2e/support/table-commands.js b/test/e2e/support/table-commands.js
index 5a2c93c9..8fae5264 100644
--- a/test/e2e/support/table-commands.js
+++ b/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) => {