fix: implement disableTagActions logic

Author: mgwozdz-unicon

src/taxonomy/tag-list/Actions.tsx

@@ -25,6 +25,7 @@ interface ActionsHeaderProps {
   setEditingRowId: (id: RowId | null) => void;
   setActiveActionMenuRowId: (id: RowId | null) => void;
   hasOpenDraft: boolean;
+  disableTagActions: boolean;
   draftInProgressHintId: string;
   canAddTag: boolean;
 }
@@ -36,6 +37,7 @@ const ActionsHeader = ({
   setEditingRowId,
   setActiveActionMenuRowId,
   hasOpenDraft,
+  disableTagActions,
   canAddTag,
   draftInProgressHintId,
 }: ActionsHeaderProps) => {
@@ -55,7 +57,7 @@ const ActionsHeader = ({
           setEditingRowId(null);
           setActiveActionMenuRowId(null);
         }}
-        disabled={hasOpenDraft || !canAddTag}
+        disabled={disableTagActions || !canAddTag}
         aria-describedby={hasOpenDraft ? draftInProgressHintId : undefined}
       />
     </div>

src/taxonomy/tag-list/TagListTable.tsx

@@ -83,6 +83,7 @@ const TagListTable = ({ taxonomyId, maxDepth }: TagListTableProps) => {
   const createTagMutation = useCreateTag(taxonomyId);
   const updateTagMutation = useUpdateTag(taxonomyId);
   const deleteTagMutation = useDeleteTag(taxonomyId);
+  const disableTagActions = hasOpenDraft || deleteTagMutation.isPending;
   const pageCount = tagList?.numPages ?? -1;
   const canAddTag = tagList?.canAddTag !== false;
 
@@ -143,6 +144,7 @@ const TagListTable = ({ taxonomyId, maxDepth }: TagListTableProps) => {
     onStartDraft: enterDraftMode,
     setActiveActionMenuRowId,
     hasOpenDraft,
+    disableTagActions,
     canAddTag,
     maxDepth,
   };

src/taxonomy/tag-list/hooks.test.tsx

@@ -42,6 +42,10 @@ describe('useTableModes', () => {
 });
 
 describe('useEditActions', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   const buildActions = (overrides = {}) => {
     const createTagMutation = { mutateAsync: jest.fn() };
     const updateTagMutation = { mutateAsync: jest.fn() };
@@ -177,4 +181,69 @@ describe('useEditActions', () => {
       message: 'Error creating tag: server failed',
     });
   });
+
+  it('enters view mode only after a delete request succeeds', async () => {
+    const {
+      actions,
+      deleteTagMutation,
+      enterViewMode,
+      setToast,
+    } = buildActions();
+    deleteTagMutation.mutateAsync.mockResolvedValue(undefined);
+    jest.spyOn(window, 'confirm').mockReturnValue(true);
+
+    actions.startDeleteRow({
+      original: {
+        id: 1,
+        value: 'tag to delete',
+        depth: 0,
+        childCount: 0,
+      },
+    } as any);
+
+    await waitFor(() => {
+      expect(enterViewMode).toHaveBeenCalled();
+    });
+    expect(deleteTagMutation.mutateAsync).toHaveBeenCalledWith({
+      value: 'tag to delete',
+      withSubtags: false,
+    });
+    expect(deleteTagMutation.mutateAsync.mock.invocationCallOrder[0]).toBeLessThan(
+      enterViewMode.mock.invocationCallOrder[0],
+    );
+    expect(setToast).toHaveBeenCalledWith({
+      show: true,
+      message: '1 tag(s) deleted. This change will be applied across all tagged content.',
+    });
+  });
+
+  it('does not enter view mode when a delete request fails', async () => {
+    const {
+      actions,
+      deleteTagMutation,
+      enterViewMode,
+      setDraftError,
+      setToast,
+    } = buildActions();
+    deleteTagMutation.mutateAsync.mockRejectedValue(new Error('server failed'));
+    jest.spyOn(window, 'confirm').mockReturnValue(true);
+
+    actions.startDeleteRow({
+      original: {
+        id: 1,
+        value: 'tag to delete',
+        depth: 0,
+        childCount: 0,
+      },
+    } as any);
+
+    await waitFor(() => {
+      expect(setDraftError).toHaveBeenCalledWith('server failed');
+    });
+    expect(enterViewMode).not.toHaveBeenCalled();
+    expect(setToast).toHaveBeenCalledWith({
+      show: true,
+      message: 'Error deleting tag: server failed',
+    });
+  });
 });

src/taxonomy/tag-list/hooks.ts

@@ -296,10 +296,10 @@ const useEditActions = ({
     // the backend rejects the request instead of deleting the parent alone.
     const shouldDeleteSubtags = count > 1;
     try {
+      await deleteTagMutation.mutateAsync({ value: rowData.value, withSubtags: shouldDeleteSubtags });
       // In view mode, the table reloads on change, reflecting the deletion
       // without needing to manually update the table state
       enterViewMode();
-      await deleteTagMutation.mutateAsync({ value: rowData.value, withSubtags: shouldDeleteSubtags });
       setToast({
         show: true,
         message: intl.formatMessage(messages.tagsDeleteSuccessMessage, { count }),

src/taxonomy/tag-list/tagColumns.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { getColumns } from './tagColumns';
+
+const baseArgs = (overrides = {}) => ({
+  setIsCreatingTopRow: jest.fn(),
+  setEditingRowId: jest.fn(),
+  onStartDraft: jest.fn(),
+  setActiveActionMenuRowId: jest.fn(),
+  hasOpenDraft: false,
+  disableTagActions: false,
+  canAddTag: true,
+  setDraftError: jest.fn(),
+  maxDepth: 3,
+  startSubtagDraft: jest.fn(),
+  startEditRow: jest.fn(),
+  startDeleteRow: jest.fn(),
+  ...overrides,
+});
+
+const getActionsColumn = (overrides = {}) => {
+  const columns = getColumns(baseArgs(overrides));
+  return columns.find(column => column.id === 'actions');
+};
+
+describe('tagColumns', () => {
+  it('disables create, edit, and delete actions when tag actions are disabled', () => {
+    const actionsColumn = getActionsColumn({ disableTagActions: true });
+    const headerElement = (actionsColumn?.header as any)();
+    const cellElement = (actionsColumn?.cell as any)({
+      row: {
+        depth: 0,
+        original: {
+          id: 1,
+          value: 'root',
+          depth: 0,
+          childCount: 0,
+          canChangeTag: true,
+          canDeleteTag: true,
+        },
+      },
+    });
+    const menuElement = React.Children.only(cellElement.props.children) as React.ReactElement;
+
+    expect(headerElement.props.disableTagActions).toBe(true);
+    expect(menuElement.props.disableAddSubtag).toBe(true);
+    expect(menuElement.props.disableEditRow).toBe(true);
+    expect(menuElement.props.disableDeleteRow).toBe(true);
+  });
+});

src/taxonomy/tag-list/tagColumns.tsx

@@ -20,6 +20,7 @@ interface GetColumnsArgs {
   onStartDraft: () => void;
   setActiveActionMenuRowId: (id: RowId | null) => void;
   hasOpenDraft: boolean;
+  disableTagActions: boolean;
   canAddTag: boolean;
   setDraftError: (error: string) => void;
   maxDepth: number;
@@ -37,6 +38,7 @@ function getColumns({
   startDeleteRow,
   setActiveActionMenuRowId,
   hasOpenDraft,
+  disableTagActions,
   canAddTag,
   setDraftError,
   maxDepth,
@@ -76,6 +78,7 @@ function getColumns({
           setEditingRowId={setEditingRowId}
           setActiveActionMenuRowId={setActiveActionMenuRowId}
           hasOpenDraft={hasOpenDraft}
+          disableTagActions={disableTagActions}
           draftInProgressHintId={draftInProgressHintId}
           canAddTag={canAddTag}
         />
@@ -87,9 +90,9 @@ function getColumns({
           return <div className="d-flex gap-2" />;
         }
 
-        const disableAddSubtag = hasOpenDraft || !canAddTag;
-        const disableEditRow = hasOpenDraft || rowData.canChangeTag === false;
-        const disableDeleteRow = hasOpenDraft || rowData.canDeleteTag === false;
+        const disableAddSubtag = disableTagActions || !canAddTag;
+        const disableEditRow = disableTagActions || rowData.canChangeTag === false;
+        const disableDeleteRow = disableTagActions || rowData.canDeleteTag === false;
 
         return (
           <div className="d-flex align-items-center justify-content-end gap-2">