fix(FR-2622): add delete-folder option and trash notification on model card deletion

Author: agatha197

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

@@ -20,15 +20,15 @@ const meta: Meta<typeof BAIDeleteConfirmModal> = {
 **BAIDeleteConfirmModal** is a unified delete confirmation modal for table row deletion.
 
 ## Behavior
-- **Single item**: Simple confirm dialog with item name displayed. OK button is immediately enabled.
-- **Multiple items (2+)**: Requires typing confirmation text (localized "Delete") before OK is enabled.
-- **\`requireConfirmInput\`**: Forces text-input confirmation even for a single item.
+- **Single item**: Simple confirm dialog. OK button is immediately enabled.
+- **Single item + \`requireConfirmInput\`**: Requires typing the item name. Item list is hidden — the name already appears in the description.
+- **Multiple items (2+)**: Shows scrollable item list followed by a confirmation input requiring "Delete" to be typed.
 
 ## Key Features
 - Accepts \`React.ReactNode\` for item labels (icons, tags, custom rendering)
-- Scrollable item list for large selections
+- Scrollable item list for multi-item selections
 - \`extraContent\` slot for domain-specific additions (checkboxes, warnings)
-- Built on \`BAIConfirmModalWithInput\` (multi) and \`BAIModal\` (single)
+- Built on \`BAIModal\`
         `,
       },
     },
@@ -74,7 +74,7 @@ export const SingleItemWithInput: Story = {
     docs: {
       description: {
         story:
-          'Single item with `requireConfirmInput={true}`. User must type the item name to confirm.',
+          'Single item with `requireConfirmInput={true}`. Item list is hidden (name already appears in description). User must type the item name into the confirmation input to enable the Delete button.',
       },
     },
   },
@@ -106,7 +106,7 @@ export const MultipleItems: Story = {
     docs: {
       description: {
         story:
-          'Multiple items require typing "Delete" to confirm. Shows scrollable item list.',
+          'Multiple items require typing "Delete" to confirm. Shows scrollable item list above the confirmation input.',
       },
     },
   },

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

@@ -1,10 +1,9 @@
-import BAIConfirmModalWithInput from './BAIConfirmModalWithInput';
 import BAIFlex from './BAIFlex';
 import BAIModal, { type BAIModalProps } from './BAIModal';
 import BAIText from './BAIText';
 import { ExclamationCircleFilled } from '@ant-design/icons';
-import { theme, Typography, type InputProps } from 'antd';
-import React from 'react';
+import { Form, Input, theme, Typography, type InputProps } from 'antd';
+import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 const { Text } = Typography;
@@ -39,7 +38,7 @@ export interface BAIDeleteConfirmModalProps extends Omit<
   inputLabel?: React.ReactNode;
   /** Additional props for the confirmation Input. */
   inputProps?: InputProps;
-  /** Content rendered between the item list and the input field (e.g. checkboxes). */
+  /** Content rendered between the input field and "cannot be undone" text (e.g. checkboxes). */
   extraContent?: React.ReactNode;
   /** Max height (px) of the scrollable item list. Default: 200. Set 0 for no limit. */
   itemListMaxHeight?: number;
@@ -71,6 +70,7 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
 
   const { t } = useTranslation();
   const { token } = theme.useToken();
+  const [typedText, setTypedText] = useState('');
 
   const needsInput = items.length > 1 || requireConfirmInput;
 
@@ -101,6 +101,17 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
     />
   );
 
+  const modalTitle = (
+    <BAIFlex direction="column" justify="start" align="start">
+      <Text strong>
+        <ExclamationCircleFilled
+          style={{ color: token.colorWarning, marginRight: 5 }}
+        />
+        {resolvedTitle}
+      </Text>
+    </BAIFlex>
+  );
+
   const itemListContent =
     items.length > 0 ? (
       <div
@@ -125,49 +136,60 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
       </div>
     ) : null;
 
-  const bodyContent = (
-    <BAIFlex direction="column" align="stretch" gap="xs">
-      <Text>{resolvedDescription}</Text>
-      {itemListContent}
-      <Text type="danger">
-        {t('comp:BAIDeleteConfirmModal.CannotBeUndone')}
-      </Text>
-      {extraContent}
-    </BAIFlex>
-  );
-
   if (needsInput) {
     return (
-      <BAIConfirmModalWithInput
-        {...restModalProps}
+      <BAIModal
         destroyOnHidden
-        title={resolvedTitle}
-        confirmText={resolvedConfirmText}
-        content={bodyContent}
-        inputLabel={resolvedInputLabel}
-        inputProps={inputProps}
+        {...restModalProps}
+        title={modalTitle}
         okText={resolvedOkText}
-        okButtonProps={okButtonProps}
-        onOk={onOk}
-        onCancel={onCancel}
-      />
+        okButtonProps={{
+          danger: true,
+          disabled: typedText !== resolvedConfirmText,
+          ...okButtonProps,
+        }}
+        onOk={(e) => {
+          setTypedText('');
+          onOk?.(e);
+        }}
+        onCancel={(e) => {
+          setTypedText('');
+          onCancel?.(e);
+        }}
+      >
+        <BAIFlex direction="column" align="stretch" gap="xs">
+          <Text>{resolvedDescription}</Text>
+          {items.length > 1 && itemListContent}
+          <Form layout="vertical" preserve={false}>
+            <Form.Item
+              label={resolvedInputLabel}
+              style={{ marginBottom: 0 }}
+              required
+            >
+              <Input
+                autoFocus
+                autoComplete="off"
+                allowClear
+                value={typedText}
+                onChange={(e) => setTypedText(e.target.value)}
+                {...inputProps}
+              />
+            </Form.Item>
+          </Form>
+          <Text type="danger">
+            {t('comp:BAIDeleteConfirmModal.CannotBeUndone')}
+          </Text>
+          {extraContent}
+        </BAIFlex>
+      </BAIModal>
     );
   }
 
   return (
     <BAIModal
       {...restModalProps}
       destroyOnHidden
-      title={
-        <BAIFlex direction="column" justify="start" align="start">
-          <Text strong>
-            <ExclamationCircleFilled
-              style={{ color: token.colorWarning, marginRight: 5 }}
-            />
-            {resolvedTitle}
-          </Text>
-        </BAIFlex>
-      }
+      title={modalTitle}
       okText={resolvedOkText}
       okButtonProps={{
         danger: true,
@@ -177,7 +199,14 @@ const BAIDeleteConfirmModal: React.FC<BAIDeleteConfirmModalProps> = ({
       onOk={onOk}
       onCancel={onCancel}
     >
-      {bodyContent}
+      <BAIFlex direction="column" align="stretch" gap="xs">
+        <Text>{resolvedDescription}</Text>
+        {itemListContent}
+        <Text type="danger">
+          {t('comp:BAIDeleteConfirmModal.CannotBeUndone')}
+        </Text>
+        {extraContent}
+      </BAIFlex>
     </BAIModal>
   );
 };

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

@@ -96,7 +96,7 @@
     "CannotBeUndone": "이 작업은 되돌릴 수 없습니다.",
     "DeleteItem": "삭제",
     "DeleteNItems": "{{count}}개 항목 삭제",
-    "TypeToConfirm": "<code>{{confirmText}}</code>을(를) 입력하여 확인하세요."
+    "TypeToConfirm": "삭제를 위해 <code>{{confirmText}}</code>을(를) 입력하세요."
   },
   "comp:BAIDeploymentSelect": {
     "SelectDeployment": "배포를 선택해주세요"