fix(FR-1784): correct logic for disabling delete button in the MyEnvironment Page

Author: nowgnuesLee

react/src/components/CustomizedImageList.tsx

@@ -22,13 +22,14 @@ import {
   SettingOutlined,
 } from '@ant-design/icons';
 import { useToggle } from 'ahooks';
-import { App, Button, Input, Popconfirm, theme, Typography } from 'antd';
+import { Alert, App, Button, Input, theme, Typography } from 'antd';
 import { AnyObject } from 'antd/es/_util/type';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import {
   filterOutEmpty,
   filterOutNullAndUndefined,
   BAIFlex,
+  BAIModal,
   BAITable,
 } from 'backend.ai-ui';
 import _ from 'lodash';
@@ -53,9 +54,10 @@ const CustomizedImageList: React.FC = () => {
   const [isRefetchPending, startRefetchTransition] = useTransition();
   const [customizedImageListFetchKey, updateCustomizedImageListFetchKey] =
     useUpdatableState('initial-fetch');
-  const [inFlightImageId, setInFlightImageId] = useState<string>();
   const [imageSearch, setImageSearch] = useState('');
   const [isPendingSearchTransition, startSearchTransition] = useTransition();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [imageToDelete, setImageToDelete] = useState<string | null>(null);
   const [, { getBaseVersion, getBaseImages, getBaseImage, tagAlias, getTags }] =
     useBackendAIImageMetaData();
 
@@ -358,93 +360,15 @@ const CustomizedImageList: React.FC = () => {
       fixed: 'right',
       render: (_text, row) => (
         <BAIFlex direction="row" align="stretch" justify="center" gap="xxs">
-          <Popconfirm
-            title={t('dialog.ask.DoYouWantToProceed')}
-            description={t('dialog.warning.CannotBeUndone')}
-            okType="danger"
-            okText={t('button.Delete')}
-            onConfirm={() => {
-              if (row?.id) {
-                setInFlightImageId(row.id + customizedImageListFetchKey);
-                // TODO: when BA-1905 resolved. use commitPurgeImage
-                commitUntag({
-                  variables: { id: row.id },
-                  onCompleted: (res, errors) => {
-                    if (
-                      !_.isNil(res.untag_image_from_registry) &&
-                      !res.untag_image_from_registry.ok
-                    ) {
-                      message.error(res.untag_image_from_registry.msg);
-                      return;
-                    }
-                    if (errors && errors?.length > 0) {
-                      const errorMsgList = _.map(
-                        errors,
-                        (error) => error.message,
-                      );
-                      for (const errorMsg of errorMsgList) {
-                        message.error(errorMsg);
-                      }
-                      return;
-                    }
-                    commitForget({
-                      variables: { id: row.id },
-                      onCompleted: (res, errors) => {
-                        setInFlightImageId(undefined);
-                        if (
-                          !_.isNil(res.forget_image_by_id) &&
-                          !res.forget_image_by_id.ok
-                        ) {
-                          message.error(res.forget_image_by_id.msg);
-                          return;
-                        }
-                        if (errors && errors?.length > 0) {
-                          const errorMsgList = _.map(
-                            errors,
-                            (error) => error.message,
-                          );
-                          for (const errorMsg of errorMsgList) {
-                            message.error(errorMsg);
-                          }
-                          return;
-                        }
-                        startRefetchTransition(() => {
-                          updateCustomizedImageListFetchKey();
-                        });
-                        message.success(
-                          t('environment.CustomizedImageSuccessfullyDeleted'),
-                        );
-                      },
-                      onError: () => {
-                        message.error(
-                          t('environment.FailedToDeleteCustomizedImage'),
-                        );
-                      },
-                    });
-                  },
-                  onError: () => {
-                    message.error(
-                      t('environment.FailedToDeleteCustomizedImage'),
-                    );
-                  },
-                });
-              }
+          <Button
+            type="text"
+            icon={<DeleteOutlined />}
+            onClick={() => {
+              setImageToDelete(row?.id || null);
+              setIsDeleteModalOpen(true);
             }}
-          >
-            <Button
-              type="text"
-              icon={<DeleteOutlined />}
-              danger
-              loading={
-                (isInFlightForget || isInFlightUntag) &&
-                inFlightImageId === row?.id + customizedImageListFetchKey
-              }
-              disabled={
-                (isInFlightForget || isInFlightUntag) &&
-                inFlightImageId !== row?.id + customizedImageListFetchKey
-              }
-            />
-          </Popconfirm>
+            danger
+          />
         </BAIFlex>
       ),
     },
@@ -518,6 +442,91 @@ const CustomizedImageList: React.FC = () => {
         columns={columns}
         hiddenColumnKeys={hiddenColumnKeys}
       />
+      <BAIModal
+        open={isDeleteModalOpen}
+        title={t('dialog.ask.DoYouWantToProceed')}
+        okText={t('button.Delete')}
+        okButtonProps={{
+          danger: true,
+          loading: isInFlightForget || isInFlightUntag,
+        }}
+        cancelButtonProps={{
+          disabled: isInFlightForget || isInFlightUntag,
+        }}
+        onOk={() => {
+          if (imageToDelete) {
+            // TODO: when BA-1905 resolved. use commitPurgeImage
+            commitUntag({
+              variables: { id: imageToDelete },
+              onCompleted: (res, errors) => {
+                if (
+                  !_.isNil(res.untag_image_from_registry) &&
+                  !res.untag_image_from_registry.ok
+                ) {
+                  message.error(res.untag_image_from_registry.msg);
+                  return;
+                }
+                if (errors && errors?.length > 0) {
+                  const errorMsgList = _.map(errors, (error) => error.message);
+                  for (const errorMsg of errorMsgList) {
+                    message.error(errorMsg);
+                  }
+                  return;
+                }
+                commitForget({
+                  variables: { id: imageToDelete },
+                  onCompleted: (res, errors) => {
+                    if (
+                      !_.isNil(res.forget_image_by_id) &&
+                      !res.forget_image_by_id.ok
+                    ) {
+                      message.error(res.forget_image_by_id.msg);
+                      return;
+                    }
+                    if (errors && errors?.length > 0) {
+                      const errorMsgList = _.map(
+                        errors,
+                        (error) => error.message,
+                      );
+                      for (const errorMsg of errorMsgList) {
+                        message.error(errorMsg);
+                      }
+
+                      return;
+                    }
+                    startRefetchTransition(() => {
+                      updateCustomizedImageListFetchKey();
+                    });
+                    message.success(
+                      t('environment.CustomizedImageSuccessfullyDeleted'),
+                    );
+                    setIsDeleteModalOpen(false);
+                    setImageToDelete(null);
+                  },
+                  onError: () => {
+                    message.error(
+                      t('environment.FailedToDeleteCustomizedImage'),
+                    );
+                  },
+                });
+              },
+              onError: () => {
+                message.error(t('environment.FailedToDeleteCustomizedImage'));
+              },
+            });
+          }
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setImageToDelete(null);
+        }}
+      >
+        <Alert
+          type="warning"
+          showIcon
+          message={t('dialog.warning.CannotBeUndone')}
+        />
+      </BAIModal>
     </BAIFlex>
   );
 };