fix(FR-1784): Replace popconfirm with Modal for image deletion

react/src/components/CustomizedImageList.tsx

@@ -22,14 +22,16 @@ 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,
+  BAIText,
 } from 'backend.ai-ui';
 import _ from 'lodash';
 import React, { useMemo, useState, useTransition } from 'react';
@@ -53,9 +55,11 @@ 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 [imageToDelete, setImageToDelete] = useState<CommittedImage | null>(
+    null,
+  );
   const [, { getBaseVersion, getBaseImages, getBaseImage, tagAlias, getTags }] =
     useBackendAIImageMetaData();
 
@@ -216,19 +220,36 @@ const CustomizedImageList: React.FC = () => {
       title: t('environment.FullImagePath'),
       key: 'fullImagePath',
       render: (row) => (
-        <Typography.Text
+        <BAIText
+          monospace
           copyable={{
             text: getImageFullName(row) || '',
           }}
         >
           <TextHighlighter keyword={imageSearch}>
             {getImageFullName(row) || ''}
           </TextHighlighter>
-        </Typography.Text>
+        </BAIText>
       ),
       sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
       width: token.screenXS,
     },
+    {
+      title: t('general.Control'),
+      key: 'control',
+      render: (_text, row) => (
+        <BAIFlex direction="row" align="stretch" justify="center" gap="xxs">
+          <Button
+            type="text"
+            icon={<DeleteOutlined />}
+            onClick={() => {
+              setImageToDelete(row || null);
+            }}
+            danger
+          />
+        </BAIFlex>
+      ),
+    },
     {
       title: t('environment.Registry'),
       dataIndex: 'registry',
@@ -352,102 +373,6 @@ const CustomizedImageList: React.FC = () => {
         </Typography.Text>
       ),
     },
-    {
-      title: t('general.Control'),
-      key: 'control',
-      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 />}
-              danger
-              loading={
-                (isInFlightForget || isInFlightUntag) &&
-                inFlightImageId === row?.id + customizedImageListFetchKey
-              }
-              disabled={
-                (isInFlightForget || isInFlightUntag) &&
-                inFlightImageId !== row?.id + customizedImageListFetchKey
-              }
-            />
-          </Popconfirm>
-        </BAIFlex>
-      ),
-    },
   ]);
 
   const [hiddenColumnKeys, setHiddenColumnKeys] = useHiddenColumnKeysSetting(
@@ -518,6 +443,96 @@ const CustomizedImageList: React.FC = () => {
         columns={columns}
         hiddenColumnKeys={hiddenColumnKeys}
       />
+      <BAIModal
+        open={imageToDelete !== null}
+        title={t('dialog.ask.DoYouWantToDelete')}
+        okText={t('button.Delete')}
+        okType="danger"
+        confirmLoading={isInFlightForget || isInFlightUntag}
+        onOk={() => {
+          if (imageToDelete) {
+            // TODO: when BA-1905 resolved. use commitPurgeImage
+            commitUntag({
+              variables: { id: imageToDelete.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: imageToDelete.id },
+                  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'),
+                    );
+                    setImageToDelete(null);
+                  },
+                  onError: () => {
+                    message.error(
+                      t('environment.FailedToDeleteCustomizedImage'),
+                    );
+                  },
+                });
+              },
+              onError: () => {
+                message.error(t('environment.FailedToDeleteCustomizedImage'));
+              },
+            });
+          }
+        }}
+        onCancel={() => {
+          setImageToDelete(null);
+        }}
+      >
+        <Alert
+          type="warning"
+          showIcon
+          message={t('dialog.warning.CannotBeUndone')}
+        />
+        {imageToDelete !== null && (
+          <ul
+            style={{
+              paddingInlineStart: token.marginSM,
+              listStyle: 'circle',
+            }}
+          >
+            <li>
+              <BAIText monospace>{getImageFullName(imageToDelete)}</BAIText>
+            </li>
+          </ul>
+        )}
+      </BAIModal>
     </BAIFlex>
   );
 };

resources/i18n/de.json

@@ -511,6 +511,7 @@
     "ErrorOccurred": "Ein Fehler ist aufgetreten",
     "PleaseTypeToConfirm": "Bitte geben Sie {{confirmText}} ein, um zu bestätigen.",
     "ask": {
+      "DoYouWantToDelete": "Möchten Sie dies wirklich löschen?",
       "DoYouWantToDeleteSomething": "Sind Sie sicher, dass Sie \"{{ Name }}\" löschen wollen?",
       "DoYouWantToProceed": "Willst du fortfahren?",
       "DoYouWantToResetChanges": "Möchten Sie Ihre Änderungen zurücksetzen?"

resources/i18n/el.json

@@ -508,6 +508,7 @@
   "dialog": {
     "ErrorOccurred": "Προέκυψε σφάλμα",
     "ask": {
+      "DoYouWantToDelete": "Είστε σίγουροι ότι θέλετε να διαγράψετε;",
       "DoYouWantToDeleteSomething": "Είστε σίγουροι ότι θέλετε να διαγράψετε το \"{{ name }}\";",
       "DoYouWantToProceed": "Θέλετε να συνεχίσετε?",
       "DoYouWantToResetChanges": "Θέλετε να επαναφέρετε τις αλλαγές σας;"

resources/i18n/en.json

@@ -514,6 +514,7 @@
     "ErrorOccurred": "Error Occurred",
     "PleaseTypeToConfirm": "Please type {{ confirmText }} to confirm.",
     "ask": {
+      "DoYouWantToDelete": "Are you sure you want to delete?",
       "DoYouWantToDeleteSomething": "Are you sure you want to delete \"{{ name }}\"?",
       "DoYouWantToProceed": "Do you want to proceed?",
       "DoYouWantToResetChanges": "Do you want to reset your changes?"

resources/i18n/es.json

@@ -511,6 +511,7 @@
     "ErrorOccurred": "Se ha producido un error",
     "PleaseTypeToConfirm": "Escriba {{confirmText}} para confirmar.",
     "ask": {
+      "DoYouWantToDelete": "¿Está seguro de que desea eliminar?",
       "DoYouWantToDeleteSomething": "¿Estás seguro de que quieres borrar \"{{ name }}\"?",
       "DoYouWantToProceed": "¿Quieres continuar?",
       "DoYouWantToResetChanges": "¿Quieres restablecer tus cambios?"

resources/i18n/fi.json

@@ -511,6 +511,7 @@
     "ErrorOccurred": "Tapahtunut virhe",
     "PleaseTypeToConfirm": "Kirjoita {{confirmText}} vahvistaaksesi.",
     "ask": {
+      "DoYouWantToDelete": "Haluatko varmasti poistaa tämän?",
       "DoYouWantToDeleteSomething": "Oletko varma, että haluat poistaa \"{{ name }}\"?\"?",
       "DoYouWantToProceed": "Haluatteko jatkaa?",
       "DoYouWantToResetChanges": "Haluatko nollata tekemäsi muutokset?"

resources/i18n/fr.json

@@ -511,6 +511,7 @@
     "ErrorOccurred": "Erreur est survenue",
     "PleaseTypeToConfirm": "Veuillez taper {{confirmText}} pour confirmer.",
     "ask": {
+      "DoYouWantToDelete": "Voulez-vous vraiment supprimer ?",
       "DoYouWantToDeleteSomething": "Êtes-vous sûr de vouloir supprimer \"{{ nom }}\" ?",
       "DoYouWantToProceed": "Voulez-vous poursuivre?",
       "DoYouWantToResetChanges": "Voulez-vous réinitialiser vos modifications ?"

resources/i18n/id.json

@@ -510,6 +510,7 @@
     "ErrorOccurred": "Terjadi Galat",
     "PleaseTypeToConfirm": "Harap ketik {{confirmText}} untuk mengonfirmasi.",
     "ask": {
+      "DoYouWantToDelete": "Apakah Anda yakin ingin menghapus?",
       "DoYouWantToDeleteSomething": "Apakah Anda yakin ingin menghapus \"{{ nama }}\"?",
       "DoYouWantToProceed": "Apakah Anda ingin lanjut?",
       "DoYouWantToResetChanges": "Apakah Anda ingin mengatur ulang perubahan Anda?"

resources/i18n/it.json

@@ -510,6 +510,7 @@
     "ErrorOccurred": "Errore",
     "PleaseTypeToConfirm": "Si prega di digitare {{confirmText}} per confermare.",
     "ask": {
+      "DoYouWantToDelete": "Sei sicuro di voler eliminare?",
       "DoYouWantToDeleteSomething": "Si è sicuri di voler eliminare \"{{ nome }}\"?",
       "DoYouWantToProceed": "Vuoi procedere?",
       "DoYouWantToResetChanges": "Vuoi ripristinare le modifiche?"

resources/i18n/ja.json

@@ -510,6 +510,7 @@
     "ErrorOccurred": "エラーが発生しました",
     "PleaseTypeToConfirm": "確認するには{{confirmText}}を入力してください。",
     "ask": {
+      "DoYouWantToDelete": "本当に削除しますか？",
       "DoYouWantToDeleteSomething": "本当に\"{{ name }}\"を削除しますか？",
       "DoYouWantToProceed": "続行しますか？",
       "DoYouWantToResetChanges": "変更をリセットしますか?"

resources/i18n/ko.json

@@ -513,6 +513,7 @@
     "ErrorOccurred": "문제가 발생했습니다",
     "PleaseTypeToConfirm": "{{confirmText}}를 입력하십시오.",
     "ask": {
+      "DoYouWantToDelete": "정말로 삭제하시겠습니까?",
       "DoYouWantToDeleteSomething": "\"{{ name }}\"을(를) 삭제하시겠습니까?",
       "DoYouWantToProceed": "계속 진행하시겠습니까?",
       "DoYouWantToResetChanges": "변경사항을 초기화하시겠습니까?"

resources/i18n/mn.json

@@ -509,6 +509,7 @@
     "ErrorOccurred": "Алдаа гарлаа",
     "PleaseTypeToConfirm": "Баталгаажуулахын тулд {{confirmText}} оруулна уу.",
     "ask": {
+      "DoYouWantToDelete": "Та үүнийг устгахдаа итгэлтэй байна уу?",
       "DoYouWantToDeleteSomething": "Та \"{{ name }}\"-г устгахдаа итгэлтэй байна уу?",
       "DoYouWantToProceed": "Та үргэлжлүүлэхийг хүсч байна уу?",
       "DoYouWantToResetChanges": "Та өөрчлөлтөө дахин тохируулахыг хүсэж байна уу?"

resources/i18n/ms.json

@@ -510,6 +510,7 @@
     "ErrorOccurred": "Ralat Berlaku",
     "PleaseTypeToConfirm": "Sila taipkan {{confirmText}} untuk mengesahkan.",
     "ask": {
+      "DoYouWantToDelete": "Adakah anda pasti mahu memadam?",
       "DoYouWantToDeleteSomething": "Adakah anda pasti mahu memadamkan \"{{ name }}\"?",
       "DoYouWantToProceed": "Adakah anda mahu meneruskan?",
       "DoYouWantToResetChanges": "Adakah anda mahu menetapkan semula perubahan anda?"

resources/i18n/pl.json

@@ -511,6 +511,7 @@
     "ErrorOccurred": "Wystąpił błąd",
     "PleaseTypeToConfirm": "Wpisz {{confirmText}}, aby potwierdzić.",
     "ask": {
+      "DoYouWantToDelete": "Czy na pewno chcesz to usunąć?",
       "DoYouWantToDeleteSomething": "Czy na pewno chcesz usunąć \"{{ name }}\"?",
       "DoYouWantToProceed": "Czy chcesz kontynuować?",
       "DoYouWantToResetChanges": "Czy chcesz zresetować zmiany?"

resources/i18n/pt-BR.json

@@ -511,6 +511,7 @@
     "ErrorOccurred": "Ocorreu um erro",
     "PleaseTypeToConfirm": "Digite {{confirmText}} para confirmar.",
     "ask": {
+      "DoYouWantToDelete": "Tem certeza de que deseja excluir?",
       "DoYouWantToDeleteSomething": "Tem a certeza de que pretende eliminar \"{{ name }}\"?",
       "DoYouWantToProceed": "Você quer prosseguir?",
       "DoYouWantToResetChanges": "Deseja redefinir suas alterações?"

resources/i18n/pt.json

@@ -511,6 +511,7 @@
     "ErrorOccurred": "Ocorreu um erro",
     "PleaseTypeToConfirm": "Digite {{confirmText}} para confirmar.",
     "ask": {
+      "DoYouWantToDelete": "Tem certeza de que deseja excluir?",
       "DoYouWantToDeleteSomething": "Tem a certeza de que pretende eliminar \"{{ name }}\"?",
       "DoYouWantToProceed": "Você quer prosseguir?",
       "DoYouWantToResetChanges": "Deseja redefinir suas alterações?"

resources/i18n/ru.json

@@ -511,6 +511,7 @@
     "ErrorOccurred": "Возникла ошибка",
     "PleaseTypeToConfirm": "Пожалуйста, введите {{confirmText}}, чтобы подтвердить.",
     "ask": {
+      "DoYouWantToDelete": "Вы уверены, что хотите удалить?",
       "DoYouWantToDeleteSomething": "Вы уверены, что хотите удалить \"{{ имя }}\"?",
       "DoYouWantToProceed": "Вы хотите продолжить?",
       "DoYouWantToResetChanges": "Вы хотите сбросить изменения?"