fix: show error information when taxonomy import fails (#1730)

Adds the error information when we have a failure while importing a Taxonomy

src/generic/alert-error/AlertError.test.tsx

@@ -35,6 +35,6 @@ describe('<AlertMessage />', () => {
     const { getByText } = render(<RootWrapper error={error} />);
     screen.logTestingPlaygroundURL();
     expect(getByText(/this is an error message/i)).toBeInTheDocument();
-    expect(getByText(/\{"message":"this is a response body"\}/i)).toBeInTheDocument();
+    expect(getByText(/\{ "message": "this is a response body" \}/i)).toBeInTheDocument();
   });
 });

src/generic/alert-error/index.tsx

@@ -1,14 +1,45 @@
-import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Alert,
 } from '@openedx/paragon';
+import messages from './messages';
 
-const AlertError: React.FC<{ error: unknown }> = ({ error }) => (
-  <Alert variant="danger" className="mt-3">
-    {error instanceof Object && 'message' in error ? error.message : String(error)}
-    <br />
-    {error instanceof Object && (error as any).response?.data && JSON.stringify((error as any).response?.data)}
-  </Alert>
-);
+export interface AlertErrorProps {
+  error: unknown;
+  title?: string;
+  onDismiss?: () => void;
+}
+
+/* eslint-disable react/prop-types */
+const AlertError: React.FC<AlertErrorProps> = ({ error, title, onDismiss }) => {
+  const intl = useIntl();
+  let errorDetails: string | undefined;
+  if (error instanceof Object && (error as any).response?.data) {
+    if (typeof (error as any).response?.data === 'string') {
+      errorDetails = (error as any).response?.data;
+    } else {
+      errorDetails = JSON.stringify((error as any).response?.data, null, 2);
+    }
+  }
+
+  return (
+    <Alert
+      variant="danger"
+      className="mt-3"
+      dismissible={!!onDismiss}
+      closeLabel={intl.formatMessage(messages.dismissLabel)}
+      onClose={onDismiss}
+    >
+      {title && <Alert.Heading>{title}</Alert.Heading>}
+      {error instanceof Object && 'message' in error ? error.message : String(error)}
+      <br />
+      {errorDetails && (
+        <pre>
+          {errorDetails}
+        </pre>
+      )}
+    </Alert>
+  );
+};
 
 export default AlertError;

src/generic/alert-error/messages.ts

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  dismissLabel: {
+    id: 'authoring.alert-error-alert.dismiss',
+    defaultMessage: 'Dismiss',
+    description: 'The label for the dismiss button on the alert error component.',
+  },
+});
+
+export default messages;