feat: display label identifier table cell as chip with link to Record… (#3503)

* feat: display label identifier table cell as chip with link to RecordShowPage

Closes #3502

* Fix test

---------

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

packages/twenty-front/src/modules/companies/components/AddPersonToCompany.tsx

@@ -1,99 +0,0 @@
-import styled from '@emotion/styled';
-import { v4 } from 'uuid';
-
-import { FieldDoubleText } from '@/object-record/field/types/FieldDoubleText';
-import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
-import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
-import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { Person } from '@/people/types/Person';
-import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-
-export const StyledInputContainer = styled.div`
-  background-color: transparent;
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(0.5)};
-  width: ${({ theme }) => theme.spacing(62.5)};
-  & input,
-  div {
-    background-color: ${({ theme }) => theme.background.primary};
-    width: 100%;
-  }
-  div {
-    border-radius: ${({ theme }) => theme.spacing(1)};
-    overflow: hidden;
-  }
-  input {
-    display: flex;
-    flex-grow: 1;
-    padding: ${({ theme }) => theme.spacing(2)};
-  }
-`;
-
-type AddPersonToCompanyProps = {
-  companyId: string;
-  onEntitySelected: (entity?: EntityForSelect | undefined) => void;
-  closeDropdown?: () => void;
-};
-
-export const AddPersonToCompany = ({
-  companyId,
-  onEntitySelected,
-  closeDropdown,
-}: AddPersonToCompanyProps) => {
-  const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
-
-  const handleEscape = () => {
-    goBackToPreviousHotkeyScope();
-    closeDropdown?.();
-  };
-
-  const { createOneRecord: createPerson } = useCreateOneRecord<Person>({
-    objectNameSingular: 'person',
-  });
-
-  const handleCreatePerson = async ({
-    firstValue,
-    secondValue,
-  }: FieldDoubleText) => {
-    if (!firstValue && !secondValue) return;
-
-    const person = await createPerson({
-      companyId,
-      id: v4(),
-      name: {
-        firstName: firstValue,
-        lastName: secondValue,
-      },
-    });
-
-    if (person) {
-      const entityForSelect: EntityForSelect = {
-        id: person.id,
-        name: person.name?.firstName ?? '',
-        avatarUrl: person.avatarUrl ?? '',
-        avatarType: 'rounded',
-        record: person,
-      };
-      onEntitySelected(entityForSelect);
-    }
-    goBackToPreviousHotkeyScope();
-    closeDropdown?.();
-  };
-
-  return (
-    <StyledInputContainer>
-      <DoubleTextInput
-        firstValue=""
-        secondValue=""
-        firstValuePlaceholder="First Name"
-        secondValuePlaceholder="Last Name"
-        onClickOutside={handleEscape}
-        onEnter={handleCreatePerson}
-        onEscape={handleEscape}
-        hotkeyScope={RelationPickerHotkeyScope.AddNew}
-      />
-    </StyledInputContainer>
-  );
-};

packages/twenty-front/src/modules/companies/components/NewOpportunityButton.tsx

@@ -52,8 +52,7 @@ export const NewOpportunityButton = () => {
     setIsCreatingCard(false);
   };
 
-  const { relationPickerSearchFilter, identifiersMapper, searchQuery } =
-    useRelationPicker();
+  const { relationPickerSearchFilter, searchQuery } = useRelationPicker();
 
   const filteredSearchEntityResults = useFilteredSearchEntityQuery({
     filters: [
@@ -64,7 +63,6 @@ export const NewOpportunityButton = () => {
     ],
     orderByField: 'createdAt',
     selectedIds: [],
-    mappingFunction: (record: any) => identifiersMapper?.(record, 'company'),
     objectNameSingular: CoreObjectNameSingular.Company,
   });
 

packages/twenty-front/src/modules/companies/components/OpportunityPicker.tsx

@@ -20,7 +20,7 @@ import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'
 export type OpportunityPickerProps = {
   companyId: string | null;
   onSubmit: (
-    newCompanyId: EntityForSelect | null,
+    newCompany: EntityForSelect | null,
     newPipelineStepId: string | null,
   ) => void;
   onCancel?: () => void;
@@ -34,7 +34,7 @@ export const OpportunityPicker = ({
 
   const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
 
-  const { identifiersMapper, searchQuery } = useRelationPicker();
+  const { searchQuery } = useRelationPicker();
 
   const filteredSearchEntityResults = useFilteredSearchEntityQuery({
     filters: [
@@ -45,7 +45,6 @@ export const OpportunityPicker = ({
     ],
     orderByField: 'createdAt',
     selectedIds: [],
-    mappingFunction: (record: any) => identifiersMapper?.(record, 'company'),
     objectNameSingular: CoreObjectNameSingular.Company,
   });