324 add search records as a fallback action in case of no results (#9976)

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

Fixed typos: 'No results' is used when multiple results are expected and
'No result' is used when only one result is expected.


https://github.com/user-attachments/assets/e3655ced-465a-44b1-92af-63878b9d8a94

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

@@ -32,6 +32,7 @@ export const CommandMenu = () => {
     matchingStandardActionGlobalCommands,
     matchingWorkflowRunGlobalCommands,
     matchingNavigateCommands,
+    fallbackCommands,
   } = useMatchingCommandMenuCommands({
     commandMenuSearch,
   });
@@ -44,6 +45,7 @@ export const CommandMenu = () => {
       matchingStandardActionGlobalCommands,
       matchingWorkflowRunGlobalCommands,
       matchingNavigateCommands,
+      fallbackCommands,
     )
     .filter(isDefined);
 
@@ -79,6 +81,10 @@ export const CommandMenu = () => {
         .concat(matchingNavigateCommands)
         .concat(matchingWorkflowRunGlobalCommands),
     },
+    {
+      heading: t`Search ''${commandMenuSearch}'' with...`,
+      items: fallbackCommands,
+    },
   ];
 
   return (

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

@@ -111,9 +111,6 @@ export const CommandMenuList = ({
               }}
             >
               {children}
-              {noResults && !loading && (
-                <StyledEmpty>No result found</StyledEmpty>
-              )}
               {commandGroups.map(({ heading, items }) =>
                 items?.length ? (
                   <CommandGroup heading={heading} key={heading}>
@@ -139,6 +136,9 @@ export const CommandMenuList = ({
                   </CommandGroup>
                 ) : null,
               )}
+              {noResults && !loading && (
+                <StyledEmpty>No results found</StyledEmpty>
+              )}
             </SelectableList>
           </StyledInnerList>
         </ScrollWrapper>

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -8,7 +8,6 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { getCompaniesMock } from '~/testing/mock-data/companies';
 import {
   mockCurrentWorkspace,
   mockedWorkspaceMemberData,
@@ -20,14 +19,16 @@ import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
+import { HttpResponse, graphql } from 'msw';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
+import { getCompaniesMock } from '~/testing/mock-data/companies';
 import { CommandMenu } from '../CommandMenu';
 
-const companiesMock = getCompaniesMock();
-
 const openTimeout = 50;
 
+const companiesMock = getCompaniesMock();
+
 const ContextStoreDecorator: Decorator = (Story) => {
   return (
     <RecordFiltersComponentInstanceContext.Provider
@@ -125,6 +126,45 @@ export const SearchRecordsAction: Story = {
     expect(await canvas.findByText('Linkedin')).toBeVisible();
     const companyTexts = await canvas.findAllByText('Company');
     expect(companyTexts[0]).toBeVisible();
-    expect(await canvas.findByText(companiesMock[0].name)).toBeVisible();
+  },
+};
+
+export const NoResultsSearchFallback: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+    const searchInput = await canvas.findByPlaceholderText('Type anything');
+    await sleep(openTimeout);
+    await userEvent.type(searchInput, 'Linkedin');
+    expect(await canvas.findByText('No results found')).toBeVisible();
+    const searchRecordsButton = await canvas.findByText('Search records');
+    expect(searchRecordsButton).toBeVisible();
+    await userEvent.click(searchRecordsButton);
+    expect(await canvas.findByText('Linkedin')).toBeVisible();
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query('CombinedSearchRecords', () => {
+          return HttpResponse.json({
+            data: {
+              searchCompanies: {
+                edges: [
+                  {
+                    node: companiesMock[0],
+                    cursor: null,
+                  },
+                ],
+                pageInfo: {
+                  hasNextPage: false,
+                  hasPreviousPage: false,
+                  startCursor: null,
+                  endCursor: null,
+                },
+              },
+            },
+          });
+        }),
+      ],
+    },
   },
 };

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

@@ -1,3 +1,4 @@
+import { RecordAgnosticActionsKey } from '@/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKey';
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
 import {
   ActionMenuEntryScope,
@@ -128,6 +129,25 @@ 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,
+        },
+      ]
+    : [];
+
   return {
     copilotCommands,
     navigateCommands,
@@ -136,5 +156,6 @@ export const useCommandMenuCommands = () => {
     actionObjectCommands,
     workflowRunRecordSelectionCommands,
     workflowRunGlobalCommands,
+    fallbackCommands,
   };
 };

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

@@ -16,6 +16,7 @@ export const useMatchingCommandMenuCommands = ({
     actionGlobalCommands,
     workflowRunRecordSelectionCommands,
     workflowRunGlobalCommands,
+    fallbackCommands,
   } = useCommandMenuCommands();
 
   const matchingNavigateCommands = matchCommands(navigateCommands);
@@ -55,5 +56,6 @@ export const useMatchingCommandMenuCommands = ({
     matchingStandardActionGlobalCommands,
     matchingWorkflowRunGlobalCommands,
     matchingNavigateCommands,
+    fallbackCommands: noResults ? fallbackCommands : [],
   };
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx

@@ -182,7 +182,7 @@ export const ObjectFilterDropdownOptionSelect = () => {
           />
         ))}
       </DropdownMenuItemsContainer>
-      {showNoResult && <MenuItem text="No result" />}
+      {showNoResult && <MenuItem text="No results" />}
     </SelectableList>
   );
 };

packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx

@@ -132,7 +132,7 @@ export const MultipleSelectDropdown = ({
             />
           );
         })}
-        {showNoResult && <MenuItem text="No result" />}
+        {showNoResult && <MenuItem text="No results" />}
         {loadingItems && <DropdownMenuSkeletonItem />}
       </DropdownMenuItemsContainer>
     </SelectableList>

packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -161,7 +161,7 @@ export const MatchColumnSelect = ({
                     </React.Fragment>
                   ))}
                   {options?.length === 0 && (
-                    <MenuItem key="No result" text="No result" />
+                    <MenuItem key="No results" text="No results" />
                   )}
                 </DropdownMenuItemsContainer>
               </DropdownMenu>

packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx

@@ -42,7 +42,7 @@ export const CurrencyPickerDropdownSelect = ({
       <DropdownMenuSeparator />
       <DropdownMenuItemsContainer hasMaxHeight>
         {filteredCurrencies.length === 0 ? (
-          <MenuItem text="No result" />
+          <MenuItem text="No results" />
         ) : (
           <>
             {selectedCurrency && (

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx

@@ -55,7 +55,7 @@ export const PhoneCountryPickerDropdownSelect = ({
       <DropdownMenuSeparator />
       <DropdownMenuItemsContainer hasMaxHeight>
         {filteredCountries?.length === 0 ? (
-          <MenuItem text="No result" />
+          <MenuItem text="No results" />
         ) : (
           <>
             {selectedCountry && (