feat: delete tag (#3035)

* feat: delete tag

* fix: lint

* fix: cleanup from comments on PR #3025

* fix: implement disableTagActions logic

* fix: remove unused variable

* fix: fix unsafe optional chaining lint

* feat: Add delete modal to delete functionality

* fix: code coverage

* fix: lint formatting

---------

Co-authored-by: Jesper Hodge <[email protected]>

Author: mgwozdz-unicon

src/taxonomy/data/api.ts

@@ -99,6 +99,7 @@ export const apiUrls = {
   tagsPlanImport: (taxonomyId: number) => makeUrl(`${taxonomyId}/tags/import/plan/`),
   createTag: (taxonomyId: number) => makeUrl(`${taxonomyId}/tags/`),
   updateTag: (taxonomyId: number) => makeUrl(`${taxonomyId}/tags/`),
+  deleteTag: (taxonomyId: number) => makeUrl(`${taxonomyId}/tags/`),
 } satisfies Record<string, (...args: any[]) => string>;
 
 /**

src/taxonomy/data/apiHooks.ts

@@ -269,3 +269,23 @@ export const useUpdateTag = (taxonomyId: number) => {
     },
   });
 };
+
+export const useDeleteTag = (taxonomyId: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ value, withSubtags }: { value: string; withSubtags: boolean; }) => {
+      const body = { tags: [value], with_subtags: withSubtags };
+      await getAuthenticatedHttpClient().delete(apiUrls.deleteTag(taxonomyId), {
+        data: body,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: taxonomyQueryKeys.taxonomyTagList(taxonomyId),
+      });
+      // In the metadata, 'tagsCount' (and possibly other fields) will have changed:
+      queryClient.invalidateQueries({ queryKey: taxonomyQueryKeys.taxonomyMetadata(taxonomyId) });
+    },
+  });
+};

src/taxonomy/tag-list/Actions.tsx

@@ -0,0 +1,140 @@
+import {
+  Icon,
+  IconButton,
+  IconButtonWithTooltip,
+  Dropdown,
+} from '@openedx/paragon';
+import {
+  AddCircle,
+  MoreVert,
+} from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import type { Row } from '@tanstack/react-table';
+
+import type {
+  RowId,
+  TreeRowData,
+} from '@src/taxonomy/tree-table/types';
+import type { TagListRowData } from './types';
+import messages from './messages';
+
+interface ActionsHeaderProps {
+  onStartDraft: () => void;
+  setDraftError: (error: string) => void;
+  setIsCreatingTopRow: (isCreating: boolean) => void;
+  setEditingRowId: (id: RowId | null) => void;
+  setActiveActionMenuRowId: (id: RowId | null) => void;
+  hasOpenDraft: boolean;
+  disableTagActions: boolean;
+  draftInProgressHintId: string;
+  canAddTag: boolean;
+}
+
+const ActionsHeader = ({
+  onStartDraft,
+  setDraftError,
+  setIsCreatingTopRow,
+  setEditingRowId,
+  setActiveActionMenuRowId,
+  hasOpenDraft,
+  disableTagActions,
+  canAddTag,
+  draftInProgressHintId,
+}: ActionsHeaderProps) => {
+  const intl = useIntl();
+  return (
+    <div className="d-flex justify-content-end">
+      <IconButtonWithTooltip
+        tooltipPlacement="top"
+        tooltipContent={<div>{intl.formatMessage(messages.createNewTagTooltip)}</div>}
+        src={AddCircle}
+        alt={intl.formatMessage(messages.createTagButtonLabel)}
+        size="inline"
+        onClick={() => {
+          onStartDraft();
+          setDraftError('');
+          setIsCreatingTopRow(true);
+          setEditingRowId(null);
+          setActiveActionMenuRowId(null);
+        }}
+        disabled={disableTagActions || !canAddTag}
+        aria-describedby={hasOpenDraft ? draftInProgressHintId : undefined}
+      />
+    </div>
+  );
+};
+
+interface ActionsMenuProps {
+  rowData: TagListRowData;
+  startSubtagDraft: () => void;
+  disableAddSubtag: boolean;
+  startEditRow: () => void;
+  disableEditRow: boolean;
+  reachedMaxDepth: (row: Row<TreeRowData>) => boolean;
+  startDeleteRow: (row: Row<TreeRowData>) => void;
+  disableDeleteRow: boolean;
+  row: Row<TreeRowData>;
+}
+
+const ActionsMenu = ({
+  rowData,
+  row,
+  startSubtagDraft,
+  disableAddSubtag,
+  startEditRow,
+  disableEditRow,
+  reachedMaxDepth,
+  startDeleteRow,
+  disableDeleteRow,
+}: ActionsMenuProps) => {
+  const intl = useIntl();
+
+  const deleteRowMenuItem = (
+    <Dropdown.Item
+      onClick={() => startDeleteRow(row)}
+      disabled={disableDeleteRow}
+    >
+      {intl.formatMessage(messages.deleteTag)}
+    </Dropdown.Item>
+  );
+
+  const editRowMenuItem = (
+    <Dropdown.Item
+      onClick={startEditRow}
+      disabled={disableEditRow}
+    >
+      {intl.formatMessage(messages.renameTag)}
+    </Dropdown.Item>
+  );
+
+  return (
+    <Dropdown>
+      <Dropdown.Toggle
+        id={`dropdown-toggle-for-tag-${rowData.id}`}
+        as={IconButton}
+        src={MoreVert}
+        iconAs={Icon}
+        variant="primary"
+        aria-label={intl.formatMessage(messages.moreActionsForTag, { tagName: rowData.value })}
+        size="sm"
+      />
+      <Dropdown.Menu>
+        <Dropdown.Item
+          onClick={startSubtagDraft}
+          disabled={reachedMaxDepth(row) || disableAddSubtag}
+        >
+          {intl.formatMessage(messages.addSubtag)}
+        </Dropdown.Item>
+        {editRowMenuItem}
+        {deleteRowMenuItem}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+const Actions = {
+  Header: ActionsHeader,
+  Menu: ActionsMenu,
+};
+
+export default Actions;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 
 import DeleteModal from './DeleteModal';
 
@@ -94,7 +94,7 @@ describe('DeleteModal', () => {
   it('calls handleDeleteRow with the dialog row context and then closes and clears the dialog state on confirm', async () => {
     const user = userEvent.setup();
     const row = createRow(leafRowData);
-    const handleDeleteRow = jest.fn();
+    const handleDeleteRow = jest.fn().mockResolvedValue(undefined);
     const setIsOpen = jest.fn();
     const setRow = jest.fn();
 
@@ -108,9 +108,11 @@ describe('DeleteModal', () => {
     await user.type(screen.getByRole('textbox'), 'DELETE');
     await user.click(screen.getByRole('button', { name: 'Delete Tag' }));
 
-    expect(handleDeleteRow).toHaveBeenCalledWith(row);
-    expect(setIsOpen).toHaveBeenCalledWith(false);
-    expect(setRow).toHaveBeenCalledWith(null);
+    await waitFor(() => {
+      expect(handleDeleteRow).toHaveBeenCalledWith(row);
+      expect(setIsOpen).toHaveBeenCalledWith(false);
+      expect(setRow).toHaveBeenCalledWith(null);
+    });
   });
 
   it('closes and clears the dialog context on cancel without invoking deletion', async () => {

src/taxonomy/tag-list/DeleteModal.tsx

@@ -25,8 +25,8 @@ const DeleteModal = ({
 }: DeleteModalProps) => {
   const intl = useIntl();
 
-  const handleConfirm = (row: Row<TreeRowData>) => {
-    handleDeleteRow(row);
+  const handleConfirm = async (row: Row<TreeRowData>) => {
+    await handleDeleteRow(row);
     setIsOpen(false);
     setRow(null);
   };