Feat/activities custom objects (#3213)

* WIP

* WIP - MultiObjectSearch

* WIP

* WIP

* Finished working version

* Fix

* Fixed and cleaned

* Fix

* Disabled files and emails for custom objects

* Cleaned console.log

* Fixed attachment

* Fixed

* fix lint

---------

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

packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 
-import { CompanyChip } from '@/companies/components/CompanyChip';
-import { PersonChip } from '@/people/components/PersonChip';
-import { getLogoUrlFromDomainName } from '~/utils';
+import { ActivityTargetObjectRecord } from '@/activities/types/ActivityTargetObject';
+import { RecordChip } from '@/object-record/components/RecordChip';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -10,37 +9,21 @@ const StyledContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-// TODO: fix edges pagination formatting on n+N
-export const ActivityTargetChips = ({ targets }: { targets?: any }) => {
-  if (!targets) {
-    return null;
-  }
-
+export const ActivityTargetChips = ({
+  activityTargetObjectRecords,
+}: {
+  activityTargetObjectRecords: ActivityTargetObjectRecord[];
+}) => {
   return (
     <StyledContainer>
-      {targets?.map(({ company, person }: any) => {
-        if (company) {
-          return (
-            <CompanyChip
-              key={company.id}
-              id={company.id}
-              name={company.name}
-              avatarUrl={getLogoUrlFromDomainName(company.domainName)}
-            />
-          );
-        }
-        if (person) {
-          return (
-            <PersonChip
-              key={person.id}
-              id={person.id}
-              name={person.name.firstName + ' ' + person.name.lastName}
-              avatarUrl={person.avatarUrl ?? undefined}
-            />
-          );
-        }
-        return <></>;
-      })}
+      {activityTargetObjectRecords?.map((activityTargetObjectRecord) => (
+        <RecordChip
+          record={activityTargetObjectRecord.targetObjectRecord}
+          objectNameSingular={
+            activityTargetObjectRecord.targetObjectMetadataItem.nameSingular
+          }
+        />
+      ))}
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/activities/emails/components/Threads.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { ThreadPreview } from '@/activities/emails/components/ThreadPreview';
 import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';
 import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getTimelineThreadsFromPersonId';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import {
   H1Title,
   H1TitleFontColor,
@@ -29,14 +29,14 @@ const StyledEmailCount = styled.span`
   color: ${({ theme }) => theme.font.color.light};
 `;
 
-export const Threads = ({ entity }: { entity: ActivityTargetableEntity }) => {
+export const Threads = ({ entity }: { entity: ActivityTargetableObject }) => {
   const threadQuery =
-    entity.type === 'Person'
+    entity.targetObjectNameSingular === 'person'
       ? getTimelineThreadsFromPersonId
       : getTimelineThreadsFromCompanyId;
 
   const threadQueryVariables =
-    entity.type === 'Person'
+    entity.targetObjectNameSingular === 'person'
       ? { personId: entity.id }
       : { companyId: entity.id };
 
@@ -50,7 +50,7 @@ export const Threads = ({ entity }: { entity: ActivityTargetableEntity }) => {
 
   const timelineThreads: TimelineThread[] =
     threads.data[
-      entity.type === 'Person'
+      entity.targetObjectNameSingular === 'Person'
         ? 'getTimelineThreadsFromPersonId'
         : 'getTimelineThreadsFromCompanyId'
     ];

packages/twenty-front/src/modules/activities/emails/components/__stories__/Threads.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof Threads> = {
   component: Threads,
   args: {
     entity: {
-      type: 'Person',
+      targetObjectNameSingular: 'person',
       id: '52ba3fd0-c723-4482-8b11-5fc24a587c71',
     },
   },

packages/twenty-front/src/modules/activities/files/components/Attachments.tsx

@@ -1,12 +1,14 @@
 import { ChangeEvent, useRef } from 'react';
 import styled from '@emotion/styled';
+import { isNonEmptyArray } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
 
 import { AttachmentList } from '@/activities/files/components/AttachmentList';
 import { useAttachments } from '@/activities/files/hooks/useAttachments';
 import { Attachment } from '@/activities/files/types/Attachment';
 import { getFileType } from '@/activities/files/utils/getFileType';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@@ -56,13 +58,13 @@ const StyledFileInput = styled.input`
 `;
 
 export const Attachments = ({
-  targetableEntity,
+  targetableObject,
 }: {
-  targetableEntity: ActivityTargetableEntity;
+  targetableObject: ActivityTargetableObject;
 }) => {
   const inputFileRef = useRef<HTMLInputElement>(null);
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
-  const { attachments } = useAttachments(targetableEntity);
+  const { attachments } = useAttachments(targetableObject);
 
   const [uploadFile] = useUploadFileMutation();
 
@@ -92,22 +94,23 @@ export const Attachments = ({
     if (!attachmentUrl) {
       return;
     }
-    if (!createOneAttachment) {
-      return;
-    }
 
-    await createOneAttachment({
+    const targetableObjectFieldIdName = getActivityTargetObjectFieldIdName({
+      nameSingular: targetableObject.targetObjectNameSingular,
+    });
+
+    const attachmentToCreate = {
       authorId: currentWorkspaceMember?.id,
       name: file.name,
       fullPath: attachmentUrl,
       type: getFileType(file.name),
-      companyId:
-        targetableEntity.type === 'Company' ? targetableEntity.id : null,
-      personId: targetableEntity.type === 'Person' ? targetableEntity.id : null,
-    });
+      [targetableObjectFieldIdName]: targetableObject.id,
+    };
+
+    await createOneAttachment(attachmentToCreate);
   };
 
-  if (attachments?.length === 0 && targetableEntity.type !== 'Custom') {
+  if (!isNonEmptyArray(attachments)) {
     return (
       <StyledTaskGroupEmptyContainer>
         <StyledFileInput

packages/twenty-front/src/modules/activities/files/hooks/useAttachments.tsx

@@ -1,15 +1,21 @@
 import { Attachment } from '@/activities/files/types/Attachment';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 
-import { ActivityTargetableEntity } from '../../types/ActivityTargetableEntity';
-
 // do we need to test this?
-export const useAttachments = (entity: ActivityTargetableEntity) => {
+export const useAttachments = (targetableObject: ActivityTargetableObject) => {
+  const targetableObjectFieldIdName = getActivityTargetObjectFieldIdName({
+    nameSingular: targetableObject.targetObjectNameSingular,
+  });
+
   const { records: attachments } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.Attachment,
     filter: {
-      [entity.type === 'Company' ? 'companyId' : 'personId']: { eq: entity.id },
+      [targetableObjectFieldIdName]: {
+        eq: targetableObject.id,
+      },
     },
     orderBy: {
       createdAt: 'DescNullsFirst',

packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { ActivityTargetObjectRecord } from '@/activities/types/ActivityTargetObject';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { Nullable } from '~/types/Nullable';
+import { isDefined } from '~/utils/isDefined';
+
+export const useActivityTargetObjectRecords = ({
+  activityId,
+}: {
+  activityId: string;
+}) => {
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  const { records: activityTargets } = useFindManyRecords({
+    objectNameSingular: CoreObjectNameSingular.ActivityTarget,
+    filter: {
+      activityId: {
+        eq: activityId,
+      },
+    },
+  });
+
+  const activityTargetObjectRecords = useMemo(() => {
+    return activityTargets
+      .map<Nullable<ActivityTargetObjectRecord>>((activityTarget) => {
+        const correspondingObjectMetadataItem = objectMetadataItems.find(
+          (objectMetadataItem) =>
+            isDefined(activityTarget[objectMetadataItem.nameSingular]) &&
+            !objectMetadataItem.isSystem,
+        );
+
+        if (!correspondingObjectMetadataItem) {
+          return null;
+        }
+
+        return {
+          activityTargetRecord: activityTarget,
+          targetObjectRecord:
+            activityTarget[correspondingObjectMetadataItem.nameSingular],
+          targetObjectMetadataItem: correspondingObjectMetadataItem,
+          targetObjectNameSingular:
+            correspondingObjectMetadataItem.nameSingular,
+        };
+      })
+      .filter(isDefined);
+  }, [activityTargets, objectMetadataItems]);
+
+  return {
+    activityTargetObjectRecords,
+  };
+};

packages/twenty-front/src/modules/activities/hooks/useActivityTargets.ts

@@ -0,0 +1,28 @@
+import { ActivityTarget } from '@/activities/types/ActivityTarget';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+
+export const useActivityTargets = ({
+  targetableObject,
+}: {
+  targetableObject: ActivityTargetableObject;
+}) => {
+  const targetObjectFieldName = getActivityTargetObjectFieldIdName({
+    nameSingular: targetableObject.targetObjectNameSingular,
+  });
+
+  const { records: activityTargets } = useFindManyRecords({
+    objectNameSingular: CoreObjectNameSingular.ActivityTarget,
+    filter: {
+      [targetObjectFieldName]: {
+        eq: targetableObject.id,
+      },
+    },
+  });
+
+  return {
+    activityTargets: activityTargets as ActivityTarget[],
+  };
+};

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -4,8 +4,10 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { Activity, ActivityType } from '@/activities/types/Activity';
 import { ActivityTarget } from '@/activities/types/ActivityTarget';
+import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
@@ -14,13 +16,13 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
 
 import { activityTargetableEntityArrayState } from '../states/activityTargetableEntityArrayState';
 import { viewableActivityIdState } from '../states/viewableActivityIdState';
-import { ActivityTargetableEntity } from '../types/ActivityTargetableEntity';
-import { getTargetableEntitiesWithParents } from '../utils/getTargetableEntitiesWithParents';
+import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
+import { flattenTargetableObjectsAndTheirRelatedTargetableObjects } from '../utils/flattenTargetableObjectsAndTheirRelatedTargetableObjects';
 
 export const useOpenCreateActivityDrawer = () => {
   const { openRightDrawer } = useRightDrawer();
-  const { createOneRecord: createOneActivityTarget } =
-    useCreateOneRecord<ActivityTarget>({
+  const { createManyRecords: createManyActivityTargets } =
+    useCreateManyRecords<ActivityTarget>({
       objectNameSingular: CoreObjectNameSingular.ActivityTarget,
     });
   const { createOneRecord: createOneActivity } = useCreateOneRecord<Activity>({
@@ -37,15 +39,17 @@ export const useOpenCreateActivityDrawer = () => {
   return useCallback(
     async ({
       type,
-      targetableEntities,
+      targetableObjects,
       assigneeId,
     }: {
       type: ActivityType;
-      targetableEntities?: ActivityTargetableEntity[];
+      targetableObjects?: ActivityTargetableObject[];
       assigneeId?: string;
     }) => {
-      const targetableEntitiesWithRelations = targetableEntities
-        ? getTargetableEntitiesWithParents(targetableEntities)
+      const flattenedTargetableObjects = targetableObjects
+        ? flattenTargetableObjectsAndTheirRelatedTargetableObjects(
+            targetableObjects,
+          )
         : [];
 
       const createdActivity = await createOneActivity?.({
@@ -61,21 +65,25 @@ export const useOpenCreateActivityDrawer = () => {
         return;
       }
 
-      await Promise.all(
-        targetableEntitiesWithRelations.map(async (targetableEntity) => {
-          await createOneActivityTarget?.({
-            companyId:
-              targetableEntity.type === 'Company' ? targetableEntity.id : null,
-            personId:
-              targetableEntity.type === 'Person' ? targetableEntity.id : null,
+      const activityTargetsToCreate = flattenedTargetableObjects.map(
+        (targetableObject) => {
+          const targetableObjectFieldIdName =
+            getActivityTargetObjectFieldIdName({
+              nameSingular: targetableObject.targetObjectNameSingular,
+            });
+
+          return {
+            [targetableObjectFieldIdName]: targetableObject.id,
             activityId: createdActivity.id,
-          });
-        }),
+          };
+        },
       );
 
+      await createManyActivityTargets(activityTargetsToCreate);
+
       setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
       setViewableActivityId(createdActivity.id);
-      setActivityTargetableEntityArray(targetableEntities ?? []);
+      setActivityTargetableEntityArray(targetableObjects ?? []);
       openRightDrawer(RightDrawerPages.CreateActivity);
     },
     [
@@ -84,7 +92,7 @@ export const useOpenCreateActivityDrawer = () => {
       setHotkeyScope,
       setViewableActivityId,
       createOneActivity,
-      createOneActivityTarget,
+      createManyActivityTargets,
       currentWorkspaceMember,
     ],
   );

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts

@@ -4,10 +4,7 @@ import { ActivityType } from '@/activities/types/Activity';
 import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
 import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 
-import {
-  ActivityTargetableEntity,
-  ActivityTargetableEntityType,
-} from '../types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
 
 import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer';
 
@@ -25,8 +22,8 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
     ({ snapshot }) =>
       (
         type: ActivityType,
-        entityType: ActivityTargetableEntityType,
-        relatedEntities?: ActivityTargetableEntity[],
+        objectNameSingular: string,
+        relatedEntities?: ActivityTargetableObject[],
       ) => {
         const selectedRowIds =
           injectSelectorSnapshotValueWithRecordTableScopeId(
@@ -34,18 +31,21 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
             selectedRowIdsScopeInjector,
           );
 
-        let activityTargetableEntityArray: ActivityTargetableEntity[] =
+        let activityTargetableEntityArray: ActivityTargetableObject[] =
           selectedRowIds.map((id: string) => ({
-            type: entityType,
+            type: 'Custom',
+            targetObjectNameSingular: objectNameSingular,
             id,
           }));
+
         if (relatedEntities) {
           activityTargetableEntityArray =
             activityTargetableEntityArray.concat(relatedEntities);
         }
+
         openCreateActivityDrawer({
           type,
-          targetableEntities: activityTargetableEntityArray,
+          targetableObjects: activityTargetableEntityArray,
         });
       },
     [

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx

@@ -1,22 +1,15 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useQuery } from '@apollo/client';
 import styled from '@emotion/styled';
+import { v4 } from 'uuid';
 
-import { useHandleCheckableActivityTargetChange } from '@/activities/hooks/useHandleCheckableActivityTargetChange';
 import { ActivityTarget } from '@/activities/types/ActivityTarget';
-import { flatMapAndSortEntityForSelectArrayOfArrayByName } from '@/activities/utils/flatMapAndSortEntityForSelectArrayByName';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { ActivityTargetObjectRecord } from '@/activities/types/ActivityTargetObject';
+import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords';
+import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
-import { MultipleEntitySelect } from '@/object-record/relation-picker/components/MultipleEntitySelect';
-import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
-import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
-import { assertNotNull } from '~/utils/assert';
-
-type ActivityTargetInlineCellEditModeProps = {
-  activityId: string;
-  activityTargets: Array<Pick<ActivityTarget, 'id' | 'personId' | 'companyId'>>;
-};
+import { MultipleObjectRecordSelect } from '@/object-record/relation-picker/components/MultipleObjectRecordSelect';
+import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
 
 const StyledSelectContainer = styled.div`
   left: 0px;
@@ -24,125 +17,77 @@ const StyledSelectContainer = styled.div`
   top: -8px;
 `;
 
+type ActivityTargetInlineCellEditModeProps = {
+  activityId: string;
+  activityTargetObjectRecords: ActivityTargetObjectRecord[];
+};
+
 export const ActivityTargetInlineCellEditMode = ({
   activityId,
-  activityTargets,
+  activityTargetObjectRecords,
 }: ActivityTargetInlineCellEditModeProps) => {
-  const [searchFilter, setSearchFilter] = useState('');
-
-  const initialPeopleIds = useMemo(
-    () =>
-      activityTargets
-        ?.filter(({ personId }) => personId !== null)
-        .map(({ personId }) => personId)
-        .filter(assertNotNull) ?? [],
-    [activityTargets],
+  const selectedObjectRecordIds = activityTargetObjectRecords.map(
+    (activityTarget) => ({
+      objectNameSingular: activityTarget.targetObjectNameSingular,
+      id: activityTarget.targetObjectRecord.id,
+    }),
   );
 
-  const initialCompanyIds = useMemo(
-    () =>
-      activityTargets
-        ?.filter(({ companyId }) => companyId !== null)
-        .map(({ companyId }) => companyId)
-        .filter(assertNotNull) ?? [],
-    [activityTargets],
-  );
-
-  const initialSelectedEntityIds = useMemo(
-    () =>
-      [...initialPeopleIds, ...initialCompanyIds].reduce<
-        Record<string, boolean>
-      >((result, entityId) => ({ ...result, [entityId]: true }), {}),
-    [initialPeopleIds, initialCompanyIds],
-  );
-
-  const { findManyRecordsQuery: findManyPeopleQuery } = useObjectMetadataItem({
-    objectNameSingular: CoreObjectNameSingular.Person,
-  });
-
-  const { findManyRecordsQuery: findManyCompaniesQuery } =
-    useObjectMetadataItem({
-      objectNameSingular: CoreObjectNameSingular.Company,
+  const { createManyRecords: createManyActivityTargets } =
+    useCreateManyRecords<ActivityTarget>({
+      objectNameSingular: CoreObjectNameSingular.ActivityTarget,
     });
 
-  const useFindManyPeopleQuery = (options: any) =>
-    useQuery(findManyPeopleQuery, options);
+  const { deleteManyRecords: deleteManyActivityTargets } = useDeleteManyRecords(
+    {
+      objectNameSingular: CoreObjectNameSingular.ActivityTarget,
+    },
+  );
 
-  const useFindManyCompaniesQuery = (options: any) =>
-    useQuery(findManyCompaniesQuery, options);
-
-  const [selectedEntityIds, setSelectedEntityIds] = useState<
-    Record<string, boolean>
-  >(initialSelectedEntityIds);
-
-  const { identifiersMapper, searchQuery } = useRelationPicker();
-
-  const people = useFilteredSearchEntityQuery({
-    queryHook: useFindManyPeopleQuery,
-    filters: [
-      {
-        fieldNames: searchQuery?.computeFilterFields?.('person') ?? [],
-        filter: searchFilter,
-      },
-    ],
-    orderByField: 'createdAt',
-    mappingFunction: (record: any) => identifiersMapper?.(record, 'person'),
-    selectedIds: initialPeopleIds,
-    objectNameSingular: CoreObjectNameSingular.Person,
-    limit: 3,
-  });
-
-  const companies = useFilteredSearchEntityQuery({
-    queryHook: useFindManyCompaniesQuery,
-    filters: [
-      {
-        fieldNames: searchQuery?.computeFilterFields?.('company') ?? [],
-        filter: searchFilter,
-      },
-    ],
-    orderByField: 'createdAt',
-    mappingFunction: (record: any) => identifiersMapper?.(record, 'company'),
-    selectedIds: initialCompanyIds,
-    objectNameSingular: CoreObjectNameSingular.Company,
-    limit: 3,
-  });
-
-  const selectedEntities = flatMapAndSortEntityForSelectArrayOfArrayByName([
-    people.selectedEntities,
-    companies.selectedEntities,
-  ]);
-
-  const filteredSelectedEntities =
-    flatMapAndSortEntityForSelectArrayOfArrayByName([
-      people.filteredSelectedEntities,
-      companies.filteredSelectedEntities,
-    ]);
-
-  const entitiesToSelect = flatMapAndSortEntityForSelectArrayOfArrayByName([
-    people.entitiesToSelect,
-    companies.entitiesToSelect,
-  ]);
-
-  const handleCheckItemsChange = useHandleCheckableActivityTargetChange({
-    activityId,
-    currentActivityTargets: activityTargets,
-  });
   const { closeInlineCell: closeEditableField } = useInlineCell();
 
-  const handleSubmit = useCallback(() => {
-    handleCheckItemsChange(
-      selectedEntityIds,
-      entitiesToSelect,
-      selectedEntities,
-    );
+  const handleSubmit = async (selectedRecords: ObjectRecordForSelect[]) => {
     closeEditableField();
-  }, [
-    closeEditableField,
-    entitiesToSelect,
-    handleCheckItemsChange,
-    selectedEntities,
-    selectedEntityIds,
-  ]);
+
+    const activityTargetRecordsToDelete = activityTargetObjectRecords.filter(
+      (activityTargetObjectRecord) =>
+        !selectedRecords.some(
+          (selectedRecord) =>
+            selectedRecord.recordIdentifier.id ===
+            activityTargetObjectRecord.targetObjectRecord.id,
+        ),
+    );
+
+    const activityTargetRecordsToCreate = selectedRecords.filter(
+      (selectedRecord) =>
+        !activityTargetObjectRecords.some(
+          (activityTargetObjectRecord) =>
+            activityTargetObjectRecord.targetObjectRecord.id ===
+            selectedRecord.recordIdentifier.id,
+        ),
+    );
+
+    if (activityTargetRecordsToCreate.length > 0) {
+      await createManyActivityTargets(
+        activityTargetRecordsToCreate.map((selectedRecord) => ({
+          id: v4(),
+          activityId,
+          [getActivityTargetObjectFieldIdName({
+            nameSingular: selectedRecord.objectMetadataItem.nameSingular,
+          })]: selectedRecord.recordIdentifier.id,
+        })),
+      );
+    }
+
+    if (activityTargetRecordsToDelete.length > 0) {
+      await deleteManyActivityTargets(
+        activityTargetRecordsToDelete.map(
+          (activityTargetObjectRecord) =>
+            activityTargetObjectRecord.activityTargetRecord.id,
+        ),
+      );
+    }
+  };
 
   const handleCancel = () => {
     closeEditableField();
@@ -150,17 +95,8 @@ export const ActivityTargetInlineCellEditMode = ({
 
   return (
     <StyledSelectContainer>
-      <MultipleEntitySelect
-        entities={{
-          entitiesToSelect,
-          filteredSelectedEntities,
-          selectedEntities,
-          loading: false,
-        }}
-        onChange={setSelectedEntityIds}
-        onSearchFilterChange={setSearchFilter}
-        searchFilter={searchFilter}
-        value={selectedEntityIds}
+      <MultipleObjectRecordSelect
+        selectedObjectRecordIds={selectedObjectRecordIds}
         onCancel={handleCancel}
         onSubmit={handleSubmit}
       />

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx

@@ -1,9 +1,8 @@
 import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
+import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
 import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode';
 import { ActivityTarget } from '@/activities/types/ActivityTarget';
 import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
 import { FieldRecoilScopeContext } from '@/object-record/record-inline-cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
@@ -23,14 +22,8 @@ type ActivityTargetsInlineCellProps = {
 export const ActivityTargetsInlineCell = ({
   activity,
 }: ActivityTargetsInlineCellProps) => {
-  const activityTargetIds =
-    activity?.activityTargets?.edges?.map(
-      (activityTarget) => activityTarget.node.id,
-    ) ?? [];
-
-  const { records: activityTargets } = useFindManyRecords<ActivityTarget>({
-    objectNameSingular: CoreObjectNameSingular.ActivityTarget,
-    filter: { id: { in: activityTargetIds } },
+  const { activityTargetObjectRecords } = useActivityTargetObjectRecords({
+    activityId: activity?.id ?? '',
   });
 
   return (
@@ -44,11 +37,15 @@ export const ActivityTargetsInlineCell = ({
         editModeContent={
           <ActivityTargetInlineCellEditMode
             activityId={activity?.id ?? ''}
-            activityTargets={activityTargets as any}
+            activityTargetObjectRecords={activityTargetObjectRecords as any}
           />
         }
         label="Relations"
-        displayModeContent={<ActivityTargetChips targets={activityTargets} />}
+        displayModeContent={
+          <ActivityTargetChips
+            activityTargetObjectRecords={activityTargetObjectRecords}
+          />
+        }
         isDisplayModeContentEmpty={
           activity?.activityTargets?.edges?.length === 0
         }

packages/twenty-front/src/modules/activities/notes/components/Notes.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { NoteList } from '@/activities/notes/components/NoteList';
 import { useNotes } from '@/activities/notes/hooks/useNotes';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
 
@@ -44,12 +44,16 @@ const StyledNotesContainer = styled.div`
   overflow: auto;
 `;
 
-export const Notes = ({ entity }: { entity: ActivityTargetableEntity }) => {
-  const { notes } = useNotes(entity);
+export const Notes = ({
+  targetableObject,
+}: {
+  targetableObject: ActivityTargetableObject;
+}) => {
+  const { notes } = useNotes(targetableObject);
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  if (notes?.length === 0 && entity.type !== 'Custom') {
+  if (notes?.length === 0) {
     return (
       <StyledTaskGroupEmptyContainer>
         <StyledEmptyTaskGroupTitle>No note yet</StyledEmptyTaskGroupTitle>
@@ -61,7 +65,7 @@ export const Notes = ({ entity }: { entity: ActivityTargetableEntity }) => {
           onClick={() =>
             openCreateActivity({
               type: 'Note',
-              targetableEntities: [entity],
+              targetableObjects: [targetableObject],
             })
           }
         />
@@ -83,7 +87,7 @@ export const Notes = ({ entity }: { entity: ActivityTargetableEntity }) => {
             onClick={() =>
               openCreateActivity({
                 type: 'Note',
-                targetableEntities: [entity],
+                targetableObjects: [targetableObject],
               })
             }
           ></Button>

packages/twenty-front/src/modules/activities/notes/hooks/useNotes.ts

@@ -1,17 +1,13 @@
+import { useActivityTargets } from '@/activities/hooks/useActivityTargets';
 import { Note } from '@/activities/types/Note';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { OrderByField } from '@/object-metadata/types/OrderByField';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 
-import { ActivityTargetableEntity } from '../../types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '../../types/ActivityTargetableEntity';
 
-export const useNotes = (entity: ActivityTargetableEntity) => {
-  const { records: activityTargets } = useFindManyRecords({
-    objectNameSingular: CoreObjectNameSingular.ActivityTarget,
-    filter: {
-      [entity.type === 'Company' ? 'companyId' : 'personId']: { eq: entity.id },
-    },
-  });
+export const useNotes = (targetableObject: ActivityTargetableObject) => {
+  const { activityTargets } = useActivityTargets({ targetableObject });
 
   const filter = {
     id: {
@@ -19,6 +15,7 @@ export const useNotes = (entity: ActivityTargetableEntity) => {
     },
     type: { eq: 'Note' },
   };
+
   const orderBy = {
     createdAt: 'AscNullsFirst',
   } as OrderByField;

packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts

@@ -1,9 +1,9 @@
 import { atom } from 'recoil';
 
-import { ActivityTargetableEntity } from '../types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
 
 export const activityTargetableEntityArrayState = atom<
-  ActivityTargetableEntity[]
+  ActivityTargetableObject[]
 >({
   key: 'activities/targetable-entity-array',
   default: [],

packages/twenty-front/src/modules/activities/tasks/__stories__/TaskGroups.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
@@ -35,9 +36,11 @@ export const Empty: Story = {};
 
 export const WithTasks: Story = {
   args: {
-    entity: {
-      id: mockedTasks[0].authorId,
-      type: 'Person',
-    },
+    targetableObjects: [
+      {
+        id: mockedTasks[0].authorId,
+        targetObjectNameSingular: 'person',
+      },
+    ] as ActivityTargetableObject[],
   },
 };

packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx

@@ -1,16 +1,18 @@
+import { isNonEmptyArray } from '@sniptt/guards';
+
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
 
 export const AddTaskButton = ({
-  activityTargetEntity,
+  activityTargetableObjects,
 }: {
-  activityTargetEntity?: ActivityTargetableEntity;
+  activityTargetableObjects?: ActivityTargetableObject[];
 }) => {
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  if (!activityTargetEntity) {
+  if (!isNonEmptyArray(activityTargetableObjects)) {
     return <></>;
   }
 
@@ -23,7 +25,7 @@ export const AddTaskButton = ({
       onClick={() =>
         openCreateActivity({
           type: 'Task',
-          targetableEntities: [activityTargetEntity],
+          targetableObjects: activityTargetableObjects,
         })
       }
     ></Button>

packages/twenty-front/src/modules/activities/tasks/components/ObjectTasks.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
@@ -14,16 +14,16 @@ const StyledContainer = styled.div`
   overflow: auto;
 `;
 
-export const EntityTasks = ({
-  entity,
+export const ObjectTasks = ({
+  targetableObject,
 }: {
-  entity: ActivityTargetableEntity;
+  targetableObject: ActivityTargetableObject;
 }) => {
   return (
     <StyledContainer>
       <RecoilScope CustomRecoilScopeContext={TasksRecoilScopeContext}>
         <ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
-          <TaskGroups entity={entity} showAddButton />
+          <TaskGroups targetableObjects={[targetableObject]} showAddButton />
         </ObjectFilterDropdownScope>
       </RecoilScope>
     </StyledContainer>

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
 import { activeTabIdScopedState } from '@/ui/layout/tab/states/activeTabIdScopedState';
@@ -12,12 +12,6 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';
 
-type TaskGroupsProps = {
-  filterDropdownId?: string;
-  entity?: ActivityTargetableEntity;
-  showAddButton?: boolean;
-};
-
 const StyledTaskGroupEmptyContainer = styled.div`
   align-items: center;
   align-self: stretch;
@@ -52,9 +46,15 @@ const StyledContainer = styled.div`
   flex-direction: column;
 `;
 
+type TaskGroupsProps = {
+  filterDropdownId?: string;
+  targetableObjects?: ActivityTargetableObject[];
+  showAddButton?: boolean;
+};
+
 export const TaskGroups = ({
   filterDropdownId,
-  entity,
+  targetableObjects,
   showAddButton,
 }: TaskGroupsProps) => {
   const {
@@ -62,7 +62,10 @@ export const TaskGroups = ({
     upcomingTasks,
     unscheduledTasks,
     completedTasks,
-  } = useTasks({ filterDropdownId: filterDropdownId, entity });
+  } = useTasks({
+    filterDropdownId: filterDropdownId,
+    targetableObjects: targetableObjects ?? [],
+  });
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
@@ -71,10 +74,6 @@ export const TaskGroups = ({
     TasksRecoilScopeContext,
   );
 
-  if (entity?.type === 'Custom') {
-    return <></>;
-  }
-
   if (
     (activeTabId !== 'done' &&
       todayOrPreviousTasks?.length === 0 &&
@@ -93,7 +92,7 @@ export const TaskGroups = ({
           onClick={() =>
             openCreateActivity({
               type: 'Task',
-              targetableEntities: entity ? [entity] : undefined,
+              targetableObjects,
             })
           }
         />
@@ -107,7 +106,9 @@ export const TaskGroups = ({
         <TaskList
           tasks={completedTasks ?? []}
           button={
-            showAddButton && <AddTaskButton activityTargetEntity={entity} />
+            showAddButton && (
+              <AddTaskButton activityTargetableObjects={targetableObjects} />
+            )
           }
         />
       ) : (
@@ -116,7 +117,9 @@ export const TaskGroups = ({
             title="Today"
             tasks={todayOrPreviousTasks ?? []}
             button={
-              showAddButton && <AddTaskButton activityTargetEntity={entity} />
+              showAddButton && (
+                <AddTaskButton activityTargetableObjects={targetableObjects} />
+              )
             }
           />
           <TaskList
@@ -125,7 +128,7 @@ export const TaskGroups = ({
             button={
               showAddButton &&
               !todayOrPreviousTasks?.length && (
-                <AddTaskButton activityTargetEntity={entity} />
+                <AddTaskButton activityTargetableObjects={targetableObjects} />
               )
             }
           />
@@ -136,7 +139,7 @@ export const TaskGroups = ({
               showAddButton &&
               !todayOrPreviousTasks?.length &&
               !upcomingTasks?.length && (
-                <AddTaskButton activityTargetEntity={entity} />
+                <AddTaskButton activityTargetableObjects={targetableObjects} />
               )
             }
           />

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -2,12 +2,10 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
+import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
-import { ActivityTarget } from '@/activities/types/ActivityTarget';
 import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
 import { getActivitySummary } from '@/activities/utils/getActivitySummary';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { IconCalendar, IconComment } from '@/ui/display/icon';
 import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
@@ -76,14 +74,8 @@ export const TaskRow = ({
   const body = getActivitySummary(task.body);
   const { completeTask } = useCompleteTask(task);
 
-  const activityTargetIds =
-    task?.activityTargets?.edges?.map(
-      (activityTarget) => activityTarget.node.id,
-    ) ?? [];
-
-  const { records: activityTargets } = useFindManyRecords<ActivityTarget>({
-    objectNameSingular: CoreObjectNameSingular.ActivityTarget,
-    filter: { id: { in: activityTargetIds } },
+  const { activityTargetObjectRecords } = useActivityTargetObjectRecords({
+    activityId: task.id,
   });
 
   return (
@@ -115,7 +107,9 @@ export const TaskRow = ({
         )}
       </StyledTaskBody>
       <StyledFieldsContainer>
-        <ActivityTargetChips targets={activityTargets} />
+        <ActivityTargetChips
+          activityTargetObjectRecords={activityTargetObjectRecords}
+        />
         <StyledDueDate
           isPast={
             !!task.dueAt && hasDatePassed(task.dueAt) && !task.completedAt

packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts

@@ -1,55 +1,75 @@
-import { isNonEmptyString } from '@sniptt/guards';
+import { isNonEmptyArray, isNonEmptyString } from '@sniptt/guards';
 import { DateTime } from 'luxon';
 
 import { Activity } from '@/activities/types/Activity';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { LeafObjectRecordFilter } from '@/object-record/record-filter/types/ObjectRecordQueryFilter';
 import { parseDate } from '~/utils/date-utils';
-import { isDefined } from '~/utils/isDefined';
 
 type UseTasksProps = {
   filterDropdownId?: string;
-  entity?: ActivityTargetableEntity;
+  targetableObjects: ActivityTargetableObject[];
 };
 
-export const useTasks = (props?: UseTasksProps) => {
-  const { filterDropdownId, entity } = props ?? {};
-
+export const useTasks = ({
+  targetableObjects,
+  filterDropdownId,
+}: UseTasksProps) => {
   const { selectedFilter } = useFilterDropdown({
-    filterDropdownId: filterDropdownId,
+    filterDropdownId,
   });
 
+  const targetableObjectsFilter =
+    targetableObjects.reduce<LeafObjectRecordFilter>(
+      (aggregateFilter, targetableObject) => {
+        const targetableObjectFieldName = getActivityTargetObjectFieldIdName({
+          nameSingular: targetableObject.targetObjectNameSingular,
+        });
+
+        if (isNonEmptyString(targetableObject.id)) {
+          aggregateFilter[targetableObjectFieldName] = {
+            eq: targetableObject.id,
+          };
+        }
+
+        return aggregateFilter;
+      },
+      {},
+    );
+
   const { records: activityTargets } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.ActivityTarget,
-    filter: isDefined(entity)
-      ? {
-          [entity?.type === 'Company' ? 'companyId' : 'personId']: {
-            eq: entity?.id,
-          },
-        }
-      : undefined,
+    filter: targetableObjectsFilter,
   });
 
+  const skipRequest = !isNonEmptyArray(activityTargets) && !selectedFilter;
+
+  const idFilter = {
+    id: {
+      in: activityTargets.map((activityTarget) => activityTarget.activityId),
+    },
+  };
+
+  const assigneeIdFilter = selectedFilter
+    ? {
+        assigneeId: {
+          in: JSON.parse(selectedFilter.value),
+        },
+      }
+    : undefined;
+
   const { records: completeTasksData } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.Activity,
-    skip: !entity && !selectedFilter,
+    skip: skipRequest,
     filter: {
       completedAt: { is: 'NOT_NULL' },
-      ...(isDefined(entity) && {
-        id: {
-          in: activityTargets?.map(
-            (activityTarget) => activityTarget.activityId,
-          ),
-        },
-      }),
+      ...idFilter,
       type: { eq: 'Task' },
-      ...(isNonEmptyString(selectedFilter?.value) && {
-        assigneeId: {
-          in: JSON.parse(selectedFilter?.value),
-        },
-      }),
+      ...assigneeIdFilter,
     },
     orderBy: {
       createdAt: 'DescNullsFirst',
@@ -58,22 +78,12 @@ export const useTasks = (props?: UseTasksProps) => {
 
   const { records: incompleteTaskData } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.Activity,
-    skip: !entity && !selectedFilter,
+    skip: skipRequest,
     filter: {
       completedAt: { is: 'NULL' },
-      ...(isDefined(entity) && {
-        id: {
-          in: activityTargets?.map(
-            (activityTarget) => activityTarget.activityId,
-          ),
-        },
-      }),
+      ...idFilter,
       type: { eq: 'Task' },
-      ...(isNonEmptyString(selectedFilter?.value) && {
-        assigneeId: {
-          in: JSON.parse(selectedFilter?.value),
-        },
-      }),
+      ...assigneeIdFilter,
     },
     orderBy: {
       createdAt: 'DescNullsFirst',

packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { isNonEmptyString } from '@sniptt/guards';
 
 import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
+import { useActivityTargets } from '@/activities/hooks/useActivityTargets';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { Activity } from '@/activities/types/Activity';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@@ -48,20 +50,21 @@ const StyledEmptyTimelineSubTitle = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const Timeline = ({ entity }: { entity: ActivityTargetableEntity }) => {
-  const { records: activityTargets, loading } = useFindManyRecords({
-    objectNameSingular: CoreObjectNameSingular.ActivityTarget,
-    filter: {
-      [entity.type === 'Company' ? 'companyId' : 'personId']: { eq: entity.id },
-    },
-  });
+export const Timeline = ({
+  targetableObject,
+}: {
+  targetableObject: ActivityTargetableObject;
+}) => {
+  const { activityTargets } = useActivityTargets({ targetableObject });
 
   const { records: activities } = useFindManyRecords({
     skip: !activityTargets?.length,
     objectNameSingular: CoreObjectNameSingular.Activity,
     filter: {
       id: {
-        in: activityTargets?.map((activityTarget) => activityTarget.activityId),
+        in: activityTargets
+          ?.map((activityTarget) => activityTarget.activityId)
+          .filter(isNonEmptyString),
       },
     },
     orderBy: {
@@ -71,10 +74,6 @@ export const Timeline = ({ entity }: { entity: ActivityTargetableEntity }) => {
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  if (loading || entity.type === 'Custom') {
-    return <></>;
-  }
-
   if (!activities.length) {
     return (
       <StyledTimelineEmptyContainer>
@@ -84,13 +83,13 @@ export const Timeline = ({ entity }: { entity: ActivityTargetableEntity }) => {
           onNoteClick={() =>
             openCreateActivity({
               type: 'Note',
-              targetableEntities: [entity],
+              targetableObjects: [targetableObject],
             })
           }
           onTaskClick={() =>
             openCreateActivity({
               type: 'Task',
-              targetableEntities: [entity],
+              targetableObjects: [targetableObject],
             })
           }
         />

packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx

@@ -145,7 +145,7 @@ type TimelineActivityProps = {
     | 'type'
     | 'comments'
     | 'dueAt'
-  > & { author: Pick<WorkspaceMember, 'name' | 'avatarUrl'> } & {
+  > & { author?: Pick<WorkspaceMember, 'name' | 'avatarUrl'> } & {
     assignee?: Pick<WorkspaceMember, 'id' | 'name' | 'avatarUrl'> | null;
   };
   isLastActivity?: boolean;
@@ -165,8 +165,8 @@ export const TimelineActivity = ({
       <StyledTimelineItemContainer>
         <StyledAvatarContainer>
           <Avatar
-            avatarUrl={activity.author.avatarUrl}
-            placeholder={activity.author.name.firstName ?? ''}
+            avatarUrl={activity.author?.avatarUrl}
+            placeholder={activity.author?.name.firstName ?? ''}
             size="sm"
             type="rounded"
           />
@@ -175,7 +175,8 @@ export const TimelineActivity = ({
           <StyledItemTitleContainer>
             <StyledItemAuthorText>
               <span>
-                {activity.author.name.firstName} {activity.author.name.lastName}
+                {activity.author?.name.firstName}{' '}
+                {activity.author?.name.lastName}
               </span>
               created a {activity.type.toLowerCase()}
             </StyledItemAuthorText>

packages/twenty-front/src/modules/activities/types/ActivityTargetObject.ts

@@ -0,0 +1,9 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+
+export type ActivityTargetObjectRecord = {
+  targetObjectMetadataItem: ObjectMetadataItem;
+  activityTargetRecord: ObjectRecord;
+  targetObjectRecord: ObjectRecord;
+  targetObjectNameSingular: string;
+};

packages/twenty-front/src/modules/activities/types/ActivityTargetableEntity.ts

@@ -1,7 +1,5 @@
-export type ActivityTargetableEntityType = 'Person' | 'Company' | 'Custom';
-
-export type ActivityTargetableEntity = {
+export type ActivityTargetableObject = {
   id: string;
-  type: ActivityTargetableEntityType;
-  relatedEntities?: ActivityTargetableEntity[];
+  targetObjectNameSingular: string;
+  relatedTargetableObjects?: ActivityTargetableObject[];
 };

packages/twenty-front/src/modules/activities/types/ActivityTargetableEntityForSelect.ts

@@ -1,7 +0,0 @@
-import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
-
-import { ActivityTargetableEntityType } from './ActivityTargetableEntity';
-
-export type ActivityTargetableEntityForSelect = EntityForSelect & {
-  entityType: ActivityTargetableEntityType;
-};

packages/twenty-front/src/modules/activities/utils/__tests__/getTargetableEntitiesWithParents.test.ts

@@ -1,40 +1,41 @@
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
-import { getTargetableEntitiesWithParents } from '@/activities/utils/getTargetableEntitiesWithParents';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { flattenTargetableObjectsAndTheirRelatedTargetableObjects } from '@/activities/utils/flattenTargetableObjectsAndTheirRelatedTargetableObjects';
 
 describe('getTargetableEntitiesWithParents', () => {
   it('should return the correct value', () => {
-    const entities: ActivityTargetableEntity[] = [
+    const entities: ActivityTargetableObject[] = [
       {
         id: '1',
-        type: 'Person',
-        relatedEntities: [
+        targetObjectNameSingular: 'person',
+        relatedTargetableObjects: [
           {
             id: '2',
-            type: 'Company',
+            targetObjectNameSingular: 'company',
           },
         ],
       },
       {
         id: '4',
-        type: 'Company',
+        targetObjectNameSingular: 'person',
       },
       {
         id: '3',
-        type: 'Custom',
-        relatedEntities: [
+        targetObjectNameSingular: 'car',
+        relatedTargetableObjects: [
           {
             id: '6',
-            type: 'Person',
+            targetObjectNameSingular: 'person',
           },
           {
             id: '5',
-            type: 'Company',
+            targetObjectNameSingular: 'company',
           },
         ],
       },
     ];
 
-    const res = getTargetableEntitiesWithParents(entities);
+    const res =
+      flattenTargetableObjectsAndTheirRelatedTargetableObjects(entities);
 
     expect(res).toHaveLength(6);
     expect(res[0].id).toBe('1');

packages/twenty-front/src/modules/activities/utils/flattenTargetableObjectsAndTheirRelatedTargetableObjects.ts

@@ -0,0 +1,21 @@
+import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
+
+export const flattenTargetableObjectsAndTheirRelatedTargetableObjects = (
+  targetableObjectsWithRelatedTargetableObjects: ActivityTargetableObject[],
+): ActivityTargetableObject[] => {
+  const flattenedTargetableObjects: ActivityTargetableObject[] = [];
+
+  for (const targetableObject of targetableObjectsWithRelatedTargetableObjects ??
+    []) {
+    flattenedTargetableObjects.push(targetableObject);
+
+    if (targetableObject.relatedTargetableObjects) {
+      for (const relatedEntity of targetableObject.relatedTargetableObjects ??
+        []) {
+        flattenedTargetableObjects.push(relatedEntity);
+      }
+    }
+  }
+
+  return flattenedTargetableObjects;
+};

packages/twenty-front/src/modules/activities/utils/getTargetObjectFilterFieldName.ts

@@ -0,0 +1,15 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+
+export const getActivityTargetObjectFieldIdName = ({
+  nameSingular,
+}: {
+  nameSingular: string;
+}) => {
+  const isCoreObject =
+    nameSingular === CoreObjectNameSingular.Company ||
+    nameSingular === CoreObjectNameSingular.Person;
+
+  const objectFieldIdName = `${!isCoreObject ? '_' : ''}${nameSingular}Id`;
+
+  return objectFieldIdName;
+};

packages/twenty-front/src/modules/activities/utils/getTargetableEntitiesWithParents.ts

@@ -1,16 +0,0 @@
-import { ActivityTargetableEntity } from '../types/ActivityTargetableEntity';
-
-export const getTargetableEntitiesWithParents = (
-  entities: ActivityTargetableEntity[],
-): ActivityTargetableEntity[] => {
-  const entitiesWithRelations: ActivityTargetableEntity[] = [];
-  for (const entity of entities ?? []) {
-    entitiesWithRelations.push(entity);
-    if (entity.relatedEntities) {
-      for (const relatedEntity of entity.relatedEntities ?? []) {
-        entitiesWithRelations.push(relatedEntity);
-      }
-    }
-  }
-  return entitiesWithRelations;
-};

packages/twenty-front/src/modules/companies/hooks/useSpreadsheetCompanyImport.ts

@@ -28,39 +28,44 @@ export const useSpreadsheetCompanyImport = () => {
       ...options,
       onSubmit: async (data) => {
         // TODO: Add better type checking in spreadsheet import later
-        const createInputs = data.validData.map((company) => ({
-          name: company.name as string | undefined,
-          domainName: company.domainName as string | undefined,
-          ...(company.linkedinUrl
-            ? {
-                linkedinLink: {
-                  label: 'linkedinUrl',
-                  url: company.linkedinUrl as string | undefined,
-                },
-              }
-            : {}),
-          ...(company.annualRecurringRevenue
-            ? {
-                annualRecurringRevenue: {
-                  amountMicros: Number(company.annualRecurringRevenue),
-                  currencyCode: 'USD',
-                },
-              }
-            : {}),
-          idealCustomerProfile:
-            company.idealCustomerProfile &&
-            ['true', true].includes(company.idealCustomerProfile),
-          ...(company.xUrl
-            ? {
-                xLink: {
-                  label: 'xUrl',
-                  url: company.xUrl as string | undefined,
-                },
-              }
-            : {}),
-          address: company.address as string | undefined,
-          employees: company.employees ? Number(company.employees) : undefined,
-        }));
+        const createInputs = data.validData.map(
+          (company) =>
+            ({
+              name: company.name as string | undefined,
+              domainName: company.domainName as string | undefined,
+              ...(company.linkedinUrl
+                ? {
+                    linkedinLink: {
+                      label: 'linkedinUrl',
+                      url: company.linkedinUrl as string | undefined,
+                    },
+                  }
+                : {}),
+              ...(company.annualRecurringRevenue
+                ? {
+                    annualRecurringRevenue: {
+                      amountMicros: Number(company.annualRecurringRevenue),
+                      currencyCode: 'USD',
+                    },
+                  }
+                : {}),
+              idealCustomerProfile:
+                company.idealCustomerProfile &&
+                ['true', true].includes(company.idealCustomerProfile),
+              ...(company.xUrl
+                ? {
+                    xLink: {
+                      label: 'xUrl',
+                      url: company.xUrl as string | undefined,
+                    },
+                  }
+                : {}),
+              address: company.address as string | undefined,
+              employees: company.employees
+                ? Number(company.employees)
+                : undefined,
+            }) as Company,
+        );
         // TODO: abstract this part for any object
         try {
           await createManyCompanies(createInputs);

packages/twenty-front/src/modules/object-metadata/hooks/useFilterOutUnexistingObjectMetadataItems.ts

@@ -0,0 +1,22 @@
+import { useRecoilValue } from 'recoil';
+
+import { objectMetadataItemsByNameSingularMapSelector } from '@/object-metadata/states/objectMetadataItemsByNameSingularMapSelector';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { isDefined } from '~/utils/isDefined';
+
+export const useFilterOutUnexistingObjectMetadataItems = () => {
+  const objectMetadataItemsByNameSingularMap = useRecoilValue(
+    objectMetadataItemsByNameSingularMapSelector,
+  );
+
+  const filterOutUnexistingObjectMetadataItems = (
+    objectMetadatItem: ObjectMetadataItem,
+  ) =>
+    isDefined(
+      objectMetadataItemsByNameSingularMap.get(objectMetadatItem.nameSingular),
+    );
+
+  return {
+    filterOutUnexistingObjectMetadataItems,
+  };
+};

packages/twenty-front/src/modules/object-metadata/hooks/useMapToObjectRecordIdentifier.ts

@@ -1,16 +1,16 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
 
 export const useMapToObjectRecordIdentifier = ({
   objectMetadataItem,
 }: {
   objectMetadataItem: ObjectMetadataItem;
-}) => {
-  return (record: any): ObjectRecordIdentifier => {
-    return getObjectRecordIdentifier({
+}): ((record: ObjectRecord) => ObjectRecordIdentifier) => {
+  return (record: ObjectRecord) =>
+    getObjectRecordIdentifier({
       objectMetadataItem,
       record,
     });
-  };
 };

packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItem.ts

@@ -7,6 +7,7 @@ import { useGetObjectOrderByField } from '@/object-metadata/hooks/useGetObjectOr
 import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
 import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
 import { getObjectMetadataItemsMock } from '@/object-metadata/utils/getObjectMetadataItemsMock';
 import { useGenerateCreateManyRecordMutation } from '@/object-record/hooks/useGenerateCreateManyRecordMutation';
 import { useGenerateCreateOneRecordMutation } from '@/object-record/hooks/useGenerateCreateOneRecordMutation';
@@ -121,7 +122,9 @@ export const useObjectMetadataItem = (
     ({ name }) => name === 'name',
   );
 
-  const basePathToShowPage = `/object/${objectMetadataItem.nameSingular}/`;
+  const basePathToShowPage = getBasePathToShowPage({
+    objectMetadataItem,
+  });
 
   return {
     labelIdentifierFieldMetadata,

packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNamePluralMapSelector.ts

@@ -0,0 +1,20 @@
+import { selector } from 'recoil';
+
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const objectMetadataItemsByNamePluralMapSelector = selector<
+  Map<string, ObjectMetadataItem>
+>({
+  key: 'objectMetadataItemsByNamePluralMapSelector',
+  get: ({ get }) => {
+    const objectMetadataItems = get(objectMetadataItemsState);
+
+    return new Map(
+      objectMetadataItems.map((objectMetadataItem) => [
+        objectMetadataItem.namePlural,
+        objectMetadataItem,
+      ]),
+    );
+  },
+});

packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNameSingularMapSelector.ts

@@ -0,0 +1,20 @@
+import { selector } from 'recoil';
+
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const objectMetadataItemsByNameSingularMapSelector = selector<
+  Map<string, ObjectMetadataItem>
+>({
+  key: 'objectMetadataItemsByNameSingularMapSelector',
+  get: ({ get }) => {
+    const objectMetadataItems = get(objectMetadataItemsState);
+
+    return new Map(
+      objectMetadataItems.map((objectMetadataItem) => [
+        objectMetadataItem.nameSingular,
+        objectMetadataItem,
+      ]),
+    );
+  },
+});

packages/twenty-front/src/modules/object-metadata/utils/getBasePathToShowPage.ts

@@ -0,0 +1,11 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const getBasePathToShowPage = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const basePathToShowPage = `/object/${objectMetadataItem.nameSingular}/`;
+
+  return basePathToShowPage;
+};

packages/twenty-front/src/modules/object-metadata/utils/getLabelIdentifierFieldMetadataItem.ts

@@ -0,0 +1,12 @@
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+export const getLabelIdentifierFieldMetadataItem = (
+  objectMetadataItem: ObjectMetadataItem,
+): FieldMetadataItem | undefined => {
+  return objectMetadataItem.fields.find(
+    (field) =>
+      field.id === objectMetadataItem.labelIdentifierFieldMetadataId ||
+      field.name === 'name',
+  );
+};

packages/twenty-front/src/modules/object-metadata/utils/getObjectOrderByField.ts

@@ -5,7 +5,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const getObjectOrderByField = (
   objectMetadataItem: ObjectMetadataItem,
-  orderBy: OrderBy,
+  orderBy?: OrderBy | null,
 ): OrderByField => {
   const labelIdentifierFieldMetadata = objectMetadataItem.fields.find(
     (field) =>
@@ -18,18 +18,18 @@ export const getObjectOrderByField = (
       case FieldMetadataType.FullName:
         return {
           [labelIdentifierFieldMetadata.name]: {
-            firstName: orderBy,
-            lastName: orderBy,
+            firstName: orderBy ?? 'AscNullsLast',
+            lastName: orderBy ?? 'AscNullsLast',
           },
         };
       default:
         return {
-          [labelIdentifierFieldMetadata.name]: orderBy,
+          [labelIdentifierFieldMetadata.name]: orderBy ?? 'AscNullsLast',
         };
     }
   } else {
     return {
-      createdAt: orderBy,
+      createdAt: orderBy ?? 'DescNullsLast',
     };
   }
 };

packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts

@@ -1,7 +1,10 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
+import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
-import { FieldMetadataType } from '~/generated/graphql';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
 export const getObjectRecordIdentifier = ({
@@ -9,30 +12,24 @@ export const getObjectRecordIdentifier = ({
   record,
 }: {
   objectMetadataItem: ObjectMetadataItem;
-  record: any;
+  record: ObjectRecord;
 }): ObjectRecordIdentifier => {
-  const basePathToShowPage = `/object/${objectMetadataItem.nameSingular}/`;
-  const linkToShowPage = `${basePathToShowPage}${record.id}`;
-
-  if (objectMetadataItem.nameSingular === CoreObjectNameSingular.Opportunity) {
-    return {
-      id: record.id,
-      name: record?.company?.name,
-      avatarUrl: record.avatarUrl,
-      avatarType: 'rounded',
-      linkToShowPage,
-    };
+  switch (objectMetadataItem.nameSingular) {
+    case CoreObjectNameSingular.Opportunity:
+      return {
+        id: record.id,
+        name: record?.company?.name,
+        avatarUrl: record.avatarUrl,
+        avatarType: 'rounded',
+      };
   }
 
-  const labelIdentifierFieldMetadata = objectMetadataItem.fields.find(
-    (field) =>
-      field.id === objectMetadataItem.labelIdentifierFieldMetadataId ||
-      field.name === 'name',
-  );
+  const labelIdentifierFieldMetadataItem =
+    getLabelIdentifierFieldMetadataItem(objectMetadataItem);
 
   let labelIdentifierFieldValue = '';
 
-  switch (labelIdentifierFieldMetadata?.type) {
+  switch (labelIdentifierFieldMetadataItem?.type) {
     case FieldMetadataType.FullName: {
       labelIdentifierFieldValue = `${record.name?.firstName ?? ''} ${
         record.name?.lastName ?? ''
@@ -40,8 +37,8 @@ export const getObjectRecordIdentifier = ({
       break;
     }
     default:
-      labelIdentifierFieldValue = labelIdentifierFieldMetadata
-        ? record[labelIdentifierFieldMetadata.name]
+      labelIdentifierFieldValue = labelIdentifierFieldMetadataItem
+        ? record[labelIdentifierFieldMetadataItem.name]
         : '';
   }
 
@@ -63,11 +60,17 @@ export const getObjectRecordIdentifier = ({
       ? getLogoUrlFromDomainName(record['domainName'] ?? '')
       : imageIdentifierFieldValue ?? null;
 
+  const basePathToShowPage = getBasePathToShowPage({
+    objectMetadataItem,
+  });
+
+  const linkToEntity = `${basePathToShowPage}${record.id}`;
+
   return {
     id: record.id,
     name: labelIdentifierFieldValue,
     avatarUrl,
     avatarType,
-    linkToShowPage,
+    linkToEntity,
   };
 };

packages/twenty-front/src/modules/object-record/components/RecordChip.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { EntityChip } from '@/ui/display/chip/components/EntityChip';
+
+export type RecordChipProps = {
+  objectNameSingular: string;
+  record: ObjectRecord;
+};
+
+export const RecordChip = ({ objectNameSingular, record }: RecordChipProps) => {
+  const { mapToObjectRecordIdentifier } = useObjectMetadataItem({
+    objectNameSingular,
+  });
+
+  const objectRecordIdentifier = mapToObjectRecordIdentifier(record);
+
+  return (
+    <EntityChip
+      entityId={record.id}
+      name={objectRecordIdentifier.name}
+      avatarType={objectRecordIdentifier.avatarType}
+      avatarUrl={objectRecordIdentifier.avatarUrl ?? undefined}
+      linkToEntity={objectRecordIdentifier.linkToShowPage}
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx

@@ -77,13 +77,6 @@ export const RecordShowPage = () => {
     objectNameSingular,
   });
 
-  const objectMetadataType =
-    objectMetadataItem?.nameSingular === 'company'
-      ? 'Company'
-      : objectMetadataItem?.nameSingular === 'person'
-        ? 'Person'
-        : 'Custom';
-
   const useUpdateOneObjectRecordMutation: RecordUpdateHook = () => {
     const updateEntity = ({ variables }: RecordUpdateHookParams) => {
       updateOneRecord?.({
@@ -171,7 +164,7 @@ export const RecordShowPage = () => {
         hasBackButton
         Icon={IconBuildingSkyscraper}
       >
-        {record && objectMetadataType !== 'Custom' && (
+        {record && (
           <>
             <PageFavoriteButton
               isFavorite={isFavorite}
@@ -181,7 +174,7 @@ export const RecordShowPage = () => {
               key="add"
               entity={{
                 id: record.id,
-                type: objectMetadataType,
+                targetObjectNameSingular: objectMetadataItem?.nameSingular,
               }}
             />
             <ShowPageMoreButton
@@ -275,15 +268,9 @@ export const RecordShowPage = () => {
               )}
             </ShowPageLeftContainer>
             <ShowPageRightContainer
-              entity={{
-                id: record?.id || '',
-                // TODO: refacto
-                type:
-                  objectMetadataItem?.nameSingular === 'company'
-                    ? 'Company'
-                    : objectMetadataItem?.nameSingular === 'person'
-                      ? 'Person'
-                      : 'Custom',
+              targetableObject={{
+                id: record?.id ?? '',
+                targetObjectNameSingular: objectMetadataItem?.nameSingular,
               }}
               timeline
               tasks

packages/twenty-front/src/modules/object-record/field/meta-types/display/components/ChipFieldDisplay.tsx

@@ -10,6 +10,7 @@ export const ChipFieldDisplay = () => {
     basePathToShowPage,
   } = useChipField();
 
+  // TODO: remove this and use ObjectRecordChip instead
   const identifiers = identifiersMapper?.(record, objectNameSingular ?? '');
 
   return (

packages/twenty-front/src/modules/object-record/hooks/useCreateManyRecords.ts

@@ -5,11 +5,10 @@ import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimis
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
 import { useGenerateEmptyRecord } from '@/object-record/hooks/useGenerateEmptyRecord';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { capitalize } from '~/utils/string/capitalize';
 
-export const useCreateManyRecords = <
-  T extends Record<string, unknown> & { id: string },
->({
+export const useCreateManyRecords = <T extends ObjectRecord>({
   objectNameSingular,
 }: ObjectMetadataItemIdentifier) => {
   const { triggerOptimisticEffects } = useOptimisticEffect({
@@ -27,17 +26,16 @@ export const useCreateManyRecords = <
 
   const apolloClient = useApolloClient();
 
-  const createManyRecords = async (data: Record<string, any>[]) => {
+  const createManyRecords = async (data: Partial<T>[]) => {
     const withIds = data.map((record) => ({
       ...record,
       id: (record.id as string) ?? v4(),
     }));
 
     withIds.forEach((record) => {
-      const emptyRecord: Record<string, unknown> | undefined =
-        generateEmptyRecord({
-          id: record.id,
-        });
+      const emptyRecord: T | undefined = generateEmptyRecord({
+        id: record.id,
+      } as T);
 
       if (emptyRecord) {
         triggerOptimisticEffects({

packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts

@@ -34,7 +34,7 @@ export const useCreateOneRecord = <T>({
   const createOneRecord = async (input: Record<string, any>) => {
     const recordId = v4();
 
-    const generatedEmptyRecord = generateEmptyRecord<Record<string, unknown>>({
+    const generatedEmptyRecord = generateEmptyRecord({
       id: recordId,
       createdAt: new Date().toISOString(),
       ...input,

packages/twenty-front/src/modules/object-record/hooks/useGenerateEmptyRecord.ts

@@ -1,4 +1,5 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { generateEmptyFieldValue } from '@/object-record/utils/generateEmptyFieldValue';
 
 export const useGenerateEmptyRecord = ({
@@ -7,11 +8,11 @@ export const useGenerateEmptyRecord = ({
   objectMetadataItem: ObjectMetadataItem;
 }) => {
   // Todo fix typing once we generate the return base on Metadata
-  const generateEmptyRecord = <T>(input: Partial<T> & { id: string }) => {
+  const generateEmptyRecord = <T extends ObjectRecord>(input: T) => {
     // Todo replace this by runtime typing
-    const validatedInput = input as { id: string } & { [key: string]: any };
+    const validatedInput = input as T;
 
-    const emptyRecord = {} as Record<string, any>;
+    const emptyRecord = {} as any;
 
     for (const fieldMetadataItem of objectMetadataItem.fields) {
       emptyRecord[fieldMetadataItem.name] =
@@ -19,7 +20,7 @@ export const useGenerateEmptyRecord = ({
         generateEmptyFieldValue(fieldMetadataItem);
     }
 
-    return emptyRecord;
+    return emptyRecord as T;
   };
 
   return {

packages/twenty-front/src/modules/object-record/hooks/useGenerateFindManyRecordsForMultipleMetadataItemsQuery.ts

@@ -0,0 +1,84 @@
+import { gql } from '@apollo/client';
+
+import { useMapFieldMetadataToGraphQLQuery } from '@/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const useGenerateFindManyRecordsForMultipleMetadataItemsQuery = ({
+  objectMetadataItems,
+  depth,
+}: {
+  objectMetadataItems: ObjectMetadataItem[];
+  depth?: number;
+}) => {
+  const mapFieldMetadataToGraphQLQuery = useMapFieldMetadataToGraphQLQuery();
+
+  const capitalizedObjectNameSingulars = objectMetadataItems.map(
+    ({ nameSingular }) => capitalize(nameSingular),
+  );
+
+  const filterPerMetadataItemArray = capitalizedObjectNameSingulars
+    .map(
+      (capitalizedObjectNameSingular) =>
+        `$filter${capitalizedObjectNameSingular}: ${capitalizedObjectNameSingular}FilterInput`,
+    )
+    .join(', ');
+
+  const orderByPerMetadataItemArray = capitalizedObjectNameSingulars
+    .map(
+      (capitalizedObjectNameSingular) =>
+        `$orderBy${capitalizedObjectNameSingular}: ${capitalizedObjectNameSingular}OrderByInput`,
+    )
+    .join(', ');
+
+  const lastCursorPerMetadataItemArray = capitalizedObjectNameSingulars
+    .map(
+      (capitalizedObjectNameSingular) =>
+        `$lastCursor${capitalizedObjectNameSingular}: String`,
+    )
+    .join(', ');
+
+  const limitPerMetadataItemArray = capitalizedObjectNameSingulars
+    .map(
+      (capitalizedObjectNameSingular) =>
+        `$limit${capitalizedObjectNameSingular}: Float = 5`,
+    )
+    .join(', ');
+
+  return gql`
+    query FindManyRecordsMultipleMetadataItems(
+      ${filterPerMetadataItemArray}, 
+      ${orderByPerMetadataItemArray}, 
+      ${lastCursorPerMetadataItemArray}, 
+      ${limitPerMetadataItemArray}
+    ) {
+      ${objectMetadataItems
+        .map(
+          ({ namePlural, nameSingular, fields }) =>
+            `${namePlural}(filter: $filter${capitalize(
+              nameSingular,
+            )}, orderBy: $orderBy${capitalize(
+              nameSingular,
+            )}, first: $limit${capitalize(
+              nameSingular,
+            )}, after: $lastCursor${capitalize(nameSingular)}){
+          edges {
+            node {
+              id
+              ${fields
+                .map((field) => mapFieldMetadataToGraphQLQuery(field, depth))
+                .join('\n')}
+            }
+            cursor
+          }
+          pageInfo {
+            hasNextPage
+            startCursor
+            endCursor
+          }
+        }`,
+        )
+        .join('\n')}
+    }
+  `;
+};

packages/twenty-front/src/modules/object-record/hooks/useGenerateFindManyRecordsQuery.ts

@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client';
 
 import { useMapFieldMetadataToGraphQLQuery } from '@/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery';
-import { EMPTY_QUERY } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { capitalize } from '~/utils/string/capitalize';
 
@@ -14,10 +13,6 @@ export const useGenerateFindManyRecordsQuery = ({
 }) => {
   const mapFieldMetadataToGraphQLQuery = useMapFieldMetadataToGraphQLQuery();
 
-  if (!objectMetadataItem) {
-    return EMPTY_QUERY;
-  }
-
   return gql`
     query FindMany${capitalize(
       objectMetadataItem.namePlural,

packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx

@@ -67,13 +67,6 @@ export const useRecordTableContextMenuEntries = (
 
   const { createFavorite, favorites, deleteFavorite } = useFavorites();
 
-  const objectMetadataType =
-    objectNameSingular === 'company'
-      ? 'Company'
-      : objectNameSingular === 'person'
-        ? 'Person'
-        : 'Custom';
-
   const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
     const selectedRowIds = injectSelectorSnapshotValueWithRecordTableScopeId(
       snapshot,
@@ -212,14 +205,14 @@ export const useRecordTableContextMenuEntries = (
           label: 'Task',
           Icon: IconCheckbox,
           onClick: () => {
-            openCreateActivityDrawer('Task', objectMetadataType);
+            openCreateActivityDrawer('Task', objectNameSingular);
           },
         },
         {
           label: 'Note',
           Icon: IconNotes,
           onClick: () => {
-            openCreateActivityDrawer('Note', objectMetadataType);
+            openCreateActivityDrawer('Note', objectNameSingular);
           },
         },
         ...(dataExecuteQuickActionOnmentEnabled

packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx

@@ -0,0 +1,212 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { isNonEmptyString } from '@sniptt/guards';
+import debounce from 'lodash.debounce';
+import { v4 } from 'uuid';
+
+import {
+  ObjectRecordForSelect,
+  SelectedObjectRecordId,
+  useMultiObjectSearch,
+} from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
+import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { Avatar } from '@/users/components/Avatar';
+
+export const StyledSelectableItem = styled(SelectableItem)`
+  height: 100%;
+  width: 100%;
+`;
+
+export type EntitiesForMultipleObjectRecordSelect = {
+  filteredSelectedObjectRecords: ObjectRecordForSelect[];
+  objectRecordsToSelect: ObjectRecordForSelect[];
+  loading: boolean;
+};
+
+export const MultipleObjectRecordSelect = ({
+  onChange,
+  onSubmit,
+  selectedObjectRecordIds,
+}: {
+  onChange?: (
+    changedRecordForSelect: ObjectRecordForSelect,
+    newSelectedValue: boolean,
+  ) => void;
+  onCancel?: (objectRecordsForSelect: ObjectRecordForSelect[]) => void;
+  onSubmit?: (objectRecordsForSelect: ObjectRecordForSelect[]) => void;
+  selectedObjectRecordIds: SelectedObjectRecordId[];
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [searchFilter, setSearchFilter] = useState<string>('');
+
+  const {
+    filteredSelectedObjectRecords,
+    loading,
+    objectRecordsToSelect,
+    selectedObjectRecords,
+  } = useMultiObjectSearch({
+    searchFilterValue: searchFilter,
+    selectedObjectRecordIds,
+    excludedObjectRecordIds: [],
+    limit: 10,
+  });
+
+  const selectedObjectRecordsForSelect = useMemo(
+    () =>
+      selectedObjectRecords.filter((selectedObjectRecord) =>
+        selectedObjectRecordIds.some(
+          (selectedObjectRecordId) =>
+            selectedObjectRecordId.id ===
+            selectedObjectRecord.recordIdentifier.id,
+        ),
+      ),
+    [selectedObjectRecords, selectedObjectRecordIds],
+  );
+
+  const [internalSelectedRecords, setInternalSelectedRecords] = useState<
+    ObjectRecordForSelect[]
+  >([]);
+
+  useEffect(() => {
+    if (!loading) {
+      setInternalSelectedRecords(selectedObjectRecordsForSelect);
+    }
+  }, [selectedObjectRecordsForSelect, loading]);
+
+  const debouncedSetSearchFilter = debounce(setSearchFilter, 100, {
+    leading: true,
+  });
+
+  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    debouncedSetSearchFilter(event.currentTarget.value);
+  };
+
+  const handleSelectChange = (
+    changedRecordForSelect: ObjectRecordForSelect,
+    newSelectedValue: boolean,
+  ) => {
+    const newSelectedRecords = newSelectedValue
+      ? [...internalSelectedRecords, changedRecordForSelect]
+      : internalSelectedRecords.filter(
+          (selectedRecord) =>
+            selectedRecord.record.id !== changedRecordForSelect.record.id,
+        );
+
+    setInternalSelectedRecords(newSelectedRecords);
+
+    onChange?.(changedRecordForSelect, newSelectedValue);
+  };
+
+  const entitiesInDropdown = useMemo(
+    () =>
+      [
+        ...(filteredSelectedObjectRecords ?? []),
+        ...(objectRecordsToSelect ?? []),
+      ].filter((entity) => isNonEmptyString(entity.recordIdentifier.id)),
+    [filteredSelectedObjectRecords, objectRecordsToSelect],
+  );
+
+  useListenClickOutside({
+    refs: [containerRef],
+    callback: (event) => {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      event.preventDefault();
+
+      onSubmit?.(internalSelectedRecords);
+    },
+  });
+
+  const selectableItemIds = entitiesInDropdown.map(
+    (entity) => entity.record.id,
+  );
+
+  return (
+    <DropdownMenu ref={containerRef} data-select-disable>
+      <DropdownMenuSearchInput
+        value={searchFilter}
+        onChange={handleFilterChange}
+        autoFocus
+      />
+      <DropdownMenuSeparator />
+      <DropdownMenuItemsContainer hasMaxHeight>
+        {loading ? (
+          <MenuItem text="Loading..." />
+        ) : (
+          <>
+            <SelectableList
+              selectableListId="multiple-entity-select-list"
+              selectableItemIdArray={selectableItemIds}
+              hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
+              onEnter={(recordId) => {
+                const recordIsSelected = internalSelectedRecords?.some(
+                  (selectedRecord) => selectedRecord.record.id === recordId,
+                );
+
+                const correspondingRecordForSelect = entitiesInDropdown?.find(
+                  (entity) => entity.record.id === recordId,
+                );
+
+                if (correspondingRecordForSelect) {
+                  handleSelectChange(
+                    correspondingRecordForSelect,
+                    !recordIsSelected,
+                  );
+                }
+              }}
+            >
+              {entitiesInDropdown?.map((objectRecordForSelect) => (
+                <StyledSelectableItem
+                  itemId={objectRecordForSelect.record.id}
+                  key={objectRecordForSelect.record.id + v4()}
+                >
+                  <MenuItemMultiSelectAvatar
+                    selected={internalSelectedRecords?.some(
+                      (selectedRecord) => {
+                        return (
+                          selectedRecord.record.id ===
+                          objectRecordForSelect.record.id
+                        );
+                      },
+                    )}
+                    onSelectChange={(newCheckedValue) =>
+                      handleSelectChange(objectRecordForSelect, newCheckedValue)
+                    }
+                    avatar={
+                      <Avatar
+                        avatarUrl={
+                          objectRecordForSelect.recordIdentifier.avatarUrl
+                        }
+                        colorId={objectRecordForSelect.record.id}
+                        placeholder={
+                          objectRecordForSelect.recordIdentifier.name
+                        }
+                        size="md"
+                        type={
+                          objectRecordForSelect.recordIdentifier.avatarType ??
+                          'rounded'
+                        }
+                      />
+                    }
+                    text={objectRecordForSelect.recordIdentifier.name}
+                  />
+                </StyledSelectableItem>
+              ))}
+            </SelectableList>
+            {entitiesInDropdown?.length === 0 && <MenuItem text="No result" />}
+          </>
+        )}
+      </DropdownMenuItemsContainer>
+    </DropdownMenu>
+  );
+};

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useLimitPerMetadataItem.ts

@@ -0,0 +1,24 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { DEFAULT_SEARCH_REQUEST_LIMIT } from '@/search/hooks/useFilteredSearchEntityQuery';
+import { isDefined } from '~/utils/isDefined';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const useLimitPerMetadataItem = ({
+  objectMetadataItems,
+  limit = DEFAULT_SEARCH_REQUEST_LIMIT,
+}: {
+  objectMetadataItems: ObjectMetadataItem[];
+  limit?: number;
+}) => {
+  const limitPerMetadataItem = Object.fromEntries(
+    objectMetadataItems
+      .map(({ nameSingular }) => {
+        return [`limit${capitalize(nameSingular)}`, limit];
+      })
+      .filter(isDefined),
+  );
+
+  return {
+    limitPerMetadataItem,
+  };
+};

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.ts

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { objectMetadataItemsByNamePluralMapSelector } from '@/object-metadata/states/objectMetadataItemsByNamePluralMapSelector';
+import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
+import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
+import { ObjectRecordConnection } from '@/object-record/types/ObjectRecordConnection';
+import { isDefined } from '~/utils/isDefined';
+
+export type MultiObjectRecordQueryResult = {
+  [namePlural: string]: ObjectRecordConnection;
+};
+
+export const useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray =
+  ({
+    multiObjectRecordsQueryResult,
+  }: {
+    multiObjectRecordsQueryResult:
+      | MultiObjectRecordQueryResult
+      | null
+      | undefined;
+  }) => {
+    const objectMetadataItemsByNamePluralMap = useRecoilValue(
+      objectMetadataItemsByNamePluralMapSelector,
+    );
+
+    const objectRecordForSelectArray = useMemo(() => {
+      return Object.entries(multiObjectRecordsQueryResult ?? {}).flatMap(
+        ([namePlural, objectRecordConnection]) => {
+          const objectMetadataItem =
+            objectMetadataItemsByNamePluralMap.get(namePlural);
+
+          if (!isDefined(objectMetadataItem)) return [];
+
+          return objectRecordConnection.edges.map(({ node }) => ({
+            objectMetadataItem,
+            record: node,
+            recordIdentifier: getObjectRecordIdentifier({
+              objectMetadataItem,
+              record: node,
+            }),
+          })) as ObjectRecordForSelect[];
+        },
+      );
+    }, [multiObjectRecordsQueryResult, objectMetadataItemsByNamePluralMap]);
+
+    return {
+      objectRecordForSelectArray,
+    };
+  };

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearch.ts

@@ -0,0 +1,72 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery } from '@/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery';
+import { useMultiObjectSearchMatchesSearchFilterAndToSelectQuery } from '@/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndToSelectQuery';
+import { useMultiObjectSearchSelectedItemsQuery } from '@/object-record/relation-picker/hooks/useMultiObjectSearchSelectedItemsQuery';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
+
+export const DEFAULT_SEARCH_REQUEST_LIMIT = 5;
+
+export type ObjectRecordForSelect = {
+  objectMetadataItem: ObjectMetadataItem;
+  record: ObjectRecord;
+  recordIdentifier: ObjectRecordIdentifier;
+};
+
+export type SelectedObjectRecordId = {
+  objectNameSingular: string;
+  id: string;
+};
+
+export type MultiObjectSearch = {
+  selectedObjectRecords: ObjectRecordForSelect[];
+  filteredSelectedObjectRecords: ObjectRecordForSelect[];
+  objectRecordsToSelect: ObjectRecordForSelect[];
+  loading: boolean;
+};
+
+export const useMultiObjectSearch = ({
+  searchFilterValue,
+  selectedObjectRecordIds,
+  limit,
+  excludedObjectRecordIds = [],
+}: {
+  searchFilterValue: string;
+  selectedObjectRecordIds: SelectedObjectRecordId[];
+  limit?: number;
+  excludedObjectRecordIds?: SelectedObjectRecordId[];
+}): MultiObjectSearch => {
+  const { selectedObjectRecords, selectedObjectRecordsLoading } =
+    useMultiObjectSearchSelectedItemsQuery({
+      selectedObjectRecordIds,
+    });
+
+  const {
+    selectedAndMatchesSearchFilterObjectRecords,
+    selectedAndMatchesSearchFilterObjectRecordsLoading,
+  } = useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery({
+    searchFilterValue,
+    selectedObjectRecordIds,
+    limit,
+  });
+
+  const {
+    toSelectAndMatchesSearchFilterObjectRecords,
+    toSelectAndMatchesSearchFilterObjectRecordsLoading,
+  } = useMultiObjectSearchMatchesSearchFilterAndToSelectQuery({
+    excludedObjectRecordIds,
+    searchFilterValue,
+    selectedObjectRecordIds,
+    limit,
+  });
+
+  return {
+    selectedObjectRecords,
+    filteredSelectedObjectRecords: selectedAndMatchesSearchFilterObjectRecords,
+    objectRecordsToSelect: toSelectAndMatchesSearchFilterObjectRecords,
+    loading:
+      selectedAndMatchesSearchFilterObjectRecordsLoading ||
+      toSelectAndMatchesSearchFilterObjectRecordsLoading ||
+      selectedObjectRecordsLoading,
+  };
+};

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery.ts

@@ -0,0 +1,113 @@
+import { useQuery } from '@apollo/client';
+import { isNonEmptyArray } from '@sniptt/guards';
+import { useRecoilValue } from 'recoil';
+
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { useGenerateFindManyRecordsForMultipleMetadataItemsQuery } from '@/object-record/hooks/useGenerateFindManyRecordsForMultipleMetadataItemsQuery';
+import { useLimitPerMetadataItem } from '@/object-record/relation-picker/hooks/useLimitPerMetadataItem';
+import {
+  MultiObjectRecordQueryResult,
+  useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray,
+} from '@/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+import { SelectedObjectRecordId } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
+import { useOrderByFieldPerMetadataItem } from '@/object-record/relation-picker/hooks/useOrderByFieldPerMetadataItem';
+import { useSearchFilterPerMetadataItem } from '@/object-record/relation-picker/hooks/useSearchFilterPerMetadataItem';
+import { isDefined } from '~/utils/isDefined';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery = ({
+  selectedObjectRecordIds,
+  searchFilterValue,
+  limit,
+}: {
+  selectedObjectRecordIds: SelectedObjectRecordId[];
+  searchFilterValue: string;
+  limit?: number;
+}) => {
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  const { searchFilterPerMetadataItemNameSingular } =
+    useSearchFilterPerMetadataItem({
+      objectMetadataItems,
+      searchFilterValue,
+    });
+
+  const objectMetadataItemsUsedInSelectedIdsQuery = objectMetadataItems.filter(
+    ({ nameSingular }) => {
+      return selectedObjectRecordIds.some(({ objectNameSingular }) => {
+        return objectNameSingular === nameSingular;
+      });
+    },
+  );
+
+  const selectedAndMatchesSearchFilterTextFilterPerMetadataItem =
+    Object.fromEntries(
+      objectMetadataItems
+        .map(({ nameSingular }) => {
+          const selectedIds = selectedObjectRecordIds
+            .filter(
+              ({ objectNameSingular }) => objectNameSingular === nameSingular,
+            )
+            .map(({ id }) => id);
+
+          if (!isNonEmptyArray(selectedIds)) return null;
+
+          const searchFilter =
+            searchFilterPerMetadataItemNameSingular[nameSingular] ?? {};
+
+          return [
+            `filter${capitalize(nameSingular)}`,
+            {
+              and: [
+                {
+                  ...searchFilter,
+                },
+                {
+                  id: {
+                    in: selectedIds,
+                  },
+                },
+              ],
+            },
+          ];
+        })
+        .filter(isDefined),
+    );
+
+  const { orderByFieldPerMetadataItem } = useOrderByFieldPerMetadataItem({
+    objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
+  });
+
+  const { limitPerMetadataItem } = useLimitPerMetadataItem({
+    objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
+    limit,
+  });
+
+  const multiSelectQueryForSelectedIds =
+    useGenerateFindManyRecordsForMultipleMetadataItemsQuery({
+      objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
+    });
+
+  const {
+    loading: selectedAndMatchesSearchFilterObjectRecordsLoading,
+    data: selectedAndMatchesSearchFilterObjectRecordsQueryResult,
+  } = useQuery<MultiObjectRecordQueryResult>(multiSelectQueryForSelectedIds, {
+    variables: {
+      ...selectedAndMatchesSearchFilterTextFilterPerMetadataItem,
+      ...orderByFieldPerMetadataItem,
+      ...limitPerMetadataItem,
+    },
+  });
+
+  const {
+    objectRecordForSelectArray: selectedAndMatchesSearchFilterObjectRecords,
+  } = useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray({
+    multiObjectRecordsQueryResult:
+      selectedAndMatchesSearchFilterObjectRecordsQueryResult,
+  });
+
+  return {
+    selectedAndMatchesSearchFilterObjectRecordsLoading,
+    selectedAndMatchesSearchFilterObjectRecords,
+  };
+};

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndToSelectQuery.ts

@@ -0,0 +1,130 @@
+import { useQuery } from '@apollo/client';
+import { isNonEmptyArray } from '@sniptt/guards';
+import { useRecoilValue } from 'recoil';
+
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useGenerateFindManyRecordsForMultipleMetadataItemsQuery } from '@/object-record/hooks/useGenerateFindManyRecordsForMultipleMetadataItemsQuery';
+import { useLimitPerMetadataItem } from '@/object-record/relation-picker/hooks/useLimitPerMetadataItem';
+import {
+  MultiObjectRecordQueryResult,
+  useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray,
+} from '@/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+import { SelectedObjectRecordId } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
+import { useOrderByFieldPerMetadataItem } from '@/object-record/relation-picker/hooks/useOrderByFieldPerMetadataItem';
+import { useSearchFilterPerMetadataItem } from '@/object-record/relation-picker/hooks/useSearchFilterPerMetadataItem';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+import { isDefined } from '~/utils/isDefined';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const useMultiObjectSearchMatchesSearchFilterAndToSelectQuery = ({
+  selectedObjectRecordIds,
+  excludedObjectRecordIds,
+  searchFilterValue,
+  limit,
+}: {
+  selectedObjectRecordIds: SelectedObjectRecordId[];
+  excludedObjectRecordIds: SelectedObjectRecordId[];
+  searchFilterValue: string;
+  limit?: number;
+}) => {
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  const nonSystemObjectMetadataItems = objectMetadataItems.filter(
+    ({ nameSingular, isSystem }) =>
+      !isSystem && nameSingular !== CoreObjectNameSingular.Opportunity,
+  );
+
+  const { searchFilterPerMetadataItemNameSingular } =
+    useSearchFilterPerMetadataItem({
+      objectMetadataItems: nonSystemObjectMetadataItems,
+      searchFilterValue,
+    });
+
+  const objectRecordsToSelectAndMatchesSearchFilterTextFilterPerMetadataItem =
+    Object.fromEntries(
+      nonSystemObjectMetadataItems
+        .map(({ nameSingular }) => {
+          const selectedIds = selectedObjectRecordIds
+            .filter(
+              ({ objectNameSingular }) => objectNameSingular === nameSingular,
+            )
+            .map(({ id }) => id);
+
+          const excludedIds = excludedObjectRecordIds
+            .filter(
+              ({ objectNameSingular }) => objectNameSingular === nameSingular,
+            )
+            .map(({ id }) => id);
+
+          const searchFilter =
+            searchFilterPerMetadataItemNameSingular[nameSingular] ?? {};
+
+          const excludedIdsUnion = [...selectedIds, ...excludedIds];
+
+          const noFilter =
+            !isNonEmptyArray(excludedIdsUnion) &&
+            isDeeplyEqual(searchFilter, {});
+
+          return [
+            `filter${capitalize(nameSingular)}`,
+            !noFilter
+              ? {
+                  and: [
+                    {
+                      ...searchFilter,
+                    },
+                    isNonEmptyArray(excludedIdsUnion)
+                      ? {
+                          not: {
+                            id: {
+                              in: [...selectedIds, ...excludedIds],
+                            },
+                          },
+                        }
+                      : {},
+                  ],
+                }
+              : {},
+          ];
+        })
+        .filter(isDefined),
+    );
+
+  const { orderByFieldPerMetadataItem } = useOrderByFieldPerMetadataItem({
+    objectMetadataItems: nonSystemObjectMetadataItems,
+  });
+
+  const { limitPerMetadataItem } = useLimitPerMetadataItem({
+    objectMetadataItems: nonSystemObjectMetadataItems,
+    limit,
+  });
+
+  const multiSelectQuery =
+    useGenerateFindManyRecordsForMultipleMetadataItemsQuery({
+      objectMetadataItems: nonSystemObjectMetadataItems,
+    });
+
+  const {
+    loading: toSelectAndMatchesSearchFilterObjectRecordsLoading,
+    data: toSelectAndMatchesSearchFilterObjectRecordsQueryResult,
+  } = useQuery<MultiObjectRecordQueryResult>(multiSelectQuery, {
+    variables: {
+      ...objectRecordsToSelectAndMatchesSearchFilterTextFilterPerMetadataItem,
+      ...orderByFieldPerMetadataItem,
+      ...limitPerMetadataItem,
+    },
+  });
+
+  const {
+    objectRecordForSelectArray: toSelectAndMatchesSearchFilterObjectRecords,
+  } = useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray({
+    multiObjectRecordsQueryResult:
+      toSelectAndMatchesSearchFilterObjectRecordsQueryResult,
+  });
+
+  return {
+    toSelectAndMatchesSearchFilterObjectRecordsLoading,
+    toSelectAndMatchesSearchFilterObjectRecords,
+  };
+};

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchSelectedItemsQuery.ts

@@ -0,0 +1,88 @@
+import { useQuery } from '@apollo/client';
+import { isNonEmptyArray } from '@sniptt/guards';
+import { useRecoilValue } from 'recoil';
+
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { useGenerateFindManyRecordsForMultipleMetadataItemsQuery } from '@/object-record/hooks/useGenerateFindManyRecordsForMultipleMetadataItemsQuery';
+import { useLimitPerMetadataItem } from '@/object-record/relation-picker/hooks/useLimitPerMetadataItem';
+import {
+  MultiObjectRecordQueryResult,
+  useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray,
+} from '@/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+import { SelectedObjectRecordId } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
+import { useOrderByFieldPerMetadataItem } from '@/object-record/relation-picker/hooks/useOrderByFieldPerMetadataItem';
+import { isDefined } from '~/utils/isDefined';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const useMultiObjectSearchSelectedItemsQuery = ({
+  selectedObjectRecordIds,
+}: {
+  selectedObjectRecordIds: SelectedObjectRecordId[];
+}) => {
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  const objectMetadataItemsUsedInSelectedIdsQuery = objectMetadataItems.filter(
+    ({ nameSingular }) => {
+      return selectedObjectRecordIds.some(({ objectNameSingular }) => {
+        return objectNameSingular === nameSingular;
+      });
+    },
+  );
+
+  const selectedIdFilterPerMetadataItem = Object.fromEntries(
+    objectMetadataItemsUsedInSelectedIdsQuery
+      .map(({ nameSingular }) => {
+        const selectedIds = selectedObjectRecordIds
+          .filter(
+            ({ objectNameSingular }) => objectNameSingular === nameSingular,
+          )
+          .map(({ id }) => id);
+
+        if (!isNonEmptyArray(selectedIds)) return null;
+
+        return [
+          `filter${capitalize(nameSingular)}`,
+          {
+            id: {
+              in: selectedIds,
+            },
+          },
+        ];
+      })
+      .filter(isDefined),
+  );
+
+  const { orderByFieldPerMetadataItem } = useOrderByFieldPerMetadataItem({
+    objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
+  });
+
+  const { limitPerMetadataItem } = useLimitPerMetadataItem({
+    objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
+  });
+
+  const multiSelectQueryForSelectedIds =
+    useGenerateFindManyRecordsForMultipleMetadataItemsQuery({
+      objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
+    });
+
+  const {
+    loading: selectedObjectRecordsLoading,
+    data: selectedObjectRecordsQueryResult,
+  } = useQuery<MultiObjectRecordQueryResult>(multiSelectQueryForSelectedIds, {
+    variables: {
+      ...selectedIdFilterPerMetadataItem,
+      ...orderByFieldPerMetadataItem,
+      ...limitPerMetadataItem,
+    },
+  });
+
+  const { objectRecordForSelectArray: selectedObjectRecords } =
+    useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray({
+      multiObjectRecordsQueryResult: selectedObjectRecordsQueryResult,
+    });
+
+  return {
+    selectedObjectRecordsLoading,
+    selectedObjectRecords,
+  };
+};

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useOrderByFieldPerMetadataItem.ts

@@ -0,0 +1,29 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { getObjectOrderByField } from '@/object-metadata/utils/getObjectOrderByField';
+import { isDefined } from '~/utils/isDefined';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const useOrderByFieldPerMetadataItem = ({
+  objectMetadataItems,
+}: {
+  objectMetadataItems: ObjectMetadataItem[];
+}) => {
+  const orderByFieldPerMetadataItem = Object.fromEntries(
+    objectMetadataItems
+      .map((objectMetadataItem) => {
+        const orderByField = getObjectOrderByField(objectMetadataItem);
+
+        return [
+          `orderBy${capitalize(objectMetadataItem.nameSingular)}`,
+          {
+            ...orderByField,
+          },
+        ];
+      })
+      .filter(isDefined),
+  );
+
+  return {
+    orderByFieldPerMetadataItem,
+  };
+};

packages/twenty-front/src/modules/object-record/relation-picker/hooks/useSearchFilterPerMetadataItem.ts

@@ -0,0 +1,67 @@
+import { isNonEmptyString } from '@sniptt/guards';
+
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
+import { ObjectRecordQueryFilter } from '@/object-record/record-filter/types/ObjectRecordQueryFilter';
+import { FieldMetadataType } from '~/generated/graphql';
+import { isDefined } from '~/utils/isDefined';
+
+export const useSearchFilterPerMetadataItem = ({
+  objectMetadataItems,
+  searchFilterValue,
+}: {
+  objectMetadataItems: ObjectMetadataItem[];
+  searchFilterValue: string;
+}) => {
+  const searchFilterPerMetadataItemNameSingular =
+    Object.fromEntries<ObjectRecordQueryFilter>(
+      objectMetadataItems
+        .map((objectMetadataItem) => {
+          if (!isNonEmptyString(searchFilterValue)) return null;
+
+          const labelIdentifierFieldMetadataItem =
+            getLabelIdentifierFieldMetadataItem(objectMetadataItem);
+
+          let searchFilter: ObjectRecordQueryFilter = {};
+
+          if (labelIdentifierFieldMetadataItem) {
+            switch (labelIdentifierFieldMetadataItem.type) {
+              case FieldMetadataType.FullName: {
+                searchFilter = {
+                  or: [
+                    {
+                      [labelIdentifierFieldMetadataItem.name]: {
+                        firstName: {
+                          ilike: `%${searchFilterValue}%`,
+                        },
+                      },
+                    },
+                    {
+                      [labelIdentifierFieldMetadataItem.name]: {
+                        lastName: {
+                          ilike: `%${searchFilterValue}%`,
+                        },
+                      },
+                    },
+                  ],
+                };
+                break;
+              }
+              default:
+                searchFilter = {
+                  [labelIdentifierFieldMetadataItem.name]: {
+                    ilike: `%${searchFilterValue}%`,
+                  },
+                };
+            }
+          }
+
+          return [objectMetadataItem.nameSingular, searchFilter] as const;
+        })
+        .filter(isDefined),
+    );
+
+  return {
+    searchFilterPerMetadataItemNameSingular,
+  };
+};

packages/twenty-front/src/modules/object-record/types/ObjectRecord.ts

@@ -0,0 +1 @@
+export type ObjectRecord = Record<string, any> & { id: string };

packages/twenty-front/src/modules/object-record/types/ObjectRecordConnection.ts

@@ -0,0 +1,11 @@
+import { ObjectRecordEdge } from '@/object-record/types/ObjectRecordEdge';
+
+export type ObjectRecordConnection = {
+  edges: ObjectRecordEdge[];
+  pageInfo: {
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
+    startCursor?: string;
+    endCursor?: string;
+  };
+};

packages/twenty-front/src/modules/object-record/types/ObjectRecordEdge.ts

@@ -0,0 +1,6 @@
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+
+export type ObjectRecordEdge = {
+  node: ObjectRecord;
+  cursor: string;
+};

packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts

@@ -5,5 +5,6 @@ export type ObjectRecordIdentifier = {
   name: string;
   avatarUrl?: string | null;
   avatarType?: AvatarType | null;
+  linkToEntity?: string;
   linkToShowPage?: string;
 };

packages/twenty-front/src/modules/people/hooks/useSpreadsheetPersonImport.ts

@@ -29,33 +29,37 @@ export const useSpreadsheetPersonImport = () => {
       ...options,
       onSubmit: async (data) => {
         // TODO: Add better type checking in spreadsheet import later
-        const createInputs = data.validData.map((person) => ({
-          id: v4(),
-          name: {
-            firstName: person.firstName as string | undefined,
-            lastName: person.lastName as string | undefined,
-          },
-          email: person.email as string | undefined,
-          ...(person.linkedinUrl
-            ? {
-                linkedinLink: {
-                  label: 'linkedinUrl',
-                  url: person.linkedinUrl as string | undefined,
-                },
-              }
-            : {}),
-          ...(person.xUrl
-            ? {
-                xLink: {
-                  label: 'xUrl',
-                  url: person.xUrl as string | undefined,
-                },
-              }
-            : {}),
-          jobTitle: person.jobTitle as string | undefined,
-          phone: person.phone as string | undefined,
-          city: person.city as string | undefined,
-        }));
+        const createInputs = data.validData.map(
+          (person) =>
+            ({
+              id: v4(),
+              name: {
+                firstName: person.firstName as string | undefined,
+                lastName: person.lastName as string | undefined,
+              },
+              email: person.email as string | undefined,
+              ...(person.linkedinUrl
+                ? {
+                    linkedinLink: {
+                      label: 'linkedinUrl',
+                      url: person.linkedinUrl as string | undefined,
+                    },
+                  }
+                : {}),
+              ...(person.xUrl
+                ? {
+                    xLink: {
+                      label: 'xUrl',
+                      url: person.xUrl as string | undefined,
+                    },
+                  }
+                : {}),
+              jobTitle: person.jobTitle as string | undefined,
+              phone: person.phone as string | undefined,
+              city: person.city as string | undefined,
+            }) as Person,
+        );
+
         // TODO: abstract this part for any object
         try {
           await createManyPeople(createInputs);

packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx

@@ -5,6 +5,7 @@ import { isNonEmptyString } from '@sniptt/guards';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Avatar, AvatarType } from '@/users/components/Avatar';
+import { Nullable } from '~/types/Nullable';
 
 import { Chip, ChipVariant } from './Chip';
 
@@ -13,7 +14,7 @@ export type EntityChipProps = {
   entityId: string;
   name: string;
   avatarUrl?: string;
-  avatarType?: AvatarType;
+  avatarType?: Nullable<AvatarType>;
   variant?: EntityChipVariant;
   LeftIcon?: IconComponent;
   className?: string;

packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx

@@ -124,13 +124,13 @@ export const Checkbox = ({
     React.useState<boolean>(false);
 
   React.useEffect(() => {
-    setIsInternalChecked(checked);
+    setIsInternalChecked(checked ?? false);
   }, [checked]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange?.(event);
     onCheckedChange?.(event.target.checked);
-    setIsInternalChecked(event.target.checked);
+    setIsInternalChecked(event.target.checked ?? false);
   };
 
   const checkboxId = 'checkbox' + v4();

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityType } from '@/activities/types/Activity';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { IconCheckbox, IconNotes, IconPlus } from '@/ui/display/icon/index';
 import { IconButton } from '@/ui/input/button/components/IconButton';
@@ -21,13 +21,13 @@ const StyledContainer = styled.div`
 export const ShowPageAddButton = ({
   entity,
 }: {
-  entity: ActivityTargetableEntity;
+  entity: ActivityTargetableObject;
 }) => {
   const { closeDropdown, toggleDropdown } = useDropdown('add-show-page');
   const openCreateActivity = useOpenCreateActivityDrawer();
 
   const handleSelect = (type: ActivityType) => {
-    openCreateActivity({ type, targetableEntities: [entity] });
+    openCreateActivity({ type, targetableObjects: [entity] });
     closeDropdown();
   };
 

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -3,9 +3,10 @@ import styled from '@emotion/styled';
 import { Threads } from '@/activities/emails/components/Threads';
 import { Attachments } from '@/activities/files/components/Attachments';
 import { Notes } from '@/activities/notes/components/Notes';
-import { EntityTasks } from '@/activities/tasks/components/EntityTasks';
+import { ObjectTasks } from '@/activities/tasks/components/ObjectTasks';
 import { Timeline } from '@/activities/timeline/components/Timeline';
-import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { isStandardObject } from '@/object-metadata/utils/isStandardObject';
 import {
   IconCheckbox,
   IconMail,
@@ -40,7 +41,7 @@ const StyledTabListContainer = styled.div`
 `;
 
 type ShowPageRightContainerProps = {
-  entity?: ActivityTargetableEntity;
+  targetableObject?: ActivityTargetableObject;
   timeline?: boolean;
   tasks?: boolean;
   notes?: boolean;
@@ -48,7 +49,7 @@ type ShowPageRightContainerProps = {
 };
 
 export const ShowPageRightContainer = ({
-  entity,
+  targetableObject,
   timeline,
   tasks,
   notes,
@@ -60,42 +61,44 @@ export const ShowPageRightContainer = ({
     ShowPageRecoilScopeContext,
   );
 
-  if (!entity) return <></>;
+  if (!targetableObject) return <></>;
+
+  const targetableObjectIsStandardObject = isStandardObject(
+    targetableObject.targetObjectNameSingular,
+  );
+
   const TASK_TABS = [
     {
       id: 'timeline',
       title: 'Timeline',
       Icon: IconTimelineEvent,
       hide: !timeline,
-      disabled: entity.type === 'Custom',
     },
     {
       id: 'tasks',
       title: 'Tasks',
       Icon: IconCheckbox,
       hide: !tasks,
-      disabled: entity.type === 'Custom',
     },
     {
       id: 'notes',
       title: 'Notes',
       Icon: IconNotes,
       hide: !notes,
-      disabled: entity.type === 'Custom',
     },
     {
       id: 'files',
       title: 'Files',
       Icon: IconPaperclip,
       hide: !notes,
-      disabled: entity.type === 'Custom',
+      disabled: !targetableObjectIsStandardObject,
     },
     {
       id: 'emails',
       title: 'Emails',
       Icon: IconMail,
       hide: !emails,
-      disabled: !isMessagingEnabled || entity.type === 'Custom',
+      disabled: !isMessagingEnabled || !targetableObjectIsStandardObject,
     },
   ];
 
@@ -104,11 +107,17 @@ export const ShowPageRightContainer = ({
       <StyledTabListContainer>
         <TabList context={ShowPageRecoilScopeContext} tabs={TASK_TABS} />
       </StyledTabListContainer>
-      {activeTabId === 'timeline' && <Timeline entity={entity} />}
-      {activeTabId === 'tasks' && <EntityTasks entity={entity} />}
-      {activeTabId === 'notes' && <Notes entity={entity} />}
-      {activeTabId === 'files' && <Attachments targetableEntity={entity} />}
-      {activeTabId === 'emails' && <Threads entity={entity} />}
+      {activeTabId === 'timeline' && (
+        <Timeline targetableObject={targetableObject} />
+      )}
+      {activeTabId === 'tasks' && (
+        <ObjectTasks targetableObject={targetableObject} />
+      )}
+      {activeTabId === 'notes' && <Notes targetableObject={targetableObject} />}
+      {activeTabId === 'files' && (
+        <Attachments targetableObject={targetableObject} />
+      )}
+      {activeTabId === 'emails' && <Threads entity={targetableObject} />}
     </StyledShowPageRightContainer>
   );
 };

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
+import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 import { Checkbox } from '@/ui/input/components/Checkbox';
 
 import {
@@ -14,6 +15,7 @@ const StyledLeftContentWithCheckboxContainer = styled.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
 `;
 
 type MenuItemMultiSelectAvatarProps = {
@@ -48,7 +50,7 @@ export const MenuItemMultiSelectAvatar = ({
         <StyledMenuItemLeftContent>
           {avatar}
           <StyledMenuItemLabel hasLeftIcon={!!avatar}>
-            {text}
+            <OverflowingTextWithTooltip text={text} />
           </StyledMenuItemLabel>
         </StyledMenuItemLeftContent>
       </StyledLeftContentWithCheckboxContainer>

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -71,10 +71,11 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
 export const StyledMenuItemLabel = styled.div<{ hasLeftIcon: boolean }>`
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
+
   overflow: hidden;
   padding-left: ${({ theme, hasLeftIcon }) =>
     hasLeftIcon ? '' : theme.spacing(1)};
-  text-overflow: ellipsis;
+
   white-space: nowrap;
 `;
 

packages/twenty-front/src/modules/users/components/Avatar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 
+import { Nullable } from '~/types/Nullable';
 import { stringToHslColor } from '~/utils/string-to-hsl';
 
 import { getImageAbsoluteURIOrBase64 } from '../utils/getProfilePictureAbsoluteURI';
@@ -16,7 +17,7 @@ export type AvatarProps = {
   size?: AvatarSize;
   placeholder: string | undefined;
   colorId?: string;
-  type?: AvatarType;
+  type?: Nullable<AvatarType>;
   onClick?: () => void;
 };
 

packages/twenty-front/src/testing/mock-data/activities.ts

@@ -34,6 +34,7 @@ type MockedActivity = Pick<
       | 'activityId'
       | 'personId'
       | 'companyId'
+      | 'targetObjectNameSingular'
     > & {
       activity: Pick<Activity, 'id' | 'createdAt' | 'updatedAt'>;
       person?: Pick<Person, 'id' | 'name' | 'avatarUrl'> | null;
@@ -98,6 +99,7 @@ export const mockedActivities: Array<MockedActivity> = [
         id: '89bb825c-171e-4bcc-9cf7-43448d6fb300',
         createdAt: '2023-04-26T10:12:42.33625+00:00',
         updatedAt: '2023-04-26T10:23:42.33625+00:00',
+        targetObjectNameSingular: 'company',
         personId: null,
         companyId: '89bb825c-171e-4bcc-9cf7-43448d6fb280',
         company: {
@@ -118,6 +120,7 @@ export const mockedActivities: Array<MockedActivity> = [
         id: '89bb825c-171e-4bcc-9cf7-43448d6fb301',
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
+        targetObjectNameSingular: 'company',
         personId: null,
         companyId: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
         company: {
@@ -160,6 +163,7 @@ export const mockedActivities: Array<MockedActivity> = [
         id: '89bb825c-171e-4bcc-9cf7-43448d6fb278t',
         createdAt: '2023-04-26T10:12:42.33625+00:00',
         updatedAt: '2023-04-26T10:23:42.33625+00:00',
+        targetObjectNameSingular: 'person',
         personId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b', // Alexandre
         person: {
           id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
@@ -185,6 +189,7 @@ export const mockedActivities: Array<MockedActivity> = [
         updatedAt: new Date().toISOString(),
         personId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d', // Jean d'Eau
         companyId: null,
+        targetObjectNameSingular: 'person',
         company: null,
         person: {
           id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',

packages/twenty-server/src/workspace/workspace-query-builder/factories/relation-field-alias.factory.ts

@@ -111,8 +111,9 @@ export class RelationFieldAliasFactory {
         }
       `;
     }
+
     let relationAlias = fieldMetadata.isCustom
-      ? `${fieldKey}: ${fieldMetadata.targetColumnMap.value}`
+      ? `${fieldKey}: ${referencedObjectMetadata.targetTableName}`
       : fieldKey;
 
     // For one to one relations, pg_graphql use the targetTableName on the side that is not storing the foreign key

packages/twenty-server/test/utils/reset-db.ts

@@ -11,7 +11,6 @@ export default async () => {
 
   await prisma.$transaction(
     entities.map((entity) => {
-      console.log('entity: ', entity);
       return prisma[entity].deleteMany();
     }),
   );