> [!WARNING] > I refactored a bunch of components into utility functions to make it possible to display the `WorkflowStepHeader` component for **triggers** in the `CommandMenuWorkflowRunViewStep` component. Previously, we were asserting that we were displaying the header in `Output` and `Input` tabs only for **actions**. Handling triggers too required a bunch of changes. We can think of making a bigger refactor of this part. In this PR: - Only display the Flow for Workflow Runs; removed the Code Editor tab - Allows users to see the Output of trigger nodes - Prevent impossible states by manually setting the selected tab when selecting a node ## Demo ### Success, Running and Not Executed steps https://github.com/user-attachments/assets/c6bebd0f-5da2-4ccc-aef2-d9890eafa59a ### Failed step https://github.com/user-attachments/assets/e1f4e13a-2f5e-4792-a089-928e4d6b1ac0 Closes https://github.com/twentyhq/core-team-issues/issues/709
87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import { stepsOutputSchemaFamilyState } from '@/workflow/states/stepsOutputSchemaFamilyState';
|
|
import { WorkflowVersion } from '@/workflow/types/Workflow';
|
|
import { getStepOutputSchemaFamilyStateKey } from '@/workflow/utils/getStepOutputSchemaFamilyStateKey';
|
|
import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
|
|
import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
|
|
import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon';
|
|
import {
|
|
OutputSchema,
|
|
StepOutputSchema,
|
|
} from '@/workflow/workflow-variables/types/StepOutputSchema';
|
|
import { getTriggerStepName } from '@/workflow/workflow-variables/utils/getTriggerStepName';
|
|
import { useRecoilCallback } from 'recoil';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
|
|
export const useStepsOutputSchema = () => {
|
|
const populateStepsOutputSchema = useRecoilCallback(
|
|
({ set }) =>
|
|
(workflowVersion: WorkflowVersion) => {
|
|
workflowVersion.steps?.forEach((step) => {
|
|
const stepOutputSchema: StepOutputSchema = {
|
|
id: step.id,
|
|
name: step.name,
|
|
icon: getActionIcon(step.type),
|
|
outputSchema: step.settings?.outputSchema as OutputSchema,
|
|
};
|
|
|
|
set(
|
|
stepsOutputSchemaFamilyState(
|
|
getStepOutputSchemaFamilyStateKey(workflowVersion.id, step.id),
|
|
),
|
|
stepOutputSchema,
|
|
);
|
|
});
|
|
|
|
const trigger = workflowVersion.trigger;
|
|
|
|
if (isDefined(trigger)) {
|
|
const triggerIconKey = getTriggerIcon(trigger);
|
|
|
|
const triggerOutputSchema: StepOutputSchema = {
|
|
id: TRIGGER_STEP_ID,
|
|
name: isDefined(trigger.name)
|
|
? trigger.name
|
|
: getTriggerStepName(trigger),
|
|
icon: triggerIconKey,
|
|
outputSchema: trigger.settings?.outputSchema as OutputSchema,
|
|
};
|
|
|
|
set(
|
|
stepsOutputSchemaFamilyState(
|
|
getStepOutputSchemaFamilyStateKey(
|
|
workflowVersion.id,
|
|
TRIGGER_STEP_ID,
|
|
),
|
|
),
|
|
triggerOutputSchema,
|
|
);
|
|
}
|
|
},
|
|
[],
|
|
);
|
|
|
|
const deleteStepOutputSchema = useRecoilCallback(
|
|
({ set }) =>
|
|
({
|
|
stepId,
|
|
workflowVersionId,
|
|
}: {
|
|
stepId: string;
|
|
workflowVersionId: string;
|
|
}) => {
|
|
set(
|
|
stepsOutputSchemaFamilyState(
|
|
getStepOutputSchemaFamilyStateKey(workflowVersionId, stepId),
|
|
),
|
|
null,
|
|
);
|
|
},
|
|
[],
|
|
);
|
|
|
|
return {
|
|
populateStepsOutputSchema,
|
|
deleteStepOutputSchema,
|
|
};
|
|
};
|