Activity cache injection (#3791)

* WIP

* Minor fixes

* Added TODO

* Fix post merge

* Fix

* Fixed warnings

* Fixed comments

* Fixed comments

* Fixed naming

* Removed comment

* WIP

* WIP 2

* Finished working version

* Fixes

* Fixed typing

* Fixes

* Fixes

* Fixes

* Naming fixes

* WIP

* Fix import

* WIP

* Working version on title

* Fixed create record id overwrite

* Removed unecessary callback

* Masterpiece

* Fixed delete on click outside drawer or delete

* Cleaned

* Cleaned

* Cleaned

* Minor fixes

* Fixes

* Fixed naming

* WIP

* Fix

* Fixed create from target inline cell

* Removed console.log

* Fixed delete activity optimistic effect

* Fixed no title

* Fixed debounce and title body creation

---------

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

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

@@ -1,71 +0,0 @@
-import { isNonEmptyArray } from '@apollo/client/utilities';
-import styled from '@emotion/styled';
-
-import CommentCounter from '@/activities/comment/CommentCounter';
-import { Activity } from '@/activities/types/Activity';
-import { UserChip } from '@/users/components/UserChip';
-import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { beautifyExactDate } from '~/utils/date-utils';
-
-type TimelineActivityCardFooterProps = {
-  activity: Pick<Activity, 'id' | 'dueAt' | 'comments'> & {
-    assignee?: Pick<WorkspaceMember, 'id' | 'name' | 'avatarUrl'> | null;
-  };
-};
-
-const StyledContainer = styled.div`
-  align-items: center;
-  border-top: 1px solid ${({ theme }) => theme.border.color.medium};
-  color: ${({ theme }) => theme.font.color.primary};
-  display: flex;
-  flex-direction: row;
-  gap: ${({ theme }) => theme.spacing(2)};
-  padding: ${({ theme }) => theme.spacing(2)};
-  width: calc(100% - ${({ theme }) => theme.spacing(4)});
-`;
-
-const StyledVerticalSeparator = styled.div`
-  border-left: 1px solid ${({ theme }) => theme.border.color.medium};
-  height: 24px;
-`;
-
-const StyledComment = styled.div`
-  margin-left: auto;
-`;
-export const TimelineActivityCardFooter = ({
-  activity,
-}: TimelineActivityCardFooterProps) => {
-  const hasComments = isNonEmptyArray(activity.comments || []);
-
-  return (
-    <>
-      {(activity.assignee || activity.dueAt || hasComments) && (
-        <StyledContainer>
-          {activity.assignee && (
-            <UserChip
-              id={activity.assignee.id}
-              name={
-                activity.assignee.name.firstName +
-                  ' ' +
-                  activity.assignee.name.lastName ?? ''
-              }
-              avatarUrl={activity.assignee.avatarUrl ?? ''}
-            />
-          )}
-
-          {activity.dueAt && (
-            <>
-              {activity.assignee && <StyledVerticalSeparator />}
-              {beautifyExactDate(activity.dueAt)}
-            </>
-          )}
-          <StyledComment>
-            {hasComments && (
-              <CommentCounter commentCount={activity.comments?.length || 0} />
-            )}
-          </StyledComment>
-        </StyledContainer>
-      )}
-    </>
-  );
-};

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

@@ -1,7 +1,7 @@
 import { useSetRecoilState } from 'recoil';
 import { Button, ButtonGroup } from 'tsup.ui.index';
 
-import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { useOpenCreateActivityDrawerV2 } from '@/activities/hooks/useOpenCreateActivityDrawerV2';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import {
   IconCheckbox,
@@ -19,7 +19,7 @@ export const TimelineCreateButtonGroup = ({
   const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
   const setActiveTabId = useSetRecoilState(getActiveTabIdState());
 
-  const openCreateActivity = useOpenCreateActivityDrawer();
+  const openCreateActivity = useOpenCreateActivityDrawerV2();
 
   return (
     <ButtonGroup variant={'secondary'}>
@@ -30,6 +30,7 @@ export const TimelineCreateButtonGroup = ({
           openCreateActivity({
             type: 'Note',
             targetableObjects: [targetableObject],
+            timelineTargetableObject: targetableObject,
           })
         }
       />
@@ -40,6 +41,7 @@ export const TimelineCreateButtonGroup = ({
           openCreateActivity({
             type: 'Task',
             targetableObjects: [targetableObject],
+            timelineTargetableObject: targetableObject,
           })
         }
       />