Create workflow version show page #7466

Devessier · 2024-10-07T10:34:08Z

In this PR:

Refactored components to clarify their behavior. For example, I renamed the Workflow component to WorkflowVisualizer. This moved forward the issue twentyhq/private-issues#120.
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)

CleanShot.2024-10-07.at.17.33.36.mp4

greptile-apps

PR Summary

This pull request implements a read-only view for workflow versions, enhancing the workflow management functionality in the Twenty application.

Added new components: WorkflowVersionVisualizer and WorkflowDiagramCanvasReadonly for displaying workflows in read-only mode
Implemented RecordShowPageWorkflowVersionHeader with buttons to activate, deactivate, or use a workflow version as a draft
Created RightDrawerWorkflowViewStep and RightDrawerWorkflowViewStepContent for viewing workflow steps in the right drawer
Refactored existing components to support both editable and read-only modes, improving code reusability
Updated ShowPageRightContainer to include tabs for workflow and workflow version visualization

_{30 file(s) reviewed, 14 comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps · 2024-10-07T16:55:32Z

packages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowVersionHeader.tsx

+    Pick<Workflow, '__typename' | 'id' | 'lastPublishedVersionId'>
+  >({
+    objectNameSingular: CoreObjectNameSingular.Workflow,
+    objectRecordId: workflowVersion?.workflowId,


style: Consider adding a null check for workflowVersion before accessing workflowId

greptile-apps · 2024-10-07T16:55:33Z

packages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowVersionHeader.tsx

+    objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
+    filter: {
+      workflowId: {
+        eq: workflowVersion?.workflow.id,


style: Ensure workflowVersion.workflow is defined before accessing id

greptile-apps · 2024-10-07T16:56:34Z

packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowViewStep.tsx

+  if (!isDefined(workflowVersion)) {
+    return null;
+  }


style: Add a loading state or error message when workflowVersion is undefined

greptile-apps · 2024-10-07T16:57:07Z

packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowViewStepContent.tsx

+    throw new Error(
+      'Expected a node to be selected. Selecting a node is mandatory to edit it.',
+    );


logic: The error message mentions editing, but this component is for viewing. Consider updating the message to reflect the view-only nature.

greptile-apps · 2024-10-07T17:00:46Z

packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasReadonlyEffect.tsx

+    reactflow.updateNode(workflowDiagramTriggerNodeSelection, {
+      selected: true,
+    });


style: Wrap this update in a try-catch block to handle potential errors if the node doesn't exist

greptile-apps · 2024-10-07T17:05:22Z

packages/twenty-front/src/modules/workflow/components/WorkflowStepDetail.tsx

+        }
+      }
+    }
+  }


logic: Add a default case to handle unknown step types

greptile-apps · 2024-10-07T17:05:22Z

packages/twenty-front/src/modules/workflow/components/WorkflowStepDetail.tsx

+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...props}


style: Consider using a custom hook or utility function to spread props safely instead of disabling the eslint rule

greptile-apps · 2024-10-07T17:06:32Z

packages/twenty-front/src/modules/workflow/components/WorkflowVersionVisualizerEffect.tsx

+  useEffect(() => {
+    if (!isDefined(workflowVersion)) {
+      setWorkflowDiagram(undefined);
+
+      return;
+    }
+
+    const nextWorkflowDiagram = getWorkflowVersionDiagram(workflowVersion);
+
+    setWorkflowDiagram(nextWorkflowDiagram);
+  }, [setWorkflowDiagram, workflowVersion]);


style: This effect might run unnecessarily if setWorkflowDiagram changes. Consider using useCallback for setWorkflowDiagram or moving it inside the effect

greptile-apps · 2024-10-07T17:06:33Z

packages/twenty-front/src/modules/workflow/components/WorkflowVersionVisualizerEffect.tsx

+    setWorkflowDiagram(nextWorkflowDiagram);
+  }, [setWorkflowDiagram, workflowVersion]);
+
+  return null;


style: Consider using React.Fragment instead of returning null for consistency

greptile-apps · 2024-10-07T17:07:02Z

packages/twenty-front/src/modules/workflow/components/WorkflowVisualizer.tsx

+      {isDefined(workflowDiagram) && isDefined(workflowWithCurrentVersion) ? (
+        <WorkflowDiagramCanvasEditable
+          diagram={workflowDiagram}
+          workflowWithCurrentVersion={workflowWithCurrentVersion}
+        />
+      ) : null}


style: Consider extracting this conditional rendering into a separate component for better readability

thomtrp · 2024-10-08T14:24:40Z

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -212,6 +221,12 @@ export const ShowPageRightContainer = ({
      Icon: IconSettings,
      hide: !isWorkflow,
    },
+    {
+      id: 'flow',
+      title: 'Flow',


why not workflow version?

It looks a bit strange but we'll go with that for now. I think it's better than "Flow".

thomtrp · 2024-10-08T14:33:21Z

packages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowVersionHeader.tsx

+  const {
+    records: draftWorkflowVersions,
+    loading: loadingDraftWorkflowVersions,
+  } = useFindManyRecords<WorkflowVersion>({


could you add a comment there? This part should be removed once statuses are fixed on workflow. That will save us a query

I will do. However, we'll have to keep that code as we need to know what is the id of the current draft version – if any – to make the "Use as Draft" button work.

See:

twenty/packages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowVersionHeader.tsx

Line 83 in 3e75a60

idToUpdate: draftWorkflowVersions[0].id,

Oh... Too bad

…and display a readonly visualizer for workflow versions

…how page

…w draft

…ne exists

…the status of the version

…ly published workflow version

…d to trigger node selection after actually selecting a node

github-actions · 2024-10-08T16:17:41Z

Thanks @Devessier for your contribution!
This marks your 12th PR on the repo. You're top 3% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter

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

Devessier force-pushed the create-workflow-version-show-page branch from 47ba3eb to 2a71441 Compare October 7, 2024 12:21

Devessier marked this pull request as ready for review October 7, 2024 16:51

greptile-apps bot reviewed Oct 7, 2024

View reviewed changes

thomtrp approved these changes Oct 8, 2024

View reviewed changes

Devessier added 15 commits October 8, 2024 17:15

feat: start implementing the workflow version show page

81698f5

feat: separate editable and readonly versions of workflow components …

9ae2fe3

…and display a readonly visualizer for workflow versions

feat: create a right drawer to visualize steps details

33b700c

refactor: delete unused component

c509972

feat: start creating a record show page header for workflow version s…

3d0837a

…how page

feat: allow using the currently visualised version as the new workflo…

89f0030

…w draft

feat: replace the trigger and steps of the current draft version if o…

fe75e3c

…ne exists

refactor: let the WorkflowDiagramCanvasBase component always display …

325d3da

…the status of the version

refactor: simplify the event handler provided to readonly inputs

6ad7994

feat: ensure we don't display the use as draft button for the current…

fa01695

…ly published workflow version

fix: throw when encountering an unknown step type

6e16db3

fix: prevent unwanted node selection by cleaning the recoil state use…

124d09b

…d to trigger node selection after actually selecting a node

lint: fix

84661ef

feat: change the label for workflow version flow

b011297

refactor: document that we'll need to replace some part of the code

b712d69

Devessier force-pushed the create-workflow-version-show-page branch from 78eb82d to b712d69 Compare October 8, 2024 15:15

Devessier merged commit 1863636 into main Oct 8, 2024
13 checks passed

Devessier deleted the create-workflow-version-show-page branch October 8, 2024 16:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create workflow version show page #7466

Create workflow version show page #7466

Devessier commented Oct 7, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Oct 7, 2024

greptile-apps bot Oct 7, 2024

greptile-apps bot Oct 7, 2024

greptile-apps bot Oct 7, 2024

greptile-apps bot Oct 7, 2024

greptile-apps bot Oct 7, 2024

greptile-apps bot Oct 7, 2024

greptile-apps bot Oct 7, 2024

greptile-apps bot Oct 7, 2024

greptile-apps bot Oct 7, 2024

thomtrp Oct 8, 2024

Devessier Oct 8, 2024

thomtrp Oct 8, 2024

Devessier Oct 8, 2024 •

edited

Loading

thomtrp Oct 8, 2024

github-actions bot commented Oct 8, 2024

		// eslint-disable-next-line react/jsx-props-no-spreading
		{...props}

Create workflow version show page #7466

Create workflow version show page #7466

Conversation

Devessier commented Oct 7, 2024 • edited Loading

Demo

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 7, 2024

Choose a reason for hiding this comment

thomtrp Oct 8, 2024

Choose a reason for hiding this comment

Devessier Oct 8, 2024

Choose a reason for hiding this comment

thomtrp Oct 8, 2024

Choose a reason for hiding this comment

Devessier Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

thomtrp Oct 8, 2024

Choose a reason for hiding this comment

github-actions bot commented Oct 8, 2024

Devessier commented Oct 7, 2024 •

edited

Loading

Devessier Oct 8, 2024 •

edited

Loading