refactor: refactoring selected rows

lablup · Aug 12, 2024 · 9137e18 · 9137e18
1 parent a911fb8
commit 9137e18
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 65 deletions.
diff --git a/react/src/components/ImageInstallModal.tsx b/react/src/components/ImageInstallModal.tsx
@@ -4,61 +4,37 @@ import { usePainKiller } from '../hooks/usePainKiller';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import Flex from './Flex';
 import { EnvironmentImage } from './ImageList';
-import { App, List } from 'antd';
-import _ from 'lodash';
-import { Dispatch, Key, SetStateAction } from 'react';
+import { List } from 'antd';
+import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface ImageInstallModalInterface extends BAIModalProps {
-  open: boolean;
   onRequestClose: () => void;
-  selectedRowKeys: Key[];
-  images: EnvironmentImage[];
+  selectedRows: EnvironmentImage[];
   setInstallingImages: Dispatch<SetStateAction<string[]>>;
-  setSelectedRowKeys: Dispatch<SetStateAction<Key[]>>;
 }
 export default function ImageInstallModal({
-  open,
   onRequestClose,
-  selectedRowKeys,
-  images,
+  selectedRows,
   setInstallingImages,
-  setSelectedRowKeys,
+  ...modalProps
 }: ImageInstallModalInterface) {
   const { t } = useTranslation();
   const baiClient = useSuspendedBackendaiClient();
-  const { message } = App.useApp();
   const { upsertNotification } = useSetBAINotification();
   const painKiller = usePainKiller();
-
-  if (!open) return null;
-
-  if (selectedRowKeys.length === 0) {
-    message.warning(t('environment.NoImagesAreSelected'));
-    onRequestClose();
-    return null;
-  }
+  if (!modalProps.open) return null;
 
   const mapImages = () => {
-    const imagesMappedToid = _.keyBy(images, 'id');
     let hasInstalledImage = false;
-
-    const imagesToInstall = selectedRowKeys
-      .map((id) => imagesMappedToid[_.toString(id)])
-      .filter((image) => {
-        if (image?.installed && !hasInstalledImage) hasInstalledImage = true;
-        return !image?.installed;
-      });
-
-    return { hasInstalledImage, imagesToInstall };
+    const imagesToInstall = selectedRows.filter((image) => {
+      if (image.installed) hasInstalledImage = true;
+      return !image.installed;
+    });
+    return { imagesToInstall, hasInstalledImage };
   };
-  const { hasInstalledImage, imagesToInstall } = mapImages();
 
-  if (imagesToInstall.length === 0) {
-    message.warning(t('environment.AlreadyInstalledImage'));
-    onRequestClose();
-    return null;
-  }
+  const { imagesToInstall, hasInstalledImage } = mapImages();
 
   const handleClick = () => {
     onRequestClose();
@@ -161,13 +137,12 @@ export default function ImageInstallModal({
         .map((item) => item?.id)
         .filter((id): id is string => id !== null && id !== undefined),
     );
-    setSelectedRowKeys([]);
   };
 
   return (
     <BAIModal
+      {...modalProps}
       destroyOnClose
-      open={open}
       maskClosable={false}
       onCancel={() => onRequestClose()}
       title={t('dialog.title.LetsDouble-Check')}

diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
@@ -15,22 +15,20 @@ import {
   SettingOutlined,
   VerticalAlignBottomOutlined,
 } from '@ant-design/icons';
-import { Button, Table, Tag, theme } from 'antd';
-import { AnyObject } from 'antd/es/_util/type';
+import { App, Button, Table, Tag, theme } from 'antd';
 import { ColumnsType } from 'antd/es/table';
-import { ColumnType } from 'antd/lib/table';
 import graphql from 'babel-plugin-relay/macro';
-import { Key, useMemo, useState, useTransition } from 'react';
+import { useMemo, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery } from 'react-relay';
 
 export type EnvironmentImage = NonNullable<
-  ImageListQuery$data['images']
->[number];
+  NonNullable<ImageListQuery$data['images']>[number]
+>;
 
 export default function ImageList({ style }: { style?: React.CSSProperties }) {
   const { t } = useTranslation();
-  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
+  const [selectedRows, setSelectedRows] = useState<EnvironmentImage[]>([]);
   const [
     ,
     {
@@ -50,15 +48,7 @@ export default function ImageList({ style }: { style?: React.CSSProperties }) {
     useUpdatableState('initial-fetch');
   const [, startRefetchTransition] = useTransition();
   const [installingImages, setInstallingImages] = useState<string[]>([]);
-
-  const onSelectChange = (newSelectedRowKeys: Key[]) => {
-    setSelectedRowKeys(newSelectedRowKeys);
-  };
-
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: onSelectChange,
-  };
+  const { message } = App.useApp();
 
   const sortBasedOnInstalled = (a: EnvironmentImage, b: EnvironmentImage) => {
     return a?.installed && !b?.installed
@@ -100,11 +90,17 @@ export default function ImageList({ style }: { style?: React.CSSProperties }) {
       fetchKey: environmentFetchKey,
     },
   );
+
   const sortedImages = useMemo(
     () =>
       images
-        ? ([...images].sort(sortBasedOnInstalled) as readonly AnyObject[])
-        : undefined,
+        ? [...images]
+            .filter(
+              (image): image is EnvironmentImage =>
+                image !== null && image !== undefined,
+            )
+            .sort(sortBasedOnInstalled)
+        : [],
     [images],
   );
   const columns: ColumnsType<EnvironmentImage> = [
@@ -253,8 +249,7 @@ export default function ImageList({ style }: { style?: React.CSSProperties }) {
       render: (text, row) =>
         row?.resource_limits?.map((resource_limit) => (
           <ResourceNumber
-            // @ts-ignore
-            type={resource_limit.key}
+            type={resource_limit?.key || ''}
             value={resource_limit?.min || '0'}
             max={resource_limit?.max || ''}
           />
@@ -299,6 +294,7 @@ export default function ImageList({ style }: { style?: React.CSSProperties }) {
       },
     },
   ];
+
   return (
     <>
       <Flex
@@ -314,22 +310,35 @@ export default function ImageList({ style }: { style?: React.CSSProperties }) {
             icon={<VerticalAlignBottomOutlined />}
             style={{ backgroundColor: token.colorPrimary, color: 'white' }}
             onClick={() => {
-              setIsOpenInstallModal(true);
+              if (selectedRows.length === 0) {
+                message.warning(t('environment.NoImagesAreSelected'));
+                return;
+              }
+              if (selectedRows.some((image) => !image.installed)) {
+                setIsOpenInstallModal(true);
+                return;
+              }
+              message.warning(t('environment.AlreadyInstalledImage'));
             }}
           >
             {t('environment.Install')}
           </Button>
         </Flex>
-        <Table
+        <Table<EnvironmentImage>
           rowKey="id"
           scroll={{
             x: 'max-content',
             y: 'calc(100vh - (9.0625rem + 3rem + 4.5rem))',
           }}
           pagination={false}
           dataSource={sortedImages}
-          columns={columns as ColumnType<AnyObject>[]}
-          rowSelection={rowSelection}
+          columns={columns}
+          rowSelection={{
+            type: 'checkbox',
+            onChange: (_, selectedRows: EnvironmentImage[]) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
         />
       </Flex>
       <ManageImageResourceLimitModal
@@ -359,10 +368,8 @@ export default function ImageList({ style }: { style?: React.CSSProperties }) {
         onRequestClose={() => {
           setIsOpenInstallModal(false);
         }}
-        selectedRowKeys={selectedRowKeys}
-        images={images as EnvironmentImage[]}
         setInstallingImages={setInstallingImages}
-        setSelectedRowKeys={setSelectedRowKeys}
+        selectedRows={selectedRows}
       />
     </>
   );