fix: persist error snackbars (#4392)

webiny · Nov 19, 2024 · bd038c0 · bd038c0
1 parent dd7461f
commit bd038c0
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 39 deletions.
diff --git a/packages/app-admin/src/hooks/useSnackbar.ts b/packages/app-admin/src/hooks/useSnackbar.ts
diff --git a/packages/app-admin/src/hooks/useSnackbar.tsx b/packages/app-admin/src/hooks/useSnackbar.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { useUi } from "@webiny/app/hooks/useUi";
+import { SnackbarAction } from "@webiny/ui/Snackbar";
+
+interface UseSnackbarResponse {
+    showSnackbar: (message: React.ReactNode, options?: Record<string, React.ReactNode>) => void;
+    showErrorSnackbar: (
+        message: React.ReactNode,
+        options?: Record<string, React.ReactNode>
+    ) => void;
+    hideSnackbar: () => void;
+}
+
+export const useSnackbar = (): UseSnackbarResponse => {
+    const ui = useUi();
+
+    return {
+        showSnackbar: (message, options = {}) => {
+            ui.setState(ui => {
+                return { ...ui, snackbar: { message, options } };
+            });
+        },
+        showErrorSnackbar: (message, options = {}) => {
+            ui.setState(ui => {
+                return {
+                    ...ui,
+                    snackbar: {
+                        message,
+                        options: {
+                            timeout: -1,
+                            dismissesOnAction: true,
+                            action: <SnackbarAction label={"OK"} />,
+                            ...options
+                        }
+                    }
+                };
+            });
+        },
+        hideSnackbar: () => {
+            ui.setState(ui => {
+                return { ...ui, snackbar: null };
+            });
+        }
+    };
+};
diff --git a/packages/app-headless-cms/src/admin/components/Decorators/ShowConfirmationOnDelete.tsx b/packages/app-headless-cms/src/admin/components/Decorators/ShowConfirmationOnDelete.tsx
@@ -43,13 +43,13 @@ export const ShowConfirmationOnDelete = useContentEntry.createDecorator(baseHook
     return () => {
         const hook = baseHook();
         const dialogs = useDialogs();
-        const { showSnackbar } = useSnackbar();
+        const { showSnackbar, showErrorSnackbar } = useSnackbar();
 
         const onAccept = async (entry: CmsContentEntry) => {
             const response = await hook.deleteEntry({ id: entry.entryId });
 
             if (typeof response !== "boolean") {
-                showSnackbar(
+                showErrorSnackbar(
                     `Could not move ${entry.meta.title} to trash! (${response.error.message})`
                 );
 

diff --git a/...ges/app-headless-cms/src/admin/components/Decorators/ShowConfirmationOnDeleteRevision.tsx b/...ges/app-headless-cms/src/admin/components/Decorators/ShowConfirmationOnDeleteRevision.tsx
@@ -44,15 +44,15 @@ export const ShowConfirmationOnDeleteRevision = useContentEntry.createDecorator(
     return () => {
         const hook = baseHook();
         const dialogs = useDialogs();
-        const { showSnackbar } = useSnackbar();
+        const { showSnackbar, showErrorSnackbar } = useSnackbar();
 
         const onAccept = async (params: DeleteEntryRevisionParams) => {
             const revisionToDelete = hook.revisions.find(rev => rev.id === params.id)!;
 
             const response = await hook.deleteEntryRevision(revisionToDelete);
             if (typeof response === "object" && response.error) {
                 const { error } = response;
-                showSnackbar(error.message);
+                showErrorSnackbar(error.message);
                 return response;
             }
 

diff --git a/packages/app-headless-cms/src/admin/components/Decorators/ShowConfirmationOnPublish.tsx b/packages/app-headless-cms/src/admin/components/Decorators/ShowConfirmationOnPublish.tsx
@@ -47,7 +47,7 @@ const EntryMessage = ({ id, entryType, getEntry }: EntryMessageProps) => {
 
 export const ShowConfirmationOnPublish = useContentEntry.createDecorator(baseHook => {
     return () => {
-        const { showSnackbar } = useSnackbar();
+        const { showSnackbar, showErrorSnackbar } = useSnackbar();
         const dialogs = useDialogs();
         const hook = baseHook();
         const { contentModel } = hook;
@@ -57,7 +57,9 @@ export const ShowConfirmationOnPublish = useContentEntry.createDecorator(baseHoo
             const response = await hook.publishEntryRevision({ id: entry.id });
 
             if (response.error) {
-                showSnackbar(`Could not publish ${entry.meta.title}! (${response.error.message})`);
+                showErrorSnackbar(
+                    `Could not publish ${entry.meta.title}! (${response.error.message})`
+                );
 
                 return response;
             }

diff --git a/packages/app-headless-cms/src/admin/components/Decorators/ShowConfirmationOnUnpublish.tsx b/packages/app-headless-cms/src/admin/components/Decorators/ShowConfirmationOnUnpublish.tsx
@@ -47,7 +47,7 @@ const EntryMessage = ({ id, entryType, getEntry }: EntryMessageProps) => {
 
 export const ShowConfirmationOnUnpublish = useContentEntry.createDecorator(baseHook => {
     return () => {
-        const { showSnackbar } = useSnackbar();
+        const { showSnackbar, showErrorSnackbar } = useSnackbar();
         const dialogs = useDialogs();
         const hook = baseHook();
         const { contentModel } = hook;
@@ -57,7 +57,7 @@ export const ShowConfirmationOnUnpublish = useContentEntry.createDecorator(baseH
             const response = await hook.unpublishEntryRevision({ id: entry.id });
 
             if (response.error) {
-                showSnackbar(
+                showErrorSnackbar(
                     `Could not unpublish ${entry.meta.title}! (${response.error.message})`
                 );
 

diff --git a/packages/app-headless-cms/src/admin/components/FieldEditor/Field.tsx b/packages/app-headless-cms/src/admin/components/FieldEditor/Field.tsx
@@ -147,7 +147,7 @@ export interface FieldProps {
 
 const Field = (props: FieldProps) => {
     const { field, onEdit, parent } = props;
-    const { showSnackbar } = useSnackbar();
+    const { showSnackbar, showErrorSnackbar } = useSnackbar();
     const { setData: setModel, data: model } = useModelEditor();
     const { getFieldPlugin, getFieldRendererPlugin } = useModelFieldEditor();
 
@@ -208,7 +208,7 @@ const Field = (props: FieldProps) => {
         });
 
         if (response && response.error) {
-            return showSnackbar(response.error.message);
+            return showErrorSnackbar(response.error.message);
         }
 
         showSnackbar(t`Title field set successfully.`);
@@ -220,7 +220,7 @@ const Field = (props: FieldProps) => {
         });
 
         if (response && response.error) {
-            return showSnackbar(response.error.message);
+            return showErrorSnackbar(response.error.message);
         }
 
         showSnackbar(t`Description field set successfully.`);
@@ -232,7 +232,7 @@ const Field = (props: FieldProps) => {
         });
 
         if (response && response.error) {
-            return showSnackbar(response.error.message);
+            return showErrorSnackbar(response.error.message);
         }
 
         showSnackbar(t`Image field set successfully.`);

diff --git a/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/SaveContentModelButton.tsx b/packages/app-headless-cms/src/admin/plugins/editor/defaultBar/SaveContentModelButton.tsx
@@ -9,15 +9,15 @@ const t = i18n.namespace("app-headless-cms/admin/editor/top-bar/save-button");
 const SaveContentModelButton = () => {
     const { saveContentModel } = useModelEditor();
     const [loading, setLoading] = useState<boolean>(false);
-    const { showSnackbar } = useSnackbar();
+    const { showSnackbar, showErrorSnackbar } = useSnackbar();
 
     const onClick = useCallback(async () => {
         setLoading(true);
         const response = await saveContentModel();
         setLoading(false);
 
         if (response.error) {
-            showSnackbar(response.error.message);
+            showErrorSnackbar(response.error.message);
             return;
         }
 

diff --git a/...pp-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/useRevision.tsx b/...pp-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/useRevision.tsx
@@ -43,7 +43,7 @@ export interface UseRevisionProps {
 export const useRevision = ({ revision }: UseRevisionProps) => {
     const contentEntry = useContentEntry();
     const { history } = useRouter();
-    const { showSnackbar } = useSnackbar();
+    const { showSnackbar, showErrorSnackbar } = useSnackbar();
     const { contentModel } = contentEntry;
     const { modelId } = contentModel;
 
@@ -107,7 +107,7 @@ export const useRevision = ({ revision }: UseRevisionProps) => {
                         });
 
                         if (response.error) {
-                            showSnackbar(response.error.message);
+                            showErrorSnackbar(response.error.message);
                             return response;
                         }