4486 connect settingsaccountscalendars to backend (#4605)

* add useFindOneRecord and useUpdateOneRecord

* remove mock

* use calendar channel information in display

* renaming

* refactoring

* handleSyncEventsToggle

* improve typing using generics

* modifications after review

* rename components

* renaming

packages/twenty-front/src/modules/accounts/types/CalendarChannel.ts

@@ -0,0 +1,12 @@
+export enum CalendarChannelVisibility {
+  Everything = 'SHARE_EVERYTHING',
+  Metadata = 'METADATA',
+}
+
+export type CalendarChannel = {
+  id: string;
+  handle: string;
+  isContactAutoCreationEnabled?: boolean;
+  isSyncEnabled?: boolean;
+  visibility: CalendarChannelVisibility;
+};

packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts

@@ -4,6 +4,7 @@ export enum CoreObjectNameSingular {
   ApiKey = 'apiKey',
   Attachment = 'attachment',
   Blocklist = 'blocklist',
+  CalendarChannel = 'calendarChannel',
   CalendarEvent = 'calendarEvent',
   Comment = 'comment',
   Company = 'company',

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
+import { CalendarChannel } from '@/accounts/types/CalendarChannel';
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -11,7 +12,6 @@ import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/compo
 import { IconChevronRight } from '@/ui/display/icon';
 import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
-import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
 const StyledRowRightContainer = styled.div`
   align-items: center;
@@ -19,30 +19,43 @@ const StyledRowRightContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const SettingsAccountsCalendarAccountsListCard = () => {
+export const SettingsAccountsCalendarChannelsListCard = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const navigate = useNavigate();
 
-  const { records: _accounts, loading } = useFindManyRecords<ConnectedAccount>({
+  const { records: accounts, loading: accountsLoading } =
-    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
+    useFindManyRecords<ConnectedAccount>({
-    filter: {
+      objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
-      accountOwnerId: {
+      filter: {
-        eq: currentWorkspaceMember?.id,
+        accountOwnerId: {
+          eq: currentWorkspaceMember?.id,
+        },
       },
-    },
+    });
-  });
+
+  const { records: calendarChannels, loading: calendarChannelsLoading } =
+    useFindManyRecords<CalendarChannel>({
+      objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+      filter: {
+        connectedAccountId: {
+          in: accounts.map((account) => account.id),
+        },
+      },
+    });
 
   return (
     <SettingsAccountsListCard
-      accounts={mockedConnectedAccounts}
+      items={calendarChannels}
-      isLoading={loading}
+      isLoading={accountsLoading || calendarChannelsLoading}
-      onRowClick={(account) =>
+      onRowClick={(calendarChannel) =>
-        navigate(`/settings/accounts/calendars/${account.id}`)
+        navigate(`/settings/accounts/calendars/${calendarChannel.id}`)
       }
       RowIcon={IconGoogleCalendar}
-      RowRightComponent={({ account: _account }) => (
+      RowRightComponent={({ item: calendarChannel }) => (
         <StyledRowRightContainer>
-          <SettingsAccountsSynchronizationStatus synced />
+          <SettingsAccountsSynchronizationStatus
+            synced={!!calendarChannel.isSyncEnabled}
+          />
           <LightIconButton Icon={IconChevronRight} accent="tertiary" />
         </StyledRowRightContainer>
       )}

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx

@@ -1,16 +1,12 @@
 import styled from '@emotion/styled';
 
+import { CalendarChannelVisibility } from '@/accounts/types/CalendarChannel';
 import { SettingsAccountsRadioSettingsCard } from '@/settings/accounts/components/SettingsAccountsRadioSettingsCard';
 import { SettingsAccountsVisibilitySettingCardMedia } from '@/settings/accounts/components/SettingsAccountsVisibilitySettingCardMedia';
 
-export enum EventSettingsVisibilityValue {
-  Everything = 'share_everything',
-  Metadata = 'metadata',
-}
-
 type SettingsAccountsEventVisibilitySettingsCardProps = {
-  onChange: (nextValue: EventSettingsVisibilityValue) => void;
+  onChange: (nextValue: CalendarChannelVisibility) => void;
-  value?: EventSettingsVisibilityValue;
+  value?: CalendarChannelVisibility;
 };
 
 const StyledCardMedia = styled(SettingsAccountsVisibilitySettingCardMedia)`
@@ -21,20 +17,20 @@ const eventSettingsVisibilityOptions = [
   {
     title: 'Everything',
     description: 'The whole event details will be shared with your team.',
-    value: EventSettingsVisibilityValue.Everything,
+    value: CalendarChannelVisibility.Everything,
     cardMedia: <StyledCardMedia subject="active" body="active" />,
   },
   {
     title: 'Metadata',
     description: 'Only date & participants will be shared with your team.',
-    value: EventSettingsVisibilityValue.Metadata,
+    value: CalendarChannelVisibility.Metadata,
     cardMedia: <StyledCardMedia subject="active" body="inactive" />,
   },
 ];
 
 export const SettingsAccountsEventVisibilitySettingsCard = ({
   onChange,
-  value = EventSettingsVisibilityValue.Everything,
+  value = CalendarChannelVisibility.Everything,
 }: SettingsAccountsEventVisibilitySettingsCardProps) => (
   <SettingsAccountsRadioSettingsCard
     options={eventSettingsVisibilityOptions}

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx

@@ -18,7 +18,7 @@ export const SettingsAccountsConnectedAccountsSection = ({
       description="Manage your internet accounts."
     />
     <SettingsAccountsListCard
-      accounts={accounts}
+      items={accounts}
       isLoading={loading}
       RowRightComponent={SettingsAccountsRowDropdownMenu}
       hasFooter

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListCard.tsx

@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -42,44 +41,47 @@ const StyledButton = styled.button`
   }
 `;
 
-type SettingsAccountsListCardProps<
+type SettingsAccountsListCardItem = {
-  Account extends Pick<ConnectedAccount, 'handle' | 'id'>,
+  handle: string;
-> = {
+  id: string;
-  accounts: Account[];
+};
+
+type SettingsAccountsListCardProps<T extends SettingsAccountsListCardItem> = {
+  items: T[];
   hasFooter?: boolean;
   isLoading?: boolean;
-  onRowClick?: (account: Account) => void;
+  onRowClick?: (item: T) => void;
   RowIcon?: IconComponent;
-  RowRightComponent: ComponentType<{ account: Account }>;
+  RowRightComponent: ComponentType<{ item: T }>;
 };
 
 export const SettingsAccountsListCard = <
-  Account extends Pick<ConnectedAccount, 'handle' | 'id'> = ConnectedAccount,
+  T extends SettingsAccountsListCardItem,
 >({
-  accounts,
+  items,
   hasFooter,
   isLoading,
   onRowClick,
   RowIcon = IconGoogle,
   RowRightComponent,
-}: SettingsAccountsListCardProps<Account>) => {
+}: SettingsAccountsListCardProps<T>) => {
   const theme = useTheme();
   const navigate = useNavigate();
 
   if (isLoading === true) return <SettingsAccountsListSkeletonCard />;
 
-  if (!accounts.length) return <SettingsAccountsListEmptyStateCard />;
+  if (!items.length) return <SettingsAccountsListEmptyStateCard />;
 
   return (
     <Card>
-      {accounts.map((account, index) => (
+      {items.map((item, index) => (
         <SettingsAccountRow
-          key={account.id}
+          key={item.id}
           LeftIcon={RowIcon}
-          account={account}
+          account={item}
-          rightComponent={<RowRightComponent account={account} />}
+          rightComponent={<RowRightComponent item={item} />}
-          divider={index < accounts.length - 1}
+          divider={index < items.length - 1}
-          onClick={() => onRowClick?.(account)}
+          onClick={() => onRowClick?.(item)}
         />
       ))}
       {hasFooter && (

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx

@@ -19,7 +19,7 @@ const StyledRowRightContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const SettingsAccountsEmailsAccountsListCard = () => {
+export const SettingsAccountsMessageChannelsListCard = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const navigate = useNavigate();
 
@@ -52,13 +52,13 @@ export const SettingsAccountsEmailsAccountsListCard = () => {
 
   return (
     <SettingsAccountsListCard
-      accounts={messageChannelsWithSyncedEmails}
+      items={messageChannelsWithSyncedEmails}
       isLoading={accountsLoading || messageChannelsLoading}
       onRowClick={(messageChannel) =>
         navigate(`/settings/accounts/emails/${messageChannel.id}`)
       }
       RowIcon={IconGmail}
-      RowRightComponent={({ account: messageChannel }) => (
+      RowRightComponent={({ item: messageChannel }) => (
         <StyledRowRightContainer>
           <SettingsAccountsSynchronizationStatus
             synced={messageChannel.isSynced}

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx

@@ -12,12 +12,12 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsAccountsRowDropdownMenuProps = {
-  account: Pick<ConnectedAccount, 'id' | 'messageChannels'>;
+  item: Pick<ConnectedAccount, 'id' | 'messageChannels'>;
   className?: string;
 };
 
 export const SettingsAccountsRowDropdownMenu = ({
-  account,
+  item: account,
   className,
 }: SettingsAccountsRowDropdownMenuProps) => {
   const dropdownId = `settings-account-row-${account.id}`;

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx

@@ -1,13 +1,14 @@
 import { addMinutes, endOfDay, min, startOfDay } from 'date-fns';
 import { useRecoilValue } from 'recoil';
 
+import { CalendarChannel } from '@/accounts/types/CalendarChannel';
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsCalendarAccountsListCard } from '@/settings/accounts/components/SettingsAccountsCalendarAccountsListCard';
+import { SettingsAccountsCalendarChannelsListCard } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsListCard';
 import { SettingsAccountsCalendarDisplaySettings } from '@/settings/accounts/components/SettingsAccountsCalendarDisplaySettings';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -21,11 +22,10 @@ import {
   TimelineCalendarEvent,
   TimelineCalendarEventVisibility,
 } from '~/generated-metadata/graphql';
-import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
 export const SettingsAccountsCalendars = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
-  const { records: _accounts } = useFindManyRecords<ConnectedAccount>({
+  const { records: accounts } = useFindManyRecords<ConnectedAccount>({
     objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
     filter: {
       accountOwnerId: {
@@ -34,6 +34,15 @@ export const SettingsAccountsCalendars = () => {
     },
   });
 
+  const { records: calendarChannels } = useFindManyRecords<CalendarChannel>({
+    objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+    filter: {
+      connectedAccountId: {
+        in: accounts.map((account) => account.id),
+      },
+    },
+  });
+
   const exampleStartDate = new Date();
   const exampleEndDate = min([
     addMinutes(exampleStartDate, 30),
@@ -85,10 +94,9 @@ export const SettingsAccountsCalendars = () => {
             title="Calendar settings"
             description="Sync your calendars and set your preferences"
           />
-          <SettingsAccountsCalendarAccountsListCard />
+          <SettingsAccountsCalendarChannelsListCard />
         </Section>
-        {/* TODO: retrieve connected accounts data from back-end when the Calendar feature is ready. */}
+        {!!calendarChannels.length && (
-        {!!mockedConnectedAccounts.length && (
           <>
             <Section>
               <H2Title

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx

@@ -1,22 +1,27 @@
-import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {
-  EventSettingsVisibilityValue,
+  CalendarChannel,
-  SettingsAccountsEventVisibilitySettingsCard,
+  CalendarChannelVisibility,
-} from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
+} from '@/accounts/types/CalendarChannel';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
 import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
 import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { IconRefresh, IconSettings, IconUser } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
 const StyledCardMedia = styled(SettingsAccountsCardMedia)`
   height: ${({ theme }) => theme.spacing(6)};
@@ -24,10 +29,52 @@ const StyledCardMedia = styled(SettingsAccountsCardMedia)`
 
 export const SettingsAccountsCalendarsSettings = () => {
   const theme = useTheme();
-  const { accountUuid = '' } = useParams();
+  const navigate = useNavigate();
-  const connectedAccount = mockedConnectedAccounts.find(
+
-    ({ id }) => id === accountUuid,
+  const { accountUuid: calendarChannelId = '' } = useParams();
-  );
+
+  const { record: calendarChannel, loading } =
+    useFindOneRecord<CalendarChannel>({
+      objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+      objectRecordId: calendarChannelId,
+    });
+
+  const { updateOneRecord } = useUpdateOneRecord<CalendarChannel>({
+    objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+  });
+
+  const handleVisibilityChange = (value: CalendarChannelVisibility) => {
+    updateOneRecord({
+      idToUpdate: calendarChannelId,
+      updateOneRecordInput: {
+        visibility: value,
+      },
+    });
+  };
+
+  const handleContactAutoCreationToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: calendarChannelId,
+      updateOneRecordInput: {
+        isContactAutoCreationEnabled: value,
+      },
+    });
+  };
+
+  const handleSyncEventsToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: calendarChannelId,
+      updateOneRecordInput: {
+        isSyncEnabled: value,
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (!loading && !calendarChannel) navigate(AppPath.NotFound);
+  }, [loading, calendarChannel, navigate]);
+
+  if (!calendarChannel) return null;
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -42,7 +89,7 @@ export const SettingsAccountsCalendarsSettings = () => {
               children: 'Calendars',
               href: getSettingsPagePath(SettingsPath.AccountsCalendars),
             },
-            { children: connectedAccount?.handle || '' },
+            { children: calendarChannel?.handle || '' },
           ]}
         />
         <Section>
@@ -51,8 +98,8 @@ export const SettingsAccountsCalendarsSettings = () => {
             description="Define what will be visible to other users in your workspace"
           />
           <SettingsAccountsEventVisibilitySettingsCard
-            value={EventSettingsVisibilityValue.Everything}
+            value={calendarChannel.visibility}
-            onChange={(_value) => {}}
+            onChange={handleVisibilityChange}
           />
         </Section>
         <Section>
@@ -70,8 +117,8 @@ export const SettingsAccountsCalendarsSettings = () => {
               </StyledCardMedia>
             }
             title="Auto-creation"
-            value={false}
+            value={!!calendarChannel.isContactAutoCreationEnabled}
-            onToggle={(_value) => {}}
+            onToggle={handleContactAutoCreationToggle}
           />
         </Section>
         <Section>
@@ -89,8 +136,8 @@ export const SettingsAccountsCalendarsSettings = () => {
               </StyledCardMedia>
             }
             title="Sync events"
-            value={false}
+            value={!!calendarChannel.isSyncEnabled}
-            onToggle={(_value) => {}}
+            onToggle={handleSyncEventsToggle}
           />
         </Section>
       </SettingsPageContainer>

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx

@@ -1,4 +1,4 @@
-import { SettingsAccountsEmailsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsEmailsAccountsListCard';
+import { SettingsAccountsMessageChannelsListCard } from '@/settings/accounts/components/SettingsAccountsMessageChannelsListCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -20,7 +20,7 @@ export const SettingsAccountsEmails = () => (
           title="Emails sync"
           description="Sync your inboxes and set your privacy settings"
         />
-        <SettingsAccountsEmailsAccountsListCard />
+        <SettingsAccountsMessageChannelsListCard />
       </Section>
     </SettingsPageContainer>
   </SubMenuTopBarContainer>