feat(dashboard): workflow editor canvas - base step nodes and edges #6694

LetItRock · 2024-10-15T15:48:02Z

What changed? Why was the change needed?

Workflow Editor Canvas:

step nodes and edges
add step popover menu
badge component refactor
step status circle refactor

Screenshots

Screen.Recording.2024-10-15.at.17.25.34.mov

linear · 2024-10-15T15:48:05Z

NV-4478 Workflow Editor - Tree (Canvas)

netlify · 2024-10-15T15:48:18Z

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

Name	Link
🔨 Latest commit	`206416b`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/670f6f62d6f0640008874afb
😎 Deploy Preview	https://deploy-preview-6694--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-15T15:50:16Z

apps/dashboard/index.html

@@ -17,7 +17,7 @@
    />
  </head>
  <body>
-    <div id="root"></div>
+    <div id="root" class="h-full"></div>


Fixed the app layout issue that the height was 15px less than the full height. Like it was 15px less then should be.

LetItRock · 2024-10-15T15:50:25Z

apps/dashboard/package.json

@@ -37,6 +37,7 @@
    "@radix-ui/react-tooltip": "^1.1.3",
    "@segment/analytics-next": "^1.73.0",
    "@tanstack/react-query": "^5.59.6",
+    "@xyflow/react": "^12.3.2",


react flow package

LetItRock · 2024-10-15T15:50:35Z

apps/dashboard/src/components/dashboard-layout.tsx

@@ -15,12 +15,12 @@ export const DashboardLayout = ({
 }) => {
  return (
    <IntercomProvider appId={INTERCOM_APP_ID}>
-      <div className="relative flex w-full">
+      <div className="relative flex h-full w-full">


LetItRock · 2024-10-15T15:50:38Z

apps/dashboard/src/components/edit-workflow-layout.tsx

@@ -14,11 +14,11 @@ export const EditWorkflowLayout = ({
 }) => {
  return (
    <IntercomProvider appId={INTERCOM_APP_ID}>
-      <div className="relative flex w-full">
+      <div className="relative flex h-full w-full">


LetItRock · 2024-10-15T15:50:56Z

apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx

@@ -65,7 +65,7 @@ export const EditBridgeUrlButton = () => {
                'relative size-1.5 animate-[pulse-shadow_1s_ease-in-out_infinite] rounded-full',
                status === ConnectionStatus.DISCONNECTED || status === ConnectionStatus.LOADING
                  ? 'bg-destructive [--pulse-color:var(--destructive)]'
-                  : 'bg-success [--pulse-color:var(--destructive)]'
+                  : 'bg-success [--pulse-color:var(--success)]'


local studio pulsing dot fix

LetItRock · 2024-10-15T15:58:01Z

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

+  useEffect(() => {
+    window.addEventListener('resize', positionCanvas);
+
+    return () => {
+      window.removeEventListener('resize', positionCanvas);
+    };
+  }, [positionCanvas]);
+
+  useLayoutEffect(() => {
+    positionCanvas();
+  }, [positionCanvas]);


position the canvas top center

LetItRock · 2024-10-15T15:58:58Z

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

+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const reactFlowInstance = useReactFlow();
+
+  const nodes = useMemo(() => {


the workflow editor canvas will be a controlled component based on the react-form state and workflow data returned from the API

LetItRock · 2024-10-15T15:59:42Z

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

+      type: 'add',
+    };
+
+    return [triggerNode, ...createdNodes, addNode];


the API doesn't return the trigger node and the workflow tree always ends with the add node

LetItRock · 2024-10-15T16:00:01Z

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

+        maxZoom={1}
+        minZoom={1}


no zoom for now

LetItRock · 2024-10-15T16:00:45Z

apps/dashboard/src/components/workflow-step.tsx

+  [StepTypeEnum.CHAT]: { variant: 'feature', icon: STEP_TYPE_TO_ICON[StepTypeEnum.CHAT] },
+  [StepTypeEnum.CUSTOM]: { variant: 'alert', icon: STEP_TYPE_TO_ICON[StepTypeEnum.CUSTOM] },
+  [StepTypeEnum.DELAY]: { variant: 'warning', icon: STEP_TYPE_TO_ICON[StepTypeEnum.DELAY] },
+  [StepTypeEnum.DIGEST]: { variant: 'highlighted', icon: STEP_TYPE_TO_ICON[StepTypeEnum.DIGEST] },
+  [StepTypeEnum.EMAIL]: { variant: 'information', icon: STEP_TYPE_TO_ICON[StepTypeEnum.EMAIL] },
+  [StepTypeEnum.IN_APP]: { variant: 'stable', icon: STEP_TYPE_TO_ICON[StepTypeEnum.IN_APP] },
+  [StepTypeEnum.PUSH]: { variant: 'verified', icon: STEP_TYPE_TO_ICON[StepTypeEnum.PUSH] },
+  [StepTypeEnum.SMS]: { variant: 'destructive', icon: STEP_TYPE_TO_ICON[StepTypeEnum.SMS] },
+  [StepTypeEnum.TRIGGER]: { variant: 'neutral', icon: STEP_TYPE_TO_ICON[StepTypeEnum.TRIGGER] },


fixed workflow list steps colors and icons

rgozdzialski · 2024-10-15T16:01:00Z

Niiiiicceeeeee! 🔥

SokratisVidros

🎨

apps/dashboard/src/components/icons/notification-5-fill.tsx

apps/dashboard/src/components/icons/sms.tsx

SokratisVidros · 2024-10-15T16:30:40Z

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

+    <Node>
+      <NodeHeader type={StepTypeEnum.EMAIL}>
+        <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.EMAIL]}>
+          <Icon />
+        </NodeIcon>
+        <NodeName>Email step</NodeName>
+      </NodeHeader>
+      <NodeBody>You have been invited to the Novu party on "commentSnippet"</NodeBody>


Please update this according to latest figma designs

SokratisVidros · 2024-10-15T16:31:52Z

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

+  const reactFlowInstance = useReactFlow();
+
+  const nodes = useMemo(() => {
+    const triggerNode = { id: '0', position: { x: 0, y: 0 }, data: {}, type: 'trigger' };


Nit-picky comment, you can define this node outside of the function since it's a constant.

as far as I remember, react-flow mutates this object, so we would need to do the clone deep or smth, that's why I decided to keep it like this

pkg-pr-new · 2024-10-15T20:51:03Z

Open in Stackblitz

novu

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

@novu/client

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

@novu/framework

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

@novu/headless

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

@novu/nest

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

@novu/nextjs

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

@novu/node

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

@novu/notification-center

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

@novu/providers

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

@novu/react

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

@novu/react-native

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

@novu/shared

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

@novu/stateless

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

@novu/js

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

commit: 206416b

LetItRock added 12 commits October 10, 2024 09:51

feat(dashboard): header navigation

c3836f4

chore(dashboard): updated input hover bg

77874b9

Merge branch 'next' into nv-4458-dashboard-header-nav

b5a5880

chore(dashboard): update after merge

bba4914

chore(dashboard): suggestion from the pr #6672

556c77a

chore(dashboard): suggestions from the pr #6672

274b5fc

Merge branch 'next' into nv-4458-dashboard-header-nav

28fab0b

chore(dashboard): use the shadcn form and fields

e5d3ba0

feat(dashboard): workflow editor layout and route

9d2441e

feat(dashboard): workflow editor render name

b94f9d4

chore(dashboard): workflow editor rename file

a356ce5

feat(dashboard): workflow editor canvas - base step nodes and edges

0ccd8e7

LetItRock requested review from SokratisVidros, BiswaViraj and desiprisg October 15, 2024 15:48

LetItRock self-assigned this Oct 15, 2024

LetItRock had a problem deploying to Linting October 15, 2024 15:48 — with GitHub Actions Failure

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

LetItRock commented Oct 15, 2024

View reviewed changes

SokratisVidros approved these changes Oct 15, 2024

View reviewed changes

chore(dashboard): workflow canvas trigger node the element on top

51c683e

LetItRock temporarily deployed to Linting October 15, 2024 20:45 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting October 15, 2024 20:45 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting October 15, 2024 20:45 — with GitHub Actions Inactive

chore(dashboard): suggestions from the pr #6694

94ed89c

LetItRock had a problem deploying to Linting October 15, 2024 21:06 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting October 15, 2024 21:06 — with GitHub Actions Inactive

chore(dashboard): cspell fix

6bd9f8b

LetItRock temporarily deployed to Linting October 15, 2024 22:34 — with GitHub Actions Inactive

Base automatically changed from nv-4477-workflow-editor-route-and-layout to next October 16, 2024 07:22

LetItRock added 2 commits October 16, 2024 09:28

Merge branch 'next' into nv-4478-workflow-editor-canvas

d1beccb

chore(dashboard): fixes after merge

12558f6

LetItRock temporarily deployed to Linting October 16, 2024 07:42 — with GitHub Actions Inactive

BiswaViraj approved these changes Oct 16, 2024

View reviewed changes

chore(dashboard): position canvas with animation or resize

206416b

LetItRock temporarily deployed to Linting October 16, 2024 07:46 — with GitHub Actions Inactive

LetItRock merged commit 508c746 into next Oct 16, 2024
40 checks passed

LetItRock deleted the nv-4478-workflow-editor-canvas branch October 16, 2024 09:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard): workflow editor canvas - base step nodes and edges #6694

feat(dashboard): workflow editor canvas - base step nodes and edges #6694

LetItRock commented Oct 15, 2024

linear bot commented Oct 15, 2024

netlify bot commented Oct 15, 2024 •

edited

Loading

LetItRock Oct 15, 2024

LetItRock Oct 15, 2024

LetItRock Oct 15, 2024

LetItRock Oct 15, 2024

LetItRock Oct 15, 2024

LetItRock Oct 15, 2024

LetItRock Oct 15, 2024

LetItRock Oct 15, 2024

LetItRock Oct 15, 2024

LetItRock Oct 15, 2024

rgozdzialski commented Oct 15, 2024

SokratisVidros left a comment

SokratisVidros Oct 15, 2024

SokratisVidros Oct 15, 2024

LetItRock Oct 15, 2024

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

edited

Loading

feat(dashboard): workflow editor canvas - base step nodes and edges #6694

feat(dashboard): workflow editor canvas - base step nodes and edges #6694

Conversation

LetItRock commented Oct 15, 2024

What changed? Why was the change needed?

Screenshots

linear bot commented Oct 15, 2024

netlify bot commented Oct 15, 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

rgozdzialski commented Oct 15, 2024

SokratisVidros left a 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 15, 2024 • edited Loading

netlify bot commented Oct 15, 2024 •

edited

Loading

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

edited

Loading