feat: rename tags in the taxonomy editor (openedx#2939)

Author: jesperhodge

src/taxonomy/data/api.ts

@@ -91,6 +91,7 @@ export const apiUrls = {
   /** URL to plan (preview what would happen) a taxonomy import */
   tagsPlanImport: (taxonomyId: number) => makeUrl(`${taxonomyId}/tags/import/plan/`),
   createTag: (taxonomyId: number) => makeUrl(`${taxonomyId}/tags/`),
+  updateTag: (taxonomyId: number) => makeUrl(`${taxonomyId}/tags/`),
 } satisfies Record<string, (...args: any[]) => string>;
 
 /**

src/taxonomy/data/apiHooks.ts

@@ -240,3 +240,27 @@ export const useCreateTag = (taxonomyId: number) => {
     },
   });
 };
+
+export const useUpdateTag = (taxonomyId: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ value, originalValue }: { value: string, originalValue: string }) => {
+      try {
+        await getAuthenticatedHttpClient().patch(
+          apiUrls.updateTag(taxonomyId),
+          { tag: originalValue, updated_tag_value: value },
+        );
+      } catch (err) {
+        throw new Error(getApiErrorMessage(err));
+      }
+    },
+    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/data/types.ts

@@ -58,6 +58,7 @@ export interface TagListData {
   next: string;
   numPages: number;
   previous: string;
+  canAddTag?: boolean;
   results: TagData[];
   start: number;
 }

src/taxonomy/tag-list/TagListTable.test.jsx

@@ -4,7 +4,7 @@ import React, {
   useEffect,
 } from 'react';
 import type { PaginationState } from '@tanstack/react-table';
-import { useTagListData, useCreateTag } from '../data/apiHooks';
+import { useTagListData, useCreateTag, useUpdateTag } from '../data/apiHooks';
 import { TagTree } from './tagTree';
 import { TableView } from '../tree-table';
 import type {
@@ -78,6 +78,7 @@ const TagListTable = ({ taxonomyId, maxDepth }: TagListTableProps) => {
     enabled: tableMode === TABLE_MODES.VIEW,
   });
   const createTagMutation = useCreateTag(taxonomyId);
+  const updateTagMutation = useUpdateTag(taxonomyId);
   const pageCount = tagList?.numPages ?? -1;
 
   // TODO: to make this more readable, introduce a React context for the TagListTable instead of passing props.
@@ -88,6 +89,7 @@ const TagListTable = ({ taxonomyId, maxDepth }: TagListTableProps) => {
     setTagTree,
     setDraftError,
     createTagMutation,
+    updateTagMutation,
     enterPreviewMode,
     setToast,
     setIsCreatingTopTag,
@@ -105,19 +107,19 @@ const TagListTable = ({ taxonomyId, maxDepth }: TagListTableProps) => {
       onStartDraft: enterDraftMode,
       setActiveActionMenuRowId,
       hasOpenDraft,
+      canAddTag: tagList?.canAddTag !== false,
       draftError,
       setDraftError,
       isSavingDraft: createTagMutation.isPending,
       maxDepth,
-      creatingParentId,
     }),
     [
       isCreatingTopTag,
-      editingRowId,
       tableMode,
       activeActionMenuRowId,
       hasOpenDraft,
       creatingParentId,
+      tagList?.canAddTag,
       draftError,
       createTagMutation.isPending,
       maxDepth,
@@ -155,7 +157,9 @@ const TagListTable = ({ taxonomyId, maxDepth }: TagListTableProps) => {
         isCreatingTopRow: isCreatingTopTag,
         draftError,
         createRowMutation: createTagMutation,
+        updateRowMutation: updateTagMutation,
         handleCreateRow: handleCreateTag,
+        handleUpdateRow: handleUpdateTag,
         toast,
         setToast,
         setIsCreatingTopRow: setIsCreatingTopTag,
@@ -164,6 +168,8 @@ const TagListTable = ({ taxonomyId, maxDepth }: TagListTableProps) => {
         setCreatingParentId,
         setDraftError,
         validate,
+        editingRowId,
+        setEditingRowId,
       }}
     />
   );

src/taxonomy/tag-list/TagListTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { act, renderHook } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 
 import { TagTree } from './tagTree';
 import { useEditActions, useTableModes } from './hooks';
@@ -44,6 +44,8 @@ describe('useTableModes', () => {
 describe('useEditActions', () => {
   const buildActions = (overrides = {}) => {
     const createTagMutation = { mutateAsync: jest.fn() };
+    // mock updateTagMutation to have a function `mutateAsync` that returns a resolved promise
+    const updateTagMutation = { mutateAsync: jest.fn() };
     const setTagTree = jest.fn();
     const setDraftError = jest.fn();
     const enterPreviewMode = jest.fn();
@@ -63,6 +65,7 @@ describe('useEditActions', () => {
       setCreatingParentId,
       exitDraftWithoutSave,
       setEditingRowId,
+      updateTagMutation: updateTagMutation as any,
       ...(overrides as any),
     };
 
@@ -139,7 +142,9 @@ describe('useEditActions', () => {
       await actions.handleUpdateTag('updated', 'original');
     });
 
-    expect(enterPreviewMode).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(enterPreviewMode).toHaveBeenCalled();
+    });
     expect(setToast).toHaveBeenCalledWith({
       show: true,
       message: 'Tag "updated" updated successfully',

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

@@ -1,7 +1,7 @@
 import { useReducer } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { useCreateTag } from '../data/apiHooks';
+import { useCreateTag, useUpdateTag } from '../data/apiHooks';
 import { TagTree } from './tagTree';
 import { TagListTableError } from './errors';
 import type { RowId } from '../tree-table/types';
@@ -45,6 +45,7 @@ interface UseEditActionsParams {
   setCreatingParentId: React.Dispatch<React.SetStateAction<RowId | null>>;
   exitDraftWithoutSave: () => void;
   setEditingRowId: React.Dispatch<React.SetStateAction<RowId | null>>;
+  updateTagMutation: ReturnType<typeof useUpdateTag>;
 }
 
 const getInlineValidationMessage = (value: string, intl: ReturnType<typeof useIntl>): string => {
@@ -111,9 +112,20 @@ const useEditActions = ({
   setToast,
   setIsCreatingTopTag,
   setCreatingParentId,
+  exitDraftWithoutSave,
   setEditingRowId,
+  updateTagMutation,
 }: UseEditActionsParams) => {
   const intl = useIntl();
+
+  const updateTableAfterRename = (oldValue: string, newValue: string) => {
+    setTagTree((currentTagTree) => {
+      const nextTree = currentTagTree || new TagTree([]);
+      nextTree.editTagValue(oldValue, newValue);
+      return nextTree;
+    });
+  };
+
   const updateTableWithoutDataReload = (value: string, parentTagValue: string | null = null) => {
     setTagTree((currentTagTree) => {
       const nextTree = currentTagTree || new TagTree([]);
@@ -178,14 +190,31 @@ const useEditActions = ({
 
   const handleUpdateTag = async (value: string, originalValue: string) => {
     const trimmed = value.trim();
-    if (trimmed && trimmed !== originalValue) {
+    if (!validate(trimmed, 'soft')) {
+      return;
+    }
+
+    if (trimmed === originalValue) {
+      setEditingRowId(null);
+      exitDraftWithoutSave();
+      return;
+    }
+
+    try {
+      setDraftError('');
+      await updateTagMutation.mutateAsync({ value: trimmed, originalValue });
+      updateTableAfterRename(originalValue, trimmed);
       enterPreviewMode();
+      setEditingRowId(null);
       setToast({
         show: true,
         message: intl.formatMessage(messages.tagUpdateSuccessMessage, { name: trimmed }),
       });
+    } catch (error) {
+      const message = intl.formatMessage(messages.tagUpdateErrorMessage, { errorMessage: (error as Error)?.message });
+      setDraftError((error as Error)?.message || intl.formatMessage(messages.tagUpdateErrorMessage, { errorMessage: '' }));
+      setToast({ show: true, message });
     }
-    setEditingRowId(null);
   };
 
   return {

src/taxonomy/tag-list/hooks.ts

@@ -57,6 +57,14 @@ const messages = defineMessages({
     id: 'course-authoring.tag-list.hide-subtags.button-label',
     defaultMessage: 'Hide Subtags',
   },
+  tagUpdateErrorMessage: {
+    id: 'course-authoring.tag-list.update-error',
+    defaultMessage: 'Error updating tag: {errorMessage}',
+  },
+  renameTag: {
+    id: 'course-authoring.tag-list.rename-tag',
+    defaultMessage: 'Rename',
+  },
 });
 
 export default messages;