From 1e0ee9421dc29c5f70bdd993dc5580b0871ac6dd Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Fri, 20 Jun 2025 18:35:25 +0200
Subject: [PATCH] Hide tab system for pending form nodes (#12769)

| | Before | After |
|--------|--------|--------|
| **Pending form** | ![CleanShot 2025-06-20 at 15 49
03@2x](https://github.com/user-attachments/assets/6cfac5d2-3db2-4dfa-844e-68bf2432c7ba)
| ![CleanShot 2025-06-20 at 15 41
01@2x](https://github.com/user-attachments/assets/720cbcb1-8468-418a-a2c0-09b00da76592)
|
| **Completed form** | ![CleanShot 2025-06-20 at 15 41
18@2x](https://github.com/user-attachments/assets/12b18de0-efe4-45d2-af2e-fc48d6911225)
| ![CleanShot 2025-06-20 at 15 49
13@2x](https://github.com/user-attachments/assets/0e35708e-a933-4127-8d61-d5d7f6c85802)
|
---
 .../CommandMenuWorkflowRunViewStepContent.tsx | 73 +++++++++++++------
 .../view-run/utils/getShouldFocusNodeTab.ts   | 12 +++
 2 files changed, 63 insertions(+), 22 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getShouldFocusNodeTab.ts

diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx
index 915df7bc9..2820a8f76 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx
@@ -1,5 +1,6 @@
 import { getIsInputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsInputTabDisabled';
 import { getIsOutputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsOutputTabDisabled';
+import { getShouldFocusNodeTab } from '@/command-menu/pages/workflow/step/view-run/utils/getShouldFocusNodeTab';
 import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
@@ -10,6 +11,7 @@ import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
 import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
 import { WorkflowStepContextProvider } from '@/workflow/states/context/WorkflowStepContext';
+import { getStepDefinitionOrThrow } from '@/workflow/utils/getStepDefinitionOrThrow';
 import { useWorkflowSelectedNodeOrThrow } from '@/workflow/workflow-diagram/hooks/useWorkflowSelectedNodeOrThrow';
 import { WorkflowRunStepInputDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepInputDetail';
 import { WorkflowRunStepNodeDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepNodeDetail';
@@ -66,7 +68,19 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
     workflowRunOutput: workflowRun.output,
     stepId: workflowSelectedNode,
   });
+  const stepDefinition = getStepDefinitionOrThrow({
+    stepId: workflowSelectedNode,
+    trigger: flow.trigger,
+    steps: flow.steps,
+  });
 
+  const shouldFocusNodeTab = getShouldFocusNodeTab({
+    stepExecutionStatus,
+    actionType:
+      stepDefinition?.type === 'action'
+        ? stepDefinition.definition.type
+        : undefined,
+  });
   const isInputTabDisabled = getIsInputTabDisabled({
     stepExecutionStatus,
     workflowSelectedNode,
@@ -82,7 +96,11 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
       Icon: IconLogout,
       disabled: isOutputTabDisabled,
     },
-    { id: WorkflowRunTabId.NODE, title: 'Node', Icon: IconStepInto },
+    {
+      id: WorkflowRunTabId.NODE,
+      title: 'Node',
+      Icon: IconStepInto,
+    },
     {
       id: WorkflowRunTabId.INPUT,
       title: 'Input',
@@ -99,34 +117,45 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
       }}
     >
       <StyledContainer>
-        <StyledTabList
-          tabs={tabs}
-          behaveAsLinks={false}
-          componentInstanceId={commandMenuPageComponentInstance.instanceId}
-        />
-
-        {activeTabId === WorkflowRunTabId.OUTPUT ? (
-          <WorkflowRunStepOutputDetail
-            key={workflowSelectedNode}
-            stepId={workflowSelectedNode}
-          />
-        ) : null}
-
-        {activeTabId === WorkflowRunTabId.NODE ? (
+        {shouldFocusNodeTab ? (
           <WorkflowRunStepNodeDetail
             stepId={workflowSelectedNode}
             trigger={flow.trigger}
             steps={flow.steps}
             stepExecutionStatus={stepExecutionStatus}
           />
-        ) : null}
+        ) : (
+          <>
+            <StyledTabList
+              tabs={tabs}
+              behaveAsLinks={false}
+              componentInstanceId={commandMenuPageComponentInstance.instanceId}
+            />
 
-        {activeTabId === WorkflowRunTabId.INPUT ? (
-          <WorkflowRunStepInputDetail
-            key={workflowSelectedNode}
-            stepId={workflowSelectedNode}
-          />
-        ) : null}
+            {activeTabId === WorkflowRunTabId.OUTPUT ? (
+              <WorkflowRunStepOutputDetail
+                key={workflowSelectedNode}
+                stepId={workflowSelectedNode}
+              />
+            ) : null}
+
+            {activeTabId === WorkflowRunTabId.NODE ? (
+              <WorkflowRunStepNodeDetail
+                stepId={workflowSelectedNode}
+                trigger={flow.trigger}
+                steps={flow.steps}
+                stepExecutionStatus={stepExecutionStatus}
+              />
+            ) : null}
+
+            {activeTabId === WorkflowRunTabId.INPUT ? (
+              <WorkflowRunStepInputDetail
+                key={workflowSelectedNode}
+                stepId={workflowSelectedNode}
+              />
+            ) : null}
+          </>
+        )}
       </StyledContainer>
     </WorkflowStepContextProvider>
   );
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getShouldFocusNodeTab.ts b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getShouldFocusNodeTab.ts
new file mode 100644
index 000000000..de70bcfd7
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getShouldFocusNodeTab.ts
@@ -0,0 +1,12 @@
+import { WorkflowActionType } from '@/workflow/types/Workflow';
+import { WorkflowDiagramRunStatus } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+
+export const getShouldFocusNodeTab = ({
+  stepExecutionStatus,
+  actionType,
+}: {
+  stepExecutionStatus: WorkflowDiagramRunStatus;
+  actionType: WorkflowActionType | undefined;
+}) => {
+  return actionType === 'FORM' && stepExecutionStatus === 'running';
+};