forked from twentyhq/twenty
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create workflow version show page (twentyhq#7466)
In this PR: - Refactored components to clarify their behavior. For example, I renamed the `Workflow` component to `WorkflowVisualizer`. This moved forward the issue #7010. - Create two variants of several workflow-related components: one version for editing and another for viewing. For instance, there is `WorkflowDiagramCanvasEditable.tsx` and `WorkflowDiagramCanvasReadonly.tsx` - Implement the show page for workflow versions. On this page, we display a readonly workflow visualizer. Users can click on nodes and it will expand the right drawer. - I added buttons in the header of the RecordShowPage for workflow versions: users can activate, deactivate or use the currently viewed version as the next draft. **There are many cache desynchronisation and I'll fix them really soon.** ## Demo (Turn sound on) https://github.com/user-attachments/assets/97fafa48-8902-4dab-8b39-f40848bf041e
- Loading branch information
1 parent
8512b22
commit 800e508
Showing
39 changed files
with
856 additions
and
310 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
127 changes: 127 additions & 0 deletions
127
...ages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowVersionHeader.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,127 @@ | ||
| import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; | ||
| import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; | ||
| import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; | ||
| import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; | ||
| import { Button } from '@/ui/input/button/components/Button'; | ||
| import { useActivateWorkflowVersion } from '@/workflow/hooks/useActivateWorkflowVersion'; | ||
| import { useCreateNewWorkflowVersion } from '@/workflow/hooks/useCreateNewWorkflowVersion'; | ||
| import { useDeactivateWorkflowVersion } from '@/workflow/hooks/useDeactivateWorkflowVersion'; | ||
| import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion'; | ||
| import { Workflow, WorkflowVersion } from '@/workflow/types/Workflow'; | ||
| import { IconPencil, IconPlayerStop, IconPower, isDefined } from 'twenty-ui'; | ||
|
|
||
| export const RecordShowPageWorkflowVersionHeader = ({ | ||
| workflowVersionId, | ||
| }: { | ||
| workflowVersionId: string; | ||
| }) => { | ||
| const workflowVersion = useWorkflowVersion(workflowVersionId); | ||
|
|
||
| const workflowVersionRelatedWorkflowQuery = useFindOneRecord< | ||
| Pick<Workflow, '__typename' | 'id' | 'lastPublishedVersionId'> | ||
| >({ | ||
| objectNameSingular: CoreObjectNameSingular.Workflow, | ||
| objectRecordId: workflowVersion?.workflowId, | ||
| recordGqlFields: { | ||
| id: true, | ||
| lastPublishedVersionId: true, | ||
| }, | ||
| skip: !isDefined(workflowVersion), | ||
| }); | ||
|
|
||
| // TODO: In the future, use the workflow.status property to determine if there is a draft version | ||
| const { | ||
| records: draftWorkflowVersions, | ||
| loading: loadingDraftWorkflowVersions, | ||
| } = useFindManyRecords<WorkflowVersion>({ | ||
| objectNameSingular: CoreObjectNameSingular.WorkflowVersion, | ||
| filter: { | ||
| workflowId: { | ||
| eq: workflowVersion?.workflow.id, | ||
| }, | ||
| status: { | ||
| eq: 'DRAFT', | ||
| }, | ||
| }, | ||
| skip: !isDefined(workflowVersion), | ||
| limit: 1, | ||
| }); | ||
|
|
||
| const showUseAsDraftButton = | ||
| !loadingDraftWorkflowVersions && | ||
| isDefined(workflowVersion) && | ||
| !workflowVersionRelatedWorkflowQuery.loading && | ||
| isDefined(workflowVersionRelatedWorkflowQuery.record) && | ||
| workflowVersion.status !== 'DRAFT' && | ||
| workflowVersion.id !== | ||
| workflowVersionRelatedWorkflowQuery.record.lastPublishedVersionId; | ||
|
|
||
| const hasAlreadyDraftVersion = | ||
| !loadingDraftWorkflowVersions && draftWorkflowVersions.length > 0; | ||
|
|
||
| const isWaitingForWorkflowVersion = !isDefined(workflowVersion); | ||
|
|
||
| const { activateWorkflowVersion } = useActivateWorkflowVersion(); | ||
| const { deactivateWorkflowVersion } = useDeactivateWorkflowVersion(); | ||
| const { createNewWorkflowVersion } = useCreateNewWorkflowVersion(); | ||
|
|
||
| const { updateOneRecord: updateOneWorkflowVersion } = | ||
| useUpdateOneRecord<WorkflowVersion>({ | ||
| objectNameSingular: CoreObjectNameSingular.WorkflowVersion, | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| {showUseAsDraftButton ? ( | ||
| <Button | ||
| title={`Use as Draft${hasAlreadyDraftVersion ? ' (override)' : ''}`} | ||
| variant="secondary" | ||
| Icon={IconPencil} | ||
| disabled={isWaitingForWorkflowVersion} | ||
| onClick={async () => { | ||
| if (hasAlreadyDraftVersion) { | ||
| await updateOneWorkflowVersion({ | ||
| idToUpdate: draftWorkflowVersions[0].id, | ||
| updateOneRecordInput: { | ||
| trigger: workflowVersion.trigger, | ||
| steps: workflowVersion.steps, | ||
| }, | ||
| }); | ||
| } else { | ||
| await createNewWorkflowVersion({ | ||
| workflowId: workflowVersion.workflow.id, | ||
| name: `v${workflowVersion.workflow.versions.length + 1}`, | ||
| status: 'DRAFT', | ||
| trigger: workflowVersion.trigger, | ||
| steps: workflowVersion.steps, | ||
| }); | ||
| } | ||
| }} | ||
| /> | ||
| ) : null} | ||
|
|
||
| {workflowVersion?.status === 'DRAFT' || | ||
| workflowVersion?.status === 'DEACTIVATED' ? ( | ||
| <Button | ||
| title="Activate" | ||
| variant="secondary" | ||
| Icon={IconPower} | ||
| disabled={isWaitingForWorkflowVersion} | ||
| onClick={() => { | ||
| return activateWorkflowVersion(workflowVersion.id); | ||
| }} | ||
| /> | ||
| ) : workflowVersion?.status === 'ACTIVE' ? ( | ||
| <Button | ||
| title="Deactivate" | ||
| variant="secondary" | ||
| Icon={IconPlayerStop} | ||
| disabled={isWaitingForWorkflowVersion} | ||
| onClick={() => { | ||
| return deactivateWorkflowVersion(workflowVersion.id); | ||
| }} | ||
| /> | ||
| ) : null} | ||
| </> | ||
| ); | ||
| }; |
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
Oops, something went wrong.