Create workflow version show page (#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

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx

@@ -11,6 +11,7 @@ import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDraw
 import { ComponentByRightDrawerPage } from '@/ui/layout/right-drawer/types/ComponentByRightDrawerPage';
 import { RightDrawerWorkflowEditStep } from '@/workflow/components/RightDrawerWorkflowEditStep';
 import { RightDrawerWorkflowSelectAction } from '@/workflow/components/RightDrawerWorkflowSelectAction';
+import { RightDrawerWorkflowViewStep } from '@/workflow/components/RightDrawerWorkflowViewStep';
 import { isDefined } from 'twenty-ui';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
@@ -41,6 +42,7 @@ const RIGHT_DRAWER_PAGES_CONFIG: ComponentByRightDrawerPage = {
     <RightDrawerWorkflowSelectAction />
   ),
   [RightDrawerPages.WorkflowStepEdit]: <RightDrawerWorkflowEditStep />,
+  [RightDrawerPages.WorkflowStepView]: <RightDrawerWorkflowViewStep />,
 };
 
 export const RightDrawerRouter = () => {

packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageIcons.ts

@@ -7,4 +7,5 @@ export const RIGHT_DRAWER_PAGE_ICONS = {
   [RightDrawerPages.Copilot]: 'IconSparkles',
   [RightDrawerPages.WorkflowStepEdit]: 'IconSparkles',
   [RightDrawerPages.WorkflowStepSelectAction]: 'IconSparkles',
+  [RightDrawerPages.WorkflowStepView]: 'IconSparkles',
 };

packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerPageTitles.ts

@@ -7,4 +7,5 @@ export const RIGHT_DRAWER_PAGE_TITLES = {
   [RightDrawerPages.Copilot]: 'Copilot',
   [RightDrawerPages.WorkflowStepEdit]: 'Workflow',
   [RightDrawerPages.WorkflowStepSelectAction]: 'Workflow',
+  [RightDrawerPages.WorkflowStepView]: 'Workflow',
 };

packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts

@@ -4,5 +4,6 @@ export enum RightDrawerPages {
   ViewRecord = 'view-record',
   Copilot = 'copilot',
   WorkflowStepSelectAction = 'workflow-step-select-action',
+  WorkflowStepView = 'workflow-step-view',
   WorkflowStepEdit = 'workflow-step-edit',
 }