Fix search fallback action (#10256)

The command menu search bar was reset after clicking on the `Search
records` fallback action, but it shouldn't.
This PR:
- Introduces a new type of action: `Fallback` actions
- Reset the search bar only if the action key differs from
'record-search-fallback'

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts

@@ -29,4 +29,17 @@ export const RECORD_AGNOSTIC_ACTIONS_CONFIG: Record<
     useAction: useSearchRecordsRecordAgnosticAction,
     hotKeys: ['/'],
   },
+  searchRecordsFallback: {
+    type: ActionMenuEntryType.Fallback,
+    scope: ActionMenuEntryScope.Global,
+    key: RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK,
+    label: msg`Search records`,
+    shortLabel: msg`Search`,
+    position: 1,
+    isPinned: false,
+    Icon: IconSearch,
+    availableOn: [ActionViewType.GLOBAL],
+    useAction: useSearchRecordsRecordAgnosticAction,
+    hotKeys: ['/'],
+  },
 };

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts

@@ -1,17 +1,11 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { useSetRecoilState } from 'recoil';
 import { IconSearch } from 'twenty-ui';
 
 export const useSearchRecordsRecordAgnosticAction = () => {
   const { navigateCommandMenu } = useCommandMenu();
 
-  const setCommandMenuSearch = useSetRecoilState(commandMenuSearchState);
-
   const onClick = () => {
-    setCommandMenuSearch('');
-
     navigateCommandMenu({
       page: CommandMenuPages.SearchRecords,
       pageTitle: 'Search',

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKey.ts

@@ -1,3 +1,4 @@
 export enum RecordAgnosticActionsKey {
   SEARCH_RECORDS = 'search-records',
+  SEARCH_RECORDS_FALLBACK = 'search-records-fallback',
 }

packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts

@@ -7,6 +7,7 @@ import { IconComponent, MenuItemAccent } from 'twenty-ui';
 export enum ActionMenuEntryType {
   Standard = 'Standard',
   WorkflowRun = 'WorkflowRun',
+  Fallback = 'Fallback',
 }
 
 export enum ActionMenuEntryScope {

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

@@ -9,6 +9,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
+import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
@@ -21,7 +22,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useRef } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { useIsMobile } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
@@ -78,6 +79,8 @@ export const CommandMenuContainer = ({
     FeatureFlagKey.IsWorkflowEnabled,
   );
 
+  const setCommandMenuSearch = useSetRecoilState(commandMenuSearchState);
+
   return (
     <RecordFiltersComponentInstanceContext.Provider
       value={{ instanceId: 'command-menu' }}
@@ -94,10 +97,14 @@ export const CommandMenuContainer = ({
               onActionExecutedCallback: ({ key }) => {
                 if (
                   key !== RecordAgnosticActionsKey.SEARCH_RECORDS &&
+                  key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK &&
                   key !== NoSelectionRecordActionKeys.CREATE_NEW_RECORD
                 ) {
                   toggleCommandMenu();
                 }
+                if (key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK) {
+                  setCommandMenuSearch('');
+                }
               },
             }}
           >

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCommands.tsx

@@ -1,4 +1,3 @@
-import { RecordAgnosticActionsKey } from '@/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKey';
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
 import {
   ActionMenuEntryScope,
@@ -129,24 +128,20 @@ export const useCommandMenuCommands = () => {
       hotKeys: actionMenuEntry.hotKeys,
     }));
 
-  const searchRecordsAction = actionMenuEntries.find(
-    (actionMenuEntry) =>
-      actionMenuEntry.key === RecordAgnosticActionsKey.SEARCH_RECORDS,
-  );
-
-  const fallbackCommands: Command[] = searchRecordsAction
-    ? [
-        {
-          id: searchRecordsAction.key,
-          label: i18n._(searchRecordsAction.label),
-          Icon: searchRecordsAction.Icon,
-          onCommandClick: searchRecordsAction.onClick,
-          type: CommandType.StandardAction,
-          scope: CommandScope.Global,
-          hotKeys: searchRecordsAction.hotKeys,
-        },
-      ]
-    : [];
+  const fallbackCommands: Command[] = actionMenuEntries
+    ?.filter(
+      (actionMenuEntry) =>
+        actionMenuEntry.type === ActionMenuEntryType.Fallback,
+    )
+    ?.map((actionMenuEntry) => ({
+      id: actionMenuEntry.key,
+      label: i18n._(actionMenuEntry.label),
+      Icon: actionMenuEntry.Icon,
+      onCommandClick: actionMenuEntry.onClick,
+      type: CommandType.Fallback,
+      scope: CommandScope.Global,
+      hotKeys: actionMenuEntry.hotKeys,
+    }));
 
   return {
     copilotCommands,

packages/twenty-front/src/modules/command-menu/types/Command.ts

@@ -4,6 +4,7 @@ export enum CommandType {
   Create = 'Create',
   StandardAction = 'StandardAction',
   WorkflowRun = 'WorkflowRun',
+  Fallback = 'Fallback',
 }
 
 export enum CommandScope {