4810 display participants in the right drawer of the calendar event

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

@@ -1,7 +1,9 @@
+import React from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconCalendarEvent } from 'twenty-ui';
 
+import { CalendarEventParticipantsResponseStatus } from '@/activities/calendar/components/CalendarEventParticipantsResponseStatus';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -30,6 +32,7 @@ const StyledContainer = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(6)};
   padding: ${({ theme }) => theme.spacing(6)};
+  max-width: 100%;
 `;
 
 const StyledEventChip = styled(Chip)`
@@ -88,6 +91,30 @@ export const CalendarEventDetails = ({
     ({ name }) => name,
   );
 
+  const { calendarEventParticipants } = calendarEvent;
+
+  const Fields = fieldsToDisplay.map((fieldName) => (
+    <StyledPropertyBox key={fieldName}>
+      <FieldContext.Provider
+        value={{
+          entityId: calendarEvent.id,
+          hotkeyScope: 'calendar-event-details',
+          recoilScopeId: `${calendarEvent.id}-${fieldName}`,
+          isLabelIdentifier: false,
+          fieldDefinition: formatFieldMetadataItemAsFieldDefinition({
+            field: fieldsByName[fieldName],
+            objectMetadataItem,
+            showLabel: true,
+            labelWidth: 72,
+          }),
+          useUpdateRecord: () => [() => undefined, { loading: false }],
+        }}
+      >
+        <RecordInlineCell readonly />
+      </FieldContext.Provider>
+    </StyledPropertyBox>
+  ));
+
   return (
     <StyledContainer>
       <StyledEventChip
@@ -110,27 +137,13 @@ export const CalendarEventDetails = ({
         </StyledCreatedAt>
       </StyledHeader>
       <StyledFields>
-        {fieldsToDisplay.map((fieldName) => (
-          <StyledPropertyBox key={fieldName}>
-            <FieldContext.Provider
-              value={{
-                entityId: calendarEvent.id,
-                hotkeyScope: 'calendar-event-details',
-                recoilScopeId: `${calendarEvent.id}-${fieldName}`,
-                isLabelIdentifier: false,
-                fieldDefinition: formatFieldMetadataItemAsFieldDefinition({
-                  field: fieldsByName[fieldName],
-                  objectMetadataItem,
-                  showLabel: true,
-                  labelWidth: 72,
-                }),
-                useUpdateRecord: () => [() => undefined, { loading: false }],
-              }}
-            >
-              <RecordInlineCell readonly />
-            </FieldContext.Provider>
-          </StyledPropertyBox>
-        ))}
+        {Fields.slice(0, 2)}
+        {calendarEventParticipants && (
+          <CalendarEventParticipantsResponseStatus
+            participants={calendarEventParticipants}
+          />
+        )}
+        {Fields.slice(2)}
       </StyledFields>
     </StyledContainer>
   );

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

@@ -0,0 +1,42 @@
+import groupBy from 'lodash.groupby';
+
+import { CalendarEventParticipantsResponseStatusField } from '@/activities/calendar/components/CalendarEventParticipantsResponseStatusField';
+import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
+
+export const CalendarEventParticipantsResponseStatus = ({
+  participants,
+}: {
+  participants: CalendarEventParticipant[];
+}) => {
+  const groupedParticipants = groupBy(participants, (participant) => {
+    switch (participant.responseStatus) {
+      case 'ACCEPTED':
+        return 'Yes';
+      case 'DECLINED':
+        return 'No';
+      case 'NEEDS_ACTION':
+      case 'TENTATIVE':
+        return 'Maybe';
+      default:
+        return '';
+    }
+  });
+
+  const responseStatusOrder: ('Yes' | 'Maybe' | 'No')[] = [
+    'Yes',
+    'Maybe',
+    'No',
+  ];
+
+  return (
+    <>
+      {responseStatusOrder.map((responseStatus) => (
+        <CalendarEventParticipantsResponseStatusField
+          key={responseStatus}
+          responseStatus={responseStatus}
+          participants={groupedParticipants[responseStatus] || []}
+        />
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,112 @@
+import { useRef } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui';
+import { v4 } from 'uuid';
+
+import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
+import { ExpandableList } from '@/activities/components/ExpandableList/ExpandableList';
+import { ParticipantChip } from '@/activities/components/ParticipantChip';
+import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
+import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
+
+const StyledInlineCellBaseContainer = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  position: relative;
+  user-select: none;
+`;
+
+const StyledPropertyBox = styled(PropertyBox)`
+  height: ${({ theme }) => theme.spacing(6)};
+  padding: 0;
+`;
+
+const StyledIconContainer = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  width: 16px;
+
+  svg {
+    align-items: center;
+    display: flex;
+    height: 16px;
+    justify-content: center;
+    width: 16px;
+  }
+`;
+
+const StyledLabelAndIconContainer = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledLabelContainer = styled.div<{ width?: number }>`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  width: ${({ width }) => width}px;
+`;
+
+const StyledParticipantChip = styled(ParticipantChip)<{ inView?: boolean }>`
+  opacity: ${({ inView }) => (inView === undefined || inView ? 1 : 0)};
+`;
+
+export const CalendarEventParticipantsResponseStatusField = ({
+  responseStatus,
+  participants,
+}: {
+  responseStatus: 'Yes' | 'Maybe' | 'No';
+  participants: CalendarEventParticipant[];
+}) => {
+  const theme = useTheme();
+
+  const Icon = {
+    Yes: <IconCheck stroke={theme.icon.stroke.sm} />,
+    Maybe: <IconQuestionMark stroke={theme.icon.stroke.sm} />,
+    No: <IconX stroke={theme.icon.stroke.sm} />,
+  }[responseStatus];
+
+  // We want to display external participants first
+  const orderedParticipants = [
+    ...participants.filter((participant) => participant.person),
+    ...participants.filter(
+      (participant) => !participant.person && !participant.workspaceMember,
+    ),
+    ...participants.filter((participant) => participant.workspaceMember),
+  ];
+
+  const participantsContainerRef = useRef<HTMLDivElement>(null);
+
+  const StyledChips = orderedParticipants.map((participant) => (
+    <StyledParticipantChip participant={participant} />
+  ));
+
+  return (
+    <StyledPropertyBox>
+      <StyledInlineCellBaseContainer>
+        <StyledLabelAndIconContainer>
+          <StyledIconContainer>{Icon}</StyledIconContainer>
+
+          <StyledLabelContainer width={72}>
+            <EllipsisDisplay>{responseStatus}</EllipsisDisplay>
+          </StyledLabelContainer>
+        </StyledLabelAndIconContainer>
+
+        <ExpandableList
+          components={StyledChips}
+          id={v4()}
+          rootRef={participantsContainerRef}
+          margin="0px -50px 0px 0px"
+        />
+      </StyledInlineCellBaseContainer>
+    </StyledPropertyBox>
+  );
+};

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

@@ -14,6 +14,7 @@ export const RightDrawerCalendarEvent = () => {
     objectNameSingular: CoreObjectNameSingular.CalendarEvent,
     objectRecordId: viewableCalendarEventId ?? '',
     onCompleted: (record) => setRecords([record]),
+    depth: 2,
   });
 
   if (!calendarEvent) return null;

packages/twenty-front/src/modules/activities/calendar/types/CalendarEvent.ts

@@ -1,3 +1,5 @@
+import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
+
 // TODO: use backend CalendarEvent type when ready
 export type CalendarEvent = {
   conferenceLink?: {
@@ -14,8 +16,5 @@ export type CalendarEvent = {
   startsAt: string;
   title?: string;
   visibility: 'METADATA' | 'SHARE_EVERYTHING';
-  participants?: {
-    displayName: string;
-    workspaceMemberId?: string;
-  }[];
+  calendarEventParticipants?: CalendarEventParticipant[];
 };

packages/twenty-front/src/modules/activities/calendar/types/CalendarEventParticipant.ts

@@ -0,0 +1,12 @@
+import { Person } from '@/people/types/Person';
+import { WorkspaceMember } from '~/generated-metadata/graphql';
+
+export type CalendarEventParticipant = {
+  id: string;
+  handle: string;
+  isOrganizer: boolean;
+  displayName: string;
+  person?: Person;
+  workspaceMember?: WorkspaceMember;
+  responseStatus: 'ACCEPTED' | 'DECLINED' | 'NEEDS_ACTION' | 'TENTATIVE';
+};

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

@@ -0,0 +1,109 @@
+import React, { ReactElement, useState } from 'react';
+import ReactDOM from 'react-dom';
+import styled from '@emotion/styled';
+
+import { IntersectionObserverWrapper } from '@/activities/components/ExpandableList/IntersectionObserverWrapper';
+import { Chip, ChipVariant } from '@/ui/display/chip/components/Chip';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  position: relative;
+  box-sizing: border-box;
+`;
+
+const StyledDiv = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  position: relative;
+  white-space: nowrap;
+  max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+`;
+
+const StyledExpendableCell = styled.div`
+  display: flex;
+  align-items: center;
+  align-content: center;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(1)};
+  position: absolute;
+  top: ${({ theme }) => `-${theme.spacing(2.25)}`};
+  left: ${({ theme }) => `-${theme.spacing(2.25)}`};
+  width: 232px;
+  z-index: 1;
+  box-sizing: border-box;
+  background: ${({ theme }) => theme.background.secondary};
+  padding: ${({ theme }) => theme.spacing(2)};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+  backdrop-filter: blur(20px);
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+`;
+
+export const ExpandableList = ({
+  components,
+  rootRef,
+  id,
+  margin,
+}: {
+  components: ReactElement[];
+  rootRef: React.RefObject<HTMLElement>;
+  id: string;
+  margin?: string;
+}) => {
+  const [componentsInView, setComponentsInView] = useState(new Set<number>());
+
+  const firstComponent = components[0];
+
+  const dropdownId = `expandable-list-dropdown-${id}`;
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <StyledContainer ref={containerRef}>
+      <StyledDiv>
+        {firstComponent}
+        {components.slice(1).map((component, index) => (
+          <React.Fragment key={index}>
+            <IntersectionObserverWrapper
+              set={setComponentsInView}
+              id={index}
+              rootRef={rootRef}
+              margin={margin}
+            >
+              {component}
+            </IntersectionObserverWrapper>
+            {index === componentsInView.size - 1 &&
+              components.length - componentsInView.size - 1 !== 0 && (
+                <Dropdown
+                  dropdownId={dropdownId}
+                  dropdownHotkeyScope={{
+                    scope: dropdownId,
+                  }}
+                  clickableComponent={
+                    <Chip
+                      label={`+${
+                        components.length - componentsInView.size - 1
+                      }`}
+                      variant={ChipVariant.Highlighted}
+                    />
+                  }
+                  dropdownComponents={ReactDOM.createPortal(
+                    <StyledExpendableCell>{components}</StyledExpendableCell>,
+                    containerRef.current as HTMLDivElement,
+                  )}
+                  disableBorder
+                />
+              )}
+          </React.Fragment>
+        ))}
+      </StyledDiv>
+    </StyledContainer>
+  );
+};