Right drawer to edit records

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

@@ -2,18 +2,18 @@ import { useRecoilValue } from 'recoil';
 
 import { CalendarEventDetails } from '@/activities/calendar/components/CalendarEventDetails';
 import { FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE } from '@/activities/calendar/graphql/operation-signatures/FindOneCalendarEventOperationSignature';
-import { viewableCalendarEventIdState } from '@/activities/calendar/states/viewableCalendarEventIdState';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
 
 export const RightDrawerCalendarEvent = () => {
   const { setRecords } = useSetRecordInStore();
-  const viewableCalendarEventId = useRecoilValue(viewableCalendarEventIdState);
+  const viewableRecordId = useRecoilValue(viewableRecordIdState);
   const { record: calendarEvent } = useFindOneRecord<CalendarEvent>({
     objectNameSingular:
       FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE.objectNameSingular,
-    objectRecordId: viewableCalendarEventId ?? '',
+    objectRecordId: viewableRecordId ?? '',
     recordGqlFields: FIND_ONE_CALENDAR_EVENT_OPERATION_SIGNATURE.fields,
     onCompleted: (record) => setRecords([record]),
   });

packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx

@@ -2,34 +2,32 @@ import { act, renderHook } from '@testing-library/react';
 import { RecoilRoot, useRecoilValue } from 'recoil';
 
 import { useOpenCalendarEventRightDrawer } from '@/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer';
-import { viewableCalendarEventIdState } from '@/activities/calendar/states/viewableCalendarEventIdState';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
 
 describe('useOpenCalendarEventRightDrawer', () => {
   it('opens the right drawer with the calendar event', () => {
     const { result } = renderHook(
       () => {
         const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
-        const viewableCalendarEventId = useRecoilValue(
-          viewableCalendarEventIdState,
-        );
+        const viewableRecordId = useRecoilValue(viewableRecordIdState);
         return {
           ...useOpenCalendarEventRightDrawer(),
           isRightDrawerOpen,
-          viewableCalendarEventId,
+          viewableRecordId,
         };
       },
       { wrapper: RecoilRoot },
     );
 
     expect(result.current.isRightDrawerOpen).toBe(false);
-    expect(result.current.viewableCalendarEventId).toBeNull();
+    expect(result.current.viewableRecordId).toBeNull();
 
     act(() => {
       result.current.openCalendarEventRightDrawer('1234');
     });
 
     expect(result.current.isRightDrawerOpen).toBe(true);
-    expect(result.current.viewableCalendarEventId).toBe('1234');
+    expect(result.current.viewableRecordId).toBe('1234');
   });
 });

packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer.ts

@@ -1,6 +1,6 @@
 import { useSetRecoilState } from 'recoil';
 
-import { viewableCalendarEventIdState } from '@/activities/calendar/states/viewableCalendarEventIdState';
+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';
@@ -9,14 +9,12 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
 export const useOpenCalendarEventRightDrawer = () => {
   const { openRightDrawer } = useRightDrawer();
   const setHotkeyScope = useSetHotkeyScope();
-  const setViewableCalendarEventId = useSetRecoilState(
-    viewableCalendarEventIdState,
-  );
+  const setViewableRecordId = useSetRecoilState(viewableRecordIdState);
 
   const openCalendarEventRightDrawer = (calendarEventId: string) => {
     setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
     openRightDrawer(RightDrawerPages.ViewCalendarEvent);
-    setViewableCalendarEventId(calendarEventId);
+    setViewableRecordId(calendarEventId);
   };
 
   return { openCalendarEventRightDrawer };

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

@@ -3,19 +3,19 @@ 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 setViewableRecord = useSetRecoilState(viewableRecordIdState);
 
   useEffect(() => {
-    setViewableActivity('test-id');
-  }, [setViewableActivity]);
+    setViewableRecord('test-id');
+  }, [setViewableRecord]);
 
   return null;
 };

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,11 +13,11 @@ import { CommentHeader } from '../CommentHeader';
 import { mockComment, mockCommentWithLongValues } from './mock-comment';
 
 const CommentHeaderSetterEffect = () => {
-  const setViewableActivity = useSetRecoilState(viewableActivityIdState);
+  const setViewableRecord = useSetRecoilState(viewableRecordIdState);
 
   useEffect(() => {
-    setViewableActivity('test-id');
-  }, [setViewableActivity]);
+    setViewableRecord('test-id');
+  }, [setViewableRecord]);
 
   return null;
 };

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

@@ -2,7 +2,7 @@ import { act, renderHook } from '@testing-library/react';
 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 +13,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', () => {
@@ -40,30 +38,31 @@ describe('useEmailThread', () => {
         const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
           isRightDrawerOpenState,
         );
-        const [viewableEmailThreadId, setViewableEmailThreadId] =
-          useRecoilState(viewableEmailThreadIdState);
+        const [viewableRecordId, setViewableRecordId] = useRecoilState(
+          viewableRecordIdState,
+        );
 
         return {
           ...emailThread,
           isRightDrawerOpen,
-          viewableEmailThreadId,
+          viewableRecordId,
           setIsRightDrawerOpen,
-          setViewableEmailThreadId,
+          setViewableRecordId,
         };
       },
       { wrapper: RecoilRoot },
     );
 
     act(() => {
       result.current.setIsRightDrawerOpen(true);
-      result.current.setViewableEmailThreadId(viewableEmailThreadId);
+      result.current.setViewableRecordId(viewableEmailThreadId);
     });
 
     act(() => {
       result.current.openEmailThread(viewableEmailThreadId);
     });
 
     expect(result.current.isRightDrawerOpen).toBe(false);
-    expect(result.current.viewableEmailThreadId).toBeNull();
+    expect(result.current.viewableRecordId).toBeNull();
   });
 });

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

@@ -1,13 +1,13 @@
 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';
 
 export const useEmailThread = () => {
   const { closeRightDrawer } = useRightDrawer();
-  const openEmailThredRightDrawer = useOpenEmailThreadRightDrawer();
+  const openEmailThreadRightDrawer = useOpenEmailThreadRightDrawer();
 
   const openEmailThread = useRecoilCallback(
     ({ snapshot, set }) =>
@@ -17,19 +17,19 @@ 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);
+        openEmailThreadRightDrawer();
+        set(viewableRecordIdState, threadId);
       },
-    [closeRightDrawer, openEmailThredRightDrawer],
+    [closeRightDrawer, openEmailThreadRightDrawer],
   );
 
   return { openEmailThread };

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,7 @@ 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 } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
   <RecoilRoot>
@@ -18,12 +18,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 +32,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');
   });
 });