Rework error snackbar for header scripts to use toasts

Author: danmindru

packages/ui/src/results/useResultRunner.ts

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useState } from 'react';
-
+import { isObjectLike } from 'lodash-es';
 import { GlobalStore } from 'app/globalContext';
 
 import { ClobbrLogItem } from '@clobbr/api/src/models/ClobbrLog';
@@ -8,6 +8,7 @@ import { Everbs } from 'shared/enums/http';
 import { ClobbrUIHeaderItem } from 'models/ClobbrUIHeaderItem';
 import { ClobbrUIProperties } from 'models/ClobbrUIProperties';
 import { HEADER_MODES } from 'search/SearchSettings/HeaderSettings/HeaderSettings';
+import { useToastStore } from 'toasts/state/toastStore';
 
 import { run } from '@clobbr/api';
 
@@ -45,7 +46,7 @@ export const useResultRunner = ({
 }) => {
   const globalStore = useContext(GlobalStore);
 
-  const [headerError, setHeaderError] = useState<string>('');
+  const addToast = useToastStore((state) => state.addToast);
 
   const runEventCallback = useCallback(
     (itemId: string) => {
@@ -131,9 +132,10 @@ export const useResultRunner = ({
                   options.headers = parsedJson;
                 }
               } catch (error) {
-                setHeaderError(
-                  'Header shell script failed. Using default headers.'
-                );
+                addToast({
+                  message: 'Header shell script failed. Using default headers.',
+                  type: 'error'
+                });
               }
             }
           }
@@ -152,12 +154,24 @@ export const useResultRunner = ({
               }
 
               const parsedJson = JSON.parse(result);
+
+              if (!isObjectLike(parsedJson)) {
+                addToast({
+                  message:
+                    'Header node.js script did not return a JSON object. Using default headers.',
+                  type: 'warning'
+                });
+              }
+
               options.headers = parsedJson;
             } catch (error) {
               console.error(error);
-              setHeaderError(
-                'Header node.js script failed to run. Using default headers.'
-              );
+
+              addToast({
+                message:
+                  'Header node.js script failed to run. Using default headers.',
+                type: 'error'
+              });
             }
           }
 
@@ -195,9 +209,6 @@ export const useResultRunner = ({
   );
 
   return {
-    startRun,
-
-    headerError,
-    setHeaderError
+    startRun
   };
 };

packages/ui/src/search/Search/Search.tsx

@@ -16,11 +16,8 @@ import {
   Tooltip,
   SelectChangeEvent,
   Typography,
-  CircularProgress,
-  Alert,
-  Snackbar
+  CircularProgress
 } from '@mui/material';
-import { Close } from '@mui/icons-material';
 import { GlobalStore } from 'app/globalContext';
 
 import { ReactComponent as ParallelIcon } from 'shared/icons/Parallel.svg';
@@ -93,6 +90,7 @@ const Search = forwardRef(
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
     const globalStore = useContext(GlobalStore);
+
     const [wssUrl, setWssUrl] = useState<string>('ws://localhost');
 
     const getSocketUrl = useCallback((): Promise<string> => {
@@ -107,7 +105,7 @@ const Search = forwardRef(
 
     const wsReady = readyState === ReadyState.OPEN;
 
-    const { startRun, headerError, setHeaderError } = useResultRunner({
+    const { startRun } = useResultRunner({
       requestUrl: globalStore.search.url.requestUrl,
       parallel: globalStore.search.parallel,
       iterations: globalStore.search.iterations,
@@ -152,8 +150,6 @@ const Search = forwardRef(
       [globalStore.search, globalStore.results]
     );
 
-    const dismissHeaderErrorToast = () => setHeaderError('');
-
     const settingsAnimations = {
       animate:
         inputFocused || globalStore.search.url.requestUrl ? 'shown' : 'hidden',
@@ -401,34 +397,6 @@ const Search = forwardRef(
             ) : (
               ''
             )}
-
-            <Snackbar
-              open={!!headerError}
-              autoHideDuration={6000}
-              onClose={dismissHeaderErrorToast}
-              anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-              className="pointer-events-none"
-            >
-              <Alert
-                className="bg-red-200/80 dark:bg-red-900/80 backdrop-blur-sm mb-10 pointer-events-auto"
-                onClose={dismissHeaderErrorToast}
-                severity="error"
-                icon={false}
-                sx={{ width: '100%' }}
-                action={
-                  <IconButton
-                    aria-label="Dismiss"
-                    onClick={dismissHeaderErrorToast}
-                    color="inherit"
-                    className="!mb-1"
-                  >
-                    <Close />
-                  </IconButton>
-                }
-              >
-                <p className="flex h-full items-center">{headerError}</p>
-              </Alert>
-            </Snackbar>
           </section>
         )}
       </GlobalStore.Consumer>