feat: add Calendar Settings section to Settings/Accounts/Calendars page (#4104)

* feat: add Calendar Settings section to Settings/Accounts/Calendars page

Closes #4060

* refactor: rename components

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

@@ -6,7 +6,7 @@ export enum CoreObjectNameSingular {
   Blocklist = 'blocklist',
   Comment = 'comment',
   Company = 'company',
-  ConenctedAccount = 'conenctedAccount',
+  ConnectedAccount = 'connectedAccount',
   Favorite = 'favorite',
   Message = 'message',
   MessageChannel = 'messageChannel',

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

@@ -0,0 +1,38 @@
+import { useRecoilValue } from 'recoil';
+
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+
+export const SettingsAccountsCalendarSettingsSection = () => {
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+
+  const { records: accounts, loading } = useFindManyRecords<ConnectedAccount>({
+    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
+    filter: {
+      accountOwnerId: {
+        eq: currentWorkspaceMember?.id,
+      },
+    },
+  });
+
+  return (
+    <Section>
+      <H2Title
+        title="Calendar settings"
+        description="Sync your calendars and set your preferences"
+      />
+
+      {loading ? (
+        <SettingsAccountsListSkeletonCard />
+      ) : !accounts.length ? (
+        <SettingsAccountsListEmptyStateCard />
+      ) : null}
+    </Section>
+  );
+};

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

@@ -4,7 +4,7 @@ import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
 import { SettingsAccountsCard } from './SettingsAccountsCard';
-import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
+import { SettingsAccountsListEmptyStateCard } from './SettingsAccountsListEmptyStateCard';
 
 export const SettingsAccountsConnectedAccountsSection = ({
   accounts,
@@ -30,7 +30,7 @@ export const SettingsAccountsConnectedAccountsSection = ({
           onAccountRemove={handleAccountRemove}
         />
       ) : (
-        <SettingsAccountsEmptyStateCard />
+        <SettingsAccountsListEmptyStateCard />
       )}
     </Section>
   );

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

@@ -3,20 +3,20 @@ import { useRecoilValue } from 'recoil';
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountEmailsSkeletonCard } from '@/settings/accounts/components/SettingsAccountEmailsSkeletonCard';
+import { SettingsAccountsEmailsCard } from '@/settings/accounts/components/SettingsAccountsEmailsCard';
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
-import { SettingsAccountsEmailsCard } from './SettingsAccountsEmailsCard';
-import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
-
 export const SettingsAccountsEmailsSyncSection = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const { records: accounts, loading: accountsLoading } =
     useFindManyRecords<ConnectedAccount>({
-      objectNameSingular: 'connectedAccount',
+      objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
       filter: {
         accountOwnerId: {
           eq: currentWorkspaceMember?.id,
@@ -51,13 +51,13 @@ export const SettingsAccountsEmailsSyncSection = () => {
       />
 
       {loading ? (
-        <SettingsAccountEmailsSkeletonCard />
+        <SettingsAccountsListSkeletonCard />
       ) : accounts.length ? (
         <SettingsAccountsEmailsCard
           messageChannels={messageChannelsWithSyncedEmails}
         />
       ) : (
-        <SettingsAccountsEmptyStateCard />
+        <SettingsAccountsListEmptyStateCard />
       )}
     </Section>
   );

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

@@ -20,13 +20,13 @@ const StyledBody = styled(CardContent)`
   justify-content: center;
 `;
 
-type SettingsAccountsEmptyStateCardProps = {
+type SettingsAccountsListEmptyStateCardProps = {
   label?: string;
 };
 
-export const SettingsAccountsEmptyStateCard = ({
+export const SettingsAccountsListEmptyStateCard = ({
   label,
-}: SettingsAccountsEmptyStateCardProps) => {
+}: SettingsAccountsListEmptyStateCardProps) => {
   const [generateTransientToken] = useGenerateTransientTokenMutation();
 
   const handleGmailLogin = useCallback(async () => {

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

@@ -7,4 +7,4 @@ const StyledCard = styled(Card)`
   height: 40px;
 `;
 
-export const SettingsAccountEmailsSkeletonCard = () => <StyledCard />;
+export { StyledCard as SettingsAccountsListSkeletonCard };

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

@@ -1,8 +1,7 @@
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
-import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
-
 export const SettingsNewAccountSection = () => {
   return (
     <Section>
@@ -10,7 +9,7 @@ export const SettingsNewAccountSection = () => {
         title="New account"
         description="Connect a new account to your workspace"
       />
-      <SettingsAccountsEmptyStateCard label="Connect a Google account" />
+      <SettingsAccountsListEmptyStateCard label="Connect a Google account" />
     </Section>
   );
 };

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

@@ -1,3 +1,4 @@
+import { SettingsAccountsCalendarSettingsSection } from '@/settings/accounts/components/SettingsAccountsCalendarSettingsSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -17,6 +18,7 @@ export const SettingsAccountsCalendars = () => (
           { children: 'Calendars' },
         ]}
       />
+      <SettingsAccountsCalendarSettingsSection />
     </SettingsPageContainer>
   </SubMenuTopBarContainer>
 );