From 0048216abff9952216b02a86c0fee53524809f8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Tue, 12 Dec 2023 16:03:39 +0100 Subject: [PATCH] feat: add Settings/Accounts Connected Accounts section accounts list (#2953) Closes #2887 --- .../src/modules/accounts/types/account.ts | 1 + .../AddObjectFilterFromDetailsButton.tsx | 2 +- .../components/SettingsAccountsCard.tsx | 60 ++++++++ ...ttingsAccountsConnectedAccountsSection.tsx | 38 ++++-- .../SettingsAccountsEmptyStateCard.tsx | 23 +--- .../components/SettingsAccountsRow.tsx | 88 ++++++++++++ .../components/SettingsNavigationCard.tsx | 27 ++-- .../components/SettingsObjectFieldPreview.tsx | 129 +++++++++--------- .../SettingsObjectFieldRelationForm.tsx | 2 + .../SettingsObjectFieldSelectForm.tsx | 51 +++---- .../SettingsObjectFieldTypeCard.tsx | 23 ++-- .../SettingsObjectFieldTypeSelectSection.tsx | 1 + .../components/SettingsObjectAboutSection.tsx | 79 +++++------ .../objects/SettingsObjectCoverImage.tsx | 4 +- .../input/button/components/LightButton.tsx | 21 +-- .../__stories__/LightButton.stories.tsx | 6 +- .../modules/ui/input/components/Select.tsx | 11 +- .../ui/layout/card/components/Card.tsx | 4 +- .../ui/layout/card/components/CardContent.tsx | 16 +++ .../ui/layout/card/components/CardFooter.tsx | 10 ++ .../ui/layout/card/components/CardHeader.tsx | 11 ++ .../components/__stories__/Card.stories.tsx | 21 +++ .../layout/dropdown/components/Dropdown.tsx | 4 +- .../src/testing/mock-data/accounts.ts | 6 + 24 files changed, 437 insertions(+), 201 deletions(-) create mode 100644 packages/twenty-front/src/modules/accounts/types/account.ts create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRow.tsx create mode 100644 packages/twenty-front/src/modules/ui/layout/card/components/CardContent.tsx create mode 100644 packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx create mode 100644 packages/twenty-front/src/modules/ui/layout/card/components/CardHeader.tsx create mode 100644 packages/twenty-front/src/testing/mock-data/accounts.ts diff --git a/packages/twenty-front/src/modules/accounts/types/account.ts b/packages/twenty-front/src/modules/accounts/types/account.ts new file mode 100644 index 000000000..2d40aeb64 --- /dev/null +++ b/packages/twenty-front/src/modules/accounts/types/account.ts @@ -0,0 +1 @@ +export type Account = { email: string; uuid: string }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx index 64570f47c..ec62fa845 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx @@ -28,7 +28,7 @@ export const AddObjectFilterFromDetailsButton = ({ return ( } + Icon={IconPlus} title="Add filter" accent="tertiary" /> diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx new file mode 100644 index 000000000..3bd8b146d --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCard.tsx @@ -0,0 +1,60 @@ +import { useNavigate } from 'react-router-dom'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; + +import { Account } from '@/accounts/types/Account'; +import { IconAt, IconPlus } from '@/ui/display/icon'; +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 SettingsAccountsCardProps = { + accounts: Account[]; + onAccountRemove?: (uuid: string) => void; +}; + +export const SettingsAccountsCard = ({ + accounts, + onAccountRemove, +}: SettingsAccountsCardProps) => { + const theme = useTheme(); + const navigate = useNavigate(); + + return ( + + {accounts.map((account, index) => ( + + ))} + + + Add account + navigate('/settings/accounts/new')} + /> + + + ); +}; 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 d450be9eb..5f8ec99d2 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx @@ -1,14 +1,34 @@ +import { useState } from 'react'; + import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Section } from '@/ui/layout/section/components/Section'; +import { mockedAccounts } from '~/testing/mock-data/accounts'; +import { SettingsAccountsCard } from './SettingsAccountsCard'; import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard'; -export const SettingsAccountsConnectedAccountsSection = () => ( -
- - -
-); +export const SettingsAccountsConnectedAccountsSection = () => { + const [accounts, setAccounts] = useState(mockedAccounts); + + const handleAccountRemove = (uuid: string) => + setAccounts((previousAccounts) => + previousAccounts.filter((account) => account.uuid !== uuid), + ); + + return ( +
+ + {accounts.length ? ( + + ) : ( + + )} +
+ ); +}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx index dff1d555c..25c99fef7 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx @@ -4,30 +4,20 @@ import styled from '@emotion/styled'; import { IconGoogle } from '@/ui/display/icon/components/IconGoogle'; import { Button } from '@/ui/input/button/components/Button'; import { Card } from '@/ui/layout/card/components/Card'; +import { CardContent } from '@/ui/layout/card/components/CardContent'; +import { CardHeader } from '@/ui/layout/card/components/CardHeader'; import { REACT_APP_SERVER_AUTH_URL } from '~/config'; import { useGenerateTransientTokenMutation } from '~/generated/graphql'; -const StyledCard = styled(Card)` - border-radius: ${({ theme }) => theme.border.radius.md}; - overflow: hidden; - padding: 0; -`; - -const StyledHeader = styled.div` +const StyledHeader = styled(CardHeader)` align-items: center; - background-color: ${({ theme }) => theme.background.primary}; - border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; display: flex; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; height: ${({ theme }) => theme.spacing(6)}; - padding: ${({ theme }) => theme.spacing(2, 4)}; `; -const StyledBody = styled.div` +const StyledBody = styled(CardContent)` display: flex; justify-content: center; - padding: ${({ theme }) => theme.spacing(4)}; `; export const SettingsAccountsEmptyStateCard = () => { @@ -43,8 +33,9 @@ export const SettingsAccountsEmptyStateCard = () => { window.location.href = `${authServerUrl}/google-gmail?transientToken=${token}`; }, [generateTransientToken]); + return ( - + No connected account