Workflow runs in side panel #11669

Devessier · 2025-04-22T09:32:33Z

Vidéo explicative : https://share.cleanshot.com/VsvWknlW

Closes twentyhq/core-team-issues#810
Closes twentyhq/core-team-issues#806

Known issues to fix later:

Workflows - [Forms] Do not unselect the pending Form node when opening the show page of a Workflow Run from the side panel core-team-issues#879

…croll on top of the canvas

…lds in the side panel

…panel

reactflow calls selection change handlers even when a node is set as selected at the first render of the Reactflow component. We don't want to run the callback at this moment.

… record from the side panel

…run in side panel

…ys reset between two side panel views

…nel is closing

Devessier · 2025-04-23T11:47:22Z

...s/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts

-        set(
-          activeTabIdComponentState.atomFamily({
-            instanceId: WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID,
-          }),
-          null,
-        );


No longer needed as we now the page's id as the tab list id.

Devessier · 2025-04-23T12:07:07Z

...ules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx

  const activeTabId = useRecoilComponentValueV2(
    activeTabIdComponentState,
-    WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID,
+    commandMenuPageComponentInstance.instanceId,


Thanks to this, the tab is scoped to the side panel's page. The tab will automatically reset when opening a new node in the side panel.

Devessier · 2025-04-23T12:07:44Z

packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts

@@ -145,7 +145,7 @@ export const useRecordShowContainerTabs = (
        tabs: {
          workflow: {
            title: 'Flow',
-            position: 0,
+            position: 101,


Do as with the other object specific layouts: position it after the fields in the side panel.

Devessier · 2025-04-23T12:08:05Z

packages/twenty-front/src/modules/workflow/hooks/useWorkflowRun.ts

+  const { success, data: record } = useMemo(
+    () => workflowRunSchema.safeParse(rawRecord),
+    [rawRecord],
+  );


Memoize to prevent useEffect unwanted re-runs.

…ial tab in openWorkflowRunViewStepInCommandMenu

…opened in side panel then full screen

greptile-apps

PR Summary

This PR implements workflow run visualization in the side panel, with support for form steps and improved diagram rendering management.

Added /packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramStatusState.ts to manage diagram rendering phases ('computing-diagram', 'computing-dimensions', 'done')
Added e2e tests in /packages/twenty-e2e-testing/tests/workflow-run.spec.ts for workflow run visualization and form step handling
Added useSetInitialWorkflowRunRightDrawerTab hook to manage initial tab selection based on execution status
Optimized workflow run validation with useMemo in useWorkflowRun.ts
Improved viewport management with right drawer in WorkflowDiagramCanvasBase.tsx

_{19 file(s) reviewed, 7 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-04-23T15:50:08Z

packages/twenty-e2e-testing/tests/workflow-run.spec.ts

+  // 1. Exit the dropdown
+  await workflowRunNameCell.click();
+  // 2. Actually open the workflow run in the side panel
+  await workflowRunNameCell.click();


style: Double click on workflowRunNameCell could be flaky. Consider using a more reliable way to exit dropdown and open side panel, or add wait conditions between clicks.

greptile-apps · 2025-04-23T15:53:14Z

...ages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunVisualizer.tsx

+  if (
+    !isDefined(workflowRun) ||
+    workflowDiagramStatus === 'computing-diagram'
+  ) {
    return null;
  }


style: Consider showing a loading spinner or skeleton instead of returning null during computation

greptile-apps · 2025-04-23T15:53:48Z

.../twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx

+    if (!isDefined(containerRef.current)) {
+      return;
+    }


logic: Early return without calling onInit() could lead to missed initialization. Consider calling onInit() even if containerRef is not defined

greptile-apps · 2025-04-23T15:55:11Z

...-front/src/modules/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunRightDrawerTab.ts

+  const setInitialWorkflowRunRightDrawerTab = useRecoilCallback(
+    ({ snapshot, set }) =>
+      ({
+        workflowSelectedNode,
+        stepExecutionStatus,
+      }: {
+        workflowSelectedNode: string;
+        stepExecutionStatus: WorkflowDiagramRunStatus;
+      }) => {
+        const commandMenuPageInfo = getSnapshotValue(
+          snapshot,
+          commandMenuPageInfoState,
+        );
+
+        const activeWorkflowRunRightDrawerTab = getSnapshotValue(
+          snapshot,
+          activeTabIdComponentState.atomFamily({
+            instanceId: commandMenuPageInfo.instanceId,
+          }),
+        ) as WorkflowRunTabId | null;
+
+        const isInputTabDisabled = getIsInputTabDisabled({
+          stepExecutionStatus,
+          workflowSelectedNode,
+        });
+        const isOutputTabDisabled = getIsOutputTabDisabled({
+          stepExecutionStatus,
+        });
+
+        if (isNull(activeWorkflowRunRightDrawerTab)) {
+          const defaultTabId = isOutputTabDisabled
+            ? WorkflowRunTabId.NODE
+            : WorkflowRunTabId.OUTPUT;
+
+          set(
+            activeTabIdComponentState.atomFamily({
+              instanceId: commandMenuPageInfo.instanceId,
+            }),
+            defaultTabId,
+          );
+
+          return;
+        }
+
+        if (
+          (isInputTabDisabled &&
+            activeWorkflowRunRightDrawerTab === WorkflowRunTabId.INPUT) ||
+          (isOutputTabDisabled &&
+            activeWorkflowRunRightDrawerTab === WorkflowRunTabId.OUTPUT)
+        ) {
+          set(
+            activeTabIdComponentState.atomFamily({
+              instanceId: commandMenuPageInfo.instanceId,
+            }),
+            WorkflowRunTabId.NODE,
+          );
+        }
+      },
+    [],
+  );


style: Dependencies array is empty but the callback uses external functions getIsInputTabDisabled and getIsOutputTabDisabled. Consider adding these as dependencies

greptile-apps · 2025-04-23T15:55:42Z

...ront/src/modules/workflow/workflow-diagram/utils/__tests__/selectWorkflowDiagramNode.test.ts

+    expect(result.nodes[0].selected).toBe(true);
+    expect(result.nodes[1].selected).toBe(false);


logic: Test should verify that all other nodes are deselected, not just node[1].

Suggested change

expect(result.nodes[0].selected).toBe(true);

expect(result.nodes[1].selected).toBe(false);

expect(result.nodes[0].selected).toBe(true);

expect(result.nodes.slice(1).every(node => !node.selected)).toBe(true);

greptile-apps · 2025-04-23T15:56:06Z

...ty-front/src/modules/workflow/workflow-diagram/states/workflowRunStepToOpenByDefaultState.ts

+    }
+  | undefined
+>({
+  key: 'workflowStepIdToOpenByDefaultState',


style: Key name 'workflowStepIdToOpenByDefaultState' doesn't match variable name 'workflowRunStepToOpenByDefaultState'. Consider using consistent naming.

greptile-apps · 2025-04-23T15:56:23Z

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/selectWorkflowDiagramNode.ts

+      if (node.id === nodeIdToSelect) {
+        return {
+          ...node,
+          selected: true,
+        };
+      }


logic: This only sets selected=true but never sets selected=false for other nodes. Could lead to multiple selected nodes.

Suggested change

if (node.id === nodeIdToSelect) {

return {

...node,

selected: true,

};

}

if (node.id === nodeIdToSelect) {

return {

...node,

selected: true,

};

}

return {

...node,

selected: false,

};

thomtrp

Great work 💪 small comments but LGTM!

packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts

...s/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunDiagramCanvas.tsx

...-front/src/modules/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunRightDrawerTab.ts

Devessier added 6 commits April 22, 2025 17:14

fix: prevent reactflow from catching scroll events and let the user s…

dbec09a

…croll on top of the canvas

feat: increase spacing around the status tag to align it with the fie…

56299a0

…lds in the side panel

feat: ensure the workflow flows are put after the fields in the side …

1849eb3

…panel

fix: listen to selection change only after the initial rendering

20743c8

reactflow calls selection change handlers even when a node is set as selected at the first render of the Reactflow component. We don't want to run the callback at this moment.

fix: memoize the zod parsing result to make the useEffect more stable

9396d12

fix: properly open the default pending form with animation

e8c45a6

Devessier force-pushed the workflow-runs-in-side-panel branch from 3495b8c to e8c45a6 Compare April 22, 2025 15:14

Devessier added 8 commits April 22, 2025 17:14

feat: open side panel after react flow init only when not viewing the…

550106f

… record from the side panel

feat: open the form step by default in openRecordInCommandMenu

77d5328

feat: open proper tab by default and refactor to use existing hook

387ba96

feat: do not select select form node in canvas when opening workflow …

ef30f4b

…run in side panel

feat: use command menu page id as tab id to be sure the state is alwa…

e7cf361

…ys reset between two side panel views

fix: set default tab after opening side panel after reactflow init

955039e

fix: use context instead of state as it's not reset while the side pa…

aadb72d

…nel is closing

fix: always set the diagram; cover all cases

a28f0ea

Devessier commented Apr 23, 2025

View reviewed changes

refactor: rename hook & function

789b054

Devessier commented Apr 23, 2025

View reviewed changes

Devessier added 9 commits April 23, 2025 14:30

refactor: use a stable function as the ref callback

ed2561f

refactor: make types stricter

91dfd41

refactor: isolate init code specific to workflow runs

3faa36e

refactor: ensure the tabs are always properly set by setting the init…

62faac1

…ial tab in openWorkflowRunViewStepInCommandMenu

refactor: do not silently exit; throw loudly instead

386b330

refactor: move everything in recoil callback and document why we exit

7a5abf2

Merge branch 'main' into workflow-runs-in-side-panel

e86e638

test: fix generateWorkflowRunDiagram tests

86e6720

test: add unit tests for selectWorkflowDiagramNode function

6af2a19

Devessier added the -PR: wip label Apr 23, 2025

Devessier added the -PR: awaiting author label Apr 23, 2025

test: create e2e test to test the behavior of pending form node when …

e7c0d2d

…opened in side panel then full screen

Devessier added run-e2e -PR: awaiting review and removed -PR: wip -PR: awaiting author labels Apr 23, 2025

Devessier marked this pull request as ready for review April 23, 2025 15:49

greptile-apps bot reviewed Apr 23, 2025

View reviewed changes

thomtrp approved these changes Apr 24, 2025

View reviewed changes

Devessier added 3 commits April 24, 2025 10:59

refactor: extract workflow run relative code to custom hook

63eb336

refactor: extract in custom hook

ae6b1a0

refactor: use isDefined

29d18b7

thomtrp approved these changes Apr 24, 2025

View reviewed changes

Devessier merged commit cc21155 into main Apr 24, 2025
51 checks passed

Devessier deleted the workflow-runs-in-side-panel branch April 24, 2025 09:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Workflow runs in side panel #11669

Workflow runs in side panel #11669

Uh oh!

Devessier commented Apr 22, 2025 •

edited

Loading

Uh oh!

Devessier Apr 23, 2025

Uh oh!

Devessier Apr 23, 2025

Uh oh!

Devessier Apr 23, 2025

Uh oh!

Devessier Apr 23, 2025

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Apr 23, 2025

Uh oh!

greptile-apps bot Apr 23, 2025

Uh oh!

greptile-apps bot Apr 23, 2025

Uh oh!

greptile-apps bot Apr 23, 2025

Uh oh!

greptile-apps bot Apr 23, 2025

Uh oh!

greptile-apps bot Apr 23, 2025

Uh oh!

greptile-apps bot Apr 23, 2025

Uh oh!

thomtrp left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

		expect(result.nodes[0].selected).toBe(true);
		expect(result.nodes[1].selected).toBe(false);

Workflow runs in side panel #11669

Workflow runs in side panel #11669

Uh oh!

Conversation

Devessier commented Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Devessier Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

Devessier Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

Devessier Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

Devessier Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

greptile-apps bot Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

thomtrp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Devessier commented Apr 22, 2025 •

edited

Loading