feat(api): add ui scehma #6764

tatarco · 2024-10-24T09:14:57Z

What changed? Why was the change needed?

removed control scehma from step schema endpoint.
added UI schema concept.
added first implementatino of ui schema for inApp with control group

https://linear.app/novu/issue/NV-4547/create-ui-schema

Screenshots

Expand for optional sections

Related enterprise PR

Special notes for your reviewer

pkg-pr-new · 2024-10-24T09:24:02Z

Open in Stackblitz

@novu/client

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

@novu/framework

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

@novu/js

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

@novu/headless

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

@novu/nextjs

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

@novu/node

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

@novu/notification-center

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

novu

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

@novu/providers

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

@novu/react

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

@novu/react-native

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

@novu/shared

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

commit: 2223db5

netlify · 2024-10-24T09:41:49Z

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

Name	Link
🔨 Latest commit	`c49f30a`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/6721088eeed1bd000877d1b0
😎 Deploy Preview	https://deploy-preview-6764--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.

djabarovgeorge · 2024-10-27T09:26:31Z

apps/api/src/app/step-schemas/dtos/step-schema.dto.ts

@@ -1,6 +1,5 @@
 import { JSONSchema } from 'json-schema-to-ts';

 export type StepSchemaDto = {
-  controls: JSONSchema;


As discussed, I've already removed the controls from the DTO in PR #6742.

apps/api/src/app/step-schemas/dtos/step-schema.dto.ts

rifont · 2024-10-29T12:59:53Z

apps/api/src/app/step-schemas/dtos/step-schema.dto.ts

+
+export type UiSchema = {
+  type: `${StepType}`;
+  properties?: Properties;


Should properties always be supplied?

Suggested change

properties?: Properties;

properties: Properties;

Furthermore, I think it would be preferable to type out the Properties interface separately rather than collect all the different ui schema properties into the type. That way the Properties interface can evolve independently from the actual UI schema definitions.

i agree. I was not sure what approach to take here: simpler or more generic. you mean to convert the type to a generic type instead. did I get you right?

tatarco · 2024-10-29T13:02:53Z

apps/api/src/app/step-schemas/dtos/step-schema.dto.ts

+  subject: { type: 'inAppSubject' },
+  body: { type: 'inAppBody' },
+  avatar: { type: 'inAppAvatar' },
+  primaryAction: { type: 'inAppPrimaryAction' },


I wanted to clarify the reasoning behind our approach. The goal was not to create a one-to-one mapping but rather to specify particular overrides for the component type. Having a complete mapping may not be necessary, as it requires the front-end to duplicate specific elements for each type of step, which can lead to unnecessary complexity.
Could we revisit this to ensure it aligns with our original objectives?

apps/api/src/app/step-schemas/usecases/get-step-schema/get-step-schema.usecase.ts

rifont · 2024-10-29T13:04:26Z

packages/shared/src/dto/workflows/workflow-commons-fields.ts

+export enum UiControlGroupEnum {
+  INBOX = 'INBOX',
+}
+export class UiSchema {
+  controlGroup?: UiControlGroupEnum.INBOX;
+  elements?: UiElement[];
+}
+class UiElement {
+  elementTypeOverride: UiElementTypeEnum;
+}

+enum UiElementTypeEnum {
+  EMAIL_EDITOR = 'EMAIL_EDITOR',
+}


Should all of these be deleted with the new approach?

Suggested change

export enum UiControlGroupEnum {

INBOX = 'INBOX',

}

export class UiSchema {

controlGroup?: UiControlGroupEnum.INBOX;

elements?: UiElement[];

}

class UiElement {

elementTypeOverride: UiElementTypeEnum;

}

enum UiElementTypeEnum {

EMAIL_EDITOR = 'EMAIL_EDITOR',

}

i will, i thought to delete it separately while removing the controls from the /workflows response

tatarco · 2024-10-29T13:05:21Z

apps/api/src/app/step-schemas/dtos/step-schema.dto.ts

+
+const pushProperties = {
+  subject: { type: 'pushSubject' },
+  body: { type: 'pushBody' },


why not just text? it's going to make the FE work super problematic

as discussed in the meeting, in this solution, the client knows something rather than nothing the second solution suggested in the DX guide. Here, the client needs to know how to render pushBody. In the future, we can expand this approach to provide even more data to the client if needed.

tatarco · 2024-10-29T13:05:57Z

apps/api/src/app/step-schemas/dtos/step-schema.dto.ts

+  body: { type: 'pushBody' },
+};
+
+const smsProperties = {


also it's not correct, because in code first they can have as many controls as they want, they shouldn't be limited

i think we still need support for code first, we will need to store uiSchema on sync in the database and then extract it here.

apps/api/src/app/step-schemas/shared/mappers/map-step-type-to-output.mapper.ts

apps/api/src/app/step-schemas/dtos/step-schema.dto.ts

feat(api): add ui scehma

f60c7bb

tatarco temporarily deployed to Linting October 24, 2024 09:15 — with GitHub Actions Inactive

tatarco had a problem deploying to Linting October 24, 2024 09:15 — with GitHub Actions Failure

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

feat(api): fix compilation issues

65eb4f0

tatarco temporarily deployed to Linting October 24, 2024 09:17 — with GitHub Actions Inactive

tatarco had a problem deploying to Linting October 24, 2024 09:18 — with GitHub Actions Failure

tatarco temporarily deployed to Linting October 24, 2024 09:18 — with GitHub Actions Inactive

djabarovgeorge reviewed Oct 27, 2024

View reviewed changes

Merge remote-tracking branch 'origin/next' into add-ui-schema

f9dfcb9

djabarovgeorge temporarily deployed to Linting October 29, 2024 11:39 — with GitHub Actions Inactive

djabarovgeorge had a problem deploying to Linting October 29, 2024 11:39 — with GitHub Actions Failure

refactor(api): ui schema

2223db5

djabarovgeorge temporarily deployed to Linting October 29, 2024 12:50 — with GitHub Actions Inactive

djabarovgeorge had a problem deploying to Linting October 29, 2024 12:50 — with GitHub Actions Failure

rifont reviewed Oct 29, 2024

View reviewed changes

apps/api/src/app/step-schemas/dtos/step-schema.dto.ts Outdated Show resolved Hide resolved

rifont reviewed Oct 29, 2024

View reviewed changes

apps/api/src/app/step-schemas/dtos/step-schema.dto.ts Show resolved Hide resolved

rifont reviewed Oct 29, 2024

View reviewed changes

tatarco commented Oct 29, 2024

View reviewed changes

rifont reviewed Oct 29, 2024

View reviewed changes

apps/api/src/app/step-schemas/usecases/get-step-schema/get-step-schema.usecase.ts Outdated Show resolved Hide resolved

rifont reviewed Oct 29, 2024

View reviewed changes

tatarco commented Oct 29, 2024

View reviewed changes

SokratisVidros approved these changes Oct 29, 2024

View reviewed changes

djabarovgeorge added 2 commits October 29, 2024 17:03

feat(api): update after pr comments

8b5598c

feat(api): update after pr comments

2cd2291

djabarovgeorge had a problem deploying to Linting October 29, 2024 15:36 — with GitHub Actions Failure

djabarovgeorge temporarily deployed to Linting October 29, 2024 15:36 — with GitHub Actions Inactive

github-actions bot removed the @novu/shared label Oct 29, 2024

feat(api): update after pr comments

95738af

djabarovgeorge temporarily deployed to Linting October 29, 2024 16:06 — with GitHub Actions Inactive

djabarovgeorge had a problem deploying to Linting October 29, 2024 16:06 — with GitHub Actions Failure

fix(api): typo

c49f30a

djabarovgeorge temporarily deployed to Linting October 29, 2024 16:08 — with GitHub Actions Inactive

djabarovgeorge merged commit 8f5cc6e into next Oct 29, 2024
27 checks passed

djabarovgeorge deleted the add-ui-schema branch October 29, 2024 16:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(api): add ui scehma #6764

feat(api): add ui scehma #6764

tatarco commented Oct 24, 2024 •

edited by djabarovgeorge

Loading

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

edited

Loading

netlify bot commented Oct 24, 2024 •

edited

Loading

djabarovgeorge Oct 27, 2024

rifont Oct 29, 2024

rifont Oct 29, 2024

djabarovgeorge Oct 29, 2024

tatarco Oct 29, 2024

rifont Oct 29, 2024

djabarovgeorge Oct 29, 2024

tatarco Oct 29, 2024

djabarovgeorge Oct 29, 2024

tatarco Oct 29, 2024

djabarovgeorge Oct 29, 2024

feat(api): add ui scehma #6764

feat(api): add ui scehma #6764

Conversation

tatarco commented Oct 24, 2024 • edited by djabarovgeorge Loading

What changed? Why was the change needed?

Screenshots

Related enterprise PR

Special notes for your reviewer

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

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

tatarco commented Oct 24, 2024 •

edited by djabarovgeorge

Loading

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

edited

Loading

netlify bot commented Oct 24, 2024 •

edited

Loading