feat: open event details drawer on event row click (#4464)

* feat: open event details drawer on event row click

Closes #4294

* feat: review - display Calendar Event details Inline Cells in readonly mode

* fix: fix calendar event field values not being set

* chore: review - reactivate no-extra-boolean-cast eslint rule

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

@@ -0,0 +1,22 @@
+import { useRecoilValue } from 'recoil';
+
+import { CalendarEventDetails } from '@/activities/calendar/components/CalendarEventDetails';
+import { viewableCalendarEventIdState } from '@/activities/calendar/states/viewableCalendarEventIdState';
+import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
+
+export const RightDrawerCalendarEvent = () => {
+  const { setRecords } = useSetRecordInStore();
+  const calendarEventId = useRecoilValue(viewableCalendarEventIdState());
+  const { record: calendarEvent } = useFindOneRecord<CalendarEvent>({
+    objectNameSingular: CoreObjectNameSingular.CalendarEvent,
+    objectRecordId: calendarEventId ?? '',
+    onCompleted: (record) => setRecords([record]),
+  });
+
+  if (!calendarEvent) return null;
+
+  return <CalendarEventDetails calendarEvent={calendarEvent} />;
+};

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

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