feat: rename comment thread into activity (#939)

* feat: rename commentThread into activity server

* feat: rename commentThread into activity front

* feat: migration only create tables


feat: migration only create tables

* Update activities

* fix: rebase partial fix

* fix: all rebase problems and drop activity target alter

* fix: lint

* Update migration

* Update migration

* Fix conflicts

* Fix conflicts

---------

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

front/src/modules/activities/timeline/components/Timeline.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { CommentThreadCreateButton } from '@/activities/components/CommentThreadCreateButton';
-import { useOpenCreateCommentThreadDrawer } from '@/activities/hooks/useOpenCreateCommentThreadDrawer';
+import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
+import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
+import { ActivityForDrawer } from '@/activities/types/ActivityForDrawer';
 import { CommentableEntity } from '@/activities/types/CommentableEntity';
-import { CommentThreadForDrawer } from '@/activities/types/CommentThreadForDrawer';
 import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { IconCircleDot } from '@/ui/icon';
 import {
   ActivityType,
   SortOrder,
-  useGetCommentThreadsByTargetsQuery,
+  useGetActivitiesByTargetsQuery,
 } from '~/generated/graphql';
 
 import { TimelineActivity } from './TimelineActivity';
@@ -96,9 +96,9 @@ const StyledStartIcon = styled.div`
 export function Timeline({ entity }: { entity: CommentableEntity }) {
   const theme = useTheme();
 
-  const { data: queryResult, loading } = useGetCommentThreadsByTargetsQuery({
+  const { data: queryResult, loading } = useGetActivitiesByTargetsQuery({
     variables: {
-      commentThreadTargetIds: [entity.id],
+      activityTargetIds: [entity.id],
       orderBy: [
         {
           createdAt: SortOrder.Desc,
@@ -107,21 +107,20 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
     },
   });
 
-  const openCreateCommandThread = useOpenCreateCommentThreadDrawer();
+  const openCreateCommandThread = useOpenCreateActivityDrawer();
 
-  const commentThreads: CommentThreadForDrawer[] =
-    queryResult?.findManyCommentThreads ?? [];
+  const activities: ActivityForDrawer[] = queryResult?.findManyActivities ?? [];
 
   if (loading) {
     return <></>;
   }
 
-  if (!commentThreads.length) {
+  if (!activities.length) {
     return (
       <StyledTimelineEmptyContainer>
         <StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
         <StyledEmptyTimelineSubTitle>Create one:</StyledEmptyTimelineSubTitle>
-        <CommentThreadCreateButton
+        <ActivityCreateButton
           onNoteClick={() => openCreateCommandThread(entity, ActivityType.Note)}
           onTaskClick={() => openCreateCommandThread(entity, ActivityType.Task)}
         />
@@ -132,17 +131,14 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
   return (
     <StyledMainContainer>
       <StyledTopActionBar>
-        <CommentThreadCreateButton
+        <ActivityCreateButton
           onNoteClick={() => openCreateCommandThread(entity, ActivityType.Note)}
           onTaskClick={() => openCreateCommandThread(entity, ActivityType.Task)}
         />
       </StyledTopActionBar>
       <StyledTimelineContainer>
-        {commentThreads.map((commentThread) => (
-          <TimelineActivity
-            key={commentThread.id}
-            commentThread={commentThread}
-          />
+        {activities.map((activity) => (
+          <TimelineActivity key={activity.id} activity={activity} />
         ))}
         <StyledStartIcon>
           <IconCircleDot size={theme.icon.size.lg} />

front/src/modules/activities/timeline/components/TimelineActivity.tsx

@@ -3,14 +3,11 @@ import { Tooltip } from 'react-tooltip';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 
-import { useOpenCommentThreadRightDrawer } from '@/activities/hooks/useOpenCommentThreadRightDrawer';
-import { GET_COMMENT_THREADS_BY_TARGETS } from '@/activities/queries';
+import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
+import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/queries';
 import { IconNotes } from '@/ui/icon';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
-import {
-  CommentThread,
-  useUpdateCommentThreadMutation,
-} from '~/generated/graphql';
+import { Activity, useUpdateActivityMutation } from '~/generated/graphql';
 import {
   beautifyExactDate,
   beautifyPastDateRelativeToNow,
@@ -115,35 +112,31 @@ const StyledTimelineItemContainer = styled.div`
 `;
 
 type OwnProps = {
-  commentThread: Pick<
-    CommentThread,
+  activity: Pick<
+    Activity,
     'id' | 'title' | 'body' | 'createdAt' | 'completedAt' | 'type'
-  > & { author: Pick<CommentThread['author'], 'displayName'> };
+  > & { author: Pick<Activity['author'], 'displayName'> };
 };
 
-export function TimelineActivity({ commentThread }: OwnProps) {
-  const beautifiedCreatedAt = beautifyPastDateRelativeToNow(
-    commentThread.createdAt,
-  );
-  const exactCreatedAt = beautifyExactDate(commentThread.createdAt);
-  const body = JSON.parse(commentThread.body ?? '{}')[0]?.content[0]?.text;
+export function TimelineActivity({ activity }: OwnProps) {
+  const beautifiedCreatedAt = beautifyPastDateRelativeToNow(activity.createdAt);
+  const exactCreatedAt = beautifyExactDate(activity.createdAt);
+  const body = JSON.parse(activity.body ?? '{}')[0]?.content[0]?.text;
 
-  const openCommentThreadRightDrawer = useOpenCommentThreadRightDrawer();
-  const [updateCommentThreadMutation] = useUpdateCommentThreadMutation();
+  const openActivityRightDrawer = useOpenActivityRightDrawer();
+  const [updateActivityMutation] = useUpdateActivityMutation();
 
   const handleActivityCompletionChange = useCallback(
     (value: boolean) => {
-      updateCommentThreadMutation({
+      updateActivityMutation({
         variables: {
-          id: commentThread.id,
+          id: activity.id,
           completedAt: value ? new Date().toISOString() : null,
         },
-        refetchQueries: [
-          getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
-        ],
+        refetchQueries: [getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? ''],
       });
     },
-    [commentThread, updateCommentThreadMutation],
+    [activity, updateActivityMutation],
   );
 
   return (
@@ -153,14 +146,14 @@ export function TimelineActivity({ commentThread }: OwnProps) {
           <IconNotes />
         </StyledIconContainer>
         <StyledItemTitleContainer>
-          <span>{commentThread.author.displayName}</span>
-          created a {commentThread.type.toLowerCase()}
+          <span>{activity.author.displayName}</span>
+          created a note created a {activity.type.toLowerCase()}
         </StyledItemTitleContainer>
-        <StyledItemTitleDate id={`id-${commentThread.id}`}>
+        <StyledItemTitleDate id={`id-${activity.id}`}>
           {beautifiedCreatedAt} ago
         </StyledItemTitleDate>
         <StyledTooltip
-          anchorSelect={`#id-${commentThread.id}`}
+          anchorSelect={`#id-${activity.id}`}
           content={exactCreatedAt}
           clickable
           noArrow
@@ -171,13 +164,11 @@ export function TimelineActivity({ commentThread }: OwnProps) {
           <StyledVerticalLine></StyledVerticalLine>
         </StyledVerticalLineContainer>
         <StyledCardContainer>
-          <StyledCard
-            onClick={() => openCommentThreadRightDrawer(commentThread.id)}
-          >
+          <StyledCard onClick={() => openActivityRightDrawer(activity.id)}>
             <TimelineActivityTitle
-              title={commentThread.title ?? ''}
-              completed={!!commentThread.completedAt}
-              type={commentThread.type}
+              title={activity.title ?? ''}
+              completed={!!activity.completedAt}
+              type={activity.type}
               onCompletionChange={handleActivityCompletionChange}
             />
             <StyledCardContent>