Fix activity (#11015)

Deprecating unused states and making sure that the ActivityRichText
editor loads when activity.bodyV2 is present

packages/twenty-e2e-testing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-e2e-testing",
-  "version": "0.44.0-canary",
+  "version": "0.50.0-canary",
   "description": "",
   "author": "",
   "private": true,

packages/twenty-emails/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-emails",
-  "version": "0.44.0-canary",
+  "version": "0.50.0-canary",
   "description": "",
   "author": "",
   "private": true,

packages/twenty-front/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-front",
-  "version": "0.44.0-canary",
+  "version": "0.50.0-canary",
   "private": true,
   "type": "module",
   "scripts": {

packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx

@@ -151,7 +151,10 @@ export const ActivityRichTextEditor = ({
           return {
             ...oldActivity,
             id: activityId,
-            body: newStringifiedBody,
+            bodyV2: {
+              blocknote: newStringifiedBody,
+              markdown: null,
+            },
             __typename: 'Activity',
           };
         });
@@ -159,8 +162,11 @@ export const ActivityRichTextEditor = ({
         modifyRecordFromCache({
           recordId: activityId,
           fieldModifiers: {
-            body: () => {
+            bodyV2: () => {
-              return newStringifiedBody;
+              return {
+                blocknote: newStringifiedBody,
+                markdown: null,
+              };
             },
           },
           cache,

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -14,7 +14,6 @@ import { Task } from '@/activities/types/Task';
 import { TaskTarget } from '@/activities/types/TaskTarget';
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
-import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 
 export const useOpenCreateActivityDrawer = ({
   activityObjectNameSingular,
@@ -46,9 +45,7 @@ export const useOpenCreateActivityDrawer = ({
   const setViewableRecordNameSingular = useSetRecoilState(
     viewableRecordNameSingularState,
   );
-  const setIsNewViewableRecordLoading = useSetRecoilState(
+
-    isNewViewableRecordLoadingState,
-  );
   const setIsUpsertingActivityInDB = useSetRecoilState(
     isUpsertingActivityInDBState,
   );
@@ -62,7 +59,6 @@ export const useOpenCreateActivityDrawer = ({
     targetableObjects: ActivityTargetableObject[];
     customAssignee?: WorkspaceMember;
   }) => {
-    setIsNewViewableRecordLoading(true);
     setViewableRecordId(null);
     setViewableRecordNameSingular(activityObjectNameSingular);
 
@@ -113,7 +109,6 @@ export const useOpenCreateActivityDrawer = ({
     setViewableRecordId(activity.id);
 
     setIsUpsertingActivityInDB(false);
-    setIsNewViewableRecordLoading(false);
   };
 
   return openCreateActivityDrawer;

packages/twenty-front/src/modules/activities/tasks/hooks/__tests__/useCompleteTask.test.tsx

@@ -10,7 +10,6 @@ const task: Task = {
   id: '123',
   status: 'DONE',
   title: 'Test',
-  body: 'Test',
   bodyV2: {
     blocknote: 'Test',
     markdown: 'Test',

packages/twenty-front/src/modules/activities/types/Activity.ts

@@ -3,7 +3,6 @@ export type Activity = {
   createdAt: string;
   updatedAt: string;
   title: string;
-  body: string | null;
   bodyV2?: {
     blocknote: string | null;
     markdown: string | null;

packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx

@@ -1,6 +1,5 @@
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
-import { isNewViewableRecordLoadingComponentState } from '@/command-menu/pages/record-page/states/isNewViewableRecordLoadingComponentState';
 import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
 import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
 import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
@@ -29,14 +28,12 @@ export const CommandMenuRecordPage = () => {
   const viewableRecordNameSingular = useRecoilComponentValueV2(
     viewableRecordNameSingularComponentState,
   );
-  const isNewViewableRecordLoading = useRecoilComponentValueV2(
+
-    isNewViewableRecordLoadingComponentState,
-  );
   const viewableRecordId = useRecoilComponentValueV2(
     viewableRecordIdComponentState,
   );
 
-  if (!viewableRecordNameSingular && !isNewViewableRecordLoading) {
+  if (!viewableRecordNameSingular) {
     throw new Error(`Object name is not defined`);
   }
 
@@ -73,9 +70,7 @@ export const CommandMenuRecordPage = () => {
             >
               <StyledRightDrawerRecord isMobile={isMobile}>
                 <RecordFieldValueSelectorContextProvider>
-                  {!isNewViewableRecordLoading && (
+                  <RecordValueSetterEffect recordId={objectRecordId} />
-                    <RecordValueSetterEffect recordId={objectRecordId} />
-                  )}
                   <TimelineActivityContext.Provider
                     value={{
                       recordId: objectRecordId,
@@ -90,7 +85,6 @@ export const CommandMenuRecordPage = () => {
                       objectRecordId={objectRecordId}
                       loading={false}
                       isInRightDrawer={true}
-                      isNewRightDrawerItemLoading={isNewViewableRecordLoading}
                     />
                   </TimelineActivityContext.Provider>
                 </RecordFieldValueSelectorContextProvider>

packages/twenty-front/src/modules/command-menu/pages/record-page/states/isNewViewableRecordLoadingComponentState.ts

@@ -1,9 +0,0 @@
-import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
-
-export const isNewViewableRecordLoadingComponentState =
-  createComponentStateV2<boolean>({
-    key: 'command-menu/is-new-viewable-record-loading',
-    defaultValue: false,
-    componentInstanceContext: CommandMenuPageComponentInstanceContext,
-  });

packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts

@@ -1,6 +0,0 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
-export const isNewViewableRecordLoadingState = createState<boolean>({
-  key: 'activities/is-new-viewable-record-loading',
-  defaultValue: false,
-});

packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx

@@ -24,7 +24,6 @@ export const RecordShowContainer = ({
   objectRecordId,
   loading,
   isInRightDrawer = false,
-  isNewRightDrawerItemLoading = false,
 }: RecordShowContainerProps) => {
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
@@ -70,7 +69,6 @@ export const RecordShowContainer = ({
           }}
           isInRightDrawer={isInRightDrawer}
           loading={isPrefetchLoading || loading || recordLoading}
-          isNewRightDrawerItemLoading={isNewRightDrawerItemLoading}
         />
       </ShowPageContainer>
     </>

packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx

@@ -17,7 +17,6 @@ import { FieldMetadataType } from '~/generated/graphql';
 type SummaryCardProps = {
   objectNameSingular: string;
   objectRecordId: string;
-  isNewRightDrawerItemLoading: boolean;
   isInRightDrawer: boolean;
 };
 
@@ -25,7 +24,6 @@ type SummaryCardProps = {
 export const SummaryCard = ({
   objectNameSingular,
   objectRecordId,
-  isNewRightDrawerItemLoading,
   isInRightDrawer,
 }: SummaryCardProps) => {
   const { recordLoading, labelIdentifierFieldMetadataItem, isPrefetchLoading } =
@@ -57,7 +55,7 @@ export const SummaryCard = ({
     }),
   );
 
-  if (isNewRightDrawerItemLoading || !isDefined(recordCreatedAt)) {
+  if (!isDefined(recordCreatedAt)) {
     return <ShowPageSummaryCardSkeletonLoader />;
   }
 

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx

@@ -1,12 +1,13 @@
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
+import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { lazy, Suspense } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared';
 
 const ActivityRichTextEditor = lazy(() =>
   import('@/activities/components/ActivityRichTextEditor').then((module) => ({
@@ -20,7 +21,12 @@ const StyledShowPageActivityContainer = styled.div`
 `;
 
 const StyledSkeletonContainer = styled.div`
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  gap: ${({ theme }) => theme.spacing(3)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(4)};
 `;
 
 const LoadingSkeleton = () => {
@@ -33,7 +39,9 @@ const LoadingSkeleton = () => {
         highlightColor={theme.background.transparent.lighter}
         borderRadius={theme.border.radius.sm}
       >
-        <Skeleton height={200} />
+        <Skeleton height={24} />
+        <Skeleton height={24} />
+        <Skeleton height={24} />
       </SkeletonTheme>
     </StyledSkeletonContainer>
   );
@@ -47,16 +55,23 @@ export const ShowPageActivityContainer = ({
     'targetObjectNameSingular' | 'id'
   >;
 }) => {
-  const isNewViewableRecordLoading = useRecoilValue(
-    isNewViewableRecordLoadingState,
-  );
-
   const activityObjectNameSingular =
     targetableObject.targetObjectNameSingular as
       | CoreObjectNameSingular.Note
       | CoreObjectNameSingular.Task;
 
-  return !isNewViewableRecordLoading ? (
+  const activityBodyV2 = useRecoilValue(
+    recordStoreFamilySelector({
+      recordId: targetableObject.id,
+      fieldName: 'bodyV2',
+    }),
+  );
+
+  if (!isDefined(activityBodyV2)) {
+    return <LoadingSkeleton />;
+  }
+
+  return (
     <ScrollWrapper
       contextProviderName="showPageActivityContainer"
       componentInstanceId={`scroll-wrapper-tab-list-${targetableObject.id}`}
@@ -70,7 +85,5 @@ export const ShowPageActivityContainer = ({
         </Suspense>
       </StyledShowPageActivityContainer>
     </ScrollWrapper>
-  ) : (
-    <></>
   );
 };

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx

@@ -1,7 +1,6 @@
 import { RecordShowRightDrawerActionMenu } from '@/action-menu/components/RecordShowRightDrawerActionMenu';
 import { RecordShowRightDrawerOpenRecordButton } from '@/action-menu/components/RecordShowRightDrawerOpenRecordButton';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { CardComponents } from '@/object-record/record-show/components/CardComponents';
 import { FieldsCard } from '@/object-record/record-show/components/FieldsCard';
 import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
@@ -14,7 +13,7 @@ import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import styled from '@emotion/styled';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
   display: flex;
@@ -62,7 +61,6 @@ export const ShowPageSubContainer = ({
   targetableObject,
   loading,
   isInRightDrawer = false,
-  isNewRightDrawerItemLoading = false,
 }: ShowPageSubContainerProps) => {
   const tabListComponentId = `${TAB_LIST_COMPONENT_ID}-${isInRightDrawer}-${targetableObject.id}`;
 
@@ -70,15 +68,10 @@ export const ShowPageSubContainer = ({
 
   const isMobile = useIsMobile();
 
-  const isNewViewableRecordLoading = useRecoilValue(
-    isNewViewableRecordLoadingState,
-  );
-
   const summaryCard = (
     <SummaryCard
       objectNameSingular={targetableObject.targetObjectNameSingular}
       objectRecordId={targetableObject.id}
-      isNewRightDrawerItemLoading={isNewRightDrawerItemLoading}
       isInRightDrawer={isInRightDrawer}
     />
   );
@@ -127,7 +120,7 @@ export const ShowPageSubContainer = ({
         <StyledTabListContainer shouldDisplay={visibleTabs.length > 1}>
           <StyledTabList
             behaveAsLinks={!isInRightDrawer}
-            loading={loading || isNewViewableRecordLoading}
+            loading={loading}
             tabListInstanceId={tabListComponentId}
             tabs={tabs}
             isInRightDrawer={isInRightDrawer}

packages/twenty-front/src/testing/mock-data/notes.ts

@@ -9,7 +9,6 @@ export const mockedNotes: Array<MockedNote> = [
     createdAt: '2023-04-26T10:12:42.33625+00:00',
     updatedAt: '2023-04-26T10:23:42.33625+00:00',
     title: 'My very first note',
-    body: null,
     bodyV2: {
       blocknote: null,
       markdown: null,
@@ -68,7 +67,6 @@ export const mockedNotes: Array<MockedNote> = [
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     title: 'Another note',
-    body: null,
     bodyV2: {
       blocknote: null,
       markdown: null,

packages/twenty-front/src/testing/mock-data/tasks.ts

@@ -26,7 +26,6 @@ export const mockedTasks: Array<MockedTask> = [
     createdAt: '2023-04-26T10:12:42.33625+00:00',
     updatedAt: '2023-04-26T10:23:42.33625+00:00',
     title: 'My very first note',
-    body: null,
     bodyV2: {
       blocknote: null,
       markdown: null,

packages/twenty-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-server",
-  "version": "0.44.0-canary",
+  "version": "0.50.0-canary",
   "description": "",
   "author": "",
   "private": true,

packages/twenty-shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-shared",
-  "version": "0.44.0-canary",
+  "version": "0.50.0-canary",
   "license": "AGPL-3.0",
   "main": "./dist/index.js",
   "scripts": {

packages/twenty-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-ui",
-  "version": "0.44.0-canary",
+  "version": "0.50.0-canary",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {

packages/twenty-website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-website",
-  "version": "0.44.0-canary",
+  "version": "0.50.0-canary",
   "private": true,
   "scripts": {
     "nx": "NX_DEFAULT_PROJECT=twenty-website node ../../node_modules/nx/bin/nx.js",