feat(dashboard): test workflow functionality #6768

LetItRock · 2024-10-24T21:51:20Z

What changed? Why was the change needed?

Dashboard Test Workflow functionality in the Workflow Editor:

test workflow route + page with form and snippets; activity logs descoped;
implemented the dummy GET /workflows/:id/test-data endpoint that returns the JSONSchema for the to and payload fields, that are used on the FE to build the form
improved sonner toast component
improved copy button
implemented panel component

Screenshots

Screen.Recording.2024-10-24.at.17.30.40.mov

Screen.Recording.2024-10-24.at.22.42.59.mov

Screen.Recording.2024-10-24.at.22.43.36.mov

linear · 2024-10-24T21:51:22Z

NV-4336 Implement test workflow screen

netlify · 2024-10-24T21:51:34Z

✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!

Name	Link
🔨 Latest commit	`05cba25`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/6720f33e2e2a0200084e9012
😎 Deploy Preview	https://deploy-preview-6768--novu-stg-vite-dashboard-poc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

LetItRock · 2024-10-24T21:53:53Z

apps/api/src/app/workflows-v2/usecases/test-data/test-data.usecase.ts

+  }) as const satisfies JSONSchema;
+
+@Injectable()
+export class WorkflowTestDataUseCase {


The GET /workflow/:id/test-data endpoint returns JSONSchema for the to and payload fields that are used to populate the Test Workflow form with the data on FE.
We agreed on this with @tatarco, and the work will be continued later.

LetItRock · 2024-10-24T21:55:22Z

apps/dashboard/package.json

@@ -22,9 +22,11 @@
  "dependencies": {
    "@clerk/clerk-react": "^5.2.5",
    "@hookform/resolvers": "^3.9.0",
+    "@monaco-editor/react": "^4.6.0",


The payload JSON field is displayed in the monaco-editor. I decided to use it because we will also use it in the Step Editor.

LetItRock · 2024-10-24T21:57:12Z

apps/dashboard/src/components/primitives/accordion.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';


Actually, I started to create the Panel component as collapsible, but then later, we decided that there was no point in having the payload field collapsible on the Test Workflow Page. So, I left this component.

LetItRock · 2024-10-24T21:58:05Z

apps/dashboard/src/components/primitives/copy-button.tsx

 };

-export const CopyButton: React.FC<CopyButtonProps> = ({ content, className }) => {
+export const CopyButton: React.FC<CopyButtonProps> = ({


Improved the CopyButton so it can be better reused; fixed the issue with the tooltip disappearing

LetItRock · 2024-10-24T21:59:00Z

apps/dashboard/src/components/primitives/sonner-helpers.tsx


-export const smallToast = ({ children, options }: { children: ReactNode; options: ExternalToast }) => {
-  return toast(<SmallToast>{children}</SmallToast>, {
+export const showToast = ({


improved the toast helper function so we can pass the close function to the tooltip body and use it there to close the tooltip with custom button

LetItRock · 2024-10-24T22:07:27Z

apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx

+  const to = useMemo(
+    () => (typeof testData.to === 'object' ? makeObjectFromSchema({ properties: testData.to.properties ?? {} }) : {}),
+    [testData]
+  );


make form object with default values from JSONSchema

LetItRock · 2024-10-24T22:08:28Z

apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx

+              <span className="font-medium">Test workflow triggered successfully</span>
+              <span className="text-foreground-600">{`Test workflow ${workflowId} was triggered successfully`}</span>
+              <Link
+                to={`${LEGACY_ROUTES.ACTIVITY_FEED}?transactionId=${transactionId}`}


link to the old activity feed page with transactionId preselected so the user will be able to check the execution logs

LetItRock · 2024-10-24T22:10:25Z

apps/dashboard/src/pages/test-workflow.tsx

+
+  return (
+    <EditWorkflowLayout headerStartItems={<EditorBreadcrumbs />}>
+      {testData && <TestWorkflowTabs testData={testData} />}


passing the testData from this component because we need to generate the schema dynamically based on the response

LetItRock · 2024-10-24T22:11:28Z

apps/dashboard/src/utils/code-snippets.ts

@@ -0,0 +1,193 @@
+import { API_HOSTNAME } from '@/config';


this file contains snippets for different languages; it might seem to you that the code is wrong-formatted, but it's not, it renders properly in the editor

btw it's copied from the old Web app but slightly improved interface

LetItRock · 2024-10-24T22:12:26Z

apps/web/src/pages/activities/ActivitiesPage.tsx

+    const searchParams = new URLSearchParams(search);
+    const transactionId = searchParams.get('transactionId');
+    if (transactionId) {
+      setValue('transactionId', transactionId);
+      onFiltersChange({ transactionId });
+    }


handle the transactionId from the query params

apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx

pkg-pr-new · 2024-10-29T11:39:34Z

Open in Stackblitz

@novu/client

pnpm add https://pkg.pr.new/novuhq/novu/@novu/client@6768

@novu/nest

pnpm add https://pkg.pr.new/novuhq/novu/@novu/nest@6768

@novu/framework

pnpm add https://pkg.pr.new/novuhq/novu/@novu/framework@6768

@novu/nextjs

pnpm add https://pkg.pr.new/novuhq/novu/@novu/nextjs@6768

@novu/node

pnpm add https://pkg.pr.new/novuhq/novu/@novu/node@6768

@novu/headless

pnpm add https://pkg.pr.new/novuhq/novu/@novu/headless@6768

@novu/js

pnpm add https://pkg.pr.new/novuhq/novu/@novu/js@6768

@novu/notification-center

pnpm add https://pkg.pr.new/novuhq/novu/@novu/notification-center@6768

novu

pnpm add https://pkg.pr.new/novuhq/novu@6768

@novu/providers

pnpm add https://pkg.pr.new/novuhq/novu/@novu/providers@6768

@novu/react

pnpm add https://pkg.pr.new/novuhq/novu/@novu/react@6768

@novu/react-native

pnpm add https://pkg.pr.new/novuhq/novu/@novu/react-native@6768

@novu/shared

pnpm add https://pkg.pr.new/novuhq/novu/@novu/shared@6768

@novu/stateless

pnpm add https://pkg.pr.new/novuhq/novu/@novu/stateless@6768

commit: 05cba25

SokratisVidros · 2024-10-29T12:50:53Z

apps/dashboard/src/components/primitives/sonner-helpers.tsx

+  ...toastProps
+}: Omit<ToastProps, 'children'> & {
+  options: ExternalToast;
+  children: (args: { close: () => void }) => ReactNode;


Do you maybe need the instance of the toast as the first argument in the close function so that you can control the dismissal from the caller of the close function?

the close in this case is the internal implementation of the toast; the problem that I faced was that I couldn't reference the id in the content component to close the toast
const id = toast(<div onClick={() => toast.dismiss(id) <--- error }></div>, ...)

SokratisVidros · 2024-10-29T12:51:35Z

apps/dashboard/src/components/workflow-editor/editor-breadcrumbs.tsx

@@ -0,0 +1,63 @@
+import React from 'react';


Nit-picky one: breadcrumbs.tsx. It's already under the workflow-editor folder.

I don't see it, it's under the src/components/primitives/breadcrumb.tsx. Or maybe I didn't understand you correctly.

We can make the changes separately, just let me know. I'll merge this for now.

feat(dashboard): test workflow functionality

c5d5c72

LetItRock requested review from SokratisVidros, BiswaViraj, tatarco and desiprisg October 24, 2024 21:51

LetItRock self-assigned this Oct 24, 2024

LetItRock temporarily deployed to Linting October 24, 2024 21:51 — with GitHub Actions Inactive

github-actions bot added @novu/api @novu/web @novu/shared labels Oct 24, 2024

LetItRock commented Oct 24, 2024

View reviewed changes

LetItRock added 2 commits October 28, 2024 11:01

chore(dashboard): send the __source: dashboard for the trigger api call

5f2a977

Merge branch 'next' into nv-4336-dashboard-workflow-test-functionality

1ba0163

LetItRock temporarily deployed to Linting October 28, 2024 12:13 — with GitHub Actions Inactive

BiswaViraj approved these changes Oct 28, 2024

View reviewed changes

apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx Show resolved Hide resolved

LetItRock added 2 commits October 29, 2024 11:24

chore(dashboard): suggestions from the pr #6768

3dbe3b7

Merge branch 'next' into nv-4336-dashboard-workflow-test-functionality

da5243b

LetItRock temporarily deployed to Linting October 29, 2024 11:15 — with GitHub Actions Inactive

chore(dashboard): updated the lock file

0f094da

LetItRock temporarily deployed to Linting October 29, 2024 11:31 — with GitHub Actions Inactive

LetItRock temporarily deployed to Linting October 29, 2024 12:05 — with GitHub Actions Inactive

LetItRock added 2 commits October 29, 2024 14:33

Merge branch 'next' into nv-4336-dashboard-workflow-test-functionality

a1f64d6

Merge branch 'next' into nv-4336-dashboard-workflow-test-functionality

cb0de48

LetItRock temporarily deployed to Linting October 29, 2024 13:41 — with GitHub Actions Inactive

SokratisVidros approved these changes Oct 29, 2024

View reviewed changes

chore(dashboard): fixing failing pipeline

05cba25

LetItRock temporarily deployed to Linting October 29, 2024 14:37 — with GitHub Actions Inactive

LetItRock merged commit 9e90387 into next Oct 29, 2024
43 checks passed

LetItRock deleted the nv-4336-dashboard-workflow-test-functionality branch October 29, 2024 15:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard): test workflow functionality #6768

feat(dashboard): test workflow functionality #6768

LetItRock commented Oct 24, 2024

linear bot commented Oct 24, 2024

netlify bot commented Oct 24, 2024 •

edited

Loading

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

LetItRock Oct 24, 2024

pkg-pr-new bot commented Oct 29, 2024 •

edited

Loading

SokratisVidros Oct 29, 2024

LetItRock Oct 29, 2024

SokratisVidros Oct 29, 2024

LetItRock Oct 29, 2024

LetItRock Oct 29, 2024

feat(dashboard): test workflow functionality #6768

feat(dashboard): test workflow functionality #6768

Conversation

LetItRock commented Oct 24, 2024

What changed? Why was the change needed?

Screenshots

linear bot commented Oct 24, 2024

netlify bot commented Oct 24, 2024 • edited Loading

✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pkg-pr-new bot commented Oct 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Oct 24, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 29, 2024 •

edited

Loading