Command menu search bar (#4337)

* Improve performance on findMany queries

* Fix

* Fix command menu not emptying the search on toggle

* Fix tests

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

@@ -1,10 +1,11 @@
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { Activity } from '@/activities/types/Activity';
+import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { Company } from '@/companies/types/Company';
 import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -105,23 +106,24 @@ export const CommandMenu = () => {
 
   const openActivityRightDrawer = useOpenActivityRightDrawer();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
-  const [search, setSearch] = useState('');
+  const [commandMenuSearch, setCommandMenuSearch] = useRecoilState(
+    commandMenuSearchState,
+  );
   const commandMenuCommands = useRecoilValue(commandMenuCommandsState);
   const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(event.target.value);
+    setCommandMenuSearch(event.target.value);
   };
 
   useScopedHotkeys(
     'ctrl+k,meta+k',
     () => {
       closeKeyboardShortcutMenu();
-      setSearch('');
       toggleCommandMenu();
     },
     AppHotkeyScope.CommandMenu,
-    [toggleCommandMenu, setSearch],
+    [toggleCommandMenu],
   );
 
   useScopedHotkeys(
@@ -136,12 +138,12 @@ export const CommandMenu = () => {
   const { records: people } = useFindManyRecords<Person>({
     skip: !isCommandMenuOpened,
     objectNameSingular: CoreObjectNameSingular.Person,
-    filter: search
+    filter: commandMenuSearch
       ? makeOrFilterVariables([
-          { name: { firstName: { ilike: `%${search}%` } } },
-          { name: { lastName: { ilike: `%${search}%` } } },
-          { email: { ilike: `%${search}%` } },
-          { phone: { ilike: `%${search}%` } },
+          { name: { firstName: { ilike: `%${commandMenuSearch}%` } } },
+          { name: { lastName: { ilike: `%${commandMenuSearch}%` } } },
+          { email: { ilike: `%${commandMenuSearch}%` } },
+          { phone: { ilike: `%${commandMenuSearch}%` } },
         ])
       : undefined,
     limit: 3,
@@ -150,9 +152,9 @@ export const CommandMenu = () => {
   const { records: companies } = useFindManyRecords<Company>({
     skip: !isCommandMenuOpened,
     objectNameSingular: CoreObjectNameSingular.Company,
-    filter: search
+    filter: commandMenuSearch
       ? {
-          name: { ilike: `%${search}%` },
+          name: { ilike: `%${commandMenuSearch}%` },
         }
       : undefined,
     limit: 3,
@@ -161,10 +163,10 @@ export const CommandMenu = () => {
   const { records: activities } = useFindManyRecords<Activity>({
     skip: !isCommandMenuOpened,
     objectNameSingular: CoreObjectNameSingular.Activity,
-    filter: search
+    filter: commandMenuSearch
       ? makeOrFilterVariables([
-          { title: { ilike: `%${search}%` } },
-          { body: { ilike: `%${search}%` } },
+          { title: { ilike: `%${commandMenuSearch}%` } },
+          { body: { ilike: `%${commandMenuSearch}%` } },
         ])
       : undefined,
     limit: 3,
@@ -224,15 +226,17 @@ export const CommandMenu = () => {
 
   const matchingNavigateCommand = commandMenuCommands.filter(
     (cmd) =>
-      (search.length > 0
-        ? checkInShortcuts(cmd, search) || checkInLabels(cmd, search)
+      (commandMenuSearch.length > 0
+        ? checkInShortcuts(cmd, commandMenuSearch) ||
+          checkInLabels(cmd, commandMenuSearch)
         : true) && cmd.type === CommandType.Navigate,
   );
 
   const matchingCreateCommand = commandMenuCommands.filter(
     (cmd) =>
-      (search.length > 0
-        ? checkInShortcuts(cmd, search) || checkInLabels(cmd, search)
+      (commandMenuSearch.length > 0
+        ? checkInShortcuts(cmd, commandMenuSearch) ||
+          checkInLabels(cmd, commandMenuSearch)
         : true) && cmd.type === CommandType.Create,
   );
 
@@ -254,7 +258,7 @@ export const CommandMenu = () => {
         <StyledDialog ref={commandMenuRef}>
           <StyledInput
             autoFocus
-            value={search}
+            value={commandMenuSearch}
             placeholder="Search"
             onChange={handleSearchChange}
           />