admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Hide tab system for pending form nodes (#12769)

Browse Source 
| | 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)
|
This commit is contained in:
Baptiste Devessier
2025-06-20 18:35:25 +02:00
committed by GitHub
parent 830e49c5b1
commit 1e0ee9421d
2 changed files with 63 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx
View File

@ -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>
);

12
packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getShouldFocusNodeTab.ts Normal file
View File

@ -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';
};