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

Resolves #7253(FR-2819)

## Summary

Sweep all permanent-delete flows that still used `modal.confirm` / `Popconfirm` / ad-hoc dialogs and move them onto the project's typed-confirmation pattern (`.claude/rules/destructive-confirmation.md`). In the process, **consolidate two overlapping components** — `BAIConfirmModalWithInput` and `BAIDeleteConfirmModal` — into a single API so every irreversible delete in the app looks and behaves the same.

## What changed

### Component consolidation
- **Remove `BAIConfirmModalWithInput`** (component, stories, exports). All 16 call sites are migrated to `BAIDeleteConfirmModal`.
- **Extend `BAIDeleteConfirmModal`**:
  - Add `requireConfirmInput` to force typed confirmation for single-item deletes.
  - Add `target` prop — when set (and no `description` is provided) the modal renders the localized "Are you sure you want to permanently delete {target}?" copy. Centralizes the most common irreversible-delete sentence so call sites don't redeclare it.
- Reinstall-confirm flows (`ManageImageResourceLimitModal`, `ManageAppsModal`) — which are confirmations but **not deletes** — are moved to plain `BAIModal` instead of a delete-shaped modal. They were only on `BAIConfirmModalWithInput` for the typed-input UX, which they don't actually need.

### Bug fixes (the issue's scope)
- `UserCredentialList.tsx` — permanent keypair deletion was a single-click `modal.confirm`. Now opens `BAIDeleteConfirmModal` with `requireConfirmInput` and the keypair's `access_key` as the confirm string.
- `AutoScalingRuleListLegacy.tsx` — permanent rule deletion was a `Popconfirm`. Now opens `BAIDeleteConfirmModal` requiring the rule's identifier to be typed. Card is migrated to `BAICard` in the same change per project convention.

### Sweep — other irreversible flows migrated
Single-click confirms / ad-hoc patterns replaced with `BAIDeleteConfirmModal` (+ `requireConfirmInput` where the item is sensitive):

- `AutoScalingRuleList.tsx` (V2)
- `ContainerRegistryList.tsx`
- `CustomizedImageList.tsx`
- `DeleteForeverVFolderModalV2.tsx`
- `DeploymentAccessTokensTab.tsx`, `DeploymentConfigurationSection.tsx`, `DeploymentList.tsx`, `EndpointList.tsx`
- `KeypairResourcePolicyList.tsx`, `ProjectResourcePolicyList.tsx`, `UserResourcePolicyList.tsx`
- `MyKeypairManagementModal.tsx`
- `PrometheusPresetTab.tsx`
- `PurgeUsersModal.tsx`
- `ResourceGroupList.tsx`, `ResourcePresetList.tsx`
- `RoleAssignmentTab.tsx`, `RolePermissionTab.tsx`, `RBACManagementPage.tsx`
- `ShellScriptEditModal.tsx`
- `UserCredentialList.tsx`
- `VFolderNodes.tsx`
- `AIAgentPage.tsx`
- `FileExplorer/DeleteSelectedItemsModal.tsx`
- `fragments/BAIProjectTable.tsx`

### `confirmText` policy
Standardized so each call site picks the **safer** of two options:
- **User-readable IDs** (project name, vfolder name, keypair `access_key`, role name, …) → use the resource's name as the confirm string. The user has it on screen and can copy-type it unambiguously.
- **Cryptic / long IDs** (image full path, autoscaling metric name, bulk purge across N users) → use the literal `"Permanently Delete"` string. Asking the user to type a 90-char Docker reference is worse UX, not better.

Activate / deactivate (reversible) flows are intentionally **left as-is** — those belong to FR-2825.

### i18n
- New keys across all 22 locales:
  - `general.*` resource-type labels (9 new entries) for the `target` prop.
  - `dialog.title.DeleteSomething`
  - `comp:BAIDeleteConfirmModal.AreYouSureToPermanentlyDeleteTarget`
- Filled in previously missing keys across non-English locales (translations were already drifting; this PR brings them back in sync).
- Fix one Korean typo: `environment.ModifyImageResourceLimitReinstallRequired`.

### Storybook
- Remove `BAIConfirmModalWithInput.stories.tsx`.
- Add a Storybook case for the new `target` prop on `BAIDeleteConfirmModal`.

## Why one API, not two

Before: `BAIConfirmModalWithInput` (typed-input shape) and `BAIDeleteConfirmModal` (item-list shape) covered overlapping use cases — the typed-input modal was being used for deletes, and call sites were duplicating copy and layout that already existed in `BAIDeleteConfirmModal`. After: a single component covers both the single-item and N-item delete cases, with `requireConfirmInput` and `target` handling the variants. Less surface area, less drift, fewer translation keys to keep aligned.

## Checklist

- [x] Documentation — N/A (no user-facing manual change; convention rule unchanged)
- [x] Minimum required manager version — N/A
- [x] Specific setting for review — none
- [x] Minimum requirements to check during review — `bash scripts/verify.sh` passes; manually exercise a few migrated flows (keypair delete, autoscaling rule delete, vfolder permanent delete, bulk user purge) to confirm the OK button stays disabled until the right string is typed
- [x] Test case(s) — see Storybook stories and the migrated call sites; behavior across all 16 sites is now driven by one component

Author: ironAiken2

packages/backend.ai-ui/src/components/BAIConfirmModalWithInput.stories.tsx

@@ -27,6 +27,7 @@ const meta: Meta<typeof BAIDeleteConfirmModal> = {
 ## Key Features
 - Accepts \`React.ReactNode\` for item labels (icons, tags, custom rendering)
 - Scrollable item list for multi-item selections
+- \`target\` prop produces a resource-type-aware default description ("Are you sure you want to permanently delete {target}?")
 - \`extraContent\` slot for domain-specific additions (checkboxes, warnings)
 - Built on \`BAIModal\`
         `,
@@ -93,6 +94,39 @@ export const SingleItemWithInput: Story = {
   },
 };
 
+export const WithTarget: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Resource-typed deletion using the `target` prop. The default description becomes "Are you sure you want to permanently delete {target}?", surfacing the resource type (e.g. "Resource Preset", "Resource Policy") in the dialog copy. Typically paired with `requireConfirmInput` for irreversible deletes.',
+      },
+    },
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const itemName = 'gpu-large-preset';
+    return (
+      <>
+        <BAIButton danger icon={<DeleteFilled />} onClick={() => setOpen(true)}>
+          Delete Resource Preset
+        </BAIButton>
+        <BAIDeleteConfirmModal
+          open={open}
+          title="Delete Resource Preset"
+          target="Resource Preset"
+          items={[{ key: itemName, label: itemName }]}
+          confirmText={itemName}
+          requireConfirmInput
+          inputProps={{ placeholder: itemName }}
+          onOk={() => setOpen(false)}
+          onCancel={() => setOpen(false)}
+        />
+      </>
+    );
+  },
+};
+
 export const MultipleItems: Story = {
   parameters: {
     docs: {

packages/backend.ai-ui/src/components/BAIConfirmModalWithInput.tsx

@@ -23,8 +23,13 @@ export interface BAIDeleteConfirmModalProps extends Omit<
   items: BAIDeleteConfirmModalItem[];
   /** Custom modal title. Defaults to "Delete" / "Delete N items". */
   title?: React.ReactNode;
-  /** Description shown above the item list. Defaults to "Are you sure you want to delete?" */
+  /** Description shown above the item list. If omitted, falls back to a `target`-based or generic default. */
   description?: React.ReactNode;
+  /**
+   * Resource type label (e.g. "Credential", "Project"). When provided and `description` is not,
+   * the default description becomes "Are you sure you want to permanently delete {target}?".
+   */
+  target?: React.ReactNode;
   /** Force text-input confirmation even for a single item. Default: false */
   requireConfirmInput?: boolean;
   /**
@@ -54,6 +59,7 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
   items,
   title,
   description,
+  target,
   requireConfirmInput = false,
   confirmText: confirmTextProp,
   inputLabel,
@@ -83,15 +89,20 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
         })
       : t('comp:BAIDeleteConfirmModal.DeleteItem'));
 
-  const resolvedDescription =
-    description ?? t('comp:BAIDeleteConfirmModal.AreYouSureToDelete');
-
   const resolvedConfirmText =
     confirmTextProp ??
     (items.length === 1
       ? (extractTextFromNode(items[0]?.label) ?? t('general.button.Delete'))
       : t('general.button.Delete'));
 
+  const resolvedDescription =
+    description ??
+    (target
+      ? t('comp:BAIDeleteConfirmModal.AreYouSureToPermanentlyDeleteTarget', {
+          target,
+        })
+      : t('comp:BAIDeleteConfirmModal.AreYouSureToDelete'));
+
   const resolvedOkText = okText ?? t('general.button.Delete');
 
   const resolvedInputLabel = inputLabel ?? (
@@ -159,7 +170,7 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
         }}
       >
         <BAIFlex direction="column" align="stretch" gap="xs">
-          <Text>{resolvedDescription}</Text>
+          {resolvedDescription && <Text>{resolvedDescription}</Text>}
           {items.length > 1 && itemListContent}
           <Form
             form={form}
@@ -199,7 +210,7 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
       onCancel={onCancel}
     >
       <BAIFlex direction="column" align="stretch" gap="xs">
-        <Text>{resolvedDescription}</Text>
+        {resolvedDescription && <Text>{resolvedDescription}</Text>}
         {itemListContent}
         <Text type="danger">
           {t('comp:BAIDeleteConfirmModal.CannotBeUndone')}