From 0a908879aaf8aceedf4cf8c74c2f718604f410bf Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Tue, 5 Nov 2024 23:26:58 +0900
Subject: [PATCH] refactor: parsing image data in session launcher for before
 24.12

---
 react/src/components/BAITable.tsx            | 2 ++
 react/src/components/CustomizedImageList.tsx | 7 +++++--
 react/src/components/ImageList.tsx           | 7 +++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/react/src/components/BAITable.tsx b/react/src/components/BAITable.tsx
index 17b7c5fdf..2ce02e1b4 100644
--- a/react/src/components/BAITable.tsx
+++ b/react/src/components/BAITable.tsx
@@ -145,6 +145,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
index fe6e3360a..dc7de913f 100644
--- 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
index 60bdcfb49..241d06649 100644
--- 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'),
@@ -518,7 +520,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={{