Right drawer to edit records

packages/twenty-front/src/modules/activities/comment/__stories__/Comment.stories.tsx

@@ -3,15 +3,15 @@ import { Meta, StoryObj } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';
 import { ComponentDecorator } from 'twenty-ui';
 
-import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 
 import { ActivityActionBar } from '../../right-drawer/components/ActivityActionBar';
 import { Comment } from '../Comment';
 
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
 
 const CommentSetterEffect = () => {
-  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
+  const setViewableActivity = useSetRecoilState(viewableRecordIdState);
 
   useEffect(() => {
     setViewableActivity('test-id');

packages/twenty-front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx

@@ -4,7 +4,7 @@ import { DateTime } from 'luxon';
 import { useSetRecoilState } from 'recoil';
 
 import { ActivityActionBar } from '@/activities/right-drawer/components/ActivityActionBar';
-import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { avatarUrl } from '~/testing/mock-data/users';
 
@@ -13,7 +13,7 @@ import { CommentHeader } from '../CommentHeader';
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
 
 const CommentHeaderSetterEffect = () => {
-  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
+  const setViewableActivity = useSetRecoilState(viewableRecordIdState);
 
   useEffect(() => {
     setViewableActivity('test-id');

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

@@ -7,7 +7,6 @@ import { ActivityComments } from '@/activities/components/ActivityComments';
 import { ActivityCreationDate } from '@/activities/components/ActivityCreationDate';
 import { ActivityEditorFields } from '@/activities/components/ActivityEditorFields';
 import { ActivityTitleEffect } from '@/activities/components/ActivityTitleEffect';
-import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdown';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { ActivityTitle } from './ActivityTitle';
@@ -68,7 +67,6 @@ export const ActivityEditor = ({
     <StyledContainer ref={containerRef}>
       <StyledUpperPartContainer>
         <StyledTopContainer>
-          <ActivityTypeDropdown activityId={activityId} />
           <ActivityTitleEffect activityId={activityId} />
           <StyledTitleContainer>
             <ActivityTitle activityId={activityId} />

packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { IconMail, Tag } from 'twenty-ui';
 
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 
@@ -43,7 +42,6 @@ export const EmailThreadHeader = ({
 }: EmailThreadHeaderProps) => {
   return (
     <StyledContainer>
-      <Tag Icon={IconMail} color="gray" text="Email" onClick={() => {}} />
       <StyledHead>
         <StyledHeading>{subject}</StyledHeading>
         <StyledContent>

packages/twenty-front/src/modules/activities/emails/hooks/__tests__/useEmailThread.test.tsx

@@ -3,6 +3,7 @@ import { RecoilRoot, useRecoilState, useRecoilValue } from 'recoil';
 
 import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
 import { viewableEmailThreadIdState } from '@/activities/emails/states/viewableEmailThreadIdState';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
 
 const viewableEmailThreadId = '1234';
@@ -13,24 +14,22 @@ describe('useEmailThread', () => {
       () => {
         const emailThread = useEmailThread();
         const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
-        const viewableEmailThreadId = useRecoilValue(
-          viewableEmailThreadIdState,
-        );
+        const viewableRecordId = useRecoilValue(viewableRecordIdState);
 
-        return { ...emailThread, isRightDrawerOpen, viewableEmailThreadId };
+        return { ...emailThread, isRightDrawerOpen, viewableRecordId };
       },
       { wrapper: RecoilRoot },
     );
 
     expect(result.current.isRightDrawerOpen).toBe(false);
-    expect(result.current.viewableEmailThreadId).toBeNull();
+    expect(result.current.viewableRecordId).toBeNull();
 
     act(() => {
       result.current.openEmailThread(viewableEmailThreadId);
     });
 
     expect(result.current.isRightDrawerOpen).toBe(true);
-    expect(result.current.viewableEmailThreadId).toBe(viewableEmailThreadId);
+    expect(result.current.viewableRecordId).toBe(viewableEmailThreadId);
   });
 
   it('should close email thread if trying to open the same thread id', () => {

packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts

@@ -1,7 +1,7 @@
 import { useRecoilCallback } from 'recoil';
 
 import { useOpenEmailThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer';
-import { viewableEmailThreadIdState } from '@/activities/emails/states/viewableEmailThreadIdState';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
 
@@ -17,17 +17,17 @@ export const useEmailThread = () => {
           .getValue();
 
         const viewableEmailThreadId = snapshot
-          .getLoadable(viewableEmailThreadIdState)
+          .getLoadable(viewableRecordIdState)
           .getValue();
 
         if (isRightDrawerOpen && viewableEmailThreadId === threadId) {
-          set(viewableEmailThreadIdState, null);
+          set(viewableRecordIdState, null);
           closeRightDrawer();
           return;
         }
 
         openEmailThredRightDrawer();
-        set(viewableEmailThreadIdState, threadId);
+        set(viewableRecordIdState, threadId);
       },
     [closeRightDrawer, openEmailThredRightDrawer],
   );

packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts

@@ -4,16 +4,16 @@ import gql from 'graphql-tag';
 import { useRecoilValue } from 'recoil';
 
 import { fetchAllThreadMessagesOperationSignatureFactory } from '@/activities/emails/graphql/operation-signatures/factories/fetchAllThreadMessagesOperationSignatureFactory';
-import { viewableEmailThreadIdState } from '@/activities/emails/states/viewableEmailThreadIdState';
 import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 
 export const useRightDrawerEmailThread = () => {
-  const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState);
+  const viewableRecordId = useRecoilValue(viewableRecordIdState);
 
   const apolloClient = useApolloClient();
   const thread = apolloClient.readFragment({
-    id: `TimelineThread:${viewableEmailThreadId}`,
+    id: `TimelineThread:${viewableRecordId}`,
     fragment: gql`
       fragment timelineThread on TimelineThread {
         id
@@ -25,7 +25,7 @@ export const useRightDrawerEmailThread = () => {
 
   const FETCH_ALL_MESSAGES_OPERATION_SIGNATURE =
     fetchAllThreadMessagesOperationSignatureFactory({
-      messageThreadId: viewableEmailThreadId,
+      messageThreadId: viewableRecordId,
     });
 
   const {
@@ -39,7 +39,7 @@ export const useRightDrawerEmailThread = () => {
       FETCH_ALL_MESSAGES_OPERATION_SIGNATURE.objectNameSingular,
     orderBy: FETCH_ALL_MESSAGES_OPERATION_SIGNATURE.variables.orderBy,
     recordGqlFields: FETCH_ALL_MESSAGES_OPERATION_SIGNATURE.fields,
-    skip: !viewableEmailThreadId,
+    skip: !viewableRecordId,
   });
 
   const fetchMoreMessages = useCallback(() => {

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

@@ -5,7 +5,10 @@ import { RecoilRoot, useRecoilValue } from 'recoil';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { activityIdInDrawerState } from '@/activities/states/activityIdInDrawerState';
-import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
+import {
+  viewableRecordIdState,
+  viewableRecordIdState,
+} from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
   <RecoilRoot>
@@ -18,12 +21,12 @@ describe('useOpenActivityRightDrawer', () => {
     const { result } = renderHook(
       () => {
         const openActivityRightDrawer = useOpenActivityRightDrawer();
-        const viewableActivityId = useRecoilValue(viewableActivityIdState);
+        const viewableRecordId = useRecoilValue(viewableRecordIdState);
         const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
         return {
           openActivityRightDrawer,
           activityIdInDrawer,
-          viewableActivityId,
+          viewableRecordId,
         };
       },
       {
@@ -32,11 +35,11 @@ describe('useOpenActivityRightDrawer', () => {
     );
 
     expect(result.current.activityIdInDrawer).toBeNull();
-    expect(result.current.viewableActivityId).toBeNull();
+    expect(result.current.viewableRecordId).toBeNull();
     act(() => {
       result.current.openActivityRightDrawer('123');
     });
     expect(result.current.activityIdInDrawer).toBe('123');
-    expect(result.current.viewableActivityId).toBe('123');
+    expect(result.current.viewableRecordId).toBe('123');
   });
 });

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

@@ -5,9 +5,9 @@ import { RecoilRoot, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { activityIdInDrawerState } from '@/activities/states/activityIdInDrawerState';
-import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { getObjectMetadataItemsMock } from '@/object-metadata/utils/getObjectMetadataItemsMock';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 
 const mockUUID = '37873e04-2f83-4468-9ab7-3f87da6cafad';
 
@@ -28,15 +28,15 @@ describe('useOpenCreateActivityDrawer', () => {
     const { result } = renderHook(
       () => {
         const openActivityRightDrawer = useOpenCreateActivityDrawer();
-        const viewableActivityId = useRecoilValue(viewableActivityIdState);
+        const viewableRecordId = useRecoilValue(viewableRecordIdState);
         const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
         const setObjectMetadataItems = useSetRecoilState(
           objectMetadataItemsState,
         );
         return {
           openActivityRightDrawer,
           activityIdInDrawer,
-          viewableActivityId,
+          viewableRecordId,
           setObjectMetadataItems,
         };
       },
@@ -50,14 +50,14 @@ describe('useOpenCreateActivityDrawer', () => {
     });
 
     expect(result.current.activityIdInDrawer).toBeNull();
-    expect(result.current.viewableActivityId).toBeNull();
+    expect(result.current.viewableRecordId).toBeNull();
     await act(async () => {
       result.current.openActivityRightDrawer({
         type: 'Note',
         targetableObjects: [],
       });
     });
     expect(result.current.activityIdInDrawer).toBe(mockUUID);
-    expect(result.current.viewableActivityId).toBe(mockUUID);
+    expect(result.current.viewableRecordId).toBe(mockUUID);
   });
 });

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

@@ -1,18 +1,17 @@
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { activityIdInDrawerState } from '@/activities/states/activityIdInDrawerState';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
-import { viewableActivityIdState } from '../states/viewableActivityIdState';
-
 export const useOpenActivityRightDrawer = () => {
   const { openRightDrawer, isRightDrawerOpen, rightDrawerPage } =
     useRightDrawer();
-  const [viewableActivityId, setViewableActivityId] = useRecoilState(
-    viewableActivityIdState,
+  const [viewableRecordId, setViewableRecordId] = useRecoilState(
+    viewableRecordIdState,
   );
   const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState);
   const setHotkeyScope = useSetHotkeyScope();
@@ -21,13 +20,13 @@ export const useOpenActivityRightDrawer = () => {
     if (
       isRightDrawerOpen &&
       rightDrawerPage === RightDrawerPages.EditActivity &&
-      viewableActivityId === activityId
+      viewableRecordId === activityId
     ) {
       return;
     }
 
     setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
-    setViewableActivityId(activityId);
+    setViewableRecordId(activityId);
     setActivityIdInDrawer(activityId);
     openRightDrawer(RightDrawerPages.EditActivity);
   };

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

@@ -6,8 +6,8 @@ import { activityTargetableEntityArrayState } from '@/activities/states/activity
 import { isActivityInCreateModeState } from '@/activities/states/isActivityInCreateModeState';
 import { isUpsertingActivityInDBState } from '@/activities/states/isCreatingActivityInDBState';
 import { temporaryActivityForEditorState } from '@/activities/states/temporaryActivityForEditorState';
-import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
 import { ActivityType } from '@/activities/types/Activity';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
@@ -26,7 +26,7 @@ export const useOpenCreateActivityDrawer = () => {
   const setActivityTargetableEntityArray = useSetRecoilState(
     activityTargetableEntityArrayState,
   );
-  const setViewableActivityId = useSetRecoilState(viewableActivityIdState);
+  const setViewableActivityId = useSetRecoilState(viewableRecordIdState);
 
   const setIsCreatingActivity = useSetRecoilState(isActivityInCreateModeState);
 

packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -10,14 +10,14 @@ import { activityTargetableEntityArrayState } from '@/activities/states/activity
 import { isActivityInCreateModeState } from '@/activities/states/isActivityInCreateModeState';
 import { isUpsertingActivityInDBState } from '@/activities/states/isCreatingActivityInDBState';
 import { temporaryActivityForEditorState } from '@/activities/states/temporaryActivityForEditorState';
-import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
 import { objectShowPageTargetableObjectState } from '@/activities/timeline/states/objectShowPageTargetableObjectIdState';
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTarget } from '@/activities/types/ActivityTarget';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDeleteRecordFromCache } from '@/object-record/cache/hooks/useDeleteRecordFromCache';
 import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { mapToRecordId } from '@/object-record/utils/mapToObjectId';
 import { IconButton } from '@/ui/input/button/components/IconButton';
@@ -30,7 +30,7 @@ const StyledButtonContainer = styled.div`
 `;
 
 export const ActivityActionBar = () => {
-  const viewableActivityId = useRecoilValue(viewableActivityIdState);
+  const viewableRecordId = useRecoilValue(viewableRecordIdState);
   const activityIdInDrawer = useRecoilValue(activityIdInDrawerState);
 
   const activityTargetableEntityArray = useRecoilValue(
@@ -86,7 +86,7 @@ export const ActivityActionBar = () => {
 
         setIsRightDrawerOpen(false);
 
-        if (!isNonEmptyString(viewableActivityId)) {
+        if (!isNonEmptyString(viewableRecordId)) {
           return;
         }
 
@@ -111,13 +111,13 @@ export const ActivityActionBar = () => {
             await deleteManyActivityTargets(activityTargetIdsToDelete);
           }
 
-          await deleteOneActivity?.(viewableActivityId);
+          await deleteOneActivity?.(viewableRecordId);
         }
       },
     [
       activityIdInDrawer,
       setIsRightDrawerOpen,
-      viewableActivityId,
+      viewableRecordId,
       isActivityInCreateMode,
       temporaryActivityForEditor,
       deleteActivityFromCache,
@@ -129,9 +129,7 @@ export const ActivityActionBar = () => {
     ],
   );
 
-  const record = useRecoilValue(
-    recordStoreFamilyState(viewableActivityId ?? ''),
-  );
+  const record = useRecoilValue(recordStoreFamilyState(viewableRecordId ?? ''));
 
   const addActivity = () => {
     setIsRightDrawerOpen(false);