refactor(FR-2479): standardize confirmation UX with BAIConfirmModalWithInput and Popconfirm

Author: ironAiken2

packages/backend.ai-ui/src/locale/ko.json

@@ -386,7 +386,7 @@
     "modal": {
       "DeleteForeverDesc": "경고: 선택한 항목은 완전히 삭제되며 복원할 수 없습니다.",
       "ItemSelectedWithCount": "{{count}}개 선택됨.",
-      "PleaseTypeToConfirm": "{{ confirmText }}를 입력하십시오."
+      "PleaseTypeToConfirm": "{{ confirmText }}를 입력해주세요."
     },
     "validation": {
       "LetterNumber-_dot": "문자, 숫자, '-', '_', '.'만 입력할 수 있습니다.",

react/src/components/EndpointList.tsx

@@ -18,18 +18,20 @@ import {
   DeleteOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
-import { Typography, theme, App, TablePaginationConfig } from 'antd';
+import { Typography, theme, App, TablePaginationConfig, Alert } from 'antd';
 import type { ColumnType } from 'antd/lib/table';
 import {
   filterOutEmpty,
   filterOutNullAndUndefined,
   BAITable,
   BAITableProps,
   BAINameActionCell,
+  BAIConfirmModalWithInput,
+  BAIFlex,
 } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import * as _ from 'lodash-es';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
 
@@ -73,10 +75,13 @@ const EndpointList: React.FC<EndpointListProps> = ({
 }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
-  const { message, modal } = App.useApp();
+  const { message } = App.useApp();
   const [currentUser] = useCurrentUserInfo();
   const baiClient = useSuspendedBackendaiClient();
   const webuiNavigate = useWebUINavigate();
+  const [deletingEndpoint, setDeletingEndpoint] = useState<Endpoint | null>(
+    null,
+  );
 
   const endpoints = useFragment(
     graphql`
@@ -144,46 +149,7 @@ const EndpointList: React.FC<EndpointListProps> = ({
               type: 'danger',
               disabled: isEndpointInDestroyingCategory(row),
               onClick: () => {
-                modal.confirm({
-                  title: t('dialog.ask.DoYouWantToDeleteSomething', {
-                    name: row.name,
-                  }),
-                  content: t('dialog.warning.CannotBeUndone'),
-                  okText: t('button.Delete'),
-                  okButtonProps: {
-                    danger: true,
-                    type: 'primary',
-                  },
-                  onOk: () => {
-                    if (row.endpoint_id) {
-                      return new Promise<void>((resolve) => {
-                        terminateModelServiceMutation.mutate(row.endpoint_id!, {
-                          onSuccess: (res) => {
-                            onDeleted?.(row);
-                            if (res.success) {
-                              message.success(
-                                t('modelService.ServiceTerminated', {
-                                  name: row?.name,
-                                }),
-                              );
-                            } else {
-                              message.error(
-                                t('modelService.FailedToTerminateService'),
-                              );
-                            }
-                            resolve();
-                          },
-                          onError: () => {
-                            message.error(
-                              t('modelService.FailedToTerminateService'),
-                            );
-                            resolve();
-                          },
-                        });
-                      });
-                    }
-                  },
-                });
+                setDeletingEndpoint(row);
               },
             },
           ]}
@@ -267,16 +233,63 @@ const EndpointList: React.FC<EndpointListProps> = ({
   ]);
 
   return (
-    <BAITable
-      size="small"
-      loading={loading}
-      scroll={{ x: 'max-content' }}
-      rowKey={'endpoint_id'}
-      dataSource={filterOutNullAndUndefined(endpoints)}
-      columns={columns}
-      pagination={pagination}
-      {...tableProps}
-    />
+    <>
+      <BAITable
+        size="small"
+        loading={loading}
+        scroll={{ x: 'max-content' }}
+        rowKey={'endpoint_id'}
+        dataSource={filterOutNullAndUndefined(endpoints)}
+        columns={columns}
+        pagination={pagination}
+        {...tableProps}
+      />
+      <BAIConfirmModalWithInput
+        open={!!deletingEndpoint}
+        title={t('dialog.ask.DoYouWantToDeleteSomething', {
+          name: deletingEndpoint?.name,
+        })}
+        content={
+          <BAIFlex direction="column" gap="md" align="stretch">
+            <Alert type="warning" title={t('dialog.warning.CannotBeUndone')} />
+            <BAIFlex>
+              <Typography.Text style={{ marginRight: token.marginXXS }}>
+                {t('dialog.TypeNameToConfirmDeletion')}
+              </Typography.Text>
+              (<Typography.Text code>{deletingEndpoint?.name}</Typography.Text>)
+            </BAIFlex>
+          </BAIFlex>
+        }
+        confirmText={deletingEndpoint?.name ?? ''}
+        inputProps={{ placeholder: deletingEndpoint?.name ?? '' }}
+        okText={t('button.Delete')}
+        okButtonProps={{ loading: terminateModelServiceMutation.isPending }}
+        onOk={() => {
+          if (deletingEndpoint?.endpoint_id) {
+            terminateModelServiceMutation.mutate(deletingEndpoint.endpoint_id, {
+              onSuccess: (res) => {
+                onDeleted?.(deletingEndpoint);
+                if (res.success) {
+                  message.success(
+                    t('modelService.ServiceTerminated', {
+                      name: deletingEndpoint?.name,
+                    }),
+                  );
+                } else {
+                  message.error(t('modelService.FailedToTerminateService'));
+                }
+                setDeletingEndpoint(null);
+              },
+              onError: () => {
+                message.error(t('modelService.FailedToTerminateService'));
+                setDeletingEndpoint(null);
+              },
+            });
+          }
+        }}
+        onCancel={() => setDeletingEndpoint(null)}
+      />
+    </>
   );
 };
 

react/src/components/ManageAppsModal.tsx

@@ -11,13 +11,17 @@ import {
   Form,
   message,
   Typography,
-  App,
   FormInstance,
   theme,
 } from 'antd';
-import { BAIFlex, BAIModal, BAIModalProps } from 'backend.ai-ui';
+import {
+  BAIFlex,
+  BAIModal,
+  BAIModalProps,
+  BAIConfirmModalWithInput,
+} from 'backend.ai-ui';
 import * as _ from 'lodash-es';
-import React from 'react';
+import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { graphql, useFragment, useMutation } from 'react-relay';
 
@@ -37,7 +41,10 @@ const ManageAppsModal: React.FC<ManageAppsModalProps> = ({
 }) => {
   const { t } = useTranslation();
   const formRef = React.useRef<FormInstance>(null);
-  const app = App.useApp();
+  const [isReinstallConfirmOpen, setIsReinstallConfirmOpen] = useState(false);
+  const [pendingCommitRequest, setPendingCommitRequest] = useState<
+    (() => void) | null
+  >(null);
 
   const { token } = theme.useToken();
 
@@ -157,21 +164,8 @@ const ManageAppsModal: React.FC<ManageAppsModalProps> = ({
           });
 
         if (image?.installed) {
-          app.modal.confirm({
-            title: 'Image reinstallation required',
-            content: (
-              <>
-                <Trans
-                  i18nKey={
-                    'environment.ModifyImageResourceLimitReinstallRequired'
-                  }
-                />
-              </>
-            ),
-            onOk: commitRequest,
-            getContainer: () => document.body,
-            closable: true,
-          });
+          setPendingCommitRequest(() => commitRequest);
+          setIsReinstallConfirmOpen(true);
         } else {
           commitRequest();
         }
@@ -329,6 +323,25 @@ const ManageAppsModal: React.FC<ManageAppsModalProps> = ({
           </Form.List>
         </BAIFlex>
       </Form>
+      <BAIConfirmModalWithInput
+        open={isReinstallConfirmOpen}
+        title={t('environment.ImageReinstallationRequired')}
+        content={
+          <Trans
+            i18nKey={'environment.ModifyImageResourceLimitReinstallRequired'}
+          />
+        }
+        confirmText={image?.name ?? image?.namespace ?? ''}
+        onOk={() => {
+          setIsReinstallConfirmOpen(false);
+          pendingCommitRequest?.();
+          setPendingCommitRequest(null);
+        }}
+        onCancel={() => {
+          setIsReinstallConfirmOpen(false);
+          setPendingCommitRequest(null);
+        }}
+      />
     </BAIModal>
   );
 };

react/src/components/ManageImageResourceLimitModal.tsx

@@ -8,23 +8,16 @@ import {
 } from '../__generated__/ManageImageResourceLimitModalMutation.graphql';
 import { ManageImageResourceLimitModal_image$key } from '../__generated__/ManageImageResourceLimitModal_image.graphql';
 import { compareNumberWithUnits } from '../helper';
-import {
-  App,
-  Form,
-  type FormInstance,
-  message,
-  InputNumber,
-  Row,
-  Col,
-} from 'antd';
+import { Form, type FormInstance, message, InputNumber, Row, Col } from 'antd';
 import {
   useResourceSlotsDetails,
   BAIModal,
   BAIModalProps,
   BAIDynamicUnitInputNumber,
+  BAIConfirmModalWithInput,
 } from 'backend.ai-ui';
 import * as _ from 'lodash-es';
-import React, { useRef, Fragment } from 'react';
+import React, { useRef, useState, Fragment } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { graphql, useFragment, useMutation } from 'react-relay';
 
@@ -46,8 +39,11 @@ const ManageImageResourceLimitModal: React.FC<
 
   const { t } = useTranslation();
   const formRef = useRef<FormInstance>(null);
-  const app = App.useApp();
   const { mergedResourceSlots } = useResourceSlotsDetails();
+  const [isReinstallConfirmOpen, setIsReinstallConfirmOpen] = useState(false);
+  const [pendingCommitRequest, setPendingCommitRequest] = useState<
+    (() => void) | null
+  >(null);
 
   const image = useFragment(
     graphql`
@@ -129,17 +125,8 @@ const ManageImageResourceLimitModal: React.FC<
       });
 
     if (image?.installed) {
-      app.modal.confirm({
-        title: t('environment.ImageReinstallationRequired'),
-        content: (
-          <Trans
-            i18nKey={'environment.ModifyImageResourceLimitReinstallRequired'}
-          />
-        ),
-        onOk: commitRequest,
-        getContainer: () => document.body,
-        closable: true,
-      });
+      setPendingCommitRequest(() => commitRequest);
+      setIsReinstallConfirmOpen(true);
     } else {
       commitRequest();
     }
@@ -245,6 +232,25 @@ const ManageImageResourceLimitModal: React.FC<
           )}
         </Row>
       </Form>
+      <BAIConfirmModalWithInput
+        open={isReinstallConfirmOpen}
+        title={t('environment.ImageReinstallationRequired')}
+        content={
+          <Trans
+            i18nKey={'environment.ModifyImageResourceLimitReinstallRequired'}
+          />
+        }
+        confirmText={image?.name ?? image?.namespace ?? ''}
+        onOk={() => {
+          setIsReinstallConfirmOpen(false);
+          pendingCommitRequest?.();
+          setPendingCommitRequest(null);
+        }}
+        onCancel={() => {
+          setIsReinstallConfirmOpen(false);
+          setPendingCommitRequest(null);
+        }}
+      />
     </BAIModal>
   );
 };