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

agatha197 · agatha197 · commit cbde12261922 · 2026-04-28T15:45:28.000+09:00
diff --git a/packages/backend.ai-ui/src/components/BAIDeleteConfirmModal.stories.tsx b/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.',
       },
     },
   },
diff --git a/packages/backend.ai-ui/src/components/BAIDeleteConfirmModal.tsx b/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,56 @@ 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 }}>
+              <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 +195,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>
   );
 };
diff --git a/react/src/pages/AdminModelCardListPage.tsx b/react/src/pages/AdminModelCardListPage.tsx
@@ -11,19 +11,26 @@ import type {
   ModelCardV2OrderBy,
 } from '../__generated__/AdminModelCardListPageQuery.graphql';
 import AdminModelCardSettingModal from '../components/AdminModelCardSettingModal';
+import { useFolderExplorerOpener } from '../components/FolderExplorerOpener';
 import { convertToOrderBy, handleRowSelectionChange } from '../helper';
+import { useSuspendedBackendaiClient } from '../hooks';
 import { useBAIPaginationOptionStateOnSearchParam } from '../hooks/reactPaginationQueryOptions';
+import { useTanMutation } from '../hooks/reactQueryAlias';
+import { useSetBAINotification } from '../hooks/useBAINotification';
 import { useBAISettingUserState } from '../hooks/useBAISetting';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import { SettingOutlined } from '@ant-design/icons';
-import { App, Typography } from 'antd';
+import { shapes } from '@dicebear/collection';
+import { createAvatar } from '@dicebear/core';
+import { App, Checkbox, Tooltip, Typography, theme } from 'antd';
 import {
   BAIButton,
   BAIColumnType,
   BAIDeleteConfirmModal,
   BAIFetchKeyButton,
   BAIFlex,
   BAIGraphQLPropertyFilter,
+  BAILink,
   BAINameActionCell,
   BAISelectionLabel,
   BAITable,
@@ -62,7 +69,10 @@ const AdminModelCardListPage: React.FC = () => {
 
   const { t } = useTranslation();
   const { message } = App.useApp();
+  const { token } = theme.useToken();
   const { logger } = useBAILogger();
+  const { upsertNotification } = useSetBAINotification();
+  const { generateFolderPath } = useFolderExplorerOpener();
   const currentProject = useCurrentProjectValue();
   const [columnOverrides, setColumnOverrides] = useBAISettingUserState(
     'table_column_overrides.AdminModelCardListPage',
@@ -77,6 +87,7 @@ const AdminModelCardListPage: React.FC = () => {
   );
   const [deletingModelCard, setDeletingModelCard] =
     useState<ModelCardNode | null>(null);
+  const [alsoDeleteFolder, setAlsoDeleteFolder] = useState(false);
   const [isBulkDeleteOpen, setIsBulkDeleteOpen] = useState(false);
   const {
     baiPaginationOption,
@@ -144,6 +155,13 @@ const AdminModelCardListPage: React.FC = () => {
             node {
               id
               name
+              vfolderId
+              vfolder {
+                id
+                metadata {
+                  name
+                }
+              }
               domainName
               projectId
               accessLevel
@@ -185,6 +203,12 @@ const AdminModelCardListPage: React.FC = () => {
       }
     `);
 
+  const baiClient = useSuspendedBackendaiClient();
+  const deleteVFolderMutation = useTanMutation({
+    mutationFn: (vfolderId: string) =>
+      baiClient.vfolder.delete_by_id(vfolderId),
+  });
+
   const [commitBulkDeleteModelCards, isBulkDeleteInFlight] =
     useMutation<AdminModelCardListPageBulkDeleteMutation>(graphql`
       mutation AdminModelCardListPageBulkDeleteMutation(
@@ -428,6 +452,49 @@ const AdminModelCardListPage: React.FC = () => {
         description={t('adminModelCard.ConfirmDelete', {
           name: deletingModelCard?.name,
         })}
+        requireConfirmInput
+        extraContent={
+          <Tooltip title={t('adminModelCard.AlsoDeleteModelFolderTooltip')}>
+            <Checkbox
+              checked={alsoDeleteFolder}
+              onChange={(e) => setAlsoDeleteFolder(e.target.checked)}
+            >
+              {t('adminModelCard.AlsoDeleteModelFolder')}
+              {deletingModelCard?.vfolder && (
+                <span style={{ marginLeft: token.marginXXS }}>
+                  {'('}
+                  <img
+                    draggable={false}
+                    onDragStart={(e) => e.preventDefault()}
+                    style={{
+                      borderRadius: '0.25em',
+                      width: '1em',
+                      height: '1em',
+                      borderWidth: 0.5,
+                      borderStyle: 'solid',
+                      borderColor: token.colorBorder,
+                      userSelect: 'none',
+                      verticalAlign: 'middle',
+                      marginInline: token.marginXXS,
+                    }}
+                    src={createAvatar(shapes, {
+                      seed: deletingModelCard.vfolderId,
+                      shape3: [],
+                    }).toDataUri()}
+                    alt="VFolder Identicon"
+                  />
+                  <BAILink
+                    to={generateFolderPath(deletingModelCard.vfolderId)}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {deletingModelCard.vfolder.metadata.name}
+                  </BAILink>
+                  {')'}
+                </span>
+              )}
+            </Checkbox>
+          </Tooltip>
+        }
         onOk={() => {
           if (deletingModelCard) {
             return new Promise<void>((resolve, reject) => {
@@ -442,10 +509,56 @@ const AdminModelCardListPage: React.FC = () => {
                     reject();
                     return;
                   }
-                  message.success(t('adminModelCard.ModelCardDeleted'));
-                  setDeletingModelCard(null);
-                  updateFetchKey();
-                  resolve();
+
+                  const vfolderId = deletingModelCard.vfolderId;
+                  const folderName = deletingModelCard.vfolder?.metadata.name;
+                  const folderTrashSearch = new URLSearchParams({
+                    statusCategory: 'deleted',
+                    filter: folderName
+                      ? `name == "${folderName}"`
+                      : `id == "${vfolderId}"`,
+                  }).toString();
+
+                  const finish = (folderMoved: boolean) => {
+                    if (folderMoved) {
+                      upsertNotification({
+                        type: 'success',
+                        message: t('adminModelCard.ModelCardAndFolderDeleted'),
+                        to: {
+                          pathname: '/admin-data',
+                          search: folderTrashSearch,
+                        },
+                        toText: t('adminModelCard.GoToTrash'),
+                        open: true,
+                        duration: 4,
+                        extraData: null,
+                      });
+                    } else {
+                      message.success(
+                        t('adminModelCard.ModelCardDeletedFolderKept'),
+                      );
+                    }
+                    setDeletingModelCard(null);
+                    setAlsoDeleteFolder(false);
+                    updateFetchKey();
+                    resolve();
+                  };
+
+                  if (alsoDeleteFolder && vfolderId) {
+                    deleteVFolderMutation.mutate(vfolderId, {
+                      onSuccess: () => finish(true),
+                      onError: (error) => {
+                        logger.error(error);
+                        message.error(
+                          (error as Error)?.message ||
+                            t('general.ErrorOccurred'),
+                        );
+                        finish(false);
+                      },
+                    });
+                  } else {
+                    finish(false);
+                  }
                 },
                 onError: (error) => {
                   logger.error(error);
@@ -456,7 +569,10 @@ const AdminModelCardListPage: React.FC = () => {
             });
           }
         }}
-        onCancel={() => setDeletingModelCard(null)}
+        onCancel={() => {
+          setDeletingModelCard(null);
+          setAlsoDeleteFolder(false);
+        }}
       />
       <BAIDeleteConfirmModal
         open={isBulkDeleteOpen}
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
