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/companies/components/CompanyAccountOwnerPicker.tsx

@@ -1,9 +1,9 @@
 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 { EntityForSelect } from '@/relation-picker/types/EntityForSelect';
 import { Entity } from '@/relation-picker/types/EntityTypeForSelect';
+import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { useEditableCell } from '@/ui/components/editable-cell/hooks/useEditableCell';
 import {
   Company,

front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx

@@ -3,11 +3,9 @@ import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/st
 import { filterDropdownSelectedEntityIdScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
-import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';
-import { Entity } from '@/relation-picker/types/EntityTypeForSelect';
 import { TableContext } from '@/ui/tables/states/TableContext';
-import { getLogoUrlFromDomainName } from '@/utils/utils';
-import { useSearchCompanyQuery } from '~/generated/graphql';
+
+import { useFilteredSearchCompanyQuery } from '../services';
 
 export function FilterDropdownCompanySearchSelect() {
   const filterDropdownSearchInput = useRecoilScopedValue(
@@ -20,21 +18,11 @@ export function FilterDropdownCompanySearchSelect() {
     TableContext,
   );
 
-  const usersForSelect = useFilteredSearchEntityQuery({
-    queryHook: useSearchCompanyQuery,
-    searchOnFields: ['name'],
-    orderByField: 'name',
+  const usersForSelect = useFilteredSearchCompanyQuery({
+    searchFilter: filterDropdownSearchInput,
     selectedIds: filterDropdownSelectedEntityId
       ? [filterDropdownSelectedEntityId]
       : [],
-    mappingFunction: (company) => ({
-      id: company.id,
-      entityType: Entity.User,
-      name: `${company.name}`,
-      avatarType: 'squared',
-      avatarUrl: getLogoUrlFromDomainName(company.domainName),
-    }),
-    searchFilter: filterDropdownSearchInput,
   });
 
   return (

front/src/modules/companies/components/NewCompanyBoardCard.tsx

@@ -2,31 +2,16 @@ import { useCallback } from 'react';
 
 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 { getLogoUrlFromDomainName } from '@/utils/utils';
-import { CommentableType, useSearchCompanyQuery } from '~/generated/graphql';
+
+import { useFilteredSearchCompanyQuery } from '../services';
 
 export function NewCompanyBoardCard() {
   const [searchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
 
-  const companies = useFilteredSearchEntityQuery({
-    queryHook: useSearchCompanyQuery,
-    selectedIds: [],
-    searchFilter: searchFilter,
-    mappingFunction: (company) => ({
-      entityType: CommentableType.Company,
-      id: company.id,
-      name: company.name,
-      domainName: company.domainName,
-      avatarType: 'squared',
-      avatarUrl: getLogoUrlFromDomainName(company.domainName),
-    }),
-    orderByField: 'name',
-    searchOnFields: ['name'],
-  });
+  const companies = useFilteredSearchCompanyQuery({ searchFilter });
 
   const handleEntitySelect = useCallback(async (companyId: string) => {
     return;

front/src/modules/companies/components/NewCompanyProgressButton.tsx

@@ -11,20 +11,18 @@ import { pipelineStageIdScopedState } from '@/pipeline-progress/states/pipelineS
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
 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 { BoardPipelineStageColumn } from '@/ui/board/components/Board';
 import { NewButton } from '@/ui/board/components/NewButton';
-import { getLogoUrlFromDomainName } from '@/utils/utils';
 import {
-  CommentableType,
   PipelineProgressableType,
   useCreateOnePipelineProgressMutation,
-  useSearchCompanyQuery,
 } from '~/generated/graphql';
 import { currentPipelineState } from '~/pages/opportunities/currentPipelineState';
 
+import { useFilteredSearchCompanyQuery } from '../services';
+
 export function NewCompanyProgressButton() {
   const [isCreatingCard, setIsCreatingCard] = useState(false);
   const [board, setBoard] = useRecoilState(boardState);
@@ -93,21 +91,7 @@ export function NewCompanyProgressButton() {
   const [searchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
-  const companies = useFilteredSearchEntityQuery({
-    queryHook: useSearchCompanyQuery,
-    selectedIds: [],
-    searchFilter: searchFilter,
-    mappingFunction: (company) => ({
-      entityType: CommentableType.Company,
-      id: company.id,
-      name: company.name,
-      domainName: company.domainName,
-      avatarType: 'squared',
-      avatarUrl: getLogoUrlFromDomainName(company.domainName),
-    }),
-    orderByField: 'name',
-    searchOnFields: ['name'],
-  });
+  const companies = useFilteredSearchCompanyQuery({ searchFilter });
 
   return (
     <>