321 command menu context chips compact version (#10072)

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

- Create component
- Create stories
- Fix bug due to `WorkflowDiagramCanvasEditableEffect`

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

@@ -1,4 +1,5 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 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';
@@ -32,11 +33,17 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
 
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
 
+  const setCommandMenuNavigationStack = useSetRecoilState(
+    commandMenuNavigationStackState,
+  );
+
   const handleSelectionChange = useCallback(
     ({ nodes }: OnSelectionChangeParams) => {
       const selectedNode = nodes[0] as WorkflowDiagramNode;
       const isClosingStep = isDefined(selectedNode) === false;
 
+      setCommandMenuNavigationStack([]);
+
       if (isClosingStep) {
         closeRightDrawer();
         closeCommandMenu();
@@ -69,14 +76,15 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
       });
     },
     [
+      setCommandMenuNavigationStack,
       setWorkflowSelectedNode,
       setHotkeyScope,
       openRightDrawer,
+      getIcon,
       closeRightDrawer,
       closeCommandMenu,
-      startNodeCreation,
-      getIcon,
       t,
+      startNodeCreation,
     ],
   );
 

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

@@ -28,7 +28,7 @@ export const useStartNodeCreation = () => {
         Icon: IconSettingsAutomation,
       });
     },
-    [openRightDrawer, setWorkflowCreateStepFromParentStepId, setHotkeyScope],
+    [setWorkflowCreateStepFromParentStepId, setHotkeyScope, openRightDrawer],
   );
 
   return {

packages/twenty-front/src/modules/workflow/workflow-steps/hooks/__tests__/useCreateStep.test.ts

@@ -2,7 +2,6 @@ import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import { renderHook } from '@testing-library/react';
 import { useCreateStep } from '../useCreateStep';
 
-const mockOpenRightDrawer = jest.fn();
 const mockCreateDraftFromWorkflowVersion = jest.fn().mockResolvedValue('457');
 const mockCreateWorkflowVersionStep = jest.fn().mockResolvedValue({
   data: { createWorkflowVersionStep: { id: '1', type: 'CODE' } },
@@ -14,12 +13,6 @@ jest.mock('recoil', () => ({
   atom: (params: any) => params,
 }));
 
-jest.mock('@/ui/layout/right-drawer/hooks/useRightDrawer', () => ({
-  useRightDrawer: () => ({
-    openRightDrawer: mockOpenRightDrawer,
-  }),
-}));
-
 jest.mock(
   '@/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep',
   () => ({
@@ -56,6 +49,5 @@ describe('useCreateStep', () => {
     await result.current.createStep('CODE');
 
     expect(mockCreateWorkflowVersionStep).toHaveBeenCalled();
-    expect(mockOpenRightDrawer).toHaveBeenCalled();
   });
 });

packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useCreateStep.ts

@@ -1,5 +1,3 @@
-import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useGetUpdatableWorkflowVersion } from '@/workflow/hooks/useGetUpdatableWorkflowVersion';
 import { workflowLastCreatedStepIdState } from '@/workflow/states/workflowLastCreatedStepIdState';
 import {
@@ -7,19 +5,16 @@ import {
   WorkflowWithCurrentVersion,
 } from '@/workflow/types/Workflow';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
-import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
 import { useCreateWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/useCreateWorkflowVersionStep';
 import { workflowCreateStepFromParentStepIdState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
-import { useIcons } from 'twenty-ui';
 
 export const useCreateStep = ({
   workflow,
 }: {
   workflow: WorkflowWithCurrentVersion;
 }) => {
-  const { getIcon } = useIcons();
   const { createWorkflowVersionStep } = useCreateWorkflowVersionStep();
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
   const setWorkflowLastCreatedStepId = useSetRecoilState(
@@ -32,8 +27,6 @@ export const useCreateStep = ({
 
   const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
 
-  const { openRightDrawer } = useRightDrawer();
-
   const createStep = async (newStepType: WorkflowStepType) => {
     if (!isDefined(workflowCreateStepFromParentStepId)) {
       throw new Error('Select a step to create a new step from first.');
@@ -54,18 +47,6 @@ export const useCreateStep = ({
 
     setWorkflowSelectedNode(createdStep.id);
     setWorkflowLastCreatedStepId(createdStep.id);
-
-    const stepIcon = getWorkflowNodeIconKey({
-      nodeType: 'action',
-      actionType: createdStep.type as WorkflowStepType,
-      name: createdStep.name,
-      isLeafNode: false,
-    });
-
-    openRightDrawer(RightDrawerPages.WorkflowStepEdit, {
-      title: createdStep.name,
-      Icon: getIcon(stepIcon),
-    });
   };
 
   return {