a2b1062db6
- Improve the design of the right drawer - Allow to update the trigger of the workflow: the object and the event listened to - Allow to update the selected serverless function that a code action should execute - Change how we determine which workflow version to display in the visualizer. We fetch the selected workflow's data, including whether it has a draft or a published version. If the workflow has a draft version, it gets displayed; otherwise, we display the last published version. - I used the type `WorkflowWithCurrentVersion` to forward the currently edited workflow with its _current_ version embedded across the app. - I created single-responsibility hooks like `useFindWorkflowWithCurrentVersion`, `useFindShowPageWorkflow`, `useUpdateWorkflowVersionTrigger` or `useUpdateWorkflowVersionStep`. - I updated the types for workflow related objects, like `Workflow` and `WorkflowVersion`. See `packages/twenty-front/src/modules/workflow/types/Workflow.ts`. - This introduced the possibility to have `null` values for triggers and steps. I made the according changes in the codebase and in the tests. - I created a utility function to extract both parts of object-event format (`company.created`): `packages/twenty-front/src/modules/workflow/utils/splitWorkflowTriggerEventName.ts`
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { PageBody } from '@/ui/layout/page/PageBody';
|
|
import { PageContainer } from '@/ui/layout/page/PageContainer';
|
|
import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
|
|
import { WorkflowDiagramCanvas } from '@/workflow/components/WorkflowDiagramCanvas';
|
|
import { WorkflowShowPageEffect } from '@/workflow/components/WorkflowShowPageEffect';
|
|
import { WorkflowShowPageHeader } from '@/workflow/components/WorkflowShowPageHeader';
|
|
import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
|
|
import styled from '@emotion/styled';
|
|
import '@xyflow/react/dist/style.css';
|
|
import { useParams } from 'react-router-dom';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { IconSettingsAutomation } from 'twenty-ui';
|
|
|
|
const StyledFlowContainer = styled.div`
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
/* Below we reset the default styling of Reactflow */
|
|
.react-flow__node-input,
|
|
.react-flow__node-default,
|
|
.react-flow__node-output,
|
|
.react-flow__node-group {
|
|
padding: 0;
|
|
}
|
|
|
|
--xy-node-border-radius: none;
|
|
--xy-node-border: none;
|
|
--xy-node-background-color: none;
|
|
--xy-node-boxshadow-hover: none;
|
|
--xy-node-boxshadow-selected: none;
|
|
`;
|
|
|
|
export const WorkflowShowPage = () => {
|
|
const parameters = useParams<{
|
|
workflowId: string;
|
|
}>();
|
|
|
|
const workflowName = 'Test Workflow';
|
|
|
|
const workflowDiagram = useRecoilValue(workflowDiagramState);
|
|
|
|
if (parameters.workflowId === undefined) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<PageContainer>
|
|
<WorkflowShowPageEffect workflowId={parameters.workflowId} />
|
|
|
|
<PageTitle title={workflowName} />
|
|
<WorkflowShowPageHeader
|
|
workflowName={workflowName}
|
|
headerIcon={IconSettingsAutomation}
|
|
/>
|
|
<PageBody>
|
|
<StyledFlowContainer>
|
|
{workflowDiagram === undefined ? null : (
|
|
<WorkflowDiagramCanvas diagram={workflowDiagram} />
|
|
)}
|
|
</StyledFlowContainer>
|
|
</PageBody>
|
|
</PageContainer>
|
|
);
|
|
};
|