admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

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

Closes #4060

* refactor: rename components
This commit is contained in:
Thaïs
2024-02-21 13:18:57 -03:00
committed by GitHub
parent 15510c9fbe
commit 5a8a9cd029
8 changed files with 56 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

38
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarSettingsSection.tsx Normal file
View File

@ -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>
);
};

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

@ -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>
);

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

@ -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>
);

6
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx → packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
View File

@ -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 () => {

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx → packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListSkeletonCard.tsx
View File

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

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

@ -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>
);
};

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

@ -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>
);