diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts index a08b3acdd..f042e0259 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts +++ b/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: ['/'], + }, }; diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts index bd4c497c7..51a3bdf5c 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts +++ b/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', diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKey.ts b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKey.ts index 68df5a588..ddbbaba10 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKey.ts +++ b/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', } diff --git a/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts b/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts index 94ab3f966..4bfa8185a 100644 --- a/packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts +++ b/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 { diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx index 255010704..3a646f947 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx +++ b/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 ( { if ( key !== RecordAgnosticActionsKey.SEARCH_RECORDS && + key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK && key !== NoSelectionRecordActionKeys.CREATE_NEW_RECORD ) { toggleCommandMenu(); } + if (key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK) { + setCommandMenuSearch(''); + } }, }} > diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCommands.tsx b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCommands.tsx index 2e7897b5e..f201044a4 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCommands.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/command-menu/types/Command.ts b/packages/twenty-front/src/modules/command-menu/types/Command.ts index 39baf41be..3c55038e4 100644 --- a/packages/twenty-front/src/modules/command-menu/types/Command.ts +++ b/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 {