feat: add error message in editor create block

src/editors/containers/EditorContainer/hooks.ts

@@ -9,6 +9,7 @@ import * as appHooks from '../../hooks';
 
 export const {
   clearSaveError,
+  clearCreateError,
   navigateCallback,
   nullMethod,
   saveBlock,
@@ -90,3 +91,14 @@ export const isInitialized = () => useSelector(selectors.app.isInitialized);
 export const saveFailed = () => useSelector((rootState) => (
   selectors.requests.isFailed(rootState, { requestKey: RequestKeys.saveBlock })
 ));
+
+export const createFailed = () => ({
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  createFailed: useSelector((rootState) => (
+    selectors.requests.isFailed(rootState, { requestKey: RequestKeys.createBlock })
+  )),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  createFailedError: useSelector((rootState) => (
+    selectors.requests.error(rootState, { requestKey: RequestKeys.createBlock })
+  )),
+});

src/editors/containers/EditorContainer/index.tsx

@@ -19,6 +19,9 @@ import BaseModal from '../../sharedComponents/BaseModal';
 import TitleHeader from './components/TitleHeader';
 import * as hooks from './hooks';
 import messages from './messages';
+import { parseErrorMsg } from '../../../library-authoring/add-content/AddContentContainer';
+import libraryMessages from '../../../library-authoring/add-content/messages';
+
 import './index.scss';
 import usePromptIfDirty from '../../../generic/promptIfDirty/usePromptIfDirty';
 
@@ -81,9 +84,12 @@ const EditorContainer: React.FC<Props> = ({
   const isInitialized = hooks.isInitialized();
   const { isCancelConfirmOpen, openCancelConfirmModal, closeCancelConfirmModal } = hooks.cancelConfirmModalToggle();
   const handleCancel = hooks.handleCancel({ onClose, returnFunction });
+  const { createFailed, createFailedError } = hooks.createFailed();
   const disableSave = !isInitialized;
   const saveFailed = hooks.saveFailed();
   const clearSaveFailed = hooks.clearSaveError({ dispatch });
+  const clearCreateFailed = hooks.clearCreateError({ dispatch });
+
   const handleSave = hooks.handleSaveClicked({
     dispatch,
     getContent,
@@ -113,6 +119,16 @@ const EditorContainer: React.FC<Props> = ({
   };
   return (
     <EditorModalWrapper onClose={confirmCancelIfDirty}>
+      {createFailed && (
+        <Toast show onClose={clearCreateFailed}>
+          {parseErrorMsg(
+            intl,
+            createFailedError,
+            libraryMessages.errorCreateMessageWithDetail,
+            libraryMessages.errorCreateMessage,
+          )}
+        </Toast>
+      )}
       {saveFailed && (
         <Toast show onClose={clearSaveFailed}>
           <FormattedMessage {...messages.contentSaveFailed} />

src/editors/hooks.ts

@@ -88,3 +88,7 @@ export const createBlock = ({
 export const clearSaveError = ({
   dispatch,
 }) => () => dispatch(actions.requests.clearRequest({ requestKey: RequestKeys.saveBlock }));
+
+export const clearCreateError = ({
+  dispatch,
+}) => () => dispatch(actions.requests.clearRequest({ requestKey: RequestKeys.createBlock }));

src/library-authoring/add-content/AddContentContainer.tsx

@@ -62,7 +62,24 @@ const AddContentButton = ({ contentType, onCreateContent } : AddContentButtonPro
     </Button>
   );
 };
-
+export const parseErrorMsg = (
+  intl,
+  error: any,
+  detailedMessage: MessageDescriptor,
+  defaultMessage: MessageDescriptor,
+) => {
+  try {
+    console.debug('error in create content', error);
+    const { response: { data } } = error;
+    const detail = data && (Array.isArray(data) ? data.join() : String(data));
+    if (detail) {
+      return intl.formatMessage(detailedMessage, { detail });
+    }
+  } catch (_err) {
+    // ignore
+  }
+  return intl.formatMessage(defaultMessage);
+};
 const AddContentContainer = () => {
   const intl = useIntl();
   const {
@@ -81,23 +98,6 @@ const AddContentContainer = () => {
 
   const [isAddLibraryContentModalOpen, showAddLibraryContentModal, closeAddLibraryContentModal] = useToggle();
 
-  const parseErrorMsg = (
-    error: any,
-    detailedMessage: MessageDescriptor,
-    defaultMessage: MessageDescriptor,
-  ) => {
-    try {
-      const { response: { data } } = error;
-      const detail = data && (Array.isArray(data) ? data.join() : String(data));
-      if (detail) {
-        return intl.formatMessage(detailedMessage, { detail });
-      }
-    } catch (_err) {
-      // ignore
-    }
-    return intl.formatMessage(defaultMessage);
-  };
-
   const isBlockTypeEnabled = (blockType: string) => getConfig().LIBRARY_SUPPORTED_BLOCKS.includes(blockType);
 
   const collectionButtonData = {
@@ -184,13 +184,13 @@ const AddContentContainer = () => {
       showToast(intl.formatMessage(messages.successPasteClipboardMessage));
     }).catch((error) => {
       showToast(parseErrorMsg(
+        intl,
         error,
         messages.errorPasteClipboardMessageWithDetail,
         messages.errorPasteClipboardMessage,
       ));
     });
   };
-
   const onCreateBlock = (blockType: string) => {
     const suportedEditorTypes = Object.values(blockTypes);
     if (suportedEditorTypes.includes(blockType)) {
@@ -207,6 +207,7 @@ const AddContentContainer = () => {
         linkComponent(data.id);
       }).catch((error) => {
         showToast(parseErrorMsg(
+          intl,
           error,
           messages.errorCreateMessageWithDetail,
           messages.errorCreateMessage,