feat: make image lists resizable

lablup · Nov 7, 2024 · 8fb21cb · 8fb21cb
1 parent 75c148c
commit 8fb21cb
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/react/src/components/BAITable.tsx b/react/src/components/BAITable.tsx
@@ -128,6 +128,8 @@ const BAITable: React.FC<BAITableProps> = ({
 
   return (
     <Table
+      sortDirections={['descend', 'ascend', 'descend']}
+      showSorterTooltip={false}
       className={resizable ? styles.resizableTable : ''}
       components={
         resizable

diff --git a/react/src/components/CustomizedImageList.tsx b/react/src/components/CustomizedImageList.tsx
@@ -12,6 +12,7 @@ import {
   useUpdatableState,
 } from '../hooks';
 import AliasedImageDoubleTags from './AliasedImageDoubleTags';
+import BAITable from './BAITable';
 import { ImageTags } from './ImageTags';
 import TextHighlighter from './TextHighlighter';
 import { CustomizedImageListForgetAndUntagMutation } from './__generated__/CustomizedImageListForgetAndUntagMutation.graphql';
@@ -26,7 +27,7 @@ import {
   SettingOutlined,
 } from '@ant-design/icons';
 import { useLocalStorageState } from 'ahooks';
-import { App, Button, Input, Popconfirm, Table, theme, Typography } from 'antd';
+import { App, Button, Input, Popconfirm, theme, Typography } from 'antd';
 import { AnyObject } from 'antd/es/_util/type';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import graphql from 'babel-plugin-relay/macro';
@@ -209,6 +210,7 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
         </Typography.Text>
       ),
       sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
+      width: token.screenXS,
     },
     {
       title: t('environment.Registry'),
@@ -433,7 +435,8 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
             {t('button.Refresh')}
           </Button>
         </Flex>
-        <Table
+        <BAITable
+          resizable
           loading={isPendingSearchTransition}
           columns={
             columns.filter((column) =>

diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
@@ -11,6 +11,7 @@ import {
   useSuspendedBackendaiClient,
   useUpdatableState,
 } from '../hooks';
+import BAITable from './BAITable';
 import DoubleTag from './DoubleTag';
 import ImageInstallModal from './ImageInstallModal';
 import { ImageTags } from './ImageTags';
@@ -31,7 +32,7 @@ import {
   VerticalAlignBottomOutlined,
 } from '@ant-design/icons';
 import { useLocalStorageState } from 'ahooks';
-import { App, Button, Input, Table, Tag, theme, Typography } from 'antd';
+import { App, Button, Input, Tag, theme, Typography } from 'antd';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
@@ -152,6 +153,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
         </Typography.Text>
       ),
       sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
+      width: token.screenXS,
     },
     {
       title: t('environment.Registry'),
@@ -516,7 +518,8 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             {t('environment.Install')}
           </Button>
         </Flex>
-        <Table<EnvironmentImage>
+        <BAITable
+          resizable
           rowKey="id"
           scroll={{ x: 'max-content' }}
           pagination={{