Hide tab system for pending form nodes (#12769)
| | Before | After | |--------|--------|--------| | **Pending form** |  |  | | **Completed form** |  |  |
This commit is contained in:
committed by
GitHub
parent
830e49c5b1
commit
1e0ee9421d
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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';
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user