Refactor workflow action snackbar to a global provider (#875)

Assem-Uber · web-flow · commit d62cd833f95f · 2025-04-15T15:30:55.000+02:00
* Refactor workflow action snackbar to a global provider

* add test case for onDismissMessage

* remove snackbarprovider from test
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,13 @@
 import type { Metadata } from 'next';
 import { Rubik } from 'next/font/google';
 
+import SnackbarProvider from '@/components/snackbar-provider/snackbar-provider';
 import ReactQueryProvider from '@/providers/react-query-provider';
 
 import StyletronProvider from '../providers/styletron-provider';
 
 import StyledJsxRegistry from './registry';
+
 import './globals.css';
 
 const inter = Rubik({ subsets: ['latin'] });
@@ -26,7 +28,9 @@ export default function RootLayout({
       <StyledJsxRegistry />
       <body className={inter.className}>
         <ReactQueryProvider>
-          <StyletronProvider>{children}</StyletronProvider>
+          <StyletronProvider>
+            <SnackbarProvider>{children}</SnackbarProvider>
+          </StyletronProvider>
         </ReactQueryProvider>
       </body>
     </html>
diff --git a/src/components/snackbar-provider/snackbar-provider.styles.ts b/src/components/snackbar-provider/snackbar-provider.styles.ts
@@ -0,0 +1,13 @@
+import { type Theme } from 'baseui';
+import { type SnackbarElementOverrides } from 'baseui/snackbar';
+import { type StyleObject } from 'styletron-react';
+
+export const overrides = {
+  snackbar: {
+    Root: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        backgroundColor: $theme.colors.contentPositive,
+      }),
+    },
+  } satisfies SnackbarElementOverrides,
+};
diff --git a/src/components/snackbar-provider/snackbar-provider.tsx b/src/components/snackbar-provider/snackbar-provider.tsx
@@ -0,0 +1,21 @@
+'use client';
+import {
+  SnackbarProvider as BaseSnackbarProvider,
+  PLACEMENT,
+  DURATION,
+} from 'baseui/snackbar';
+
+import { overrides } from './snackbar-provider.styles';
+import { type Props } from './snackbar-provider.types';
+
+export default function SnackbarProvider({ children }: Props) {
+  return (
+    <BaseSnackbarProvider
+      placement={PLACEMENT.bottom}
+      overrides={overrides.snackbar}
+      defaultDuration={DURATION.infinite}
+    >
+      {children}
+    </BaseSnackbarProvider>
+  );
+}
diff --git a/src/components/snackbar-provider/snackbar-provider.types.ts b/src/components/snackbar-provider/snackbar-provider.types.ts
@@ -0,0 +1,3 @@
+export type Props = {
+  children: React.ReactNode;
+};
diff --git a/src/views/workflow-actions/workflow-action-new-run-success-msg/__tests__/workflow-action-new-run-success-msg.test.tsx b/src/views/workflow-actions/workflow-action-new-run-success-msg/__tests__/workflow-action-new-run-success-msg.test.tsx
@@ -17,6 +17,7 @@ describe('WorkflowActionNewRunSuccessMsg', () => {
       submissionData: null,
     },
     successMessage: 'Workflow has been restarted.',
+    onDismissMessage: jest.fn(),
   };
 
   it('renders the success message with a link', () => {
@@ -40,4 +41,11 @@ describe('WorkflowActionNewRunSuccessMsg', () => {
       `/domains/${domain}/${cluster}/workflows/${workflowId}/${runId}`
     );
   });
+
+  it('calls the onDismissMessage function when the link is clicked', () => {
+    render(<WorkflowActionNewRunSuccessMsg {...mockProps} />);
+    const link = screen.getByText('Click here');
+    link.click();
+    expect(mockProps.onDismissMessage).toHaveBeenCalled();
+  });
 });
diff --git a/src/views/workflow-actions/workflow-action-new-run-success-msg/workflow-action-new-run-success-msg.tsx b/src/views/workflow-actions/workflow-action-new-run-success-msg/workflow-action-new-run-success-msg.tsx
@@ -6,13 +6,15 @@ const WorkflowActionNewRunSuccessMsg = ({
   result: { runId },
   inputParams: { workflowId, cluster, domain },
   successMessage,
+  onDismissMessage,
 }: Props) => {
   return (
     <>
       {successMessage}{' '}
       <Link
         color="contentInversePrimary"
         href={`/domains/${domain}/${cluster}/workflows/${workflowId}/${runId}`}
+        onClick={onDismissMessage}
       >
         Click here
       </Link>{' '}
diff --git a/src/views/workflow-actions/workflow-action-new-run-success-msg/workflow-action-new-run-success-msg.types.tsx b/src/views/workflow-actions/workflow-action-new-run-success-msg/workflow-action-new-run-success-msg.types.tsx
@@ -5,4 +5,5 @@ export type Props = WorkflowActionSuccessMessageProps<
   { runId: string }
 > & {
   successMessage: string;
+  onDismissMessage: () => void;
 };
diff --git a/src/views/workflow-actions/workflow-actions-modal-content/workflow-actions-modal-content.tsx b/src/views/workflow-actions/workflow-actions-modal-content/workflow-actions-modal-content.tsx
@@ -70,6 +70,7 @@ export default function WorkflowActionsModalContent<
           message: action.renderSuccessMessage?.({
             result,
             inputParams: params,
+            onDismissMessage: () => dequeue(),
           }),
           startEnhancer: MdCheckCircle,
           actionMessage: 'OK',
diff --git a/src/views/workflow-actions/workflow-actions.styles.ts b/src/views/workflow-actions/workflow-actions.styles.ts
@@ -1,7 +1,6 @@
 import { type Theme } from 'baseui';
 import { type ButtonOverrides } from 'baseui/button';
 import { type PopoverOverrides } from 'baseui/popover';
-import { type SnackbarElementOverrides } from 'baseui/snackbar';
 import { type StyleObject } from 'styletron-react';
 
 export const overrides = {
@@ -12,13 +11,6 @@ export const overrides = {
       }),
     },
   } satisfies PopoverOverrides,
-  snackbar: {
-    Root: {
-      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
-        backgroundColor: $theme.colors.contentPositive,
-      }),
-    },
-  } satisfies SnackbarElementOverrides,
   button: {
     BaseButton: {
       style: ({
diff --git a/src/views/workflow-actions/workflow-actions.tsx b/src/views/workflow-actions/workflow-actions.tsx
@@ -6,11 +6,6 @@ import {
   StatefulPopover,
   PLACEMENT as POPOVER_PLACEMENT,
 } from 'baseui/popover';
-import {
-  SnackbarProvider,
-  PLACEMENT as SNACKBAR_PLACEMENT,
-  DURATION,
-} from 'baseui/snackbar';
 import { pick } from 'lodash';
 import { useParams } from 'next/navigation';
 import { MdArrowDropDown } from 'react-icons/md';
@@ -57,11 +52,7 @@ export default function WorkflowActions() {
   }
 
   return (
-    <SnackbarProvider
-      placement={SNACKBAR_PLACEMENT.bottom}
-      overrides={overrides.snackbar}
-      defaultDuration={DURATION.infinite}
-    >
+    <>
       <StatefulPopover
         placement={POPOVER_PLACEMENT.bottomRight}
         overrides={overrides.popover}
@@ -93,6 +84,6 @@ export default function WorkflowActions() {
         action={selectedAction}
         onClose={() => setSelectedAction(undefined)}
       />
-    </SnackbarProvider>
+    </>
   );
 }
diff --git a/src/views/workflow-actions/workflow-actions.types.ts b/src/views/workflow-actions/workflow-actions.types.ts
@@ -36,6 +36,7 @@ export type WorkflowActionFormProps<FormData extends FieldValues> = {
 export type WorkflowActionSuccessMessageProps<SubmissionData, Result> = {
   result: Result;
   inputParams: WorkflowActionInput<SubmissionData>;
+  onDismissMessage: () => void;
 };
 
 export type WorkflowActionNonRunnableStatus =

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export type Props = {`
	`2`	`+ children: React.ReactNode;`
	`3`	`+};`