From 5a8a9cd029602439fb0e7029fd5285cb5fc39fdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Wed, 21 Feb 2024 13:18:57 -0300 Subject: [PATCH] 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 --- .../types/CoreObjectNameSingular.ts | 2 +- ...ettingsAccountsCalendarSettingsSection.tsx | 38 +++++++++++++++++++ ...ttingsAccountsConnectedAccountsSection.tsx | 4 +- .../SettingsAccountsEmailsSyncSection.tsx | 14 +++---- ...=> SettingsAccountsListEmptyStateCard.tsx} | 6 +-- ...x => SettingsAccountsListSkeletonCard.tsx} | 2 +- .../components/SettingsNewAccountSection.tsx | 5 +-- .../accounts/SettingsAccountsCalendars.tsx | 2 + 8 files changed, 56 insertions(+), 17 deletions(-) create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarSettingsSection.tsx rename packages/twenty-front/src/modules/settings/accounts/components/{SettingsAccountsEmptyStateCard.tsx => SettingsAccountsListEmptyStateCard.tsx} (91%) rename packages/twenty-front/src/modules/settings/accounts/components/{SettingsAccountEmailsSkeletonCard.tsx => SettingsAccountsListSkeletonCard.tsx} (75%) diff --git a/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts b/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts index 9a5aa1c08..e148338d9 100644 --- a/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts +++ b/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', diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarSettingsSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarSettingsSection.tsx new file mode 100644 index 000000000..fa2165822 --- /dev/null +++ b/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({ + objectNameSingular: CoreObjectNameSingular.ConnectedAccount, + filter: { + accountOwnerId: { + eq: currentWorkspaceMember?.id, + }, + }, + }); + + return ( +
+ + + {loading ? ( + + ) : !accounts.length ? ( + + ) : null} +
+ ); +}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx index 7b9863e66..50db7192f 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx +++ b/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} /> ) : ( - + )} ); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx index 198e47420..f5a4aa93a 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx +++ b/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({ - objectNameSingular: 'connectedAccount', + objectNameSingular: CoreObjectNameSingular.ConnectedAccount, filter: { accountOwnerId: { eq: currentWorkspaceMember?.id, @@ -51,13 +51,13 @@ export const SettingsAccountsEmailsSyncSection = () => { /> {loading ? ( - + ) : accounts.length ? ( ) : ( - + )} ); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx similarity index 91% rename from packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx rename to packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx index 23fe1e130..c8d807681 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx +++ b/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 () => { diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListSkeletonCard.tsx similarity index 75% rename from packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx rename to packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListSkeletonCard.tsx index b30fbbec5..2044d629a 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListSkeletonCard.tsx @@ -7,4 +7,4 @@ const StyledCard = styled(Card)` height: 40px; `; -export const SettingsAccountEmailsSkeletonCard = () => ; +export { StyledCard as SettingsAccountsListSkeletonCard }; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx index 9546c6520..06e07a063 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx +++ b/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 (
@@ -10,7 +9,7 @@ export const SettingsNewAccountSection = () => { title="New account" description="Connect a new account to your workspace" /> - +
); }; diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx index d9f90f1ad..d77a9d6b9 100644 --- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx +++ b/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' }, ]} /> + );