fix(common): table unsorting will be in descending order

[hujiahao-hjh]

What this PR does / why we need it:

Fix bug of table unsorting will be in descending order.

Does this PR introduce a user interface change?

❎ No

ChangeLog

Language	Changelog
🇺🇸 English
🇨🇳 中文

Does this PR need be patched to older version?

✅ Yes(version is required)
release/1.5-alpha1

Which issue(s) this PR fixes:

Fixes # https://erda-org.erda.cloud/erda/dop/projects/387/issues/all?id=252476&issueFilter__urlQuery=eyJzdGF0ZXMiOls0NDAyLDcxMDQsNzEwNSw0NDAzLDQ0MDQsNzEwNiw0NDA2LDQ0MDcsNDQxMiw0NTM4LDQ0MTMsNDQxNCw0NDE1LDQ0MTZdLCJhc3NpZ25lZUlEcyI6WyIxMDAxMjE0Il19&issueTable__urlQuery=eyJwYWdlTm8iOjEsICJwYWdlU2l6ZSI6MTB9&issueViewGroup__urlQuery=eyJ2YWx1ZSI6ImthbmJhbiIsImNoaWxkcmVuVmFsdWUiOnsia2FuYmFuIjoiZGVhZGxpbmUifX0%3D&iterationID=680&type=BUG

[McDaddy]

let data: T[] = dataSource ? [...dataSource]) : []

[McDaddy]

u set default value above.

[McDaddy]

I dont understand why remove this default value. Then leads code below has to be like dataSource?.length || 0

[daskyrk]

/approve

[daskyrk]

/cherry-pick release/1.5-alpha1

[erda-bot]

Automated cherry pick failed, please resolve the confilcts and create PR manually.
Details:

Auto-merging shell/app/common/components/table/index.tsx
CONFLICT (content): Merge conflict in shell/app/common/components/table/index.tsx
diff --cc shell/app/common/components/table/index.tsx
index f55eda5d,5220e1b1..00000000
--- a/shell/app/common/components/table/index.tsx
+++ b/shell/app/common/components/table/index.tsx
@@@ -122,19 -63,22 +122,19 @@@ function WrappedTable<T extends object 
    dataSource = [],
    onRow,
    rowSelection,
 -  hideHeader,
    ...props
  }: IProps<T>) {
 -  const [columns, setColumns] = React.useState<Array<ColumnProps<T>>>(allColumns);
 +  const [columns, setColumns] = React.useState<Array<IColumnProps<T>>>(allColumns);
    const [sort, setSort] = React.useState<SorterResult<T>>({});
 -  const sortCompareRef = React.useRef<((a: T, b: T) => number) | null>(null);
 +  const sortCompareRef = React.useRef() as { current: (a, b) => number };
    const [defaultPagination, setDefaultPagination] = React.useState<TablePaginationConfig>({
      current: 1,
-     total: dataSource.length,
+     total: dataSource?.length || 0,
      ...PAGINATION,
    });
 -  const isFrontendPaging = !(paginationProps && paginationProps.current) && paginationProps !== false; // Determine whether front-end paging
 +  const [goToVisible, setGoToVisible] = React.useState(false);
  
 -  const pagination: TablePaginationConfig = isFrontendPaging
 -    ? defaultPagination
 -    : (paginationProps as TablePaginationConfig);
 +  const pagination: TablePaginationConfig = paginationProps || defaultPagination;
    const { current = 1, pageSize = PAGINATION.pageSize } = pagination;
  
    React.useEffect(() => {
@@@ -174,14 -135,17 +174,19 @@@
  
        const onSort = (order?: 'ascend' | 'descend') => {
          setSort({ ...sorter, order });
++<<<<<<< HEAD
 +        if (column.sorter?.compare) {
++=======
+         const { sorter: columnSorter } = column as { sorter: { compare: (a: T, b: T) => number } };
+         if (order && columnSorter?.compare) {
++>>>>>>> 6e2a3802 (fix(common): table unsorting will be in descending order (#2107))
            sortCompareRef.current = (a: T, b: T) => {
              if (order === 'ascend') {
 -              return columnSorter?.compare?.(a, b);
 +              return column.sorter?.compare?.(a, b);
              } else {
 -              return columnSorter?.compare?.(b, a);
 +              return column.sorter?.compare?.(b, a);
              }
            };
 -        } else {
 -          sortCompareRef.current = null;
          }
          onTableChange({ pageNo: 1, sorter: { ...sorter, order } });
        };
@@@ -278,88 -250,7 +283,92 @@@
      );
    }, [allColumns, sorterMenu, sort, onRow]);
  
++<<<<<<< HEAD
 +  const paginationCenterRender = (
 +    <Popover
 +      content={
 +        <PaginationJump
 +          pagination={pagination}
 +          onTableChange={onTableChange}
 +          hiddenPopover={() => setGoToVisible(false)}
 +        />
 +      }
 +      trigger="click"
 +      getPopupContainer={(triggerNode) => triggerNode.parentElement as HTMLElement}
 +      placement="top"
 +      overlayClassName="pagination-jump"
 +      visible={goToVisible}
 +      onVisibleChange={setGoToVisible}
 +    >
 +      <div className="pagination-center bg-hover mx-1 px-3 rounded" onClick={() => setGoToVisible(true)}>
 +        {pagination.total ? pagination.current : 0} /{' '}
 +        {(pagination.total && pagination.pageSize && Math.ceil(pagination.total / pagination.pageSize)) || 0}
 +      </div>
 +    </Popover>
 +  );
 +
 +  const paginationItemRender = (
 +    page: number,
 +    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
 +    originalElement: React.ReactElement<HTMLElement>,
 +  ) => {
 +    const { total } = pagination;
 +    switch (type) {
 +      case 'prev':
 +        return (
 +          <div className="bg-hover" onClick={() => current > 1 && onTableChange({ pageNo: current - 1 })}>
 +            {originalElement}
 +          </div>
 +        );
 +      case 'next':
 +        return (
 +          <div
 +            className="bg-hover"
 +            onClick={() => total && current < Math.ceil(total / pageSize) && onTableChange({ pageNo: current + 1 })}
 +          >
 +            {originalElement}
 +          </div>
 +        );
 +      case 'page':
 +        if (page === 1) {
 +          return paginationCenterRender;
 +        }
 +        return null;
 +      default:
 +        return null;
 +    }
 +  };
 +
 +  const pageSizeMenu = (
 +    <Menu>
 +      {(pagination?.pageSizeOptions || Pagination?.defaultProps?.pageSizeOptions || []).map((item: number) => {
 +        return (
 +          <Menu.Item key={item} onClick={() => onTableChange({ pageNo: 1, pageSize: item })}>
 +            <span className="fake-link mr-1">{i18n.t('{size} items / page', { size: item })}</span>
 +          </Menu.Item>
 +        );
 +      })}
 +    </Menu>
 +  );
 +
 +  const batchMenu = () => {
 +    return (
 +      <Menu>
 +        {(rowSelection?.actions || []).map((item: IRowActions) => {
 +          return (
 +            <Menu.Item key={item.key} onClick={() => item.onClick()} disabled={item.disabled}>
 +              {item.name}
 +            </Menu.Item>
 +          );
 +        })}
 +      </Menu>
 +    );
 +  };
 +
 +  let data = dataSource;
++=======
+   let data: T[] = dataSource ? [...dataSource] : [];
++>>>>>>> 6e2a3802 (fix(common): table unsorting will be in descending order (#2107))
  
    if (sortCompareRef.current) {
      data = data.sort(sortCompareRef.current);

[daskyrk]

1.5-alpha2 will be released today, not need to pick.