Add Workflow Run show page

[Devessier]

In this PR:

• Display a workflow version visualizer for the version of the workflow the run was executed on.
• Display the output of the run as code.

CleanShot.2024-10-15.at.14.33.44.mp4

[Devessier]

Will have to update the PR when #7715 lands.

Done 👍

[greptile-apps]

PR Summary

This PR adds a Workflow Run show page, introducing components to display workflow version visualizers and run outputs.

• Added WorkflowRunOutputVisualizer in packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx to render workflow run outputs as formatted JSON
• Implemented WorkflowRunVersionVisualizer in packages/twenty-front/src/modules/workflow/components/WorkflowRunVersionVisualizer.tsx to display workflow version visualizers
• Created useWorkflowRun hook in packages/twenty-front/src/modules/workflow/hooks/useWorkflowRun.tsx for fetching workflow run data
• Modified ShowPageRightContainer in packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx to include new 'Output' and 'Flow' tabs for workflow runs
• Added WorkflowRun and WorkflowRunOutput types in packages/twenty-front/src/modules/workflow/types/Workflow.ts to support new workflow run functionality

_{6 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile}

[martmull]

I think you could use the <CodeEditor component here. See an example in readonly CodeEditor usage in packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx line 99

Suggested change

	<StyledSourceCode>
	<CodeEditor
	files={[
	{
	content: workflowRun.output,
	language: 'json',
	path: 'result.any',
	},
	]}
	currentFilePath={'result.any'}
	options={{ readOnly: true, domReadOnly: true }}
	/>

[Devessier]

Great idea! I made the change. It looks like that, now:

[martmull]

One required change then LGTM

[martmull]

warning, this is editable, not readonly

[Devessier]

Thanks for catching this. It's fixed.

[martmull]

LGTM