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>({
-    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
-    filter: {
-      accountOwnerId: {
-        eq: currentWorkspaceMember?.id,
+  const { records: accounts, loading: accountsLoading } =
+    useFindManyRecords<ConnectedAccount>({
+      objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
+      filter: {
+        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}
-      isLoading={loading}
-      onRowClick={(account) =>
-        navigate(`/settings/accounts/calendars/${account.id}`)
+      items={calendarChannels}
+      isLoading={accountsLoading || calendarChannelsLoading}
+      onRowClick={(calendarChannel) =>
+        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;
-  value?: EventSettingsVisibilityValue;
+  onChange: (nextValue: CalendarChannelVisibility) => void;
+  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<
-  Account extends Pick<ConnectedAccount, 'handle' | 'id'>,
-> = {
-  accounts: Account[];
+type SettingsAccountsListCardItem = {
+  handle: string;
+  id: string;
+};
+
+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}
-          rightComponent={<RowRightComponent account={account} />}
-          divider={index < accounts.length - 1}
-          onClick={() => onRowClick?.(account)}
+          account={item}
+          rightComponent={<RowRightComponent item={item} />}
+          divider={index < items.length - 1}
+          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}`;