feat(web): add controls to the preview (#5884)

* feat: add controls to the preview

* fix: sync to latest enterprise

* fix: steps

* fix: test

* fix: page colorr

* feat: add debounce

* fix: schema

* fix: pr comments

* fix: pointer

apps/api/src/app/events/e2e/bridge-trigger.e2e-ee.ts

@@ -667,8 +667,8 @@ contexts.forEach((context: Context) => {
         await saveControlVariables(session, workflowId, stepId, { variables: { name: 'stored_control_name' } });
       }
 
-      const controls = { controls: { step: { [stepId]: { name: 'stored_control_name' } } } };
-      await triggerEvent(session, workflowId, subscriber, controls, bridge);
+      const controls = { steps: { [stepId]: { name: 'stored_control_name' } } };
+      await triggerEvent(session, workflowId, subscriber, undefined, bridge, controls);
       await session.awaitRunningJobs();
 
       const sentMessage = await messageRepository.find({
@@ -699,7 +699,14 @@ async function syncWorkflow(
   if (!foundWorkflow) throw new Error('Workflow not found');
 }
 
-async function triggerEvent(session, workflowId: string, subscriber, payload?: any, bridge?: { url: string }) {
+async function triggerEvent(
+  session,
+  workflowId: string,
+  subscriber,
+  payload?: any,
+  bridge?: { url: string },
+  controls?: Record<string, unknown>
+) {
   const defaultPayload = {
     name: 'test_name',
   };
@@ -713,6 +720,7 @@ async function triggerEvent(session, workflowId: string, subscriber, payload?: a
         email: '[email protected]',
       },
       payload: payload ?? defaultPayload,
+      controls: controls ?? undefined,
       bridgeUrl: bridge?.url ?? undefined,
     },
     {

apps/web/src/bridgeApi/bridgeApi.client.ts

@@ -12,6 +12,9 @@ export type TriggerParams = {
   bridgeUrl?: string;
   to: { subscriberId: string; email: string };
   payload: Record<string, unknown>;
+  controls?: {
+    steps?: Record<string, unknown>;
+  };
 };
 
 export type BridgeStatus = {
@@ -85,24 +88,23 @@ export function buildBridgeHTTPClient(baseURL: string) {
      */
     async getStepPreview({ workflowId, stepId, controls, payload }: StepPreviewParams): Promise<any> {
       return post(`${baseURL}?action=preview&workflowId=${workflowId}&stepId=${stepId}`, {
-        // TODO: Rename to controls
-        inputs: controls || {},
-        // TODO: Rename to payload
-        data: payload || {},
+        controls: controls || {},
+        payload: payload || {},
       });
     },
 
     /**
      * TODO: Use framework shared types
      */
-    async trigger({ workflowId, bridgeUrl, to, payload }: TriggerParams): Promise<any> {
+    async trigger({ workflowId, bridgeUrl, to, payload, controls }: TriggerParams): Promise<any> {
       payload = payload || {};
       payload.__source = 'studio-test-workflow';
 
       return post(`${baseURL}?action=trigger&workflowId=${workflowId}`, {
         bridgeUrl,
         to,
         payload,
+        controls,
       });
     },
   };