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/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',