fix: taxonomy alignment and error message

Author: jesperhodge

src/messages.ts

@@ -10,6 +10,10 @@ const messages = defineMessages({
     id: 'authoring.alert.support.text',
     defaultMessage: 'Support Page',
   },
+  unknownError: {
+    id: 'authoring.alert.error.unknown',
+    defaultMessage: 'Unknown error',
+  },
 });
 
 export default messages;

src/taxonomy/data/apiHooks.ts

@@ -229,18 +229,13 @@ export const useSubTags = (taxonomyId: number, parentTagValue: string) =>
 
 export const useCreateTag = (taxonomyId: number) => {
   const queryClient = useQueryClient();
-  const intl = useIntl();
 
   return useMutation({
-    mutationFn: async ({ value, parentTagValue }: { value: string; parentTagValue?: string; }) => {
-      try {
-        await getAuthenticatedHttpClient().post(
-          apiUrls.createTag(taxonomyId),
-          { tag: value, parent_tag_value: parentTagValue },
-        );
-      } catch (err) {
-        throw new Error(getApiErrorMessage(err, intl));
-      }
+    mutationFn: async ({ value, parentTagValue }: { value: string, parentTagValue?: string }) => {
+      await getAuthenticatedHttpClient().post(
+        apiUrls.createTag(taxonomyId),
+        { tag: value, parent_tag_value: parentTagValue },
+      );
     },
     onSuccess: () => {
       queryClient.invalidateQueries({
@@ -260,15 +255,11 @@ 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));
-      }
+    mutationFn: async ({ value, originalValue }: { value: string, originalValue: string }) => {
+      await getAuthenticatedHttpClient().patch(
+        apiUrls.updateTag(taxonomyId),
+        { tag: originalValue, updated_tag_value: value },
+      );
     },
     onSuccess: () => {
       queryClient.invalidateQueries({

src/taxonomy/tag-list/UsageCountDisplay.tsx

@@ -0,0 +1,25 @@
+import {
+  Bubble,
+} from '@openedx/paragon';
+import type { Row } from '@tanstack/react-table';
+import type {
+  TreeRowData,
+} from '@src/taxonomy/tree-table/types';
+import { TagListRowData } from './types';
+
+const asTagListRowData = (row: Row<TreeRowData>): TagListRowData => (
+  row.original as unknown as TagListRowData
+);
+
+const UsageCountDisplay = ({ row }: { row: Row<TreeRowData> }) => {
+  const count = asTagListRowData(row).usageCount ?? 0;
+  return (
+    count > 0 && (
+      <Bubble expandable>
+        {count}
+      </Bubble>
+    )
+  );
+};
+
+export default UsageCountDisplay;

src/taxonomy/tag-list/hooks.ts

@@ -167,6 +167,26 @@ const useEditActions = ({
     return true;
   };
 
+  const getErrorMessage = (error: any): string => {
+    let errorMessage: string = '';
+    if (error.name === 'AxiosError') {
+      const responseData = error.response?.data;
+      const tagError = Object.entries(responseData)?.find((errItem: [string, unknown]) => (
+        ['tag', 'value', 'updated_tag_value'].includes(errItem[0].toLowerCase())
+      ));
+
+      const errorMessages = tagError ? tagError[1] : (
+        (error as Error).message || intl.formatMessage(globalMessages.unknownError)
+      );
+      errorMessage = Array.isArray(errorMessages) ? errorMessages.join('; ') : String(errorMessages);
+    } else {
+      errorMessage = (error as Error).message || intl.formatMessage(globalMessages.unknownError);
+    }
+
+    errorMessage = errorMessage.replace(/\.$/, ''); // Remove trailing period for better message formatting
+    return errorMessage;
+  };
+
   const handleCreateTag = async (value: string, parentTagValue?: string) => {
     const trimmed = value.trim();
 
@@ -186,11 +206,9 @@ const useEditActions = ({
       setIsCreatingTopTag(false);
       setCreatingParentId(null);
     } catch (error) {
-      const message = intl.formatMessage(messages.tagCreationErrorMessage, { errorMessage: (error as Error)?.message });
-      setDraftError(
-        (error as Error)?.message || intl.formatMessage(messages.tagCreationErrorMessage, { errorMessage: '' }),
-      );
-      setToast({ show: true, message });
+      const errorMessage = getErrorMessage(error);
+      setDraftError(errorMessage);
+      setToast({ show: true, message: intl.formatMessage(messages.tagCreationErrorMessage, { errorMessage }) });
     }
   };
 
@@ -217,11 +235,9 @@ const useEditActions = ({
         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 });
+      const errorMessage = getErrorMessage(error);
+      setDraftError(errorMessage);
+      setToast({ show: true, message: intl.formatMessage(messages.tagUpdateErrorMessage, { errorMessage }) });
     }
   };
 

src/taxonomy/tag-list/tagColumns.tsx

@@ -1,5 +1,4 @@
 import {
-  Bubble,
   Icon,
   IconButton,
   IconButtonWithTooltip,
@@ -12,24 +11,18 @@ import {
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import type { Row } from '@tanstack/react-table';
 
-import messages from './messages';
 import type {
   RowId,
   TreeColumnDef,
   TreeRowData,
-} from '../tree-table/types';
+} from '@src/taxonomy/tree-table/types';
+import { TagListRowData } from './types';
+import messages from './messages';
 import OptionalExpandLink from './OptionalExpandLink';
+import UsageCountDisplay from './UsageCountDisplay';
 
 const EDITABLE_COLUMNS = ['value'];
 
-interface TagListRowData extends TreeRowData {
-  depth: number;
-  childCount: number;
-  usageCount?: number;
-  isNew?: boolean;
-  isEditing?: boolean;
-}
-
 const asTagListRowData = (row: Row<TreeRowData>): TagListRowData => (
   row.original as unknown as TagListRowData
 );
@@ -49,17 +42,6 @@ interface GetColumnsArgs {
   maxDepth: number;
 }
 
-const UsageCountDisplay = ({ row }: { row: Row<TreeRowData>; }) => {
-  const count = asTagListRowData(row).usageCount ?? 0;
-  return (
-    count > 0 && (
-      <Bubble expandable>
-        {count}
-      </Bubble>
-    )
-  );
-};
-
 interface ActionsHeaderProps {
   onStartDraft: () => void;
   setDraftError: (error: string) => void;

src/taxonomy/tag-list/types.ts

@@ -0,0 +1,9 @@
+import { TreeRowData } from '@src/taxonomy/tree-table/types';
+
+export interface TagListRowData extends TreeRowData {
+  depth: number;
+  childCount: number;
+  usageCount?: number;
+  isNew?: boolean;
+  isEditing?: boolean;
+}

src/taxonomy/tree-table/CreateRow.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { CreateRow } from './CreateRow';
+import CreateRow from './CreateRow';
 
 const wrapper = ({ children }: { children: React.ReactNode; }) => (
   <IntlProvider locale="en" messages={{}}>{children}</IntlProvider>
@@ -15,7 +15,6 @@ const baseProps = () => ({
   setIsCreatingTopRow: jest.fn(),
   exitDraftWithoutSave: jest.fn(),
   createRowMutation: { isPending: false },
-  columns: [{ id: 'value' }],
   validate: jest.fn((value: string) => value.trim().length > 0),
 });