feat(dashboard): workflow editor route and basic layout #6681

LetItRock · 2024-10-11T15:03:05Z

What changed? Why was the change needed?

Workflow Editor route and basic layout

Screenshots

Screen.Recording.2024-10-11.at.17.01.46.mov

linear · 2024-10-11T15:03:09Z

NV-4477 Workflow Editor - Route and Layout

LetItRock · 2024-10-11T15:03:44Z

apps/dashboard/eslint.config.js

+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          filter: '_',
+          selector: 'variableLike',
+          leadingUnderscore: 'allow',
+          format: ['PascalCase', 'camelCase', 'UPPER_CASE'],


allow using _ for the unused variables

LetItRock · 2024-10-11T15:04:28Z

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

+  return (
+    <IntercomProvider appId={INTERCOM_APP_ID}>
+      <div className="relative flex w-full">
+        <div className="flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
+          <HeaderNavigation startItems={headerStartItems} />
+
+          <div className="flex min-h-dvh flex-col overflow-y-auto overflow-x-hidden">{children}</div>
+        </div>
+      </div>
+    </IntercomProvider>


similar layout to the dashboard layout, but we might change here the header navigation and we don't need to show the side navigation

LetItRock · 2024-10-11T15:06:49Z

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

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


the tabs component updated according to our designs

LetItRock · 2024-10-11T15:07:18Z

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

+  const { workflowId } = useParams<{ workflowId?: string }>();
+  const navigate = useNavigate();
+  const form = useForm<z.infer<typeof formSchema>>({ mode: 'onSubmit', resolver: zodResolver(formSchema) });
+  const { handleSubmit, reset } = form;
+
+  const { workflow } = useFetchWorkflow({
+    workflowId,
+    onSuccess: (data) => {
+      reset(data);
+    },
+    onError: () => {
+      navigate(buildRoute(ROUTES.WORKFLOWS, { environmentId: currentEnvironment?._id ?? '' }));
+    },
+  });


fetch the workflow and set it in the form state

when BE returns an error, navigate the user to the workflow list page

LetItRock · 2024-10-11T15:09:56Z

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

+                        <TruncatedText
+                          className="cursor-pointer"
+                          text={workflow.name}
+                          onClick={() => {
+                            navigate(
+                              buildRoute(ROUTES.EDIT_WORKFLOW, {
+                                environmentId: currentEnvironment?._id ?? '',
+                                workflowId: workflow._id,
+                              })
+                            );
+                          }}
+                        />


I wasn't sure if this is what it should be because, from the designs, it's not clear. But decided to do it like when clicking on the workflow name, redirect the user to the workflow editor.

pkg-pr-new · 2024-10-11T15:12:11Z

Open in Stackblitz

novu

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

@novu/client

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

@novu/headless

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

@novu/framework

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

@novu/js

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

@novu/nest

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

@novu/nextjs

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

@novu/notification-center

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

@novu/node

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

@novu/react

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

@novu/providers

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

@novu/react-native

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

@novu/shared

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

@novu/stateless

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

commit: 8c70204

netlify · 2024-10-11T15:16:55Z

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

Name	Link
🔨 Latest commit	`8c70204`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/670ee8e393f802000826b81d
😎 Deploy Preview	https://deploy-preview-6681--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.

SokratisVidros · 2024-10-15T12:19:03Z

apps/dashboard/src/api/bridge.ts

+import { get, post } from './api.client';
+
+export const getBridgeHealthCheck = async () => {
+  const { data } = await get<{ data: BridgeStatus }>('/bridge/status');


We need to return errors as well. Then in a separate PR we need to wire them to a global error handler.

SokratisVidros · 2024-10-15T16:02:07Z

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

@@ -0,0 +1,124 @@
+import { useLayoutEffect, useState } from 'react';
+import { RiLinkM, RiPencilFill } from 'react-icons/ri';
+import { PopoverPortal } from '@radix-ui/react-popover';


Is this the recommended way to use a PopoverPortal for ShadCN? I'd expect this to come from primitives folder leveraging the ShadCN code downloaded via the CLI.

Unfortunately, the cli doesn't generate the portal 🤷‍♂️ but we can re-export it, I'll do it

SokratisVidros · 2024-10-15T16:04:25Z

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

+      await updateBridgeUrl({ url: bridgeUrl, environmentId: currentEnvironment?._id ?? '' });
+      setBridgeUrl(bridgeUrl);
+    } else {
+      setError('bridgeUrl', { message: 'The provided URL is not the Novu Endpoint URL' });


The new API, the team, prepared has discrete error types. So we should use the server response instead of hardcoding a frontend error message.

See here

@SokratisVidros, the updateBridgeUrl is calling the /environments/:environmentId endpoint. Do I miss something?

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

SokratisVidros · 2024-10-15T16:18:04Z

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

+                          onClick={() => {
+                            navigate(
+                              buildRoute(ROUTES.EDIT_WORKFLOW, {
+                                environmentId: currentEnvironment?._id ?? '',


This is pure inner DX but also a way to prevent invalid states in the front end, such as a workflow route, without environmentId.

Can we please update the hook times so that they always return a currentEnvironment when used to avoid this ternary on each current environment?

There are two ways to go about this.

The hook with throw an error if used and the environment is not set (fail fast), but the environment return type will always be IEnvironment.

We can teach the hook to return the {isLoaded, currentEnvironment} tuple and use discriminated unions so that if isLoaded is true currentEnvironment is always an IEnvironment. Then, in all the components that use useEnvironment we can do if (!isLoaded) { return null }

@SokratisVidros, it's not that simple:

Throwing an error won't work, because on the initial render the currentEnvironment is always undefined, so the useEnvironment hook will always throw.

That's a partial solution to this problem because all code above the if (!isLoaded) including hooks will still need to check whether the current env is present.

We will take this offline. It's not a good enough blocker for this PR.

apps/dashboard/src/hooks/use-fetch-workflow.ts

apps/dashboard/src/hooks/use-update-bridge-url.ts

LetItRock added 10 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

LetItRock requested review from SokratisVidros and desiprisg October 11, 2024 15:03

LetItRock self-assigned this Oct 11, 2024

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

LetItRock changed the title ~~Nv 4477 workflow editor route and layout~~ feat(dashboard): workflow editor render name Oct 11, 2024

chore(dashboard): workflow editor rename file

a356ce5

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

LetItRock commented Oct 11, 2024

View reviewed changes

Base automatically changed from nv-4458-dashboard-header-nav to next October 11, 2024 15:12

LetItRock changed the title ~~feat(dashboard): workflow editor render name~~ feat(dashboard): workflow editor route and basic layout Oct 14, 2024

SokratisVidros approved these changes Oct 15, 2024

View reviewed changes

Merge branch 'next' into nv-4477-workflow-editor-route-and-layout

fb81a8d

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

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

chore(dashboard): updated lock file

365b22e

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

chore(dashboard): suggestions from the pr #6681

8c70204

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

SokratisVidros approved these changes Oct 16, 2024

View reviewed changes

LetItRock merged commit cc184b4 into next Oct 16, 2024
42 checks passed

LetItRock deleted the nv-4477-workflow-editor-route-and-layout branch October 16, 2024 07:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard): workflow editor route and basic layout #6681

feat(dashboard): workflow editor route and basic layout #6681

LetItRock commented Oct 11, 2024

linear bot commented Oct 11, 2024

LetItRock Oct 11, 2024

LetItRock Oct 11, 2024

LetItRock Oct 11, 2024

LetItRock Oct 11, 2024

LetItRock Oct 11, 2024

LetItRock Oct 11, 2024

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

edited

Loading

netlify bot commented Oct 11, 2024 •

edited

Loading

SokratisVidros Oct 15, 2024

SokratisVidros Oct 15, 2024

LetItRock Oct 15, 2024 •

edited

Loading

SokratisVidros Oct 15, 2024

LetItRock Oct 15, 2024

SokratisVidros Oct 15, 2024

LetItRock Oct 15, 2024

SokratisVidros Oct 16, 2024

feat(dashboard): workflow editor route and basic layout #6681

feat(dashboard): workflow editor route and basic layout #6681

Conversation

LetItRock commented Oct 11, 2024

What changed? Why was the change needed?

Screenshots

linear bot commented Oct 11, 2024

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 11, 2024 • edited Loading

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

LetItRock Oct 15, 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

Choose a reason for hiding this comment

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

edited

Loading

netlify bot commented Oct 11, 2024 •

edited

Loading

LetItRock Oct 15, 2024 •

edited

Loading