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,
@@ -13,17 +14,21 @@ import type {
 import AdminModelCardSettingModal from '../components/AdminModelCardSettingModal';
 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 +67,9 @@ const AdminModelCardListPage: React.FC = () => {
 
   const { t } = useTranslation();
   const { message } = App.useApp();
+  const { token } = theme.useToken();
   const { logger } = useBAILogger();
+  const { upsertNotification } = useSetBAINotification();
   const currentProject = useCurrentProjectValue();
   const [columnOverrides, setColumnOverrides] = useBAISettingUserState(
     'table_column_overrides.AdminModelCardListPage',
@@ -77,6 +84,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 +152,13 @@ const AdminModelCardListPage: React.FC = () => {
             node {
               id
               name
+              vfolderId
+              vfolder {
+                id
+                metadata {
+                  name
+                }
+              }
               domainName
               projectId
               accessLevel
@@ -185,6 +200,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 +452,51 @@ const AdminModelCardListPage: React.FC = () => {
         description={t('adminModelCard.ConfirmDelete', {
           name: deletingModelCard?.name,
         })}
+        extraContent={
+          <BAIFlex direction="column" gap={'xs'}>
+            {deletingModelCard?.vfolder && (
+              <BAIFlex align="center" gap={'xs'}>
+                <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',
+                    flexShrink: 0,
+                  }}
+                  src={createAvatar(shapes, {
+                    seed: deletingModelCard.vfolderId,
+                    shape3: [],
+                  }).toDataUri()}
+                  alt="VFolder Identicon"
+                />
+                <BAILink
+                  to={{
+                    pathname: '/data',
+                    search: new URLSearchParams({
+                      folder: deletingModelCard.vfolderId,
+                    }).toString(),
+                  }}
+                >
+                  {deletingModelCard.vfolder.metadata.name}
+                </BAILink>
+              </BAIFlex>
+            )}
+            <Tooltip title={t('adminModelCard.AlsoDeleteModelFolderTooltip')}>
+              <Checkbox
+                checked={alsoDeleteFolder}
+                onChange={(e) => setAlsoDeleteFolder(e.target.checked)}
+              >
+                {t('adminModelCard.AlsoDeleteModelFolder')}
+              </Checkbox>
+            </Tooltip>
+          </BAIFlex>
+        }
         onOk={() => {
           if (deletingModelCard) {
             return new Promise<void>((resolve, reject) => {
@@ -442,10 +511,101 @@ const AdminModelCardListPage: React.FC = () => {
                     reject();
                     return;
                   }
-                  message.success(t('adminModelCard.ModelCardDeleted'));
-                  setDeletingModelCard(null);
-                  updateFetchKey();
-                  resolve();
+
+                  const vfolderId = deletingModelCard.vfolderId;
+                  const folderTrashSearch = new URLSearchParams({
+                    statusCategory: 'deleted',
+                    filter: `row_id == "${vfolderId}"`,
+                  }).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 +616,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",