Add search to cmd bar (#667)

* Move useFilteredSearchEntityQuery from relation picker to search module

* refactor duplicated code with useFilteredSearchCompanyQuery

* Implement similar pattern for people than for companies with useFilteredSearchEntityQuery

* Fix warning from a previous PR

* Enable search from menu

* Add companies to search

* Fix ESLint

* Refactor

* Fix according to peer review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/people/components/PeopleCompanyPicker.tsx

@@ -1,23 +1,16 @@
 import { Key } from 'ts-key-enum';
 
+import { useFilteredSearchCompanyQuery } from '@/companies/services';
 import { useScopedHotkeys } from '@/lib/hotkeys/hooks/useScopedHotkeys';
 import { useSetHotkeyScope } from '@/lib/hotkeys/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { SingleEntitySelect } from '@/relation-picker/components/SingleEntitySelect';
-import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';
 import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
 import { RelationPickerHotkeyScope } from '@/relation-picker/types/RelationPickerHotkeyScope';
 import { useEditableCell } from '@/ui/components/editable-cell/hooks/useEditableCell';
 import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
 import { TableHotkeyScope } from '@/ui/tables/types/TableHotkeyScope';
-import { getLogoUrlFromDomainName } from '@/utils/utils';
-import {
-  CommentableType,
-  Company,
-  Person,
-  useSearchCompanyQuery,
-  useUpdatePeopleMutation,
-} from '~/generated/graphql';
+import { Company, Person, useUpdatePeopleMutation } from '~/generated/graphql';
 
 export type OwnProps = {
   people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
@@ -35,19 +28,9 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
 
   const addToScopeStack = useSetHotkeyScope();
 
-  const companies = useFilteredSearchEntityQuery({
-    queryHook: useSearchCompanyQuery,
-    selectedIds: [people.company?.id ?? ''],
-    searchFilter: searchFilter,
-    mappingFunction: (company) => ({
-      entityType: CommentableType.Company,
-      id: company.id,
-      name: company.name,
-      avatarType: 'squared',
-      avatarUrl: getLogoUrlFromDomainName(company.domainName),
-    }),
-    orderByField: 'name',
-    searchOnFields: ['name'],
+  const companies = useFilteredSearchCompanyQuery({
+    searchFilter,
+    selectedIds: people.company?.id ? [people.company.id] : [],
   });
 
   async function handleEntitySelected(entity: any) {

front/src/modules/people/services/select.ts

@@ -1,11 +1,15 @@
 import { gql } from '@apollo/client';
 
+import { CommentableEntityForSelect } from '@/comments/types/CommentableEntityForSelect';
 import { SelectedSortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface';
+import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import {
+  CommentableType,
   PersonOrderByWithRelationInput as People_Order_By,
   PersonWhereInput as People_Bool_Exp,
   SortOrder,
   useGetPeopleQuery,
+  useSearchPeopleQuery,
 } from '~/generated/graphql';
 
 export type PeopleSelectedSortType = SelectedSortType<People_Order_By>;
@@ -43,6 +47,32 @@ export function usePeopleQuery(
   });
 }
 
+export function useFilteredSearchPeopleQuery({
+  searchFilter,
+  selectedIds = [],
+  limit,
+}: {
+  searchFilter: string;
+  selectedIds?: string[];
+  limit?: number;
+}) {
+  return useFilteredSearchEntityQuery({
+    queryHook: useSearchPeopleQuery,
+    searchOnFields: ['firstName', 'lastName'],
+    orderByField: 'lastName',
+    selectedIds: selectedIds,
+    mappingFunction: (entity) =>
+      ({
+        id: entity.id,
+        entityType: CommentableType.Person,
+        name: `${entity.firstName} ${entity.lastName}`,
+        avatarType: 'rounded',
+      } as CommentableEntityForSelect),
+    searchFilter,
+    limit,
+  });
+}
+
 export const defaultOrderBy: People_Order_By[] = [
   {
     createdAt: SortOrder.Desc,