Feat/single entity select relation picker (#345)

* - Implemented recoil scoped state
- Implemented SingleEntitySelect
- Implemented keyboard shortcut up/down select

* Added useRecoilScopedValue

* Fix storybook

* Fix storybook

* Fix storybook

* Fix storybook

---------

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

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

@@ -1,112 +1,33 @@
-import { useState } from 'react';
-import { v4 } from 'uuid';
-
-import CompanyChip, {
-  CompanyChipPropsType,
-} from '@/companies/components/CompanyChip';
-import { SearchConfigType } from '@/search/interfaces/interface';
-import { SEARCH_COMPANY_QUERY } from '@/search/services/search';
-import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation';
-import { logError } from '@/utils/logs/logError';
+import CompanyChip from '@/companies/components/CompanyChip';
+import { EditableCellV2 } from '@/ui/components/editable-cell/EditableCellV2';
+import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
+import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
-import {
-  Company,
-  Person,
-  QueryMode,
-  useInsertCompanyMutation,
-  useUpdatePeopleMutation,
-} from '~/generated/graphql';
+import { Company, Person } from '~/generated/graphql';
 
 import { PeopleCompanyCreateCell } from './PeopleCompanyCreateCell';
+import { PeopleCompanyPicker } from './PeopleCompanyPicker';
 
 export type OwnProps = {
   people: Pick<Person, 'id'> & {
-    company?: Pick<Company, 'id' | 'name'> | null;
+    company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
   };
 };
 
 export function PeopleCompanyCell({ people }: OwnProps) {
-  const [isCreating, setIsCreating] = useState(false);
-  const [insertCompany] = useInsertCompanyMutation();
-  const [updatePeople] = useUpdatePeopleMutation();
-  const [initialCompanyName, setInitialCompanyName] = useState('');
-
-  async function handleCompanyCreate(
-    companyName: string,
-    companyDomainName: string,
-  ) {
-    const newCompanyId = v4();
-
-    try {
-      await insertCompany({
-        variables: {
-          id: newCompanyId,
-          name: companyName,
-          domainName: companyDomainName,
-          address: '',
-          createdAt: new Date().toISOString(),
-        },
-      });
-
-      await updatePeople({
-        variables: {
-          ...people,
-          companyId: newCompanyId,
-        },
-      });
-    } catch (error) {
-      // TODO: handle error better
-      logError(error);
-    }
-
-    setIsCreating(false);
-  }
-
-  // TODO: should be replaced with search context
-  function handleChangeSearchInput(searchInput: string) {
-    setInitialCompanyName(searchInput);
-  }
+  const [isCreating] = useRecoilScopedState(isCreateModeScopedState);
 
   return isCreating ? (
-    <PeopleCompanyCreateCell
-      initialCompanyName={initialCompanyName}
-      onCreate={handleCompanyCreate}
-    />
+    <PeopleCompanyCreateCell people={people} />
   ) : (
-    <EditableRelation<any, CompanyChipPropsType>
-      relation={people.company}
-      searchPlaceholder="Company"
-      ChipComponent={CompanyChip}
-      chipComponentPropsMapper={(company): CompanyChipPropsType => {
-        return {
-          name: company.name || '',
-          picture: getLogoUrlFromDomainName(company.domainName),
-        };
-      }}
-      onChange={async (relation) => {
-        await updatePeople({
-          variables: {
-            ...people,
-            companyId: relation.id,
-          },
-        });
-      }}
-      onChangeSearchInput={handleChangeSearchInput}
-      searchConfig={
-        {
-          query: SEARCH_COMPANY_QUERY,
-          template: (searchInput: string) => ({
-            name: { contains: `%${searchInput}%`, mode: QueryMode.Insensitive },
-          }),
-          resultMapper: (company) => ({
-            render: (company: any) => company.name,
-            value: company,
-          }),
-        } satisfies SearchConfigType
+    <EditableCellV2
+      editModeContent={<PeopleCompanyPicker people={people} />}
+      nonEditModeContent={
+        <CompanyChip
+          name={people.company?.name ?? ''}
+          picture={getLogoUrlFromDomainName(people.company?.domainName)}
+        />
       }
-      onCreate={() => {
-        setIsCreating(true);
-      }}
     />
   );
 }

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

@@ -1,44 +1,90 @@
 import { useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { v4 } from 'uuid';
 
+import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
+import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
 import { DoubleTextInput } from '@/ui/components/inputs/DoubleTextInput';
 import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
+import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
+import { logError } from '@/utils/logs/logError';
+import {
+  Person,
+  useInsertCompanyMutation,
+  useUpdatePeopleMutation,
+} from '~/generated/graphql';
 
 type OwnProps = {
-  initialCompanyName: string;
-  onCreate: (companyName: string, companyDomainName: string) => void;
+  people: Pick<Person, 'id'>;
 };
 
-export function PeopleCompanyCreateCell({
-  initialCompanyName,
-  onCreate,
-}: OwnProps) {
-  const [companyName, setCompanyName] = useState(initialCompanyName);
+export function PeopleCompanyCreateCell({ people }: OwnProps) {
+  const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
+
+  const [currentSearchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+
+  const [companyName, setCompanyName] = useState(currentSearchFilter);
+
   const [companyDomainName, setCompanyDomainName] = useState('');
+  const [insertCompany] = useInsertCompanyMutation();
+  const [updatePeople] = useUpdatePeopleMutation();
 
   const containerRef = useRef(null);
 
-  useListenClickOutsideArrayOfRef([containerRef], () => {
-    onCreate(companyName, companyDomainName);
-  });
+  function handleDoubleTextChange(leftValue: string, rightValue: string): void {
+    setCompanyDomainName(leftValue);
+    setCompanyName(rightValue);
+  }
+
+  async function handleCompanyCreate(
+    companyName: string,
+    companyDomainName: string,
+  ) {
+    const newCompanyId = v4();
+
+    try {
+      await insertCompany({
+        variables: {
+          id: newCompanyId,
+          name: companyName,
+          domainName: companyDomainName,
+          address: '',
+          createdAt: new Date().toISOString(),
+        },
+      });
+
+      await updatePeople({
+        variables: {
+          ...people,
+          companyId: newCompanyId,
+        },
+      });
+    } catch (error) {
+      // TODO: handle error better
+      logError(error);
+    }
+
+    setIsCreating(false);
+  }
 
   useHotkeys(
     'enter, escape',
     () => {
-      onCreate(companyName, companyDomainName);
+      handleCompanyCreate(companyName, companyDomainName);
     },
     {
       enableOnFormTags: true,
       enableOnContentEditable: true,
       preventDefault: true,
     },
-    [containerRef, companyName, companyDomainName, onCreate],
+    [companyName, companyDomainName, handleCompanyCreate],
   );
 
-  function handleDoubleTextChange(leftValue: string, rightValue: string): void {
-    setCompanyDomainName(leftValue);
-    setCompanyName(rightValue);
-  }
+  useListenClickOutsideArrayOfRef([containerRef], () => {
+    handleCompanyCreate(companyName, companyDomainName);
+  });
 
   return (
     <DoubleTextInput

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

@@ -0,0 +1,73 @@
+import { useRecoilState } from 'recoil';
+
+import { SingleEntitySelect } from '@/relation-picker/components/SingleEntitySelect';
+import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';
+import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
+import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
+import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
+import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
+import { getLogoUrlFromDomainName } from '@/utils/utils';
+import {
+  CommentableType,
+  Company,
+  Person,
+  useSearchCompanyQuery,
+  useUpdatePeopleMutation,
+} from '~/generated/graphql';
+
+export type OwnProps = {
+  people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
+};
+
+export function PeopleCompanyPicker({ people }: OwnProps) {
+  const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
+
+  const [searchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+  const [updatePeople] = useUpdatePeopleMutation();
+  const [, setIsSomeInputInEditMode] = useRecoilState(
+    isSomeInputInEditModeState,
+  );
+
+  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'],
+  });
+
+  async function handleEntitySelected(entity: any) {
+    setIsSomeInputInEditMode(false);
+
+    await updatePeople({
+      variables: {
+        ...people,
+        companyId: entity.id,
+      },
+    });
+  }
+
+  function handleCreate() {
+    setIsCreating(true);
+  }
+
+  return (
+    <SingleEntitySelect
+      onCreate={handleCreate}
+      onEntitySelected={handleEntitySelected}
+      entities={{
+        entitiesToSelect: companies.entitiesToSelect,
+        selectedEntity: companies.selectedEntities[0],
+      }}
+    />
+  );
+}