491 save the page component instance id for side panel navigation (Part 2) (#10732)

This PR follows #10700, it is the same refactor but for the workflows
pages.

- Duplicates the right drawer workflow pages for the command menu and
replace the states used in these pages by component states
- We store the component instance id upon navigation to restore the
states when we navigate back to a page

There are still states which are not component states inside the
workflow diagram and workflow command menu pages, we should convert them
in a futur refactor.

`closeCommandMenu` was called programmatically in multiple places for
the workflow, I refactored that to only rely on the click outside
listener. This introduced a wiggling bug on the workflow canvas when we
change node selection. This should be fixed in another PR by updating
the canvas animation to take the animation values of the command menu
instead. I'm thinking we could use [motion
values](https://motion.dev/docs/react-motion-value) for this as I told
you @Devessier

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -6,11 +6,13 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import {
+  IconBolt,
   IconCalendarEvent,
   IconComponent,
   IconDotsVertical,
   IconMail,
   IconSearch,
+  IconSettingsAutomation,
   useIcons,
 } from 'twenty-ui';
 
@@ -21,6 +23,7 @@ import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextSt
 import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates';
 import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
 import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
+import { workflowIdComponentState } from '@/command-menu/pages/workflow/states/workflowIdComponentState';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
@@ -393,6 +396,111 @@ export const useCommandMenu = () => {
     [getIcon, navigateCommandMenu],
   );
 
+  const openWorkflowTriggerTypeInCommandMenu = useRecoilCallback(
+    ({ set }) => {
+      return (workflowId: string) => {
+        const pageId = v4();
+
+        set(
+          workflowIdComponentState.atomFamily({ instanceId: pageId }),
+          workflowId,
+        );
+
+        navigateCommandMenu({
+          page: CommandMenuPages.WorkflowStepSelectTriggerType,
+          pageTitle: t`Trigger Type`,
+          pageIcon: IconBolt,
+          pageId,
+        });
+      };
+    },
+    [navigateCommandMenu],
+  );
+
+  const openWorkflowActionInCommandMenu = useRecoilCallback(
+    ({ set }) => {
+      return (workflowId: string) => {
+        const pageId = v4();
+
+        set(
+          workflowIdComponentState.atomFamily({ instanceId: pageId }),
+          workflowId,
+        );
+
+        navigateCommandMenu({
+          page: CommandMenuPages.WorkflowStepSelectAction,
+          pageTitle: t`Select Action`,
+          pageIcon: IconSettingsAutomation,
+          pageId,
+        });
+      };
+    },
+    [navigateCommandMenu],
+  );
+
+  const openWorkflowEditStepInCommandMenu = useRecoilCallback(
+    ({ set }) => {
+      return (workflowId: string, title: string, icon: IconComponent) => {
+        const pageId = v4();
+
+        set(
+          workflowIdComponentState.atomFamily({ instanceId: pageId }),
+          workflowId,
+        );
+
+        navigateCommandMenu({
+          page: CommandMenuPages.WorkflowStepEdit,
+          pageTitle: title,
+          pageIcon: icon,
+          pageId,
+        });
+      };
+    },
+    [navigateCommandMenu],
+  );
+
+  const openWorkflowViewStepInCommandMenu = useRecoilCallback(
+    ({ set }) => {
+      return (workflowId: string, title: string, icon: IconComponent) => {
+        const pageId = v4();
+
+        set(
+          workflowIdComponentState.atomFamily({ instanceId: pageId }),
+          workflowId,
+        );
+
+        navigateCommandMenu({
+          page: CommandMenuPages.WorkflowStepView,
+          pageTitle: title,
+          pageIcon: icon,
+          pageId,
+        });
+      };
+    },
+    [navigateCommandMenu],
+  );
+
+  const openWorkflowViewRunStepInCommandMenu = useRecoilCallback(
+    ({ set }) => {
+      return (workflowId: string, title: string, icon: IconComponent) => {
+        const pageId = v4();
+
+        set(
+          workflowIdComponentState.atomFamily({ instanceId: pageId }),
+          workflowId,
+        );
+
+        navigateCommandMenu({
+          page: CommandMenuPages.WorkflowRunStepView,
+          pageTitle: title,
+          pageIcon: icon,
+          pageId,
+        });
+      };
+    },
+    [navigateCommandMenu],
+  );
+
   const openRecordsSearchPage = () => {
     navigateCommandMenu({
       page: CommandMenuPages.SearchRecords,
@@ -512,5 +620,10 @@ export const useCommandMenu = () => {
     setGlobalCommandMenuContext,
     openCalendarEventInCommandMenu,
     openEmailThreadInCommandMenu,
+    openWorkflowTriggerTypeInCommandMenu,
+    openWorkflowActionInCommandMenu,
+    openWorkflowEditStepInCommandMenu,
+    openWorkflowViewStepInCommandMenu,
+    openWorkflowViewRunStepInCommandMenu,
   };
 };