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

4486 connect settingsaccountscalendars to backend (#4605)

Browse Source 
* 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
This commit is contained in:
bosiraphael
2024-03-27 15:01:00 +01:00
committed by GitHub
parent 5c40e3608b
commit 77e08daa79
11 changed files with 151 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/twenty-front/src/modules/accounts/types/CalendarChannel.ts Normal file
View File

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

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

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

43
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx → packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
View File

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

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

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

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

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

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

@ -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 && (

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

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

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

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

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

@ -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. */}
{!!mockedConnectedAccounts.length && (
{!!calendarChannels.length && (
<>
<Section>
<H2Title

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

@ -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,
SettingsAccountsEventVisibilitySettingsCard,
} from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
CalendarChannel,
CalendarChannelVisibility,
} 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 connectedAccount = mockedConnectedAccounts.find(
({ id }) => id === accountUuid,
);
const navigate = useNavigate();
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}
onChange={(_value) => {}}
value={calendarChannel.visibility}
onChange={handleVisibilityChange}
/>
</Section>
<Section>
@ -70,8 +117,8 @@ export const SettingsAccountsCalendarsSettings = () => {
</StyledCardMedia>
}
title="Auto-creation"
value={false}
onToggle={(_value) => {}}
value={!!calendarChannel.isContactAutoCreationEnabled}
onToggle={handleContactAutoCreationToggle}
/>
</Section>
<Section>
@ -89,8 +136,8 @@ export const SettingsAccountsCalendarsSettings = () => {
</StyledCardMedia>
}
title="Sync events"
value={false}
onToggle={(_value) => {}}
value={!!calendarChannel.isSyncEnabled}
onToggle={handleSyncEventsToggle}
/>
</Section>
</SettingsPageContainer>

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

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