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