-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create new steps in workflow editor (#6764)
This PR adds the possibility of creating new steps. For now, only actions are available. The steps are stored on the server, and the visualizer is reloaded to include them. Selecting a step opens the right drawer and shows its details. For now, it's only the id of the step, but in the future, it will be the parameters of the step. In the future we'll want to let users add steps at any point in the diagram. As a consequence, it's crucial to be able to walk in the tree that make the steps to find the correct place where to put the new step. I wrote a function that returns where the new step should be inserted. This function will become recursive once we get branching implemented. Things to mention: - Reactflow needs every node and edge to have a unique identifier. In this PR, I chose to use steps' id as nodes' id. That way, it's easy to move from a node to a step, which helps make operations on a step without resolving the step's id from the node's id.
- Loading branch information
Showing
33 changed files
with
766 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 0 additions & 40 deletions
40
packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflow.tsx
This file was deleted.
Oops, something went wrong.
10 changes: 10 additions & 0 deletions
10
packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowEditStep.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { showPageWorkflowSelectedNodeState } from '@/workflow/states/showPageWorkflowSelectedNodeState'; | ||
| import { useRecoilValue } from 'recoil'; | ||
|
|
||
| export const RightDrawerWorkflowEditStep = () => { | ||
| const showPageWorkflowSelectedNode = useRecoilValue( | ||
| showPageWorkflowSelectedNodeState, | ||
| ); | ||
|
|
||
| return <p>{showPageWorkflowSelectedNode}</p>; | ||
| }; |
28 changes: 28 additions & 0 deletions
28
packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectAction.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; | ||
| import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; | ||
| import { RightDrawerWorkflowSelectActionContent } from '@/workflow/components/RightDrawerWorkflowSelectActionContent'; | ||
| import { showPageWorkflowIdState } from '@/workflow/states/showPageWorkflowIdState'; | ||
| import { Workflow } from '@/workflow/types/Workflow'; | ||
| import { useRecoilValue } from 'recoil'; | ||
| import { isDefined } from 'twenty-ui'; | ||
|
|
||
| export const RightDrawerWorkflowSelectAction = () => { | ||
| const showPageWorkflowId = useRecoilValue(showPageWorkflowIdState); | ||
|
|
||
| const { record: workflow } = useFindOneRecord<Workflow>({ | ||
| objectNameSingular: CoreObjectNameSingular.Workflow, | ||
| objectRecordId: showPageWorkflowId, | ||
| recordGqlFields: { | ||
| id: true, | ||
| name: true, | ||
| versions: true, | ||
| publishedVersionId: true, | ||
| }, | ||
| }); | ||
|
|
||
| if (!isDefined(workflow)) { | ||
| return null; | ||
| } | ||
|
|
||
| return <RightDrawerWorkflowSelectActionContent workflow={workflow} />; | ||
| }; |
60 changes: 60 additions & 0 deletions
60
...s/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { TabList } from '@/ui/layout/tab/components/TabList'; | ||
| import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; | ||
| import { useRightDrawerWorkflowSelectAction } from '@/workflow/hooks/useRightDrawerWorkflowSelectAction'; | ||
| import { Workflow } from '@/workflow/types/Workflow'; | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| // FIXME: copy-pasted | ||
| const StyledTabListContainer = styled.div` | ||
| align-items: center; | ||
| border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| gap: ${({ theme }) => theme.spacing(2)}; | ||
| height: 40px; | ||
| `; | ||
|
|
||
| const StyledActionListContainer = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100%; | ||
| overflow-y: auto; | ||
| padding-block: ${({ theme }) => theme.spacing(1)}; | ||
| padding-inline: ${({ theme }) => theme.spacing(2)}; | ||
| `; | ||
|
|
||
| export const TAB_LIST_COMPONENT_ID = | ||
| 'workflow-select-action-page-right-tab-list'; | ||
|
|
||
| export const RightDrawerWorkflowSelectActionContent = ({ | ||
| workflow, | ||
| }: { | ||
| workflow: Workflow; | ||
| }) => { | ||
| const tabListId = `${TAB_LIST_COMPONENT_ID}`; | ||
|
|
||
| const { tabs, options, handleActionClick } = | ||
| useRightDrawerWorkflowSelectAction({ tabListId, workflow }); | ||
|
|
||
| return ( | ||
| <> | ||
| <StyledTabListContainer> | ||
| <TabList loading={false} tabListId={tabListId} tabs={tabs} /> | ||
| </StyledTabListContainer> | ||
|
|
||
| <StyledActionListContainer> | ||
| {options.map((option) => ( | ||
| <MenuItem | ||
| key={option.id} | ||
| LeftIcon={option.icon} | ||
| text={option.name} | ||
| onClick={() => { | ||
| handleActionClick(option.id); | ||
| }} | ||
| /> | ||
| ))} | ||
| </StyledActionListContainer> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
packages/twenty-front/src/modules/workflow/components/WorkflowShowPageDiagramEffect.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; | ||
| import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages'; | ||
| import { useStartNodeCreation } from '@/workflow/hooks/useStartNodeCreation'; | ||
| import { showPageWorkflowDiagramTriggerNodeSelectionState } from '@/workflow/states/showPageWorkflowDiagramTriggerNodeSelectionState'; | ||
| import { showPageWorkflowSelectedNodeState } from '@/workflow/states/showPageWorkflowSelectedNodeState'; | ||
| import { | ||
| WorkflowDiagramEdge, | ||
| WorkflowDiagramNode, | ||
| } from '@/workflow/types/WorkflowDiagram'; | ||
| import { | ||
| OnSelectionChangeParams, | ||
| useOnSelectionChange, | ||
| useReactFlow, | ||
| } from '@xyflow/react'; | ||
| import { useCallback, useEffect } from 'react'; | ||
| import { useRecoilValue, useSetRecoilState } from 'recoil'; | ||
| import { isDefined } from 'twenty-ui'; | ||
|
|
||
| export const WorkflowShowPageDiagramEffect = () => { | ||
| const reactflow = useReactFlow<WorkflowDiagramNode, WorkflowDiagramEdge>(); | ||
|
|
||
| const { startNodeCreation } = useStartNodeCreation(); | ||
|
|
||
| const { openRightDrawer, closeRightDrawer } = useRightDrawer(); | ||
| const setShowPageWorkflowSelectedNode = useSetRecoilState( | ||
| showPageWorkflowSelectedNodeState, | ||
| ); | ||
|
|
||
| const showPageWorkflowDiagramTriggerNodeSelection = useRecoilValue( | ||
| showPageWorkflowDiagramTriggerNodeSelectionState, | ||
| ); | ||
|
|
||
| const handleSelectionChange = useCallback( | ||
| ({ nodes }: OnSelectionChangeParams) => { | ||
| const selectedNode = nodes[0] as WorkflowDiagramNode; | ||
| const isClosingStep = isDefined(selectedNode) === false; | ||
|
|
||
| if (isClosingStep) { | ||
| closeRightDrawer(); | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| const isCreateStepNode = selectedNode.type === 'create-step'; | ||
| if (isCreateStepNode) { | ||
| if (selectedNode.data.nodeType !== 'create-step') { | ||
| throw new Error('Expected selected node to be a create step node.'); | ||
| } | ||
|
|
||
| startNodeCreation(selectedNode.data.parentNodeId); | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| setShowPageWorkflowSelectedNode(selectedNode.id); | ||
| openRightDrawer(RightDrawerPages.WorkflowStepEdit); | ||
| }, | ||
| [ | ||
| closeRightDrawer, | ||
| openRightDrawer, | ||
| setShowPageWorkflowSelectedNode, | ||
| startNodeCreation, | ||
| ], | ||
| ); | ||
|
|
||
| useOnSelectionChange({ | ||
| onChange: handleSelectionChange, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (!isDefined(showPageWorkflowDiagramTriggerNodeSelection)) { | ||
| return; | ||
| } | ||
|
|
||
| reactflow.updateNode(showPageWorkflowDiagramTriggerNodeSelection, { | ||
| selected: true, | ||
| }); | ||
| }, [reactflow, showPageWorkflowDiagramTriggerNodeSelection]); | ||
|
|
||
| return null; | ||
| }; |
Oops, something went wrong.