Fix activity (#11015)

Deprecating unused states and making sure that the ActivityRichText editor loads when activity.bodyV2 is present
2025-03-19 10:45:11 +01:00
parent 117a961622
commit ca9c070945
20 changed files with 46 additions and 69 deletions
--- a/packages/twenty-e2e-testing/package.json
+++ b/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,
--- a/packages/twenty-emails/package.json
+++ b/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,
--- a/packages/twenty-front/package.json
+++ b/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": {
--- a/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx
+++ b/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: () => {
-              return newStringifiedBody;
+            bodyV2: () => {
+              return {
+                blocknote: newStringifiedBody,
+                markdown: null,
+              };
            },
          },
          cache,
--- a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
+++ b/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;
--- a/packages/twenty-front/src/modules/activities/tasks/hooks/tests/useCompleteTask.test.tsx
+++ b/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',
--- a/packages/twenty-front/src/modules/activities/types/Activity.ts
+++ b/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;
--- a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx
+++ b/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>
--- a/packages/twenty-front/src/modules/command-menu/pages/record-page/states/isNewViewableRecordLoadingComponentState.ts
+++ b/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,
-  });
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts
+++ b/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,
-});
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/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>
    </>
--- a/packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx
+++ b/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 />;
  }

--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx
+++ b/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>
-  ) : (
-    <></>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
+++ b/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}
--- a/packages/twenty-front/src/testing/mock-data/notes.ts
+++ b/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,
--- a/packages/twenty-front/src/testing/mock-data/tasks.ts
+++ b/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,
--- a/packages/twenty-server/package.json
+++ b/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,
--- a/packages/twenty-shared/package.json
+++ b/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": {
--- a/packages/twenty-ui/package.json
+++ b/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": {
--- a/packages/twenty-website/package.json
+++ b/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",