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

Author: agatha197

react/src/pages/AdminModelCardListPage.tsx

@@ -4,6 +4,7 @@
  */
 import type { AdminModelCardListPageBulkDeleteMutation } from '../__generated__/AdminModelCardListPageBulkDeleteMutation.graphql';
 import type { AdminModelCardListPageDeleteMutation } from '../__generated__/AdminModelCardListPageDeleteMutation.graphql';
+import type { AdminModelCardListPageDeleteVFolderMutation } from '../__generated__/AdminModelCardListPageDeleteVFolderMutation.graphql';
 import type {
   AdminModelCardListPageQuery,
   AdminModelCardListPageQuery$data,
@@ -16,7 +17,7 @@ import { useBAIPaginationOptionStateOnSearchParam } from '../hooks/reactPaginati
 import { useBAISettingUserState } from '../hooks/useBAISetting';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import { SettingOutlined } from '@ant-design/icons';
-import { App, Typography } from 'antd';
+import { App, Checkbox, Tooltip, Typography } from 'antd';
 import {
   BAIButton,
   BAIColumnType,
@@ -45,6 +46,7 @@ import { parseAsJson, parseAsString, useQueryStates } from 'nuqs';
 import React, { useDeferredValue, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery, useMutation } from 'react-relay';
+import { useNavigate } from 'react-router-dom';
 
 type ModelCardNode = NonNullableNodeOnEdges<
   AdminModelCardListPageQuery$data['adminModelCardsV2']
@@ -61,8 +63,9 @@ const AdminModelCardListPage: React.FC = () => {
   'use memo';
 
   const { t } = useTranslation();
-  const { message } = App.useApp();
+  const { message, notification } = App.useApp();
   const { logger } = useBAILogger();
+  const navigate = useNavigate();
   const currentProject = useCurrentProjectValue();
   const [columnOverrides, setColumnOverrides] = useBAISettingUserState(
     'table_column_overrides.AdminModelCardListPage',
@@ -77,6 +80,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 +148,7 @@ const AdminModelCardListPage: React.FC = () => {
             node {
               id
               name
+              vfolderId
               domainName
               projectId
               accessLevel
@@ -185,6 +190,15 @@ const AdminModelCardListPage: React.FC = () => {
       }
     `);
 
+  const [commitDeleteVFolder] =
+    useMutation<AdminModelCardListPageDeleteVFolderMutation>(graphql`
+      mutation AdminModelCardListPageDeleteVFolderMutation($vfolderId: UUID!) {
+        deleteVfolderV2(vfolderId: $vfolderId) {
+          id
+        }
+      }
+    `);
+
   const [commitBulkDeleteModelCards, isBulkDeleteInFlight] =
     useMutation<AdminModelCardListPageBulkDeleteMutation>(graphql`
       mutation AdminModelCardListPageBulkDeleteMutation(
@@ -428,6 +442,16 @@ const AdminModelCardListPage: React.FC = () => {
         description={t('adminModelCard.ConfirmDelete', {
           name: deletingModelCard?.name,
         })}
+        extraContent={
+          <Tooltip title={t('adminModelCard.AlsoDeleteModelFolderTooltip')}>
+            <Checkbox
+              checked={alsoDeleteFolder}
+              onChange={(e) => setAlsoDeleteFolder(e.target.checked)}
+            >
+              {t('adminModelCard.AlsoDeleteModelFolder')}
+            </Checkbox>
+          </Tooltip>
+        }
         onOk={() => {
           if (deletingModelCard) {
             return new Promise<void>((resolve, reject) => {
@@ -442,10 +466,66 @@ const AdminModelCardListPage: React.FC = () => {
                     reject();
                     return;
                   }
-                  message.success(t('adminModelCard.ModelCardDeleted'));
-                  setDeletingModelCard(null);
-                  updateFetchKey();
-                  resolve();
+
+                  const notificationKey = `model-card-deleted-${Date.now()}`;
+                  const goToTrashBtn = (
+                    <BAIButton
+                      size="small"
+                      onClick={() => {
+                        notification.destroy(notificationKey);
+                        navigate('/data?statusCategory=deleted');
+                      }}
+                    >
+                      {t('adminModelCard.GoToTrash')}
+                    </BAIButton>
+                  );
+
+                  if (alsoDeleteFolder && deletingModelCard.vfolderId) {
+                    commitDeleteVFolder({
+                      variables: { vfolderId: deletingModelCard.vfolderId },
+                      onCompleted: (_vfolderData, vfolderErrors) => {
+                        if (vfolderErrors && vfolderErrors.length > 0) {
+                          logger.error(vfolderErrors[0]);
+                          message.error(
+                            vfolderErrors[0]?.message ||
+                              t('general.ErrorOccurred'),
+                          );
+                        } else {
+                          notification.success({
+                            key: notificationKey,
+                            message: t(
+                              'adminModelCard.ModelCardAndFolderDeleted',
+                            ),
+                            btn: goToTrashBtn,
+                          });
+                        }
+                        setDeletingModelCard(null);
+                        setAlsoDeleteFolder(false);
+                        updateFetchKey();
+                        resolve();
+                      },
+                      onError: (error) => {
+                        logger.error(error);
+                        message.error(
+                          error?.message || t('general.ErrorOccurred'),
+                        );
+                        setDeletingModelCard(null);
+                        setAlsoDeleteFolder(false);
+                        updateFetchKey();
+                        resolve();
+                      },
+                    });
+                  } else {
+                    notification.success({
+                      key: notificationKey,
+                      message: t('adminModelCard.ModelCardDeletedFolderKept'),
+                      btn: goToTrashBtn,
+                    });
+                    setDeletingModelCard(null);
+                    setAlsoDeleteFolder(false);
+                    updateFetchKey();
+                    resolve();
+                  }
                 },
                 onError: (error) => {
                   logger.error(error);
@@ -456,7 +536,10 @@ const AdminModelCardListPage: React.FC = () => {
             });
           }
         }}
-        onCancel={() => setDeletingModelCard(null)}
+        onCancel={() => {
+          setDeletingModelCard(null);
+          setAlsoDeleteFolder(false);
+        }}
       />
       <BAIDeleteConfirmModal
         open={isBulkDeleteOpen}

resources/i18n/en.json

@@ -11,6 +11,8 @@
     "AccessLevelUpdated": "Access level has been updated.",
     "AddFramework": "Add framework",
     "AddLabel": "Add label",
+    "AlsoDeleteModelFolder": "Also delete the associated model folder",
+    "AlsoDeleteModelFolderTooltip": "The model folder will be moved to trash. You can permanently delete it from Data > Trash.",
     "Architecture": "Architecture",
     "ArchitectureTooltip": "The model architecture (e.g., Transformer, CNN, RNN).",
     "Author": "Author",
@@ -32,12 +34,15 @@
     "EnterProjectId": "Enter project ID",
     "Framework": "Framework",
     "FrameworkTooltip": "Frameworks used by the model (e.g., PyTorch, TensorFlow). Press Enter to add.",
+    "GoToTrash": "Go to Data > Trash",
     "Label": "Label",
     "LabelTooltip": "Custom tags for categorizing and filtering models. Press Enter to add.",
     "License": "License",
     "LicenseTooltip": "The license under which the model is distributed (e.g., MIT, Apache-2.0).",
+    "ModelCardAndFolderDeleted": "Model card and folder have been moved to trash.",
     "ModelCardCreated": "Model card has been created.",
     "ModelCardDeleted": "Model card has been deleted.",
+    "ModelCardDeletedFolderKept": "Model card has been deleted. The model folder was not deleted.",
     "ModelCardUpdated": "Model card has been updated.",
     "ModelCards": "Model Cards",
     "ModelStorageFolder": "Model Storage Folder",