feat(dashboard): in-app editor form driven by BE schema #6877

LetItRock · 2024-11-06T23:10:03Z

What changed? Why was the change needed?

Dashboard - In-App Editor - BE schema-driven form generation and validation.

In this PR:

renamed a bunch of components
added the default values to the dataSchema returned from BE
created the utils that parse the JsonSchema to Zod schema and parse JsonSchema to default values for the react-hook-form
react-hook-form with dynamic schema and validation (hardcore)
render the In-App UI based on uiSchema and component types
update workflow on In-App Editor form submission

Screenshots

Screen.Recording.2024-11-06.at.23.49.51.mov

linear · 2024-11-06T23:10:07Z

NV-4561 Schema driven form components

netlify · 2024-11-06T23:11:34Z

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

Name	Link
🔨 Latest commit	`10e5199`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/672cec43ffe8cc00084b3d7e
😎 Deploy Preview	https://deploy-preview-6877--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-11-06T23:12:17Z

apps/api/src/app/workflows-v2/shared/schemas/in-app-control.schema.ts

@@ -9,33 +9,36 @@ const redirectSchema = {
    url: {
      type: 'string',
      pattern: ABSOLUTE_AND_RELATIVE_URL_REGEX,
+      default: '',


Added the default values to the dataSchema, these are used to generate the default values for the form. The default values are required for all visible text fields by the react-hook-form, ref.

LetItRock · 2024-11-06T23:12:43Z

apps/dashboard/package.json

@@ -75,6 +75,7 @@
  "devDependencies": {
    "@clerk/types": "^4.6.1",
    "@eslint/js": "^9.9.0",
+    "@hookform/devtools": "^4.3.0",


A really useful tool to debug the react-hook-form state

LetItRock · 2024-11-06T23:13:17Z

apps/dashboard/src/components/primitives/form/avatar-picker.tsx

+            {error && (
+              <RiErrorWarningFill className="text-destructive outline-destructive absolute right-0 top-0 size-3 -translate-y-1/2 translate-x-1/2 rounded-full outline outline-1 outline-offset-1" />
+            )}


it was missing the error icon

LetItRock · 2024-11-06T23:14:39Z

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

-  ({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message) : children;
+const FormMessagePure = React.forwardRef<


The FormMessagePure is a label + icon that is not dependent on the FormField, it's used in a few cases.

LetItRock · 2024-11-06T23:15:24Z

apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx

@@ -78,7 +78,7 @@ const Step = () => {
  const { stepType: channel } = useStep();
  switch (channel) {
    case StepTypeEnum.IN_APP:
-      return <InApp />;
+      return <ConfigureInApp />;


LetItRock · 2024-11-06T23:19:28Z

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx

+const primaryActionKey = 'primaryAction';
+const secondaryActionKey = 'secondaryAction';
+
+export const InAppEditor = ({ uiSchema }: { uiSchema?: UiSchema }) => {


The component that renders the In-App Editor UI form dynamically based on the uiSchema.

LetItRock · 2024-11-06T23:22:18Z

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx

+
+const tabsContentClassName = 'h-full w-full px-3 py-3.5';
+
+export const InAppTabs = ({ workflow, step }: { workflow: WorkflowResponseDto; step: StepDataDto }) => {


This is the main component that is rendered in the In-App drawer, it consists of the editor and preview tabs, react-hook-form and submission logic.

LetItRock · 2024-11-06T23:23:43Z

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

+  withHint?: boolean;
+} & Pick<InputFieldProps, 'size'>;
+
+export const URLInput = ({


I've moved this component from the primitives as it's based on the form fields, and I couldn't make it work without the form fields.

Makes sense. Should we create an elements directory for components like this? If it makes sense outside of the workflow editor of course.

Let's see if there will be a need to reuse this one.

LetItRock · 2024-11-06T23:26:27Z

apps/dashboard/src/utils/schema.ts

+ * The function will recursively build the schema based on the JSONSchema object.
+ * It removes empty strings and objects with empty required fields during the transformation phase after parsing.
+ */
+export const buildDynamicZodSchema = (obj: JSONSchema): z.AnyZodObject => {


This is the util used to parse the dataSchema (which is JSONSchema type) to Zod. The converted schema is used in the form for the validation and then transformation after the parsing (success validation) phase. The transformed value is returned in the onSubmit handler.

if you need zod why do we serve jsonSchema? @SokratisVidros

I guess that the FE prefers to work with Zod for client-side validations so they transform the JSON schema to zod.

@tatarco, the Zod schema is not serializable; please check this discussion. There are tools that can convert Zod <> JSON schema and vice versa, but they are not "perfect" and require some runtime evaluation.

@tatarco is right. We should use the JSON Schema binding for React-hook form rather than transform to a Zod schema, else we risk loss of validation strictness.

LetItRock · 2024-11-06T23:27:25Z

apps/dashboard/src/utils/schema.ts

+/**
+ * Build default values based on the JSONSchema object.
+ */
+export const buildDefaultValues = (obj: JSONSchema): object => {


This util takes the dataSchema: JSONSchema and retrieves the default values from it.

@SokratisVidros the work done here shows how unnecessary was using the json schema if we need to manually parse it in the FE, we should have made the zod available via shared library and convert the zod to jsonschema for the library usage

I am not sure I understand the comment. If we hardcode the values per step how can we support dynamic configurations?

pkg-pr-new · 2024-11-06T23:44:42Z

Open in Stackblitz

@novu/client

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

@novu/headless

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

@novu/framework

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

@novu/js

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

@novu/nextjs

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

@novu/nest

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

@novu/node

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

@novu/notification-center

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

novu

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

@novu/providers

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

@novu/react

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

@novu/react-native

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

@novu/shared

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

@novu/stateless

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

commit: 10e5199

apps/dashboard/src/components/primitives/form/avatar-picker.tsx

desiprisg · 2024-11-07T07:51:34Z

apps/dashboard/src/components/primitives/form/avatar-picker.tsx

                <AvatarImage src={props.value as string} />
              </Avatar>
            ) : (
              <RiImageEditFill className="size-5" />
            )}
+            {error && (
+              <RiErrorWarningFill className="text-destructive outline-destructive absolute right-0 top-0 size-3 -translate-y-1/2 translate-x-1/2 rounded-full outline outline-1 outline-offset-1" />


You can do m-auto inset-0 to center this a bit cleaner i think.

I'm not sure I get it, we want to show the error icon in the top right corner of the avatar. Can you please clarify?

ah i thought you were centering. I think that you can do inset: 0 0 auto auto;

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-redirect.tsx

desiprisg · 2024-11-07T07:57:01Z

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

+  withHint?: boolean;
+} & Pick<InputFieldProps, 'size'>;
+
+export const URLInput = ({


Makes sense. Should we create an elements directory for components like this? If it makes sense outside of the workflow editor of course.

desiprisg · 2024-11-07T07:58:47Z

apps/dashboard/src/utils/schema.ts

Wow. Is there like no easier way to do this ?

There is a json-schema-to-zod lib, but it generates the string JS module that you have to evaluate at runtime, and there are some limitations.
Also this custom code has additional "transformations" that are applied on the form object after the "succesfull validation" and will be returned in the "onSuccess" handler of the form.

tatarco · 2024-11-07T08:02:53Z

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx

+        </div>
+        {body && getComponentByType({ component: body.component })}
+        {(primaryAction || secondaryAction) &&
+          getComponentByType({


doesn't it means that if the secondary key is missing it will still show both options in the UI ? same for primary

Hmmm, also when there is no action set yet, the widget should be displayed.

doesn't it means that if the secondary key is missing it will still show both options in the UI ? same for primary

@tatarco No, this code is just responsible for rendering or not the "whole" component, but it has the logic inside that determines which buttons to render or not.

Hmmm, also when there is no action set yet, the widget should be displayed.

@SokratisVidros primaryAction || secondaryAction variables are taken from the controls.uiSchema, which controls what components to render. But the controls.dataSchema default values or controls.values do control the "state" of the component, meaning that when there are no control.values, the component will still be rendered with a "no action" state.

you can see that in the attached video ;)

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx

SokratisVidros · 2024-11-07T09:25:49Z

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx

+        </div>
+        {body && getComponentByType({ component: body.component })}
+        {(primaryAction || secondaryAction) &&
+          getComponentByType({


Hmmm, also when there is no action set yet, the widget should be displayed.

SokratisVidros · 2024-11-07T09:27:11Z

apps/dashboard/src/utils/schema.ts

+ * The function will recursively build the schema based on the JSONSchema object.
+ * It removes empty strings and objects with empty required fields during the transformation phase after parsing.
+ */
+export const buildDynamicZodSchema = (obj: JSONSchema): z.AnyZodObject => {


I guess that the FE prefers to work with Zod for client-side validations so they transform the JSON schema to zod.

SokratisVidros · 2024-11-07T09:28:09Z

apps/dashboard/src/utils/schema.ts

+/**
+ * Build default values based on the JSONSchema object.
+ */
+export const buildDefaultValues = (obj: JSONSchema): object => {


I am not sure I understand the comment. If we hardcode the values per step how can we support dynamic configurations?

feat(dashboard): in-app editor schema driven form

f684317

LetItRock requested review from SokratisVidros, BiswaViraj, ChmaraX and desiprisg November 6, 2024 23:10

LetItRock self-assigned this Nov 6, 2024

github-actions bot added the @novu/api label Nov 6, 2024

LetItRock commented Nov 6, 2024

View reviewed changes

Merge branch 'next' into nv-4561-in-app-schema-driven-form

71f33b1

LetItRock temporarily deployed to Linting November 6, 2024 23:36 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting November 6, 2024 23:36 — with GitHub Actions Failure

desiprisg approved these changes Nov 7, 2024

View reviewed changes

tatarco reviewed Nov 7, 2024

View reviewed changes

BiswaViraj reviewed Nov 7, 2024

View reviewed changes

apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-editor.tsx Outdated Show resolved Hide resolved

SokratisVidros approved these changes Nov 7, 2024

View reviewed changes

chore(dashboard): suggestions from the pr #6877

e38f38a

LetItRock temporarily deployed to Linting November 7, 2024 11:32 — with GitHub Actions Inactive

BiswaViraj approved these changes Nov 7, 2024

View reviewed changes

BiswaViraj mentioned this pull request Nov 7, 2024

feat(dashboard): enhance step saving functionality and telemetr… #6865

Closed

Merge branch 'next' into nv-4561-in-app-schema-driven-form

fb62976

LetItRock temporarily deployed to Linting November 7, 2024 13:34 — with GitHub Actions Inactive

chore(dashboard): move default values to the ui schema

ab0c195

LetItRock temporarily deployed to Linting November 7, 2024 15:49 — with GitHub Actions Inactive

github-actions bot added the @novu/shared label Nov 7, 2024

LetItRock added 2 commits November 7, 2024 17:18

Merge branch 'next' into nv-4561-in-app-schema-driven-form

8cb5115

chore(dashboard): fixed ts issue with step slug

10e5199

LetItRock temporarily deployed to Linting November 7, 2024 16:35 — with GitHub Actions Inactive

LetItRock merged commit 4e7a429 into next Nov 7, 2024
39 of 40 checks passed

LetItRock deleted the nv-4561-in-app-schema-driven-form branch November 7, 2024 17:01


		const tabsContentClassName = 'h-full w-full px-3 py-3.5';

		export const InAppTabs = ({ workflow, step }: { workflow: WorkflowResponseDto; step: StepDataDto }) => {

feat(dashboard): in-app editor form driven by BE schema #6877

feat(dashboard): in-app editor form driven by BE schema #6877

Conversation

LetItRock commented Nov 6, 2024

What changed? Why was the change needed?

Screenshots

linear bot commented Nov 6, 2024

netlify bot commented Nov 6, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rifont Nov 7, 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

pkg-pr-new bot commented Nov 6, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LetItRock Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

LetItRock Nov 7, 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 Nov 6, 2024 •

edited

Loading

rifont Nov 7, 2024 •

edited

Loading

pkg-pr-new bot commented Nov 6, 2024 •

edited

Loading

LetItRock Nov 7, 2024 •

edited

Loading

LetItRock Nov 7, 2024 •

edited

Loading