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

feat: add Accounts List Card to Calendar Settings (#4129)

Browse Source 
Closes #4061
This commit is contained in:
Thaïs
2024-02-22 07:22:49 -03:00
committed by GitHub
parent 8425ce4987
commit 5a692fbaeb
11 changed files with 230 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,31 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
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 { SettingsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsListCard';
import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { IconChevronRight } from '@/ui/display/icon';
import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Section } from '@/ui/layout/section/components/Section';
import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
const StyledRowRightContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
`;
export const SettingsAccountsCalendarSettingsSection = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const navigate = useNavigate();
const { records: accounts, loading } = useFindManyRecords<ConnectedAccount>({
const { records: _accounts, loading } = useFindManyRecords<ConnectedAccount>({
objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
filter: {
accountOwnerId: {
@ -27,12 +40,20 @@ export const SettingsAccountsCalendarSettingsSection = () => {
title="Calendar settings"
description="Sync your calendars and set your preferences"
/>
{loading ? (
<SettingsAccountsListSkeletonCard />
) : !accounts.length ? (
<SettingsAccountsListEmptyStateCard />
) : null}
<SettingsAccountsListCard
accounts={mockedConnectedAccounts}
isLoading={loading}
onRowClick={(account) =>
navigate(`/settings/accounts/calendars/${account.id}`)
}
RowIcon={IconGoogleCalendar}
RowRightComponent={({ account: _account }) => (
<StyledRowRightContainer>
<SettingsAccountsSynchronizationStatus synced />
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>
)}
/>
</Section>
);
};

69
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx
View File

@ -1,69 +0,0 @@
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
import { IconAt, IconPlus } from '@/ui/display/icon';
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Card } from '@/ui/layout/card/components/Card';
import { CardFooter } from '@/ui/layout/card/components/CardFooter';
import { SettingsAccountRow } from './SettingsAccountsRow';
const StyledFooter = styled(CardFooter)`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
height: ${({ theme }) => theme.spacing(6)};
padding: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(4)};
`;
const StyledIconButton = styled(LightIconButton)`
margin-left: auto;
`;
const StyledDropdown = styled(SettingsAccountsRowDropdownMenu)`
margin-left: auto;
`;
type SettingsAccountsCardProps = {
accounts: ConnectedAccount[];
onAccountRemove?: (uuid: string) => void;
};
export const SettingsAccountsCard = ({
accounts,
onAccountRemove,
}: SettingsAccountsCardProps) => {
const theme = useTheme();
const navigate = useNavigate();
return (
<Card>
{accounts.map((account, index) => (
<SettingsAccountRow
key={account.id}
LeftIcon={IconGoogle}
account={account}
rightComponent={
<StyledDropdown account={account} onRemove={onAccountRemove} />
}
divider={index < accounts.length - 1}
/>
))}
<StyledFooter>
<IconAt size={theme.icon.size.sm} />
Add account
<StyledIconButton
Icon={IconPlus}
accent="tertiary"
onClick={() => navigate('/settings/accounts/new')}
/>
</StyledFooter>
</Card>
);
};

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

@ -1,37 +1,27 @@
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Section } from '@/ui/layout/section/components/Section';
import { SettingsAccountsCard } from './SettingsAccountsCard';
import { SettingsAccountsListEmptyStateCard } from './SettingsAccountsListEmptyStateCard';
import { SettingsAccountsListCard } from './SettingsAccountsListCard';
export const SettingsAccountsConnectedAccountsSection = ({
accounts,
loading,
}: {
accounts: ConnectedAccount[];
}) => {
const { deleteOneRecord } = useDeleteOneRecord({
objectNameSingular: 'connectedAccount',
});
const handleAccountRemove = (idToRemove: string) =>
deleteOneRecord(idToRemove);
return (
<Section>
<H2Title
title="Connected accounts"
description="Manage your internet accounts."
/>
{accounts?.length ? (
<SettingsAccountsCard
accounts={accounts}
onAccountRemove={handleAccountRemove}
/>
) : (
<SettingsAccountsListEmptyStateCard />
)}
</Section>
);
};
loading?: boolean;
}) => (
<Section>
<H2Title
title="Connected accounts"
description="Manage your internet accounts."
/>
<SettingsAccountsListCard
accounts={accounts}
isLoading={loading}
RowRightComponent={SettingsAccountsRowDropdownMenu}
hasFooter
/>
</Section>
);

54
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx
View File

@ -1,54 +0,0 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { IconChevronRight } from '@/ui/display/icon';
import { IconGmail } from '@/ui/display/icon/components/IconGmail';
import { Status } from '@/ui/display/status/components/Status';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Card } from '@/ui/layout/card/components/Card';
import { SettingsAccountRow } from './SettingsAccountsRow';
const StyledRightContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
margin-left: auto;
`;
type SettingsAccountsEmailsCardProps = {
messageChannels: MessageChannel[];
};
export const SettingsAccountsEmailsCard = ({
messageChannels,
}: SettingsAccountsEmailsCardProps) => {
const navigate = useNavigate();
return (
<Card>
{messageChannels.map((messageChannel, index) => (
<SettingsAccountRow
key={messageChannel.id}
LeftIcon={IconGmail}
account={messageChannel}
rightComponent={
<StyledRightContainer>
{messageChannel.isSynced ? (
<Status color="green" text="Synced" weight="medium" />
) : (
<Status color="gray" text="Not Synced" weight="medium" />
)}
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRightContainer>
}
onClick={() =>
navigate(`/settings/accounts/emails/${messageChannel.id}`)
}
divider={index < messageChannels.length - 1}
/>
))}
</Card>
);
};

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

@ -1,18 +1,29 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { LightIconButton } from 'tsup.ui.index';
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 { SettingsAccountsEmailsCard } from '@/settings/accounts/components/SettingsAccountsEmailsCard';
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
import { SettingsAccountsListSkeletonCard } from '@/settings/accounts/components/SettingsAccountsListSkeletonCard';
import { SettingsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsListCard';
import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { IconChevronRight } from '@/ui/display/icon';
import { IconGmail } from '@/ui/display/icon/components/IconGmail';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Section } from '@/ui/layout/section/components/Section';
const StyledRowRightContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
`;
export const SettingsAccountsEmailsSyncSection = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const navigate = useNavigate();
const { records: accounts, loading: accountsLoading } =
useFindManyRecords<ConnectedAccount>({
@ -26,7 +37,7 @@ export const SettingsAccountsEmailsSyncSection = () => {
const { records: messageChannels, loading: messageChannelsLoading } =
useFindManyRecords<MessageChannel>({
objectNameSingular: 'messageChannel',
objectNameSingular: CoreObjectNameSingular.MessageChannel,
filter: {
connectedAccountId: {
in: accounts.map((account) => account.id),
@ -41,24 +52,28 @@ export const SettingsAccountsEmailsSyncSection = () => {
}),
);
const loading = accountsLoading || messageChannelsLoading;
return (
<Section>
<H2Title
title="Emails sync"
description="Sync your inboxes and set your privacy settings"
/>
{loading ? (
<SettingsAccountsListSkeletonCard />
) : accounts.length ? (
<SettingsAccountsEmailsCard
messageChannels={messageChannelsWithSyncedEmails}
/>
) : (
<SettingsAccountsListEmptyStateCard />
)}
<SettingsAccountsListCard
accounts={messageChannelsWithSyncedEmails}
isLoading={accountsLoading || messageChannelsLoading}
onRowClick={(messageChannel) =>
navigate(`/settings/accounts/emails/${messageChannel.id}`)
}
RowIcon={IconGmail}
RowRightComponent={({ account: messageChannel }) => (
<StyledRowRightContainer>
<SettingsAccountsSynchronizationStatus
synced={messageChannel.isSynced}
/>
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>
)}
/>
</Section>
);
};

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

@ -0,0 +1,89 @@
import { ReactNode } from 'react';
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';
import { SettingsPath } from '@/types/SettingsPath';
import { IconAt, IconPlus } from '@/ui/display/icon';
import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Card } from '@/ui/layout/card/components/Card';
import { CardFooter } from '@/ui/layout/card/components/CardFooter';
import { SettingsAccountRow } from './SettingsAccountsRow';
const StyledFooter = styled(CardFooter)`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
height: ${({ theme }) => theme.spacing(6)};
padding: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(4)};
`;
const StyledIconButton = styled(LightIconButton)`
margin-left: auto;
`;
type SettingsAccountsListCardProps<
Account extends Pick<ConnectedAccount, 'handle' | 'id'>,
> = {
accounts: Account[];
hasFooter?: boolean;
isLoading?: boolean;
onRowClick?: (account: Account) => void;
RowIcon?: IconComponent;
RowRightComponent: ({ account }: { account: Account }) => ReactNode;
};
export const SettingsAccountsListCard = <
Account extends Pick<ConnectedAccount, 'handle' | 'id'> = ConnectedAccount,
>({
accounts,
hasFooter,
isLoading,
onRowClick,
RowIcon = IconGoogle,
RowRightComponent,
}: SettingsAccountsListCardProps<Account>) => {
const theme = useTheme();
const navigate = useNavigate();
if (isLoading) return <SettingsAccountsListSkeletonCard />;
if (!accounts.length) return <SettingsAccountsListEmptyStateCard />;
return (
<Card>
{accounts.map((account, index) => (
<SettingsAccountRow
key={account.id}
LeftIcon={RowIcon}
account={account}
rightComponent={<RowRightComponent account={account} />}
divider={index < accounts.length - 1}
onClick={() => onRowClick?.(account)}
/>
))}
{hasFooter && (
<StyledFooter>
<IconAt size={theme.icon.size.sm} />
Add account
<StyledIconButton
Icon={IconPlus}
accent="tertiary"
onClick={() =>
navigate(getSettingsPagePath(SettingsPath.NewAccount))
}
/>
</StyledFooter>
)}
</Card>
);
};

11
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx
View File

@ -3,7 +3,6 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { CardContent } from '@/ui/layout/card/components/CardContent';
@ -18,8 +17,12 @@ const StyledRow = styled(CardContent)`
padding-left: ${({ theme }) => theme.spacing(4)};
`;
const StyledAccountHandle = styled.span`
flex: 1 0 auto;
`;
type SettingsAccountRowProps = {
account: ConnectedAccount | MessageChannel;
account: Pick<ConnectedAccount, 'handle'>;
divider?: boolean;
LeftIcon: IconComponent;
onClick?: () => void;
@ -37,8 +40,8 @@ export const SettingsAccountRow = ({
return (
<StyledRow onClick={onClick} divider={divider}>
<LeftIcon size={theme.icon.size.sm} />
{account.handle}
<LeftIcon size={theme.icon.size.md} />
<StyledAccountHandle>{account.handle}</StyledAccountHandle>
{rightComponent}
</StyledRow>
);

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

@ -1,6 +1,8 @@
import { useNavigate } from 'react-router-dom';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { IconDotsVertical, IconMail, IconTrash } from '@/ui/display/icon';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@ -10,21 +12,23 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
type SettingsAccountsRowDropdownMenuProps = {
account: ConnectedAccount;
account: Pick<ConnectedAccount, 'id' | 'messageChannels'>;
className?: string;
onRemove?: (uuid: string) => void;
};
export const SettingsAccountsRowDropdownMenu = ({
account,
className,
onRemove,
}: SettingsAccountsRowDropdownMenuProps) => {
const dropdownId = `settings-account-row-${account.id}`;
const navigate = useNavigate();
const { closeDropdown } = useDropdown(dropdownId);
const { deleteOneRecord } = useDeleteOneRecord({
objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
});
return (
<Dropdown
dropdownId={dropdownId}
@ -47,17 +51,15 @@ export const SettingsAccountsRowDropdownMenu = ({
closeDropdown();
}}
/>
{!!onRemove && (
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Remove account"
onClick={() => {
onRemove(account.id);
closeDropdown();
}}
/>
)}
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Remove account"
onClick={() => {
deleteOneRecord(account.id);
closeDropdown();
}}
/>
</DropdownMenuItemsContainer>
</DropdownMenu>
}

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

@ -0,0 +1,15 @@
import { Status } from '@/ui/display/status/components/Status';
type SettingsAccountsSynchronizationStatusProps = {
synced: boolean;
};
export const SettingsAccountsSynchronizationStatus = ({
synced,
}: SettingsAccountsSynchronizationStatusProps) => (
<Status
color={synced ? 'green' : 'gray'}
text={synced ? 'Synced' : 'Not Synced'}
weight="medium"
/>
);

10
packages/twenty-front/src/modules/ui/display/icon/assets/google-calendar.svg Normal file
View File

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 76">
<path fill="#fff" d="M58 18H18v40h40z"/>
<path fill="#4285f4" d="M26.2 49.03c-1.495-1.01-2.53-2.485-3.095-4.435l3.47-1.43c.315 1.2.865 2.13 1.65 2.79.78.66 1.73.985 2.84.985 1.135 0 2.11-.345 2.925-1.035s1.225-1.57 1.225-2.635c0-1.09-.43-1.98-1.29-2.67s-1.94-1.035-3.23-1.035H28.69V36.13h1.8c1.11 0 2.045-.3 2.805-.9s1.14-1.42 1.14-2.465c0-.93-.34-1.67-1.02-2.225s-1.54-.835-2.585-.835c-1.02 0-1.83.27-2.43.815a4.784 4.784 0 0 0-1.31 2.005l-3.435-1.43c.455-1.29 1.29-2.43 2.515-3.415s2.79-1.48 4.69-1.48c1.405 0 2.67.27 3.79.815s2 1.3 2.635 2.26c.635.965.95 2.045.95 3.245 0 1.225-.295 2.26-.885 3.11s-1.315 1.5-2.175 1.955v.205a6.605 6.605 0 0 1 2.79 2.175c.725.975 1.09 2.14 1.09 3.5s-.345 2.575-1.035 3.64-1.645 1.905-2.855 2.515c-1.215.61-2.58.92-4.095.92-1.755.005-3.375-.5-4.87-1.51zm21.315-17.22-3.81 2.755-1.905-2.89 6.835-4.93h2.62V50h-3.74z"/>
<path fill="#34a853" d="M58 58H18v18h40z"/>
<path fill="#4285f4" d="M58 0H6C2.685 0 0 2.685 0 6v52h18V18h40z"/>
<path fill="#188038" d="M0 58v12c0 3.315 2.685 6 6 6h12V58z"/>
<path fill="#fbbc04" d="M76 18H58v40h18z"/>
<path fill="#1967d2" d="M76 18V6c0-3.315-2.685-6-6-6H58v18z"/>
<path fill="#ea4335" d="m58 76 18-18H58z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

14
packages/twenty-front/src/modules/ui/display/icon/components/IconGoogleCalendar.tsx Normal file
View File

@ -0,0 +1,14 @@
import { useTheme } from '@emotion/react';
import IconGoogleCalendarRaw from '../assets/google-calendar.svg?react';
type IconGoogleCalendarProps = {
size?: number;
};
export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => {
const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return <IconGoogleCalendarRaw height={size} width={size} />;
};