fix: 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

@@ -214,18 +214,13 @@ export const useSubTags = (taxonomyId: number, parentTagValue: string) => useQue
 
 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));
-      }
+      await getAuthenticatedHttpClient().post(
+        apiUrls.createTag(taxonomyId),
+        { tag: value, parent_tag_value: parentTagValue },
+      );
     },
     onSuccess: () => {
       queryClient.invalidateQueries({
@@ -246,14 +241,10 @@ export const useUpdateTag = (taxonomyId: number) => {
 
   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));
-      }
+      await getAuthenticatedHttpClient().patch(
+        apiUrls.updateTag(taxonomyId),
+        { tag: originalValue, updated_tag_value: value },
+      );
     },
     onSuccess: () => {
       queryClient.invalidateQueries({

src/taxonomy/tag-list/hooks.ts

@@ -13,6 +13,8 @@ import {
 } from './constants';
 
 import messages from './messages';
+import globalMessages from '../../messages';
+import { AxiosError } from 'axios';
 
 /** Interface for table mode actions for React's `useReducer` hook.
  *
@@ -163,6 +165,26 @@ const useEditActions = ({
     return true;
   };
 
+  const getErrorMessage = (error: unknown): string => {
+    let errorMessage: string = '';
+    if (error instanceof 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();
 
@@ -182,9 +204,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 }) });
     }
   };
 
@@ -211,9 +233,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/tree-table/CreateRow.test.tsx

@@ -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),
 });
 

src/taxonomy/tree-table/NestedRows.tsx

@@ -7,7 +7,8 @@ import type {
   TreeColumnDef,
   CreateRowMutationState,
 } from './types';
-import { CreateRow, EditRow } from './CreateRow';
+import CreateRow from './CreateRow';
+import EditRow from './EditRow';
 
 interface NestedRowsProps {
   /** The parent row object from TanStack React Table */
@@ -103,7 +104,6 @@ const NestedRows = ({
           setIsCreatingTopRow={setIsCreatingTopRow}
           exitDraftWithoutSave={onCancelCreation}
           createRowMutation={createRowMutation}
-          columns={[]}
           indent={indent}
           validate={validate}
         />
@@ -123,7 +123,6 @@ const NestedRows = ({
                   exitDraftWithoutSave();
                 }}
                 updateRowMutation={updateRowMutation}
-                columns={columns}
                 indent={indent}
                 validate={validate}
                 row={row}
@@ -138,7 +137,7 @@ const NestedRows = ({
                     return (
                       <td
                         key={cell.id}
-                        className={`p-1 align-top tree-table-overflow-anywhere`}
+                        className="p-1 tree-table-overflow-anywhere"
                       >
                         {isFirstColumn ? (
                           <div className={`tree-table-indent tree-table-indent-${indent}`}>{content}</div>

src/taxonomy/tree-table/TableBody.tsx

@@ -13,7 +13,8 @@ import type {
   TreeColumnDef,
   TreeTable,
 } from './types';
-import { CreateRow, EditRow } from './CreateRow';
+import CreateRow from './CreateRow';
+import EditRow from './EditRow';
 
 interface TableBodyProps {
   columns: TreeColumnDef[];
@@ -86,7 +87,6 @@ const TableBody = ({
           setIsCreatingTopRow={setIsCreatingTopRow}
           exitDraftWithoutSave={exitDraftWithoutSave}
           createRowMutation={createRowMutation}
-          columns={columns}
           validate={validate}
         />
       )}
@@ -104,7 +104,6 @@ const TableBody = ({
                 exitDraftWithoutSave();
               }}
               updateRowMutation={updateRowMutation}
-              columns={columns}
               validate={validate}
               row={row}
             />