Refactor/add wrapped-table and fix table bug (#736)

* refactor: add wrapped-table

* refactor: add wrapped-table

* refactor: add wrapped-table and fix table bug

* refactor: wrapped-table type check problem

* refactor: wrapped-table type check problem

* refactor: Wrapping the Table causes the unit test to change

* refactor: add table header title

* refactor: table columns width adjustment

core/src/common/interface.d.ts

@@ -19,7 +19,8 @@ export { AntTreeNodeSelectedEvent } from 'antd/lib/tree/Tree';
 export { RangePickerProps, RangePickerValue } from 'antd/es/date-picker/interface';
 export { UploadProps } from 'antd/es/upload';
 export { InputProps } from 'antd/es/input';
-export { PaginationConfig, SorterResult, ColumnProps } from 'antd/lib/table';
+export { PaginationConfig, SorterResult } from 'antd/lib/table';
+export { ColumnProps } from '../nusi/wrapped-table';
 export { ModalProps } from 'antd/es/modal';
 export { FormComponentProps } from 'antd/es/form';
 

core/src/nusi/index.tsx

@@ -43,7 +43,6 @@ import {
   Spin,
   Steps,
   Switch,
-  Table,
   Tabs,
   Transfer,
   Tree,
@@ -55,6 +54,7 @@ import {
 } from 'antd';
 import { FixedSelect } from './fixed-select';
 import FixRangePicker from './range-picker';
+import Table from './wrapped-table';
 import '@terminus/nusi/dist/nusi.scss';
 import 'antd/dist/antd.less';
 import {

core/src/nusi/wrapped-table.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) 2021 Terminus, Inc.
+//
+// This program is free software: you can use, redistribute, and/or modify
+// it under the terms of the GNU Affero General Public License, version 3
+// or later ("AGPL"), as published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+// FITNESS FOR A PARTICULAR PURPOSE.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from 'react';
+import { Table } from 'antd';
+import { ColumnProps as AntdColumnProps, TableProps } from 'antd/lib/table';
+
+export interface ColumnProps<recordType> extends AntdColumnProps<recordType> {
+  /**
+   * id\number - 72
+   * user\status\type\cpu\memory - 120
+   * email\phone\roles\ip - 160
+   * time - 200
+   * operations - 80 * n, according to the number of buttons and the number of words
+   * detail\content\description - No need to increase the width of the adaptive, and add the scroll.x of a certain number to the table
+   * All width should be at least larger than the Title in English
+   */
+  width?: 64 | 72 | 80 | 96 | 120 | 160 | 176 | 200 | 240 | 280 | 320;
+}
+
+interface IProps<T extends object = any> extends TableProps<T> {
+  columns: Array<ColumnProps<T>>;
+}
+
+function WrappedTable<T extends object = any>({ columns, ...props }: IProps<T>) {
+  const newColumns = columns?.map(({ ...args }: ColumnProps<T>) => ({
+    ellipsis: true,
+    ...args,
+  }));
+  return <Table scroll={{ x: '100%' }} columns={newColumns} {...props} />;
+}
+
+export default WrappedTable;

shell/app/common/__tests__/components/paging-table.test.tsx

@@ -52,11 +52,11 @@ describe('PagingTable', () => {
       dataSource,
     });
     expect(wrapper.find('.table-title').text()).toBe('project list');
-    expect(wrapper.find('Table').prop('columns')).toHaveLength(columns.length);
+    expect(wrapper.find('WrappedTable').prop('columns')).toHaveLength(columns.length);
     wrapper.setProps({
       basicOperation: true,
     });
-    expect(wrapper.find('Table').prop('columns')).toHaveLength(columns.length + 1);
+    expect(wrapper.find('WrappedTable').prop('columns')).toHaveLength(columns.length + 1);
     const wrapperInstance = wrapper.instance();
     wrapperInstance.onChangePage(2);
     expect(wrapperInstance.page).toStrictEqual({ pageNo: 2, pageSize: 15 });

shell/app/common/components/authorize-member-modal.tsx

@@ -121,14 +121,7 @@ export const AuthorizeMemberModal = ({ type, member, closeModal }: IProps) => {
       ]}
       width={600}
     >
-      <Table
-        scroll={{ x: '100%' }}
-        loading={loading}
-        rowKey={'userId'}
-        pagination={pagination}
-        columns={columns}
-        dataSource={list}
-      />
+      <Table loading={loading} rowKey={'userId'} pagination={pagination} columns={columns} dataSource={list} />
     </Modal>
   );
 };

shell/app/common/components/key-value-table.tsx

@@ -128,7 +128,6 @@ interface IProps {
     pageSize: number;
     current?: number;
   };
-  size?: 'small' | 'middle' | 'default';
   className?: string;
   addBtnText?: string;
   disableAdd?: boolean;
@@ -246,7 +245,6 @@ export class KeyValueTable extends React.Component<IProps, IState> {
       form,
       title = '',
       pagination = { pageSize: 5, hideOnSinglePage: true },
-      size = 'small',
       className = '',
       addBtnText = i18n.t('common:add'),
       disableAdd = false,
@@ -270,7 +268,7 @@ export class KeyValueTable extends React.Component<IProps, IState> {
       {
         title: 'KEY',
         dataIndex: 'key',
-        width: '40%',
+        width: 280,
         render: (text: string, record: IItemData) => (
           <InputItem
             form={form}
@@ -290,7 +288,6 @@ export class KeyValueTable extends React.Component<IProps, IState> {
       {
         title: 'VALUE',
         dataIndex: 'value',
-        width: '40%',
         render: (text: string, record: IItemData) => (
           <InputItem
             form={form}
@@ -311,7 +308,7 @@ export class KeyValueTable extends React.Component<IProps, IState> {
     if (!disableDelete) {
       columns.push({
         title: i18n.t('common:operation'),
-        width: 100,
+        width: 160,
         dataIndex: 'operation',
         className: 'operation',
         render: (_text, record) => {
@@ -344,12 +341,11 @@ export class KeyValueTable extends React.Component<IProps, IState> {
           columns={columns}
           rowKey="uniKey"
           pagination={showPagination ? pagination : false}
-          size={size}
           className={`key-value-table ${className}`}
-          scroll={{ x: '100%' }}
           ref={(ref) => {
             this.table = ref;
           }}
+          scroll={{ x: 800 }}
         />
       </div>
     );