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

View File

@ -1,5 +1,6 @@
import { getIsInputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsInputTabDisabled'; 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 { 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 { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
import { TabList } from '@/ui/layout/tab-list/components/TabList'; import { TabList } from '@/ui/layout/tab-list/components/TabList';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState'; 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 { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow'; import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
import { WorkflowStepContextProvider } from '@/workflow/states/context/WorkflowStepContext'; import { WorkflowStepContextProvider } from '@/workflow/states/context/WorkflowStepContext';
import { getStepDefinitionOrThrow } from '@/workflow/utils/getStepDefinitionOrThrow';
import { useWorkflowSelectedNodeOrThrow } from '@/workflow/workflow-diagram/hooks/useWorkflowSelectedNodeOrThrow'; import { useWorkflowSelectedNodeOrThrow } from '@/workflow/workflow-diagram/hooks/useWorkflowSelectedNodeOrThrow';
import { WorkflowRunStepInputDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepInputDetail'; import { WorkflowRunStepInputDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepInputDetail';
import { WorkflowRunStepNodeDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepNodeDetail'; import { WorkflowRunStepNodeDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepNodeDetail';
@ -66,7 +68,19 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
workflowRunOutput: workflowRun.output, workflowRunOutput: workflowRun.output,
stepId: workflowSelectedNode, 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({ const isInputTabDisabled = getIsInputTabDisabled({
stepExecutionStatus, stepExecutionStatus,
workflowSelectedNode, workflowSelectedNode,
@ -82,7 +96,11 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
Icon: IconLogout, Icon: IconLogout,
disabled: isOutputTabDisabled, disabled: isOutputTabDisabled,
}, },
{ id: WorkflowRunTabId.NODE, title: 'Node', Icon: IconStepInto }, {
id: WorkflowRunTabId.NODE,
title: 'Node',
Icon: IconStepInto,
},
{ {
id: WorkflowRunTabId.INPUT, id: WorkflowRunTabId.INPUT,
title: 'Input', title: 'Input',
@ -99,34 +117,45 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
}} }}
> >
<StyledContainer> <StyledContainer>
<StyledTabList {shouldFocusNodeTab ? (
tabs={tabs}
behaveAsLinks={false}
componentInstanceId={commandMenuPageComponentInstance.instanceId}
/>
{activeTabId === WorkflowRunTabId.OUTPUT ? (
<WorkflowRunStepOutputDetail
key={workflowSelectedNode}
stepId={workflowSelectedNode}
/>
) : null}
{activeTabId === WorkflowRunTabId.NODE ? (
<WorkflowRunStepNodeDetail <WorkflowRunStepNodeDetail
stepId={workflowSelectedNode} stepId={workflowSelectedNode}
trigger={flow.trigger} trigger={flow.trigger}
steps={flow.steps} steps={flow.steps}
stepExecutionStatus={stepExecutionStatus} stepExecutionStatus={stepExecutionStatus}
/> />
) : null} ) : (
<>
<StyledTabList
tabs={tabs}
behaveAsLinks={false}
componentInstanceId={commandMenuPageComponentInstance.instanceId}
/>
{activeTabId === WorkflowRunTabId.INPUT ? ( {activeTabId === WorkflowRunTabId.OUTPUT ? (
<WorkflowRunStepInputDetail <WorkflowRunStepOutputDetail
key={workflowSelectedNode} key={workflowSelectedNode}
stepId={workflowSelectedNode} stepId={workflowSelectedNode}
/> />
) : null} ) : 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> </StyledContainer>
</WorkflowStepContextProvider> </WorkflowStepContextProvider>
); );

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