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/ui/display/chip/components/Chip.tsx

@@ -1,4 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip';
@@ -34,86 +35,108 @@ type ChipProps = {
   onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 };
 
-const StyledContainer = styled.div<Partial<ChipProps>>`
+const StyledContainer = styled.div<
+  Pick<
+    ChipProps,
+    'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant'
+  >
+>`
+  --chip-horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --chip-vertical-padding: ${({ theme }) => theme.spacing(1)};
+
   align-items: center;
-
-  background-color: ${({ theme, variant }) =>
-    variant === ChipVariant.Highlighted
-      ? theme.background.transparent.light
-      : variant === ChipVariant.Rounded
-        ? theme.background.transparent.lighter
-        : 'transparent'};
-  border-color: ${({ theme, variant }) =>
-    variant === ChipVariant.Rounded ? theme.border.color.medium : 'none'};
-  border-radius: ${({ theme, variant }) =>
-    variant === ChipVariant.Rounded ? '50px' : theme.border.radius.sm};
-  border-style: ${({ variant }) =>
-    variant === ChipVariant.Rounded ? 'solid' : 'none'};
-  border-width: ${({ variant }) =>
-    variant === ChipVariant.Rounded ? '1px' : '0px'};
-
-  color: ${({ theme, disabled, accent }) =>
-    disabled
-      ? theme.font.color.light
-      : accent === ChipAccent.TextPrimary
-        ? theme.font.color.primary
-        : theme.font.color.secondary};
-  cursor: ${({ clickable, disabled, variant }) =>
-    disabled || variant === ChipVariant.Transparent
-      ? 'inherit'
-      : clickable
-        ? 'pointer'
-        : 'inherit'};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme, disabled }) =>
+    disabled ? theme.font.color.light : theme.font.color.secondary};
+  cursor: ${({ clickable, disabled }) =>
+    clickable ? 'pointer' : disabled ? 'not-allowed' : 'inherit'};
   display: inline-flex;
-  font-weight: ${({ theme, accent }) =>
-    accent === ChipAccent.TextSecondary ? theme.font.weight.medium : 'inherit'};
   gap: ${({ theme }) => theme.spacing(1)};
-
-  height: ${({ size }) => (size === ChipSize.Large ? '16px' : '12px')};
-  --chip-horizontal-padding: ${({ theme, variant }) =>
-    variant === ChipVariant.Rounded ? theme.spacing(2) : theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(3)};
   max-width: ${({ maxWidth }) =>
     maxWidth
-      ? `calc( ${maxWidth}px - 2*var(--chip-horizontal-padding))`
+      ? `calc(${maxWidth}px - 2 * var(--chip-horizontal-padding))`
       : '200px'};
-
-  --chip-vertical-padding: ${({ theme, variant }) =>
-    variant === ChipVariant.Rounded ? '3px' : theme.spacing(1)};
-
   overflow: hidden;
   padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
   user-select: none;
 
-  :hover {
-    ${({ variant, theme, disabled }) => {
-      if (!disabled) {
-        return (
-          'background-color: ' +
-          (variant === ChipVariant.Highlighted
-            ? theme.background.transparent.medium
-            : variant === ChipVariant.Regular
-              ? theme.background.transparent.light
-              : 'transparent') +
-          ';'
-        );
-      }
-    }}
-  }
-  :active {
-    ${({ variant, theme, disabled }) => {
-      if (!disabled) {
-        return (
-          'background-color: ' +
-          (variant === ChipVariant.Highlighted
-            ? theme.background.transparent.strong
-            : variant === ChipVariant.Regular
-              ? theme.background.transparent.medium
-              : 'transparent') +
-          ';'
-        );
-      }
-    }}
-  }
+  // Accent style overrides
+  ${({ accent, disabled, theme }) => {
+    if (accent === ChipAccent.TextPrimary) {
+      return (
+        !disabled &&
+        css`
+          color: ${theme.font.color.primary};
+        `
+      );
+    }
+
+    if (accent === ChipAccent.TextSecondary) {
+      return css`
+        font-weight: ${theme.font.weight.medium};
+      `;
+    }
+  }}
+
+  // Size style overrides
+  ${({ theme, size }) =>
+    size === ChipSize.Large &&
+    css`
+      height: ${theme.spacing(4)};
+    `}
+
+  // Variant style overrides
+  ${({ disabled, theme, variant }) => {
+    if (variant === ChipVariant.Regular) {
+      return (
+        !disabled &&
+        css`
+          :hover {
+            background-color: ${theme.background.transparent.light};
+          }
+
+          :active {
+            background-color: ${theme.background.transparent.medium};
+          }
+        `
+      );
+    }
+
+    if (variant === ChipVariant.Highlighted) {
+      return css`
+        background-color: ${theme.background.transparent.light};
+
+        ${!disabled &&
+        css`
+          :hover {
+            background-color: ${theme.background.transparent.medium};
+          }
+
+          :active {
+            background-color: ${theme.background.transparent.strong};
+          }
+        `}
+      `;
+    }
+
+    if (variant === ChipVariant.Rounded) {
+      return css`
+        --chip-horizontal-padding: ${theme.spacing(2)};
+        --chip-vertical-padding: 3px;
+
+        background-color: ${theme.background.transparent.lighter};
+        border: 1px solid ${theme.border.color.medium};
+        border-radius: 50px;
+      `;
+    }
+
+    if (variant === ChipVariant.Transparent) {
+      return css`
+        cursor: inherit;
+      `;
+    }
+  }}
 `;
 
 const StyledLabel = styled.span`

packages/twenty-front/src/modules/ui/display/icon/constants/index.ts

@@ -950,6 +950,7 @@ import {
   IconCalendarBolt,
   IconCalendarCancel,
   IconCalendarCheck,
+  IconCalendarClock,
   IconCalendarCode,
   IconCalendarCog,
   IconCalendarDollar,
@@ -4199,14 +4200,14 @@ import {
 } from '@tabler/icons-react';
 
 export default {
+  Icon123,
+  Icon24Hours,
   Icon2fa,
+  Icon360,
+  Icon360View,
   Icon3dCubeSphere,
   Icon3dCubeSphereOff,
   Icon3dRotate,
-  Icon24Hours,
-  Icon123,
-  Icon360,
-  Icon360View,
   IconAB,
   IconAB2,
   IconAbacus,
@@ -5149,6 +5150,7 @@ export default {
   IconCalendarBolt,
   IconCalendarCancel,
   IconCalendarCheck,
+  IconCalendarClock,
   IconCalendarCode,
   IconCalendarCog,
   IconCalendarDollar,
@@ -5440,6 +5442,9 @@ export default {
   IconClockExclamation,
   IconClockHeart,
   IconClockHour1,
+  IconClockHour10,
+  IconClockHour11,
+  IconClockHour12,
   IconClockHour2,
   IconClockHour3,
   IconClockHour4,
@@ -5448,9 +5453,6 @@ export default {
   IconClockHour7,
   IconClockHour8,
   IconClockHour9,
-  IconClockHour10,
-  IconClockHour11,
-  IconClockHour12,
   IconClockMinus,
   IconClockOff,
   IconClockPause,
@@ -7117,10 +7119,10 @@ export default {
   IconMovieOff,
   IconMug,
   IconMugOff,
-  IconMultiplier1x,
-  IconMultiplier2x,
   IconMultiplier05x,
   IconMultiplier15x,
+  IconMultiplier1x,
+  IconMultiplier2x,
   IconMushroom,
   IconMushroomOff,
   IconMusic,
@@ -7515,20 +7517,20 @@ export default {
   IconReservedLine,
   IconResize,
   IconRestore,
-  IconRewindBackward5,
   IconRewindBackward10,
   IconRewindBackward15,
   IconRewindBackward20,
   IconRewindBackward30,
   IconRewindBackward40,
+  IconRewindBackward5,
   IconRewindBackward50,
   IconRewindBackward60,
-  IconRewindForward5,
   IconRewindForward10,
   IconRewindForward15,
   IconRewindForward20,
   IconRewindForward30,
   IconRewindForward40,
+  IconRewindForward5,
   IconRewindForward50,
   IconRewindForward60,
   IconRibbonHealth,
@@ -8080,11 +8082,11 @@ export default {
   IconTiltShift,
   IconTiltShiftOff,
   IconTimeDuration0,
-  IconTimeDuration5,
   IconTimeDuration10,
   IconTimeDuration15,
   IconTimeDuration30,
   IconTimeDuration45,
+  IconTimeDuration5,
   IconTimeDuration60,
   IconTimeDuration90,
   IconTimeDurationOff,

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
+import { RightDrawerCalendarEvent } from '@/activities/calendar/right-drawer/components/RightDrawerCalendarEvent';
 import { RightDrawerEmailThread } from '@/activities/emails/right-drawer/components/RightDrawerEmailThread';
-import { RightDrawerEmailThreadTopBar } from '@/activities/emails/right-drawer/components/RightDrawerEmailThreadTopBar';
 import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity';
 import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity';
 
@@ -27,28 +27,31 @@ const StyledRightDrawerBody = styled.div`
   position: relative;
 `;
 
+const RIGHT_DRAWER_PAGES_CONFIG = {
+  [RightDrawerPages.CreateActivity]: {
+    page: <RightDrawerCreateActivity />,
+    topBar: <RightDrawerActivityTopBar />,
+  },
+  [RightDrawerPages.EditActivity]: {
+    page: <RightDrawerEditActivity />,
+    topBar: <RightDrawerActivityTopBar />,
+  },
+  [RightDrawerPages.ViewEmailThread]: {
+    page: <RightDrawerEmailThread />,
+    topBar: <RightDrawerActivityTopBar showActionBar={false} />,
+  },
+  [RightDrawerPages.ViewCalendarEvent]: {
+    page: <RightDrawerCalendarEvent />,
+    topBar: <RightDrawerActivityTopBar showActionBar={false} />,
+  },
+};
+
 export const RightDrawerRouter = () => {
   const [rightDrawerPage] = useRecoilState(rightDrawerPageState());
 
-  let page = <></>;
-  let topBar = <></>;
-
-  switch (rightDrawerPage) {
-    case RightDrawerPages.CreateActivity:
-      page = <RightDrawerCreateActivity />;
-      topBar = <RightDrawerActivityTopBar />;
-      break;
-    case RightDrawerPages.EditActivity:
-      page = <RightDrawerEditActivity />;
-      topBar = <RightDrawerActivityTopBar />;
-      break;
-    case RightDrawerPages.ViewEmailThread:
-      page = <RightDrawerEmailThread />;
-      topBar = <RightDrawerEmailThreadTopBar />;
-      break;
-    default:
-      break;
-  }
+  const { topBar = null, page = null } = rightDrawerPage
+    ? RIGHT_DRAWER_PAGES_CONFIG[rightDrawerPage]
+    : {};
 
   return (
     <StyledRightDrawerPage>

packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerPages.ts

@@ -2,4 +2,5 @@ export enum RightDrawerPages {
   CreateActivity = 'create-activity',
   EditActivity = 'edit-activity',
   ViewEmailThread = 'view-email-thread',
+  ViewCalendarEvent = 'view-calendar-event',
 }