feat: open alert on tag delete error

Author: jesperhodge

src/taxonomy/tag-list/TagListTable.tsx

@@ -137,6 +137,7 @@ const TagListTable = ({ taxonomyId, maxDepth }: TagListTableProps) => {
     draftError,
     createRowMutation: createTagMutation,
     updateRowMutation: updateTagMutation,
+    deleteRowMutation: deleteTagMutation,
     toast,
     setToast,
     setIsCreatingTopRow: setIsCreatingTopTag,

src/taxonomy/tag-list/hooks.ts

@@ -307,6 +307,7 @@ const useEditActions = ({
       });
     } catch (error) {
       const errorMessage = getErrorMessage(error);
+      setDraftError(errorMessage);
       setToast({ show: true, message: intl.formatMessage(messages.tagDeleteErrorMessage, { errorMessage }) });
     }
   };

src/taxonomy/tree-table/SaveErrorAlert.tsx

@@ -5,22 +5,24 @@ import {
 
 import { Info } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
+// @ts-ignore
 import './TableView.scss';
 import messages from './messages';
 
 interface SaveErrorAlertProps {
   draftError: string | undefined;
   isError: boolean | undefined;
   isUpdateError: boolean | undefined;
+  isDeleteError: boolean | undefined;
 }
-const SaveErrorAlert = ({ draftError, isError, isUpdateError }: SaveErrorAlertProps) => {
+const SaveErrorAlert = ({ draftError, isError, isUpdateError, isDeleteError }: SaveErrorAlertProps) => {
   const intl = useIntl();
-  const hasError: boolean = Boolean((isError || isUpdateError) && !!draftError);
+  const hasError: boolean = Boolean((isError || isUpdateError || isDeleteError) && !!draftError);
   const [alertOpen, setAlertOpen] = React.useState(hasError);
 
   useEffect(() => {
     setAlertOpen(hasError);
-  }, [hasError, isError, isUpdateError, draftError]);
+  }, [hasError, isError, isUpdateError, isDeleteError, draftError]);
 
   if (!alertOpen) { return null; }
 

src/taxonomy/tree-table/TableView.tsx

@@ -43,6 +43,7 @@ const TableView = ({
     draftError,
     createRowMutation,
     updateRowMutation,
+    deleteRowMutation,
     handleCreateRow,
     toast,
     setToast,
@@ -75,10 +76,11 @@ const TableView = ({
 
   const { isError } = createRowMutation;
   const { isError: isUpdateError } = updateRowMutation;
+  const { isError: isDeleteError } = deleteRowMutation;
 
   return (
     <>
-      <SaveErrorAlert draftError={draftError} isError={isError} isUpdateError={isUpdateError} />
+      <SaveErrorAlert draftError={draftError} isError={isError} isUpdateError={isUpdateError} isDeleteError={isDeleteError} />
       <Card className="tag-list-card">
         <Card.Section className="p-0">
           <div className="d-flex justify-content-end align-items-center p-4">

src/taxonomy/tree-table/TreeTableContext.tsx

@@ -29,6 +29,7 @@ export interface TreeTableContextValue {
   creatingParentId: RowId | null;
   setCreatingParentId: (id: RowId | null) => void;
   setDraftError: (error: string) => void;
+  deleteRowMutation: CreateRowMutationState;
   validate: (value: string, mode?: 'soft' | 'hard') => boolean;
   handleUpdateRow: (value: string, originalValue: string) => void;
   editingRowId: RowId | null;
@@ -53,6 +54,7 @@ export const TreeTableContext = createContext<TreeTableContextValue>({
   draftError: '',
   createRowMutation: {},
   updateRowMutation: {},
+  deleteRowMutation: {},
   toast: { show: false, message: '', variant: 'success' },
   setToast: () => {},
   setIsCreatingTopRow: () => {},