9426 migrate workflow pages to command menu

packages/twenty-front/src/modules/command-menu/components/CommandMenuPages.ts

@@ -3,4 +3,8 @@ export enum CommandMenuPages {
   ViewRecord = 'view-record',
   ViewEmailThread = 'view-email-thread',
   ViewCalendarEvent = 'view-calendar-event',
+  WorkflowStepSelectTriggerType = 'workflow-step-select-trigger-type',
+  WorkflowStepSelectAction = 'workflow-step-select-action',
+  WorkflowStepView = 'workflow-step-view',
+  WorkflowStepEdit = 'workflow-step-edit',
 }

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx

@@ -1,12 +1,14 @@
 import { CommandMenuContextRecordChip } from '@/command-menu/components/CommandMenuContextRecordChip';
+import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
 import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { IconX, LightIconButton, isDefined, useIsMobile } from 'twenty-ui';
 
 const StyledInputContainer = styled.div`
@@ -17,6 +19,7 @@ const StyledInputContainer = styled.div`
   border-radius: 0;
 
   display: flex;
+  justify-content: space-between;
   font-size: ${({ theme }) => theme.font.size.lg};
   height: ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px;
   margin: 0;
@@ -45,6 +48,13 @@ const StyledInput = styled.input`
   }
 `;
 
+const StyledContentContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
 const StyledCloseButtonContainer = styled.div`
   align-items: center;
   display: flex;
@@ -69,19 +79,25 @@ export const CommandMenuTopBar = () => {
     contextStoreCurrentObjectMetadataIdComponentState,
   );
 
+  const commandMenuPage = useRecoilValue(commandMenuPageState);
+
   return (
     <StyledInputContainer>
-      {isDefined(contextStoreCurrentObjectMetadataId) && (
-        <CommandMenuContextRecordChip
-          objectMetadataItemId={contextStoreCurrentObjectMetadataId}
-        />
-      )}
-      <StyledInput
-        autoFocus
-        value={commandMenuSearch}
-        placeholder="Type anything"
-        onChange={handleSearchChange}
-      />
+      <StyledContentContainer>
+        {isDefined(contextStoreCurrentObjectMetadataId) && (
+          <CommandMenuContextRecordChip
+            objectMetadataItemId={contextStoreCurrentObjectMetadataId}
+          />
+        )}
+        {commandMenuPage === CommandMenuPages.Root && (
+          <StyledInput
+            autoFocus
+            value={commandMenuSearch}
+            placeholder="Type anything"
+            onChange={handleSearchChange}
+          />
+        )}
+      </StyledContentContainer>
       {!isMobile && (
         <StyledCloseButtonContainer>
           <LightIconButton

packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx

@@ -3,6 +3,10 @@ import { RightDrawerEmailThread } from '@/activities/emails/right-drawer/compone
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
 import { RightDrawerRecord } from '@/object-record/record-right-drawer/components/RightDrawerRecord';
+import { RightDrawerWorkflowEditStep } from '@/workflow/workflow-steps/components/RightDrawerWorkflowEditStep';
+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';
 
 export const COMMAND_MENU_PAGES_CONFIG = new Map<
   CommandMenuPages,
@@ -12,4 +16,14 @@ export const COMMAND_MENU_PAGES_CONFIG = new Map<
   [CommandMenuPages.ViewRecord, <RightDrawerRecord />],
   [CommandMenuPages.ViewEmailThread, <RightDrawerEmailThread />],
   [CommandMenuPages.ViewCalendarEvent, <RightDrawerCalendarEvent />],
+  [
+    CommandMenuPages.WorkflowStepSelectTriggerType,
+    <RightDrawerWorkflowSelectTriggerType />,
+  ],
+  [
+    CommandMenuPages.WorkflowStepSelectAction,
+    <RightDrawerWorkflowSelectAction />,
+  ],
+  [CommandMenuPages.WorkflowStepEdit, <RightDrawerWorkflowEditStep />],
+  [CommandMenuPages.WorkflowStepView, <RightDrawerWorkflowViewStep />],
 ]);

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

@@ -250,10 +250,39 @@ export const useCommandMenu = () => {
     [openCommandMenu],
   );
 
+  const setGlobalCommandMenuContext = useRecoilCallback(({ set }) => {
+    return () => {
+      set(
+        contextStoreTargetedRecordsRuleComponentState.atomFamily({
+          instanceId: 'command-menu',
+        }),
+        {
+          mode: 'selection',
+          selectedRecordIds: [],
+        },
+      );
+
+      set(
+        contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
+          instanceId: 'command-menu',
+        }),
+        0,
+      );
+
+      set(
+        contextStoreCurrentViewTypeComponentState.atomFamily({
+          instanceId: 'command-menu',
+        }),
+        null,
+      );
+    };
+  }, []);
+
   return {
     openCommandMenu,
     closeCommandMenu,
     openRecordInCommandMenu,
     toggleCommandMenu,
+    resetCommandMenuContext: setGlobalCommandMenuContext,
   };
 };

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

@@ -1,32 +1,24 @@
+import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
-import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
-import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 export const useCommandMenuHotKeys = () => {
-  const { closeCommandMenu, toggleCommandMenu } = useCommandMenu();
+  const { closeCommandMenu, toggleCommandMenu, resetCommandMenuContext } =
+    useCommandMenu();
 
   const commandMenuSearch = useRecoilValue(commandMenuSearchState);
 
-  const setContextStoreTargetedRecordsRule = useSetRecoilComponentStateV2(
-    contextStoreTargetedRecordsRuleComponentState,
-    'command-menu',
-  );
-
-  const setContextStoreNumberOfSelectedRecords = useSetRecoilComponentStateV2(
-    contextStoreNumberOfSelectedRecordsComponentState,
-    'command-menu',
-  );
-
   const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();
 
+  const commandMenuPage = useRecoilValue(commandMenuPageState);
+
   useScopedHotkeys(
     'ctrl+k,meta+k',
     () => {
@@ -49,13 +41,11 @@ export const useCommandMenuHotKeys = () => {
   useScopedHotkeys(
     [Key.Backspace, Key.Delete],
     () => {
-      if (!isNonEmptyString(commandMenuSearch)) {
-        setContextStoreTargetedRecordsRule({
-          mode: 'selection',
-          selectedRecordIds: [],
-        });
-
-        setContextStoreNumberOfSelectedRecords(0);
+      if (
+        commandMenuPage === CommandMenuPages.Root &&
+        !isNonEmptyString(commandMenuSearch)
+      ) {
+        resetCommandMenuContext();
       }
     },
     AppHotkeyScope.CommandMenuOpen,

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

@@ -11,6 +11,14 @@ export const mapRightDrawerPageToCommandMenuPage = (
       return CommandMenuPages.ViewEmailThread;
     case RightDrawerPages.ViewCalendarEvent:
       return CommandMenuPages.ViewCalendarEvent;
+    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;
   }