fix(FR-2819): use BAIConfirmModalWithInput for irreversible delete actions

Resolves #7253(FR-2819)

## Summary
- Replace `modal.confirm` with `BAIConfirmModalWithInput` for permanent
  keypair deletion in `UserCredentialList.tsx` — user must type the
  keypair's `access_key` to confirm
- Replace `Popconfirm` with `BAIConfirmModalWithInput` for permanent
  auto-scaling rule deletion in `AutoScalingRuleListLegacy.tsx` — user
  must type the rule's `metric_name` to confirm
- Migrate `Card` to `BAICard` in `AutoScalingRuleListLegacy.tsx` per
  project convention
- Leave activate/deactivate actions untouched (reversible, handled by
  FR-2825)

## Files changed
- `react/src/components/UserCredentialList.tsx`
- `react/src/components/AutoScalingRuleListLegacy.tsx`

## Audited but no changes needed
- `ResourceGroupList.tsx` — already uses `BAIConfirmModalWithInput`
- `ShellScriptEditModal.tsx` — already uses `BAIConfirmModalWithInput`
- `ContainerRegistryEditorModal.tsx` — `modal.confirm` is for a
  non-destructive save confirmation, not a delete

Author: claude

react/src/components/AutoScalingRuleListLegacy.tsx

@@ -8,17 +8,14 @@ import AutoScalingRuleEditorModalLegacy, {
   COMPARATOR_LABELS,
 } from './AutoScalingRuleEditorModalLegacy';
 import { DeleteFilled, PlusOutlined, SettingOutlined } from '@ant-design/icons';
+import { App, Button, Tag, Tooltip, Typography, theme } from 'antd';
 import {
-  App,
-  Button,
-  Card,
-  Popconfirm,
-  Tag,
-  Tooltip,
-  Typography,
-  theme,
-} from 'antd';
-import { BAIFlex, BAITable, BAIUnmountAfterClose } from 'backend.ai-ui';
+  BAICard,
+  BAIConfirmModalWithInput,
+  BAIFlex,
+  BAITable,
+  BAIUnmountAfterClose,
+} from 'backend.ai-ui';
 import { default as dayjs } from 'dayjs';
 import * as _ from 'lodash-es';
 import { CircleArrowDownIcon, CircleArrowUpIcon } from 'lucide-react';
@@ -102,6 +99,9 @@ const AutoScalingRuleListLegacy: React.FC<AutoScalingRuleListLegacyProps> = ({
     useState<AutoScalingRuleEditorModalLegacyFragment$key | null>(null);
   const [isOpenAutoScalingRuleModal, setIsOpenAutoScalingRuleModal] =
     useState(false);
+  const [deletingRule, setDeletingRule] = useState<Record<string, any> | null>(
+    null,
+  );
 
   const [
     commitDeleteAutoScalingRuleMutation,
@@ -117,7 +117,7 @@ const AutoScalingRuleListLegacy: React.FC<AutoScalingRuleListLegacyProps> = ({
 
   return (
     <>
-      <Card
+      <BAICard
         title={t('modelService.AutoScalingRules')}
         extra={
           <Button
@@ -131,6 +131,7 @@ const AutoScalingRuleListLegacy: React.FC<AutoScalingRuleListLegacyProps> = ({
             {t('modelService.AddRules')}
           </Button>
         }
+        styles={{ body: { paddingTop: 0 } }}
       >
         <BAITable
           scroll={{ x: 'max-content' }}
@@ -180,79 +181,26 @@ const AutoScalingRuleListLegacy: React.FC<AutoScalingRuleListLegacyProps> = ({
                       }
                     }}
                   />
-                  <Popconfirm
-                    title={t('dialog.warning.CannotBeUndone')}
-                    okText={t('button.Delete')}
-                    okButtonProps={{
-                      danger: true,
-                    }}
-                    disabled={isInFlightDeleteAutoScalingRuleMutation}
-                    onConfirm={() => {
-                      if (autoScalingRules) {
-                        commitDeleteAutoScalingRuleMutation({
-                          variables: {
-                            id: row?.id as string,
-                          },
-                          onCompleted: (res, errors) => {
-                            if (
-                              !res?.delete_endpoint_auto_scaling_rule_node?.ok
-                            ) {
-                              message.error(
-                                res?.delete_endpoint_auto_scaling_rule_node
-                                  ?.msg,
-                              );
-                            } else if (errors && errors.length > 0) {
-                              const errorMsgList = _.map(
-                                errors,
-                                (error) =>
-                                  error.message || t('dialog.ErrorOccurred'),
-                              );
-                              for (const error of errorMsgList) {
-                                message.error(error);
+                  <Button
+                    type="text"
+                    icon={
+                      <DeleteFilled
+                        style={
+                          isEndpointDestroying
+                            ? undefined
+                            : {
+                                color: token.colorError,
                               }
-                            } else {
-                              setEditingAutoScalingRule(null);
-                              startRefetchTransition(() => {
-                                onRefetch();
-                              });
-                              message.success({
-                                key: 'autoscaling-rule-deleted',
-                                content: t(
-                                  'autoScalingRule.SuccessfullyDeleted',
-                                ),
-                              });
-                            }
-                          },
-                          onError: (error) => {
-                            message.error(
-                              error?.message || t('dialog.ErrorOccurred'),
-                            );
-                          },
-                        });
+                        }
+                      />
+                    }
+                    disabled={isEndpointDestroying || !isOwnedByCurrentUser}
+                    onClick={() => {
+                      if (row) {
+                        setDeletingRule(row);
                       }
                     }}
-                  >
-                    <Button
-                      type="text"
-                      icon={
-                        <DeleteFilled
-                          style={
-                            isEndpointDestroying
-                              ? undefined
-                              : {
-                                  color: token.colorError,
-                                }
-                          }
-                        />
-                      }
-                      disabled={false}
-                      onClick={() => {
-                        if (row) {
-                          setEditingAutoScalingRule(row);
-                        }
-                      }}
-                    />
-                  </Popconfirm>
+                  />
                 </BAIFlex>
               ),
             },
@@ -322,7 +270,7 @@ const AutoScalingRuleListLegacy: React.FC<AutoScalingRuleListLegacyProps> = ({
           showSorterTooltip={false}
           dataSource={autoScalingRules}
         ></BAITable>
-      </Card>
+      </BAICard>
       <BAIUnmountAfterClose>
         <AutoScalingRuleEditorModalLegacy
           open={isOpenAutoScalingRuleModal}
@@ -339,6 +287,64 @@ const AutoScalingRuleListLegacy: React.FC<AutoScalingRuleListLegacyProps> = ({
           }}
         />
       </BAIUnmountAfterClose>
+      <BAIConfirmModalWithInput
+        open={!!deletingRule}
+        title={t('autoScalingRule.ConfirmDeleteAutoScalingRule', {
+          autoScalingRule: deletingRule?.metric_name ?? '',
+        })}
+        content={
+          <Typography.Text type="danger">
+            {t('dialog.warning.CannotBeUndone')}
+          </Typography.Text>
+        }
+        confirmText={deletingRule?.metric_name ?? ''}
+        inputLabel={t('autoScalingRule.TypeMetricNameToDelete', {
+          metricName: deletingRule?.metric_name ?? '',
+        })}
+        okText={t('button.Delete')}
+        okButtonProps={{ loading: isInFlightDeleteAutoScalingRuleMutation }}
+        onOk={() => {
+          if (deletingRule && autoScalingRules) {
+            commitDeleteAutoScalingRuleMutation({
+              variables: {
+                id: deletingRule.id as string,
+              },
+              onCompleted: (res, errors) => {
+                if (!res?.delete_endpoint_auto_scaling_rule_node?.ok) {
+                  message.error(
+                    res?.delete_endpoint_auto_scaling_rule_node?.msg,
+                  );
+                  setDeletingRule(null);
+                } else if (errors && errors.length > 0) {
+                  const errorMsgList = _.map(
+                    errors,
+                    (error) => error.message || t('dialog.ErrorOccurred'),
+                  );
+                  for (const error of errorMsgList) {
+                    message.error(error);
+                  }
+                  setDeletingRule(null);
+                } else {
+                  setDeletingRule(null);
+                  setEditingAutoScalingRule(null);
+                  startRefetchTransition(() => {
+                    onRefetch();
+                  });
+                  message.success({
+                    key: 'autoscaling-rule-deleted',
+                    content: t('autoScalingRule.SuccessfullyDeleted'),
+                  });
+                }
+              },
+              onError: (error) => {
+                message.error(error?.message || t('dialog.ErrorOccurred'));
+                setDeletingRule(null);
+              },
+            });
+          }
+        }}
+        onCancel={() => setDeletingRule(null)}
+      />
     </>
   );
 };

react/src/components/UserCredentialList.tsx

@@ -28,6 +28,7 @@ import {
   BAIFlex,
   BAIPropertyFilter,
   BAINameActionCell,
+  BAIConfirmModalWithInput,
   useBAILogger,
   useUpdatableState,
   BAIText,
@@ -74,6 +75,7 @@ const UserCredentialList: React.FC = () => {
     useTransition();
   const [isPendingSettingModalOpen, startSettingModalOpenTransition] =
     useTransition();
+  const [deletingKeypair, setDeletingKeypair] = useState<Keypair | null>(null);
 
   const {
     baiPaginationOption,
@@ -410,57 +412,7 @@ const UserCredentialList: React.FC = () => {
                         icon: <DeleteFilled />,
                         type: 'danger' as const,
                         onClick: () => {
-                          modal.confirm({
-                            title: t('credential.DeleteCredential'),
-                            content: (
-                              <BAIFlex direction="column" align="stretch">
-                                <Typography.Text>
-                                  {t(
-                                    'credential.YouAreAboutToDeleteCredential',
-                                  )}
-                                </Typography.Text>
-                                <Typography.Text strong>
-                                  {record.user_id}
-                                </Typography.Text>
-                                <br />
-                                <Typography.Text type="danger">
-                                  {t('dialog.warning.CannotBeUndone')}
-                                </Typography.Text>
-                              </BAIFlex>
-                            ),
-                            onOk: () => {
-                              return new Promise<void>((resolve) => {
-                                commitDeleteKeypair({
-                                  variables: {
-                                    access_key: record.access_key ?? '',
-                                  },
-                                  onCompleted: (res, errors) => {
-                                    if (!res?.delete_keypair?.ok || errors) {
-                                      message.error(res?.delete_keypair?.msg);
-                                      resolve();
-                                      return;
-                                    }
-                                    message.success(
-                                      t(
-                                        'credential.KeypairSuccessfullyDeleted',
-                                      ),
-                                    );
-                                    updateFetchKey();
-                                    resolve();
-                                  },
-                                  onError: (error) => {
-                                    message.error(error?.message);
-                                    logger.error(error);
-                                    resolve();
-                                  },
-                                });
-                              });
-                            },
-                            okButtonProps: {
-                              danger: true,
-                            },
-                            okText: t('button.Delete'),
-                          });
+                          setDeletingKeypair(record);
                         },
                       },
                     ]),
@@ -609,6 +561,50 @@ const UserCredentialList: React.FC = () => {
           }
         }}
       />
+      <BAIConfirmModalWithInput
+        open={!!deletingKeypair}
+        title={t('credential.DeleteCredential')}
+        content={
+          <BAIFlex direction="column" align="stretch">
+            <Typography.Text>
+              {t('credential.YouAreAboutToDeleteCredential')}
+            </Typography.Text>
+            <Typography.Text strong>{deletingKeypair?.user_id}</Typography.Text>
+            <br />
+            <Typography.Text type="danger">
+              {t('dialog.warning.CannotBeUndone')}
+            </Typography.Text>
+          </BAIFlex>
+        }
+        confirmText={deletingKeypair?.access_key ?? ''}
+        inputLabel={t('credential.TypeAccessKeyToDelete')}
+        okText={t('button.Delete')}
+        onOk={() => {
+          if (deletingKeypair) {
+            commitDeleteKeypair({
+              variables: {
+                access_key: deletingKeypair.access_key ?? '',
+              },
+              onCompleted: (res, errors) => {
+                if (!res?.delete_keypair?.ok || errors) {
+                  message.error(res?.delete_keypair?.msg);
+                  setDeletingKeypair(null);
+                  return;
+                }
+                message.success(t('credential.KeypairSuccessfullyDeleted'));
+                setDeletingKeypair(null);
+                updateFetchKey();
+              },
+              onError: (error) => {
+                message.error(error?.message);
+                logger.error(error);
+                setDeletingKeypair(null);
+              },
+            });
+          }
+        }}
+        onCancel={() => setDeletingKeypair(null)}
+      />
     </BAIFlex>
   );
 };

resources/i18n/de.json

@@ -560,6 +560,7 @@
     "StatusInfo": "Statusinfo",
     "StatusUpdatedSuccessfully": "Der Benutzerstatus hat sich geändert.",
     "TooltipForRequirePasswordChange": "Wenn Sie diese Option aktivieren, muss der Benutzer bei der nächsten Anmeldung sein Passwort ändern.",
+    "TypeAccessKeyToDelete": "Type the access key to confirm deletion",
     "TypePermanentlyDelete": "Bitte geben Sie \"{{text}}\" ein.",
     "UpdateUsers": "Benutzer aktualisieren",
     "UpdateUsersWarningAlertTitle": "Das Festlegen von UID oder GID(s) kann die Verwendung zuvor erstellter Ordner-Mounts einschränken.",

resources/i18n/el.json

@@ -560,6 +560,7 @@
     "StatusInfo": "Πληροφορίες κατάστασης",
     "StatusUpdatedSuccessfully": "Η κατάσταση του χρήστη έχει αλλάξει.",
     "TooltipForRequirePasswordChange": "Εάν ενεργοποιηθεί αυτή η επιλογή, ο χρήστης θα πρέπει να αλλάξει τον κωδικό πρόσβασης κατά την επόμενη σύνδεση.",
+    "TypeAccessKeyToDelete": "Type the access key to confirm deletion",
     "TypePermanentlyDelete": "Παρακαλώ πληκτρολογήστε \"{{text}}\".",
     "UpdateUsers": "Ενημέρωση χρηστών",
     "UpdateUsersWarningAlertTitle": "Η ρύθμιση του UID ή των GID(s) μπορεί να περιορίσει τη χρήση ήδη δημιουργημένων προσαρτήσεων φακέλων.",

resources/i18n/en.json

@@ -577,6 +577,7 @@
     "StatusInfo": "Status Info",
     "StatusUpdatedSuccessfully": "The user status has changed.",
     "TooltipForRequirePasswordChange": "When enabled, the user must change their password at next login.",
+    "TypeAccessKeyToDelete": "Type the access key to confirm deletion",
     "TypePermanentlyDelete": "Please type \"{{text}}\".",
     "UpdateUsers": "Update Users",
     "UpdateUsersWarningAlertTitle": "Setting UID or GID(s) may restrict the use of previously created folder mounts.",

resources/i18n/es.json

@@ -560,6 +560,7 @@
     "StatusInfo": "Información de estado",
     "StatusUpdatedSuccessfully": "El estado del usuario ha cambiado.",
     "TooltipForRequirePasswordChange": "Si activa esta opción, los usuarios deberán cambiar su contraseña en el próximo inicio de sesión.",
+    "TypeAccessKeyToDelete": "Type the access key to confirm deletion",
     "TypePermanentlyDelete": "Por favor, escriba \"{{text}}\".",
     "UpdateUsers": "Actualizar usuarios",
     "UpdateUsersWarningAlertTitle": "Establecer UID o GID(s) puede restringir el uso de montajes de carpetas creados previamente.",

resources/i18n/fi.json

@@ -560,6 +560,7 @@
     "StatusInfo": "Tilatiedot",
     "StatusUpdatedSuccessfully": "Käyttäjän tila on muuttunut.",
     "TooltipForRequirePasswordChange": "Kun tämä asetus on päällä, käyttäjän on vaihdettava salasanansa seuraavalla kirjautumiskerralla.",
+    "TypeAccessKeyToDelete": "Type the access key to confirm deletion",
     "TypePermanentlyDelete": "Kirjoita \"{{text}}\".",
     "UpdateUsers": "Päivitä käyttäjät",
     "UpdateUsersWarningAlertTitle": "UID:n tai GID:ien asettaminen saattaa rajoittaa aiemmin liitettyjen kansioiden käyttöä.",

resources/i18n/fr.json

@@ -560,6 +560,7 @@
     "StatusInfo": "Informations sur le statut",
     "StatusUpdatedSuccessfully": "Le statut de l'utilisateur a changé.",
     "TooltipForRequirePasswordChange": "Si cette option est activée, l'utilisateur devra changer son mot de passe lors de sa prochaine connexion.",
+    "TypeAccessKeyToDelete": "Type the access key to confirm deletion",
     "TypePermanentlyDelete": "Veuillez saisir \"{{text}}\".",
     "UpdateUsers": "Mettre à jour les utilisateurs",
     "UpdateUsersWarningAlertTitle": "La définition de l'UID ou des GID peut restreindre l'utilisation des points de montage de dossiers créés précédemment.",