refactor(web, api, worker, dal): Rename inputs to controls (#5833)

* refactor(client): rename input to control throughout code * test: Add test for provider execution with step outputs * fix(errors): correct error code enums in execution errors * refactor(api): rename "inputs" to "controls" * refactor(email): rename isSavingInputs to isSavingControls * refactor(components): Rename InputVariables to ControlVariables * feat(api): Add echo sync and diff routes * refactor(variables): Rename inputVariables to controlVariables * chore: update submodule commit * test: Add missing controls field in test-email e2e test * fix(sync): correct backend URL in test * fix * chore: update subproject commit reference --------- Co-authored-by: Dima Grossman <[email protected]>
novuhq · Jun 26, 2024 · d1ee964 · d1ee964
1 parent 79605c8
commit d1ee964
Show file tree

Hide file tree

Showing 54 changed files with 269 additions and 225 deletions.
diff --git a/.source b/.source
diff --git a/README.md b/README.md
@@ -114,7 +114,7 @@ client.workflow('comment-on-post', async ({step, subscriber}) => {
       body: renderReactEmail(<ReactEmailComponent events={digestedEvents} />);
     }
   }, {
-    // Step-level inputs defined in code and controlled in the novu Cloud UI by a Non-Technical Team member
+    // Step-level controls defined in code and controlled in the novu Cloud UI by a Non-Technical Team member
     controlSchema: {
       // ...JSON Schema
     },

diff --git a/apps/api/src/app/events/dtos/test-email-request.dto.ts b/apps/api/src/app/events/dtos/test-email-request.dto.ts
@@ -41,4 +41,6 @@ export class TestSendEmailRequestDto {
 
   @IsOptional()
   inputs: any;
+  @IsOptional()
+  controls: any;
 }
diff --git a/apps/api/src/app/events/e2e/bridge-trigger.e2e-ee.ts b/apps/api/src/app/events/e2e/bridge-trigger.e2e-ee.ts
@@ -631,7 +631,7 @@ async function syncWorkflow(
   workflowIdentifier: string,
   echoServer: EchoServer
 ) {
-  await session.testAgent.post(`/v1/echo/sync`).send({
+  await session.testAgent.post(`/v1/bridge/sync`).send({
     bridgeUrl: echoServer.serverPath + '/echo',
   });
 
@@ -671,7 +671,7 @@ async function discoverAndSyncEcho(
   workflowIdentifier?: string,
   echoServer?: EchoServer
 ) {
-  const discoverResponse = await session.testAgent.post(`/v1/echo/sync`).send({
+  const discoverResponse = await session.testAgent.post(`/v1/bridge/sync`).send({
     bridgeUrl: echoServer?.serverPath + '/echo',
   });
 

diff --git a/apps/api/src/app/events/e2e/test-email.e2e.ts b/apps/api/src/app/events/e2e/test-email.e2e.ts
@@ -13,6 +13,7 @@ describe('Events - Test email - /v1/events/test/email (POST)', function () {
     contentType: 'customHtml',
     payload: {},
     inputs: {},
+    controls: {},
     subject: 'subject',
     preheader: 'preheader',
     content: '<html><head></head><body>Hello world!</body></html>',

diff --git a/apps/api/src/app/events/events.controller.ts b/apps/api/src/app/events/events.controller.ts
@@ -167,7 +167,8 @@ export class EventsController {
         workflowId: body.workflowId,
         stepId: body.stepId,
         bridge: body.bridge,
-        inputs: body.inputs,
+        inputs: body.controls || body.inputs,
+        controls: body.controls || body.inputs,
       })
     );
   }

diff --git a/apps/api/src/app/events/usecases/send-test-email/send-test-email.command.ts b/apps/api/src/app/events/usecases/send-test-email/send-test-email.command.ts
@@ -41,6 +41,8 @@ export class SendTestEmailCommand extends EnvironmentWithUserCommand {
 
   @IsOptional()
   inputs: any;
+  @IsOptional()
+  controls: any;
 
   @IsOptional()
   @IsString()

diff --git a/apps/api/src/app/events/usecases/send-test-email/send-test-email.usecase.ts b/apps/api/src/app/events/usecases/send-test-email/send-test-email.usecase.ts
@@ -96,7 +96,8 @@ export class SendTestEmail {
         const data = await service.execute({
           workflowId: command.workflowId,
           stepId: command.stepId,
-          inputs: command.inputs,
+          inputs: command.controls || command.inputs,
+          controls: command.controls || command.inputs,
           data: command.payload,
           environmentId: command.environmentId,
           organizationId: command.organizationId,

diff --git a/apps/api/src/app/testing/echo/echo-sync.e2e-ee.ts b/apps/api/src/app/testing/echo/echo-sync.e2e-ee.ts
@@ -42,7 +42,7 @@ describe('Echo Sync - /echo/sync (POST)', async () => {
   it('should update echo url', async () => {
     await echoServer.start({ workflows: [] });
 
-    const result = await session.testAgent.post(`/v1/echo/sync`).send({
+    const result = await session.testAgent.post(`/v1/bridge/sync`).send({
       bridgeUrl: echoServer.serverPath,
     });
 
@@ -92,7 +92,7 @@ describe('Echo Sync - /echo/sync (POST)', async () => {
     );
     await echoServer.start({ workflows: [newWorkflow] });
 
-    const result = await session.testAgent.post(`/v1/echo/sync`).send({
+    const result = await session.testAgent.post(`/v1/bridge/sync`).send({
       bridgeUrl: echoServer.serverPath,
     });
     expect(result.body.data?.length).to.equal(1);
@@ -149,7 +149,7 @@ describe('Echo Sync - /echo/sync (POST)', async () => {
     );
     await echoServer.start({ workflows: [newWorkflow] });
 
-    const result = await session.testAgent.post(`/v1/echo/sync`).send({
+    const result = await session.testAgent.post(`/v1/bridge/sync`).send({
       bridgeUrl: echoServer.serverPath,
     });
     expect(result.body.data?.length).to.equal(1);
@@ -170,7 +170,7 @@ describe('Echo Sync - /echo/sync (POST)', async () => {
     expect(messageTemplates.length).to.equal(1);
     const messageTemplatesToTest = messageTemplates[0];
 
-    expect(messageTemplatesToTest.inputs).to.deep.equal(inputPostPayload);
+    expect(messageTemplatesToTest.controls).to.deep.equal(inputPostPayload);
   });
 
   it('should update a workflow', async () => {
@@ -209,7 +209,7 @@ describe('Echo Sync - /echo/sync (POST)', async () => {
     );
     await echoServer.start({ workflows: [newWorkflow] });
 
-    await session.testAgent.post(`/v1/echo/sync`).send({
+    await session.testAgent.post(`/v1/bridge/sync`).send({
       bridgeUrl: echoServer.serverPath,
     });
 
@@ -257,7 +257,7 @@ describe('Echo Sync - /echo/sync (POST)', async () => {
     );
     await echoServer.start({ workflows: [newWorkflow2] });
 
-    await session.testAgent.post(`/v1/echo/sync`).send({
+    await session.testAgent.post(`/v1/bridge/sync`).send({
       bridgeUrl: echoServer.serverPath,
     });
 

diff --git a/apps/api/src/bootstrap.ts b/apps/api/src/bootstrap.ts
@@ -29,6 +29,8 @@ const extendedBodySizeRoutes = [
   '/v1/layouts',
   '/v1/echo/sync',
   '/v1/echo/diff',
+  '/v1/bridge/sync',
+  '/v1/bridge/diff',
 ];
 
 if (process.env.SENTRY_DSN) {

diff --git a/apps/web/src/api/bridge/bridge.api.ts b/apps/web/src/api/bridge/bridge.api.ts
@@ -26,10 +26,11 @@ export const bridgeApi = {
     workflowId: string,
     stepId: string,
     payload: Record<string, unknown>,
-    inputs: Record<string, unknown>
+    controls: Record<string, unknown>
   ): Promise<any> {
     return bridgeHttp.post('?action=preview&workflowId=' + workflowId + '&stepId=' + stepId, {
-      inputs: inputs || {},
+      inputs: controls || {},
+      controls: controls || {},
       data: payload || {},
     });
   },

diff --git a/apps/web/src/components/layout/components/EchoStatus.tsx b/apps/web/src/components/layout/components/EchoStatus.tsx
@@ -16,9 +16,9 @@ export function EchoStatus() {
     version: string;
     discovered: { workflows: number };
   }>(
-    ['/v1/echo/status'],
+    ['/v1/bridge/status'],
     () => {
-      return api.get('/v1/echo/status');
+      return api.get('/v1/bridge/status');
     },
     {
       enabled: echoEnabled,

diff --git a/apps/web/src/components/workflow/preview/chat/ChatPreview.tsx b/apps/web/src/components/workflow/preview/chat/ChatPreview.tsx
@@ -12,7 +12,13 @@ import { useMutation } from '@tanstack/react-query';
 import { useTemplateEditorForm } from '../../../../pages/templates/components/TemplateEditorFormProvider';
 import { ChatBasePreview } from './ChatBasePreview';
 
-export function ChatPreview({ showLoading = false, inputVariables }: { showLoading?: boolean; inputVariables?: any }) {
+export function ChatPreview({
+  showLoading = false,
+  controlVariables,
+}: {
+  showLoading?: boolean;
+  controlVariables?: any;
+}) {
   const { watch, formState } = useFormContext<IForm>();
   const { template } = useTemplateEditorForm();
   const { bridge } = useEnvironment({}, template?.bridge);
@@ -27,18 +33,21 @@ export function ChatPreview({ showLoading = false, inputVariables }: { showLoadi
     mutateAsync,
     isLoading: isBridgeLoading,
     error: previewError,
-  } = useMutation((data) => api.post('/v1/echo/preview/' + formState?.defaultValues?.identifier + '/' + stepId, data), {
-    onSuccess(data) {
-      setBridgeContent(data.outputs.body);
-    },
-  });
+  } = useMutation(
+    (data) => api.post('/v1/bridge/preview/' + formState?.defaultValues?.identifier + '/' + stepId, data),
+    {
+      onSuccess(data) {
+        setBridgeContent(data.outputs.body);
+      },
+    }
+  );
 
   useEffect(() => {
     if (bridge) {
-      mutateAsync(inputVariables);
+      mutateAsync(controlVariables);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bridge, inputVariables]);
+  }, [bridge, controlVariables]);
 
   const { selectedLocale, locales, areLocalesLoading, onLocaleChange } = useTemplateLocales({
     content: content as string,

diff --git a/apps/web/src/components/workflow/preview/email/EmailPreview.tsx b/apps/web/src/components/workflow/preview/email/EmailPreview.tsx
@@ -17,7 +17,7 @@ import { usePreviewEmailTemplate } from '../../../../pages/templates/hooks/usePr
 import { useMutation } from '@tanstack/react-query';
 import { useEnvironment } from '../../../../hooks/useEnvironment';
 import { useTemplateEditorForm } from '../../../../pages/templates/components/TemplateEditorFormProvider';
-import { InputVariablesForm } from '../../../../pages/templates/components/InputVariablesForm';
+import { ControlVariablesForm } from '../../../../pages/templates/components/ControlVariablesForm';
 import { ErrorPrettyRender } from '../ErrorPrettyRender';
 
 const PreviewContainer = styled.div`
@@ -59,20 +59,23 @@ export const EmailPreview = ({ showVariables = true, view }: { view: string; sho
     content,
   });
 
-  const { mutateAsync: saveInputs, isLoading: isSavingInputs } = useMutation((data) =>
-    api.put('/v1/echo/inputs/' + formState?.defaultValues?.identifier + '/' + stepId, { variables: data })
+  const { mutateAsync: saveControls, isLoading: isSavingControls } = useMutation((data) =>
+    api.put('/v1/bridge/controls/' + formState?.defaultValues?.identifier + '/' + stepId, { variables: data })
   );
 
   const {
     mutateAsync,
     isLoading: isBridgeLoading,
     error: previewError,
-  } = useMutation((data) => api.post('/v1/echo/preview/' + formState?.defaultValues?.identifier + '/' + stepId, data), {
-    onSuccess(data) {
-      setBridgeContent(data.outputs.body);
-      setBridgeSubject(data.outputs.subject);
-    },
-  });
+  } = useMutation(
+    (data) => api.post('/v1/bridge/preview/' + formState?.defaultValues?.identifier + '/' + stepId, data),
+    {
+      onSuccess(data) {
+        setBridgeContent(data.outputs.body);
+        setBridgeSubject(data.outputs.subject);
+      },
+    }
+  );
 
   const { getEmailPreview, previewContent, subject, isPreviewContentLoading } = usePreviewEmailTemplate({
     locale: selectedLocale,
@@ -158,7 +161,7 @@ export const EmailPreview = ({ showVariables = true, view }: { view: string; sho
           </When>
           <When truthy={bridge}>
             <div style={{ minWidth: 300, maxWidth: 300, marginLeft: 'auto' }}>
-              <InputVariablesForm
+              <ControlVariablesForm
                 onChange={(values) => {
                   mutateAsync(values);
                 }}

diff --git a/apps/web/src/components/workflow/preview/in-app/InAppPreview.tsx b/apps/web/src/components/workflow/preview/in-app/InAppPreview.tsx
@@ -11,7 +11,7 @@ import { api } from '../../../../api';
 import { useEnvironment } from '../../../../hooks/useEnvironment';
 import { useMutation } from '@tanstack/react-query';
 import { useTemplateEditorForm } from '../../../../pages/templates/components/TemplateEditorFormProvider';
-import { InputVariablesForm } from '../../../../pages/templates/components/InputVariablesForm';
+import { ControlVariablesForm } from '../../../../pages/templates/components/ControlVariablesForm';
 import { InAppBasePreview } from './InAppBasePreview';
 
 export function InAppPreview({ showVariables = true }: { showVariables?: boolean }) {
@@ -34,14 +34,17 @@ export function InAppPreview({ showVariables = true }: { showVariables?: boolean
     mutateAsync,
     isLoading: isBridgeLoading,
     error: previewError,
-  } = useMutation((data) => api.post('/v1/echo/preview/' + formState?.defaultValues?.identifier + '/' + stepId, data), {
-    onSuccess(data) {
-      setBridgeContent({
-        content: data.outputs.body,
-        ctaButtons: [],
-      });
-    },
-  });
+  } = useMutation(
+    (data) => api.post('/v1/bridge/preview/' + formState?.defaultValues?.identifier + '/' + stepId, data),
+    {
+      onSuccess(data) {
+        setBridgeContent({
+          content: data.outputs.body,
+          ctaButtons: [],
+        });
+      },
+    }
+  );
 
   useEffect(() => {
     if (bridge) {
@@ -114,7 +117,7 @@ export function InAppPreview({ showVariables = true }: { showVariables?: boolean
               </Button>
             </When>
             <When truthy={bridge}>
-              <InputVariablesForm
+              <ControlVariablesForm
                 onChange={(values) => {
                   mutateAsync(values);
                 }}

diff --git a/apps/web/src/components/workflow/preview/push/Content.tsx b/apps/web/src/components/workflow/preview/push/Content.tsx
@@ -13,11 +13,11 @@ import { PushBasePreview } from './PushBasePreview';
 export default function Content({
   showLoading = false,
   showOverlay = true,
-  inputVariables,
+  controlVariables,
 }: {
   showLoading?: boolean;
   showOverlay?: boolean;
-  inputVariables?: any;
+  controlVariables?: any;
 }) {
   const { template } = useTemplateEditorForm();
   const { bridge } = useEnvironment({}, template?.bridge);
@@ -35,12 +35,15 @@ export default function Content({
     mutateAsync,
     isLoading: isBridgeLoading,
     error: previewError,
-  } = useMutation((data) => api.post('/v1/echo/preview/' + formState?.defaultValues?.identifier + '/' + stepId, data), {
-    onSuccess(data) {
-      setBridgeContent(data.outputs.body);
-      setBridgeSubject(data.outputs.subject);
-    },
-  });
+  } = useMutation(
+    (data) => api.post('/v1/bridge/preview/' + formState?.defaultValues?.identifier + '/' + stepId, data),
+    {
+      onSuccess(data) {
+        setBridgeContent(data.outputs.body);
+        setBridgeSubject(data.outputs.subject);
+      },
+    }
+  );
 
   const { selectedLocale, locales, areLocalesLoading, onLocaleChange } = useTemplateLocales({
     content: content as string,
@@ -55,10 +58,10 @@ export default function Content({
 
   useEffect(() => {
     if (bridge) {
-      mutateAsync(inputVariables);
+      mutateAsync(controlVariables);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bridge, inputVariables]);
+  }, [bridge, controlVariables]);
 
   return (
     <PushBasePreview

diff --git a/apps/web/src/components/workflow/preview/push/PushPreview.tsx b/apps/web/src/components/workflow/preview/push/PushPreview.tsx
@@ -4,16 +4,16 @@ import Content from './Content';
 export function PushPreview({
   showLoading = false,
   showOverlay = true,
-  inputVariables,
+  controlVariables: controlVariables,
 }: {
   showLoading?: boolean;
   showOverlay?: boolean;
-  inputVariables?: any;
+  controlVariables?: any;
 }) {
   return (
     <div>
       <MobileSimulator withBackground>
-        <Content inputVariables={inputVariables} showLoading={showLoading} showOverlay={showOverlay} />
+        <Content controlVariables={controlVariables} showLoading={showLoading} showOverlay={showOverlay} />
       </MobileSimulator>
     </div>
   );