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

Author: agatha197

react/src/pages/AdminModelCardListPage.tsx

@@ -4,26 +4,32 @@
  */
 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,
   ModelCardV2Filter,
   ModelCardV2OrderBy,
 } from '../__generated__/AdminModelCardListPageQuery.graphql';
 import AdminModelCardSettingModal from '../components/AdminModelCardSettingModal';
+import { useFolderExplorerOpener } from '../components/FolderExplorerOpener';
 import { convertToOrderBy, handleRowSelectionChange } from '../helper';
 import { useBAIPaginationOptionStateOnSearchParam } from '../hooks/reactPaginationQueryOptions';
+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 +68,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 +86,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 +154,13 @@ const AdminModelCardListPage: React.FC = () => {
             node {
               id
               name
+              vfolderId
+              vfolder {
+                id
+                metadata {
+                  name
+                }
+              }
               domainName
               projectId
               accessLevel
@@ -185,6 +202,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 +454,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 +511,104 @@ 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',
+                    ...(folderName
+                      ? { filter: `name == "${folderName}"` }
+                      : {}),
+                  }).toString();
+
+                  if (alsoDeleteFolder && vfolderId) {
+                    commitDeleteVFolder({
+                      variables: { vfolderId },
+                      onCompleted: (_vfolderData, vfolderErrors) => {
+                        if (vfolderErrors && vfolderErrors.length > 0) {
+                          logger.error(vfolderErrors[0]);
+                          message.error(
+                            vfolderErrors[0]?.message ||
+                              t('general.ErrorOccurred'),
+                          );
+                          upsertNotification({
+                            type: 'success',
+                            message: t(
+                              'adminModelCard.ModelCardDeletedFolderKept',
+                            ),
+                            to: {
+                              pathname: '/data',
+                              search: 'statusCategory=deleted',
+                            },
+                            toText: t('adminModelCard.GoToTrash'),
+                            open: true,
+                            duration: 4,
+                            extraData: null,
+                          });
+                        } else {
+                          upsertNotification({
+                            type: 'success',
+                            message: t(
+                              'adminModelCard.ModelCardAndFolderDeleted',
+                            ),
+                            to: {
+                              pathname: '/data',
+                              search: folderTrashSearch,
+                            },
+                            toText: t('adminModelCard.GoToTrash'),
+                            open: true,
+                            duration: 4,
+                            extraData: null,
+                          });
+                        }
+                        setDeletingModelCard(null);
+                        setAlsoDeleteFolder(false);
+                        updateFetchKey();
+                        resolve();
+                      },
+                      onError: (error) => {
+                        logger.error(error);
+                        message.error(
+                          error?.message || t('general.ErrorOccurred'),
+                        );
+                        upsertNotification({
+                          type: 'success',
+                          message: t(
+                            'adminModelCard.ModelCardDeletedFolderKept',
+                          ),
+                          to: {
+                            pathname: '/data',
+                            search: 'statusCategory=deleted',
+                          },
+                          toText: t('adminModelCard.GoToTrash'),
+                          open: true,
+                          duration: 4,
+                          extraData: null,
+                        });
+                        setDeletingModelCard(null);
+                        setAlsoDeleteFolder(false);
+                        updateFetchKey();
+                        resolve();
+                      },
+                    });
+                  } else {
+                    upsertNotification({
+                      type: 'success',
+                      message: t('adminModelCard.ModelCardDeletedFolderKept'),
+                      to: {
+                        pathname: '/data',
+                        search: 'statusCategory=deleted',
+                      },
+                      toText: t('adminModelCard.GoToTrash'),
+                      open: true,
+                      duration: 4,
+                      extraData: null,
+                    });
+                    setDeletingModelCard(null);
+                    setAlsoDeleteFolder(false);
+                    updateFetchKey();
+                    resolve();
+                  }
                 },
                 onError: (error) => {
                   logger.error(error);
@@ -456,7 +619,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",