Create a right drawer for viewing steps in workflow runs (#10366)

- Improve the type-safety of the objects mapping the id of a right
drawer or side panel view to a React component
- Improve the types of the `useTabList` hook to type the available tab
identifiers strictly
- Create a specialized `WorkflowRunDiagramCanvas` component to render a
`WorkflowRunDiagramCanvasEffect` component that opens
`RightDrawerPages.WorkflowRunStepView` when a step is selected
- Create a new side panel view specifically for workflow run step
details
- Create tab list in the new side panel; all the tabs are `Node`,
`Input` and `Output`
- Create a hook `useWorkflowSelectedNodeOrThrow` not to duplicate
throwing mechanisms

Closes https://github.com/twentyhq/core-team-issues/issues/432

## Demo


https://github.com/user-attachments/assets/8d5df7dc-0b99-49a2-9a54-d3eaee80a8e6

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

@@ -9,8 +9,8 @@ import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isR
 
 import { RightDrawerContainer } from '@/ui/layout/right-drawer/components/RightDrawerContainer';
 import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
-import { ComponentByRightDrawerPage } from '@/ui/layout/right-drawer/types/ComponentByRightDrawerPage';
 import { RightDrawerWorkflowEditStep } from '@/workflow/workflow-steps/components/RightDrawerWorkflowEditStep';
+import { RightDrawerWorkflowRunViewStep } from '@/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep';
 import { RightDrawerWorkflowViewStep } from '@/workflow/workflow-steps/components/RightDrawerWorkflowViewStep';
 import { RightDrawerWorkflowSelectAction } from '@/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectAction';
 import { RightDrawerWorkflowSelectTriggerType } from '@/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerType';
@@ -28,7 +28,7 @@ const StyledRightDrawerBody = styled.div`
   position: relative;
 `;
 
-const RIGHT_DRAWER_PAGES_CONFIG: ComponentByRightDrawerPage = {
+const RIGHT_DRAWER_PAGES_CONFIG = {
   [RightDrawerPages.ViewEmailThread]: <RightDrawerEmailThread />,
   [RightDrawerPages.ViewCalendarEvent]: <RightDrawerCalendarEvent />,
   [RightDrawerPages.ViewRecord]: <RightDrawerRecord />,
@@ -41,7 +41,8 @@ const RIGHT_DRAWER_PAGES_CONFIG: ComponentByRightDrawerPage = {
   ),
   [RightDrawerPages.WorkflowStepEdit]: <RightDrawerWorkflowEditStep />,
   [RightDrawerPages.WorkflowStepView]: <RightDrawerWorkflowViewStep />,
-};
+  [RightDrawerPages.WorkflowRunStepView]: <RightDrawerWorkflowRunViewStep />,
+} satisfies Record<RightDrawerPages, JSX.Element>;
 
 export const RightDrawerRouter = () => {
   const [rightDrawerPage] = useRecoilState(rightDrawerPageState);

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

@@ -9,4 +9,5 @@ export const RIGHT_DRAWER_PAGE_ICONS = {
   [RightDrawerPages.WorkflowStepSelectAction]: 'IconSparkles',
   [RightDrawerPages.WorkflowStepEdit]: 'IconSparkles',
   [RightDrawerPages.WorkflowStepView]: 'IconSparkles',
-};
+  [RightDrawerPages.WorkflowRunStepView]: 'IconSparkles',
+} satisfies Record<RightDrawerPages, string>;

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

@@ -9,4 +9,5 @@ export const RIGHT_DRAWER_PAGE_TITLES = {
   [RightDrawerPages.WorkflowStepSelectAction]: 'Workflow',
   [RightDrawerPages.WorkflowStepEdit]: 'Workflow',
   [RightDrawerPages.WorkflowStepView]: 'Workflow',
-};
+  [RightDrawerPages.WorkflowRunStepView]: 'Workflow',
+} satisfies Record<RightDrawerPages, string>;

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

@@ -1,5 +0,0 @@
-import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
-
-export type ComponentByRightDrawerPage = {
-  [componentName in RightDrawerPages]?: JSX.Element;
-};

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

@@ -7,4 +7,5 @@ export enum RightDrawerPages {
   WorkflowStepSelectAction = 'workflow-step-select-action',
   WorkflowStepView = 'workflow-step-view',
   WorkflowStepEdit = 'workflow-step-edit',
+  WorkflowRunStepView = 'workflow-run-step-view',
 }

packages/twenty-front/src/modules/ui/layout/right-drawer/utils/mapRightDrawerPageToCommandMenuPage.ts

@@ -4,24 +4,25 @@ import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPage
 export const mapRightDrawerPageToCommandMenuPage = (
   rightDrawerPage: RightDrawerPages,
 ) => {
-  switch (rightDrawerPage) {
-    case RightDrawerPages.ViewRecord:
-      return CommandMenuPages.ViewRecord;
-    case RightDrawerPages.ViewEmailThread:
-      return CommandMenuPages.ViewEmailThread;
-    case RightDrawerPages.ViewCalendarEvent:
-      return CommandMenuPages.ViewCalendarEvent;
-    case RightDrawerPages.Copilot:
-      return CommandMenuPages.Copilot;
-    case RightDrawerPages.WorkflowStepSelectTriggerType:
-      return CommandMenuPages.WorkflowStepSelectTriggerType;
-    case RightDrawerPages.WorkflowStepSelectAction:
-      return CommandMenuPages.WorkflowStepSelectAction;
-    case RightDrawerPages.WorkflowStepView:
-      return CommandMenuPages.WorkflowStepView;
-    case RightDrawerPages.WorkflowStepEdit:
-      return CommandMenuPages.WorkflowStepEdit;
-    default:
-      return CommandMenuPages.Root;
-  }
+  const rightDrawerPagesToCommandMenuPages: Record<
+    RightDrawerPages,
+    CommandMenuPages
+  > = {
+    [RightDrawerPages.ViewRecord]: CommandMenuPages.ViewRecord,
+    [RightDrawerPages.ViewEmailThread]: CommandMenuPages.ViewEmailThread,
+    [RightDrawerPages.ViewCalendarEvent]: CommandMenuPages.ViewCalendarEvent,
+    [RightDrawerPages.Copilot]: CommandMenuPages.Copilot,
+    [RightDrawerPages.WorkflowStepSelectTriggerType]:
+      CommandMenuPages.WorkflowStepSelectTriggerType,
+    [RightDrawerPages.WorkflowStepSelectAction]:
+      CommandMenuPages.WorkflowStepSelectAction,
+    [RightDrawerPages.WorkflowStepView]: CommandMenuPages.WorkflowStepView,
+    [RightDrawerPages.WorkflowRunStepView]:
+      CommandMenuPages.WorkflowRunStepView,
+    [RightDrawerPages.WorkflowStepEdit]: CommandMenuPages.WorkflowStepEdit,
+  };
+
+  return (
+    rightDrawerPagesToCommandMenuPages[rightDrawerPage] ?? CommandMenuPages.Root
+  );
 };