Fix tasks (#5199)

## Query depth deprecation

I'm deprecating depth parameter in our graphql query / cache tooling.
They were obsolete since we introduce the possibility to provide
RecordGqlFields

## Refactor combinedFindManyRecordHook

The hook can now take an array of operationSignatures

## Fix tasks issues

Fix optimistic rendering issue. Note that we still haven't handle
optimisticEffect on creation properly

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

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { TimelineCreateButtonGroup } from '@/activities/timeline/components/TimelineCreateButtonGroup';
-import { timelineActivitiesNetworkingState } from '@/activities/timeline/states/timelineActivitiesNetworkingState';
+import { timelineActivitiesForGroupState } from '@/activities/timeline/states/timelineActivitiesForGroupState';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
 import {
@@ -32,20 +32,11 @@ export const Timeline = ({
 }: {
   targetableObject: ActivityTargetableObject;
 }) => {
-  const { initialized, noActivities } = useRecoilValue(
-    timelineActivitiesNetworkingState,
+  const timelineActivitiesForGroup = useRecoilValue(
+    timelineActivitiesForGroupState,
   );
 
-  const showEmptyState = noActivities;
-
-  const showLoadingState = !initialized;
-
-  if (showLoadingState) {
-    // TODO: Display a beautiful loading page
-    return <></>;
-  }
-
-  if (showEmptyState) {
+  if (timelineActivitiesForGroup.length === 0) {
     return (
       <AnimatedPlaceholderEmptyContainer>
         <AnimatedPlaceholder type="emptyTimeline" />

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

@@ -6,7 +6,6 @@ import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/co
 import { objectShowPageTargetableObjectState } from '@/activities/timeline/states/objectShowPageTargetableObjectIdState';
 import { timelineActivitiesFammilyState } from '@/activities/timeline/states/timelineActivitiesFamilyState';
 import { timelineActivitiesForGroupState } from '@/activities/timeline/states/timelineActivitiesForGroupState';
-import { timelineActivitiesNetworkingState } from '@/activities/timeline/states/timelineActivitiesNetworkingState';
 import { timelineActivityWithoutTargetsFamilyState } from '@/activities/timeline/states/timelineActivityWithoutTargetsFamilyState';
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
@@ -27,16 +26,13 @@ export const TimelineQueryEffect = ({
     setTimelineTargetableObject(targetableObject);
   }, [targetableObject, setTimelineTargetableObject]);
 
-  const { activities, initialized, noActivities } = useActivities({
+  const { activities } = useActivities({
     targetableObjects: [targetableObject],
     activitiesFilters: {},
     activitiesOrderByVariables: FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY,
     skip: !isDefined(targetableObject),
   });
 
-  const [timelineActivitiesNetworking, setTimelineActivitiesNetworking] =
-    useRecoilState(timelineActivitiesNetworkingState);
-
   const [timelineActivitiesForGroup, setTimelineActivitiesForGroup] =
     useRecoilState(timelineActivitiesForGroupState);
 
@@ -49,6 +45,7 @@ export const TimelineQueryEffect = ({
       ...activities.map((activity) => ({
         id: activity.id,
         createdAt: activity.createdAt,
+        __typename: activity.__typename,
       })),
     ].sort(sortObjectRecordByDateField('createdAt', 'DescNullsLast'));
 
@@ -59,23 +56,9 @@ export const TimelineQueryEffect = ({
     if (!isDeeplyEqual(activitiesForGroup, timelineActivitiesForGroupSorted)) {
       setTimelineActivitiesForGroup(activitiesForGroup);
     }
-
-    if (
-      !isDeeplyEqual(timelineActivitiesNetworking.initialized, initialized) ||
-      !isDeeplyEqual(timelineActivitiesNetworking.noActivities, noActivities)
-    ) {
-      setTimelineActivitiesNetworking({
-        initialized,
-        noActivities,
-      });
-    }
   }, [
     activities,
-    initialized,
-    noActivities,
-    setTimelineActivitiesNetworking,
     targetableObject,
-    timelineActivitiesNetworking,
     timelineActivitiesForGroup,
     setTimelineActivitiesForGroup,
   ]);

packages/twenty-front/src/modules/activities/timeline/constants/FindManyTimelineActivitiesOrderBy.ts

@@ -1,5 +1,6 @@
-import { OrderByField } from '@/object-metadata/types/OrderByField';
+import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy';
 
-export const FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY: OrderByField = {
-  createdAt: 'DescNullsFirst',
-};
+export const FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY: RecordGqlOperationOrderBy =
+  {
+    createdAt: 'DescNullsFirst',
+  };

packages/twenty-front/src/modules/activities/timeline/hooks/useTimelineActivities.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { isNonEmptyArray, isNonEmptyString } from '@sniptt/guards';
 import { useRecoilCallback, useRecoilState } from 'recoil';
 
@@ -28,15 +28,10 @@ export const useTimelineActivities = ({
     }
   }, [targetableObject, setObjectShowPageTargetableObject]);
 
-  const {
-    activityTargets,
-    loadingActivityTargets,
-    initialized: initializedActivityTargets,
-  } = useActivityTargetsForTargetableObject({
-    targetableObject,
-  });
-
-  const [initialized, setInitialized] = useState(false);
+  const { activityTargets, loadingActivityTargets } =
+    useActivityTargetsForTargetableObject({
+      targetableObject,
+    });
 
   const activityIds = Array.from(
     new Set(
@@ -65,33 +60,18 @@ export const useTimelineActivities = ({
       onCompleted: useRecoilCallback(
         ({ set }) =>
           (activities) => {
-            if (!initialized) {
-              setInitialized(true);
-            }
-
             for (const activity of activities) {
               set(recordStoreFamilyState(activity.id), activity);
             }
           },
-        [initialized],
+        [],
       ),
-      depth: 3,
     });
 
-  const noActivityTargets =
-    initializedActivityTargets && !isNonEmptyArray(activityTargets);
-
-  useEffect(() => {
-    if (noActivityTargets) {
-      setInitialized(true);
-    }
-  }, [noActivityTargets]);
-
   const loading = loadingActivities || loadingActivityTargets;
 
   return {
     activities,
     loading,
-    initialized,
   };
 };

packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts

@@ -1,12 +0,0 @@
-import { createState } from 'twenty-ui';
-
-export const timelineActivitiesNetworkingState = createState<{
-  initialized: boolean;
-  noActivities: boolean;
-}>({
-  key: 'timelineActivitiesNetworkingState',
-  defaultValue: {
-    initialized: false,
-    noActivities: false,
-  },
-});

packages/twenty-front/src/modules/activities/timeline/utils/groupActivitiesByMonth.ts

@@ -1,7 +1,10 @@
 import { Activity } from '@/activities/types/Activity';
 import { isDefined } from '~/utils/isDefined';
 
-export type ActivityForActivityGroup = Pick<Activity, 'id' | 'createdAt'>;
+export type ActivityForActivityGroup = Pick<
+  Activity,
+  'id' | 'createdAt' | '__typename'
+>;
 
 export type ActivityGroup = {
   month: number;

packages/twenty-front/src/modules/activities/timeline/utils/makeTimelineActivitiesQueryVariables.ts

@@ -1,11 +1,12 @@
-import { ObjectRecordQueryVariables } from '@/object-record/types/ObjectRecordQueryVariables';
+import { RecordGqlOperationVariables } from '@/object-record/graphql/types/RecordGqlOperationVariables';
 import { sortByAscString } from '~/utils/array/sortByAscString';
 
+// Todo: this should be replace by the operationSignatureFactory pattern
 export const makeTimelineActivitiesQueryVariables = ({
   activityIds,
 }: {
   activityIds: string[];
-}): ObjectRecordQueryVariables => {
+}): RecordGqlOperationVariables => {
   return {
     filter: {
       id: {