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/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx

@@ -1,4 +1,3 @@
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
 import { WorkflowDiagramCustomMarkers } from '@/workflow/workflow-diagram/components/WorkflowDiagramCustomMarkers';
 import { useRightDrawerState } from '@/workflow/workflow-diagram/hooks/useRightDrawerState';
@@ -209,8 +208,6 @@ export const WorkflowDiagramCanvasBase = ({
     );
   }, [reactflow, rightDrawerState, rightDrawerWidth]);
 
-  const { closeCommandMenu } = useCommandMenu();
-
   return (
     <StyledResetReactflowStyles ref={containerRef}>
       <WorkflowDiagramCustomMarkers />
@@ -251,7 +248,6 @@ export const WorkflowDiagramCanvasBase = ({
         nodesFocusable={false}
         edgesFocusable={false}
         nodesDraggable={false}
-        onPaneClick={closeCommandMenu}
         nodesConnectable={false}
         paneClickDistance={10} // Fix small unwanted user dragging does not select node
       >

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx

@@ -5,6 +5,7 @@ import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { EMPTY_TRIGGER_STEP_ID } from '@/workflow/workflow-diagram/constants/EmptyTriggerStepId';
 import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation';
 import { useTriggerNodeSelection } from '@/workflow/workflow-diagram/hooks/useTriggerNodeSelection';
@@ -15,12 +16,14 @@ import {
 } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
 import { isCreateStepNode } from '@/workflow/workflow-diagram/utils/isCreateStepNode';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useLingui } from '@lingui/react/macro';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback, useContext } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { IconBolt, useIcons } from 'twenty-ui';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const WorkflowDiagramCanvasEditableEffect = () => {
   const { t } = useLingui();
@@ -28,7 +31,10 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
   const { startNodeCreation } = useStartNodeCreation();
 
   const { openRightDrawer, closeRightDrawer } = useRightDrawer();
-  const { closeCommandMenu } = useCommandMenu();
+  const {
+    openWorkflowTriggerTypeInCommandMenu,
+    openWorkflowEditStepInCommandMenu,
+  } = useCommandMenu();
 
   const setHotkeyScope = useSetHotkeyScope();
 
@@ -40,6 +46,12 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
 
   const { isInRightDrawer } = useContext(ActionMenuContext);
 
+  const workflowId = useRecoilValue(workflowIdState);
+
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+
   const handleSelectionChange = useCallback(
     ({ nodes }: OnSelectionChangeParams) => {
       const selectedNode = nodes[0] as WorkflowDiagramNode;
@@ -51,12 +63,16 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
 
       if (isClosingStep) {
         closeRightDrawer();
-        closeCommandMenu();
         return;
       }
 
       const isEmptyTriggerNode = selectedNode.type === EMPTY_TRIGGER_STEP_ID;
       if (isEmptyTriggerNode) {
+        if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+          openWorkflowTriggerTypeInCommandMenu(workflowId);
+          return;
+        }
+
         openRightDrawer(RightDrawerPages.WorkflowStepSelectTriggerType, {
           title: t`Trigger Type`,
           Icon: IconBolt,
@@ -74,6 +90,17 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
       const selectedNodeData = selectedNode.data as WorkflowDiagramStepNodeData;
 
       setWorkflowSelectedNode(selectedNode.id);
+
+      if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+        openWorkflowEditStepInCommandMenu(
+          workflowId,
+          selectedNodeData.name,
+          getIcon(getWorkflowNodeIconKey(selectedNodeData)),
+        );
+
+        return;
+      }
+
       setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
       openRightDrawer(RightDrawerPages.WorkflowStepEdit, {
         title: selectedNodeData.name,
@@ -82,15 +109,18 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
     },
     [
       isInRightDrawer,
-      setWorkflowSelectedNode,
-      setHotkeyScope,
-      openRightDrawer,
-      getIcon,
+      isCommandMenuV2Enabled,
       setCommandMenuNavigationStack,
       closeRightDrawer,
-      closeCommandMenu,
+      workflowId,
+      openRightDrawer,
       t,
+      openWorkflowTriggerTypeInCommandMenu,
       startNodeCreation,
+      openWorkflowEditStepInCommandMenu,
+      getIcon,
+      setWorkflowSelectedNode,
+      setHotkeyScope,
     ],
   );
 

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

@@ -3,6 +3,7 @@ import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { EMPTY_TRIGGER_STEP_ID } from '@/workflow/workflow-diagram/constants/EmptyTriggerStepId';
 import { useTriggerNodeSelection } from '@/workflow/workflow-diagram/hooks/useTriggerNodeSelection';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
@@ -11,18 +12,25 @@ import {
   WorkflowDiagramStepNodeData,
 } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { useIcons } from 'twenty-ui';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const WorkflowDiagramCanvasReadonlyEffect = () => {
   const { getIcon } = useIcons();
   const { openRightDrawer, closeRightDrawer } = useRightDrawer();
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
   const setHotkeyScope = useSetHotkeyScope();
-  const { closeCommandMenu } = useCommandMenu();
+  const { openWorkflowViewStepInCommandMenu } = useCommandMenu();
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+
+  const workflowId = useRecoilValue(workflowIdState);
 
   const handleSelectionChange = useCallback(
     ({ nodes }: OnSelectionChangeParams) => {
@@ -31,7 +39,6 @@ export const WorkflowDiagramCanvasReadonlyEffect = () => {
 
       if (isClosingStep || selectedNode.type === EMPTY_TRIGGER_STEP_ID) {
         closeRightDrawer();
-        closeCommandMenu();
         return;
       }
 
@@ -40,6 +47,15 @@ export const WorkflowDiagramCanvasReadonlyEffect = () => {
 
       const selectedNodeData = selectedNode.data as WorkflowDiagramStepNodeData;
 
+      if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+        openWorkflowViewStepInCommandMenu(
+          workflowId,
+          selectedNodeData.name,
+          getIcon(getWorkflowNodeIconKey(selectedNodeData)),
+        );
+        return;
+      }
+
       openRightDrawer(RightDrawerPages.WorkflowStepView, {
         title: selectedNodeData.name,
         Icon: getIcon(getWorkflowNodeIconKey(selectedNodeData)),
@@ -48,10 +64,12 @@ export const WorkflowDiagramCanvasReadonlyEffect = () => {
     [
       setWorkflowSelectedNode,
       setHotkeyScope,
-      openRightDrawer,
+      isCommandMenuV2Enabled,
       closeRightDrawer,
-      closeCommandMenu,
+      openWorkflowViewStepInCommandMenu,
+      workflowId,
       getIcon,
+      openRightDrawer,
     ],
   );
 

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunDiagramCanvasEffect.tsx

@@ -5,6 +5,7 @@ import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPage
 import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
 import {
   WorkflowDiagramNode,
@@ -14,18 +15,25 @@ import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWor
 import { WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/constants/WorkflowRunStepSidePanelTabListComponentId';
 import { WorkflowRunTabId } from '@/workflow/workflow-steps/types/WorkflowRunTabId';
 import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
-import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { useIcons } from 'twenty-ui';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const WorkflowRunDiagramCanvasEffect = () => {
   const { getIcon } = useIcons();
   const { openRightDrawer, closeRightDrawer } = useRightDrawer();
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
   const setHotkeyScope = useSetHotkeyScope();
-  const { closeCommandMenu } = useCommandMenu();
+  const { openWorkflowViewRunStepInCommandMenu } = useCommandMenu();
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+
+  const workflowId = useRecoilValue(workflowIdState);
 
   const { activeTabIdState: workflowRunRightDrawerListActiveTabIdState } =
     useTabListStates({
@@ -57,7 +65,6 @@ export const WorkflowRunDiagramCanvasEffect = () => {
 
       if (isClosingStep) {
         closeRightDrawer();
-        closeCommandMenu();
         return;
       }
 
@@ -74,6 +81,16 @@ export const WorkflowRunDiagramCanvasEffect = () => {
         goBackToFirstWorkflowRunRightDrawerTabIfNeeded();
       }
 
+      if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+        openWorkflowViewRunStepInCommandMenu(
+          workflowId,
+          selectedNodeData.name,
+          getIcon(getWorkflowNodeIconKey(selectedNodeData)),
+        );
+
+        return;
+      }
+
       openRightDrawer(RightDrawerPages.WorkflowRunStepView, {
         title: selectedNodeData.name,
         Icon: getIcon(getWorkflowNodeIconKey(selectedNodeData)),
@@ -82,11 +99,13 @@ export const WorkflowRunDiagramCanvasEffect = () => {
     [
       setWorkflowSelectedNode,
       setHotkeyScope,
+      isCommandMenuV2Enabled,
+      workflowId,
       openRightDrawer,
       getIcon,
       closeRightDrawer,
-      closeCommandMenu,
       goBackToFirstWorkflowRunRightDrawerTabIfNeeded,
+      openWorkflowViewRunStepInCommandMenu,
     ],
   );
 

packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts

@@ -1,11 +1,16 @@
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { workflowCreateStepFromParentStepIdState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useCallback } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared';
 import { IconSettingsAutomation } from 'twenty-ui';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const useStartNodeCreation = () => {
   const { openRightDrawer } = useRightDrawer();
@@ -13,6 +18,13 @@ export const useStartNodeCreation = () => {
     workflowCreateStepFromParentStepIdState,
   );
   const setHotkeyScope = useSetHotkeyScope();
+  const { openWorkflowActionInCommandMenu } = useCommandMenu();
+
+  const workflowId = useRecoilValue(workflowIdState);
+
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
 
   /**
    * This function is used in a context where dependencies shouldn't change much.
@@ -22,13 +34,25 @@ export const useStartNodeCreation = () => {
     (parentNodeId: string) => {
       setWorkflowCreateStepFromParentStepId(parentNodeId);
 
+      if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+        openWorkflowActionInCommandMenu(workflowId);
+        return;
+      }
+
       setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
       openRightDrawer(RightDrawerPages.WorkflowStepSelectAction, {
         title: 'Select Action',
         Icon: IconSettingsAutomation,
       });
     },
-    [setWorkflowCreateStepFromParentStepId, setHotkeyScope, openRightDrawer],
+    [
+      setWorkflowCreateStepFromParentStepId,
+      isCommandMenuV2Enabled,
+      openWorkflowActionInCommandMenu,
+      workflowId,
+      setHotkeyScope,
+      openRightDrawer,
+    ],
   );
 
   return {

packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx

@@ -1,3 +1,4 @@
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
@@ -13,8 +14,10 @@ import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/Other
 import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
 import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useSetRecoilState } from 'recoil';
 import { MenuItemCommand, useIcons } from 'twenty-ui';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const RightDrawerWorkflowSelectTriggerTypeContent = ({
   workflow,
@@ -28,6 +31,10 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
 
   const { openRightDrawer } = useRightDrawer();
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
+  const { openWorkflowEditStepInCommandMenu } = useCommandMenu();
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
 
   const handleTriggerTypeClick = ({
     type,
@@ -49,10 +56,18 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
 
       setWorkflowSelectedNode(TRIGGER_STEP_ID);
 
-      openRightDrawer(RightDrawerPages.WorkflowStepEdit, {
-        title: defaultLabel,
-        Icon: getIcon(icon),
-      });
+      if (isCommandMenuV2Enabled) {
+        openWorkflowEditStepInCommandMenu(
+          workflow.id,
+          defaultLabel,
+          getIcon(icon),
+        );
+      } else {
+        openRightDrawer(RightDrawerPages.WorkflowStepEdit, {
+          title: defaultLabel,
+          Icon: getIcon(icon),
+        });
+      }
     };
   };