Open emails and calendar events inside command menu (#9477)

https://github.com/user-attachments/assets/cfc8f85e-d49d-4aa1-a8c2-2410aca19444

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {

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

@@ -7,6 +7,7 @@ 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 { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
+import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 
 export const RightDrawerCalendarEvent = () => {
@@ -26,10 +27,10 @@ export const RightDrawerCalendarEvent = () => {
   }
 
   return (
-    <>
+    <RecordFieldValueSelectorContextProvider>
       <CalendarEventDetailsEffect record={calendarEvent} />
       <RecordValueSetterEffect recordId={calendarEvent.id} />
       <CalendarEventDetails calendarEvent={calendarEvent} />
-    </>
+    </RecordFieldValueSelectorContextProvider>
   );
 };

packages/twenty-front/src/modules/command-menu/components/CommandMenuPages.ts

@@ -1,4 +1,6 @@
 export enum CommandMenuPages {
   Root = 'root',
   ViewRecord = 'view-record',
+  ViewEmailThread = 'view-email-thread',
+  ViewCalendarEvent = 'view-calendar-event',
 }

packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx

@@ -1,3 +1,5 @@
+import { RightDrawerCalendarEvent } from '@/activities/calendar/right-drawer/components/RightDrawerCalendarEvent';
+import { RightDrawerEmailThread } from '@/activities/emails/right-drawer/components/RightDrawerEmailThread';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
 import { RightDrawerRecord } from '@/object-record/record-right-drawer/components/RightDrawerRecord';
@@ -8,4 +10,6 @@ export const COMMAND_MENU_PAGES_CONFIG = new Map<
 >([
   [CommandMenuPages.Root, <CommandMenu />],
   [CommandMenuPages.ViewRecord, <RightDrawerRecord />],
+  [CommandMenuPages.ViewEmailThread, <RightDrawerEmailThread />],
+  [CommandMenuPages.ViewCalendarEvent, <RightDrawerCalendarEvent />],
 ]);

packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts

@@ -3,10 +3,10 @@ import { useRecoilCallback, useRecoilValue } from 'recoil';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
 import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
 
-import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
+import { mapRightDrawerPageToCommandMenuPage } from '@/ui/layout/right-drawer/utils/mapRightDrawerPageToCommandMenuPage';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
@@ -28,11 +28,11 @@ export const useRightDrawer = () => {
   const openRightDrawer = useRecoilCallback(
     ({ set }) =>
       (rightDrawerPage: RightDrawerPages) => {
-        if (
+        if (isCommandMenuV2Enabled) {
-          isCommandMenuV2Enabled &&
+          const commandMenuPage =
-          rightDrawerPage === RightDrawerPages.ViewRecord
+            mapRightDrawerPageToCommandMenuPage(rightDrawerPage);
-        ) {
+
-          set(commandMenuPageState, CommandMenuPages.ViewRecord);
+          set(commandMenuPageState, commandMenuPage);
           openCommandMenu();
           return;
         }

packages/twenty-front/src/modules/ui/layout/right-drawer/utils/mapRightDrawerPageToCommandMenuPage.ts

@@ -0,0 +1,17 @@
+import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+
+export const mapRightDrawerPageToCommandMenuPage = (
+  rightDrawerPage: RightDrawerPages,
+) => {
+  switch (rightDrawerPage) {
+    case RightDrawerPages.ViewRecord:
+      return CommandMenuPages.ViewRecord;
+    case RightDrawerPages.ViewEmailThread:
+      return CommandMenuPages.ViewEmailThread;
+    case RightDrawerPages.ViewCalendarEvent:
+      return CommandMenuPages.ViewCalendarEvent;
+    default:
+      return CommandMenuPages.Root;
+  }
+};