From 669945ad7e94b18c731c68c70dfed98dd89f4ac8 Mon Sep 17 00:00:00 2001 From: Devessier Date: Thu, 7 Nov 2024 13:16:05 +0100 Subject: [PATCH 1/4] fix: make the whole setting card interactive --- ...SettingsAccountsCalendarChannelDetails.tsx | 23 +++------ .../SettingsAccountsMessageChannelDetails.tsx | 24 +++++---- .../components/SettingsOptionCardContent.tsx | 11 ++--- .../SettingsOptionCardContentWithToggle.tsx | 49 +++++++++++++++++++ .../SettingsSecurityOptionsList.tsx | 25 +++++----- 5 files changed, 85 insertions(+), 47 deletions(-) create mode 100644 packages/twenty-front/src/modules/settings/components/SettingsOptionCardContentWithToggle.tsx diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx index 7232d712db48..19fdb5a8ca19 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx @@ -2,10 +2,10 @@ import { CalendarChannel } from '@/accounts/types/CalendarChannel'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard'; -import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; +import { SettingsOptionCardContentWithToggle } from '@/settings/components/SettingsOptionCardContentWithToggle'; import styled from '@emotion/styled'; import { Section } from '@react-email/components'; -import { Card, H2Title, Toggle } from 'twenty-ui'; +import { Card, H2Title } from 'twenty-ui'; import { CalendarChannelVisibility } from '~/generated-metadata/graphql'; const StyledDetailsContainer = styled.div` @@ -21,10 +21,6 @@ type SettingsAccountsCalendarChannelDetailsProps = { >; }; -const StyledToggle = styled(Toggle)` - margin-left: auto; -`; - export const SettingsAccountsCalendarChannelDetails = ({ calendarChannel, }: SettingsAccountsCalendarChannelDetailsProps) => { @@ -68,19 +64,16 @@ export const SettingsAccountsCalendarChannelDetails = ({ description="Automatically create contacts for people you've participated in an event with." /> - + checked={calendarChannel.isContactAutoCreationEnabled} + onChange={() => { handleContactAutoCreationToggle( !calendarChannel.isContactAutoCreationEnabled, - ) - } - > - - + ); + }} + /> diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx index 1c9bb6821efa..7cf9963e6250 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx @@ -9,7 +9,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard'; import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard'; -import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; +import { SettingsOptionCardContentWithToggle } from '@/settings/components/SettingsOptionCardContentWithToggle'; import { MessageChannelVisibility } from '~/generated-metadata/graphql'; type SettingsAccountsMessageChannelDetailsProps = { @@ -103,29 +103,27 @@ export const SettingsAccountsMessageChannelDetails = ({
- + checked={messageChannel.excludeNonProfessionalEmails} + onChange={() => { handleIsNonProfessionalEmailExcludedToggle( !messageChannel.excludeNonProfessionalEmails, - ) - } - > - - - + + checked={messageChannel.excludeGroupEmails} + onChange={() => handleIsGroupEmailExcludedToggle( !messageChannel.excludeGroupEmails, ) } - > - - + />
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx index 7384b1d58266..e32653d1e14e 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx @@ -1,14 +1,13 @@ -import styled from '@emotion/styled'; import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; -import { IconComponent, CardContent } from 'twenty-ui'; import { ReactNode } from 'react'; +import { CardContent, IconComponent } from 'twenty-ui'; type SettingsOptionCardContentProps = { Icon?: IconComponent; - title: string; + title: React.ReactNode; description: string; - onClick: () => void; children: ReactNode; divider?: boolean; }; @@ -18,6 +17,7 @@ const StyledCardContent = styled(CardContent)` display: flex; gap: ${({ theme }) => theme.spacing(4)}; cursor: pointer; + position: relative; &:hover { background: ${({ theme }) => theme.background.transparent.lighter}; @@ -51,14 +51,13 @@ export const SettingsOptionCardContent = ({ Icon, title, description, - onClick, children, divider, }: SettingsOptionCardContentProps) => { const theme = useTheme(); return ( - + {Icon && ( diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContentWithToggle.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContentWithToggle.tsx new file mode 100644 index 000000000000..a5e3dcfdf0a3 --- /dev/null +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContentWithToggle.tsx @@ -0,0 +1,49 @@ +import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; +import styled from '@emotion/styled'; +import { useId } from 'react'; +import { IconComponent, Toggle } from 'twenty-ui'; + +const StyledToggle = styled(Toggle)` + margin-left: auto; +`; + +const StyledCover = styled.span` + cursor: pointer; + inset: 0; + position: absolute; +`; + +export const SettingsOptionCardContentWithToggle = ({ + Icon, + title, + description, + divider, + checked, + onChange, +}: { + Icon?: IconComponent; + title: string; + checked: boolean; + onChange: (checked: boolean) => void; + description: string; + divider?: boolean; +}) => { + const toggleId = useId(); + + return ( + + {title} + + + + } + description={description} + Icon={Icon} + divider={divider} + > + + + ); +}; diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx index f7b9dc2adea5..75542b1c0bcf 100644 --- a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx +++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx @@ -1,22 +1,22 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; -import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; +import { SettingsOptionCardContentWithToggle } from '@/settings/components/SettingsOptionCardContentWithToggle'; import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; -import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; -import { Card, IconLink, Toggle } from 'twenty-ui'; +import { Card, IconLink, isDefined } from 'twenty-ui'; import { useUpdateWorkspaceMutation } from '~/generated/graphql'; -const StyledToggle = styled(Toggle)` - margin-left: auto; -`; - export const SettingsSecurityOptionsList = () => { const { enqueueSnackBar } = useSnackBar(); const [currentWorkspace, setCurrentWorkspace] = useRecoilState( currentWorkspaceState, ); + if (!isDefined(currentWorkspace)) { + throw new Error( + 'The current workspace must be defined to edit its security options.', + ); + } const [updateWorkspace] = useUpdateWorkspaceMutation(); @@ -45,16 +45,15 @@ export const SettingsSecurityOptionsList = () => { return ( - - handleChange(!currentWorkspace?.isPublicInviteLinkEnabled) + checked={currentWorkspace.isPublicInviteLinkEnabled} + onChange={() => + handleChange(!currentWorkspace.isPublicInviteLinkEnabled) } - > - - + /> ); }; From 9a797fa35f9f4fca611354e585e402ea988e9227 Mon Sep 17 00:00:00 2001 From: Devessier Date: Thu, 7 Nov 2024 13:17:05 +0100 Subject: [PATCH 2/4] fix: ensure the toggle never shrinks --- packages/twenty-ui/src/input/components/Toggle.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-ui/src/input/components/Toggle.tsx b/packages/twenty-ui/src/input/components/Toggle.tsx index 86b9975101e7..c9f95385d2c5 100644 --- a/packages/twenty-ui/src/input/components/Toggle.tsx +++ b/packages/twenty-ui/src/input/components/Toggle.tsx @@ -12,6 +12,7 @@ type ContainerProps = { }; const StyledContainer = styled.label` + flex-shrink: 0; align-items: center; background-color: ${({ theme, isOn, color }) => isOn ? (color ?? theme.color.blue) : theme.background.transparent.medium}; From 5cf4d37907de7be5acb3e720cbb6332207b7e7bb Mon Sep 17 00:00:00 2001 From: Devessier Date: Thu, 7 Nov 2024 16:29:16 +0100 Subject: [PATCH 3/4] lint: delete unused component --- .../components/SettingsAccountsMessageChannelDetails.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx index 7cf9963e6250..4317c68d5ab0 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { Card, H2Title, Section, Toggle } from 'twenty-ui'; +import { Card, H2Title, Section } from 'twenty-ui'; import { MessageChannel, @@ -30,10 +30,6 @@ const StyledDetailsContainer = styled.div` gap: ${({ theme }) => theme.spacing(6)}; `; -const StyledToggle = styled(Toggle)` - margin-left: auto; -`; - export const SettingsAccountsMessageChannelDetails = ({ messageChannel, }: SettingsAccountsMessageChannelDetailsProps) => { From 512aa1f86c7ebd4260e3f711d9cd765ff528e8e8 Mon Sep 17 00:00:00 2001 From: Devessier Date: Thu, 7 Nov 2024 18:13:48 +0100 Subject: [PATCH 4/4] refactor: simplify the components --- ...SettingsAccountsCalendarChannelDetails.tsx | 4 +- .../SettingsAccountsMessageChannelDetails.tsx | 6 +-- .../components/SettingsOptionCardContent.tsx | 34 ++++++++++--- .../SettingsOptionCardContentWithToggle.tsx | 49 ------------------- .../SettingsSecurityOptionsList.tsx | 4 +- 5 files changed, 35 insertions(+), 62 deletions(-) delete mode 100644 packages/twenty-front/src/modules/settings/components/SettingsOptionCardContentWithToggle.tsx diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx index 19fdb5a8ca19..d017bf42d217 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx @@ -2,7 +2,7 @@ import { CalendarChannel } from '@/accounts/types/CalendarChannel'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard'; -import { SettingsOptionCardContentWithToggle } from '@/settings/components/SettingsOptionCardContentWithToggle'; +import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; import styled from '@emotion/styled'; import { Section } from '@react-email/components'; import { Card, H2Title } from 'twenty-ui'; @@ -64,7 +64,7 @@ export const SettingsAccountsCalendarChannelDetails = ({ description="Automatically create contacts for people you've participated in an event with." /> -
- - void; }; const StyledCardContent = styled(CardContent)` @@ -47,15 +48,28 @@ const StyledIcon = styled.div` min-width: ${({ theme }) => theme.icon.size.md}; `; +const StyledToggle = styled(Toggle)` + margin-left: auto; +`; + +const StyledCover = styled.span` + cursor: pointer; + inset: 0; + position: absolute; +`; + export const SettingsOptionCardContent = ({ Icon, title, description, - children, divider, + checked, + onChange, }: SettingsOptionCardContentProps) => { const theme = useTheme(); + const toggleId = useId(); + return ( {Icon && ( @@ -63,11 +77,19 @@ export const SettingsOptionCardContent = ({ )} +
- {title} + + + {description}
- {children} + + ); }; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContentWithToggle.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContentWithToggle.tsx deleted file mode 100644 index a5e3dcfdf0a3..000000000000 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContentWithToggle.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; -import styled from '@emotion/styled'; -import { useId } from 'react'; -import { IconComponent, Toggle } from 'twenty-ui'; - -const StyledToggle = styled(Toggle)` - margin-left: auto; -`; - -const StyledCover = styled.span` - cursor: pointer; - inset: 0; - position: absolute; -`; - -export const SettingsOptionCardContentWithToggle = ({ - Icon, - title, - description, - divider, - checked, - onChange, -}: { - Icon?: IconComponent; - title: string; - checked: boolean; - onChange: (checked: boolean) => void; - description: string; - divider?: boolean; -}) => { - const toggleId = useId(); - - return ( - - {title} - - - - } - description={description} - Icon={Icon} - divider={divider} - > - - - ); -}; diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx index 75542b1c0bcf..ac5eef959f3e 100644 --- a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx +++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx @@ -1,5 +1,5 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; -import { SettingsOptionCardContentWithToggle } from '@/settings/components/SettingsOptionCardContentWithToggle'; +import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent'; import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { useRecoilState } from 'recoil'; @@ -45,7 +45,7 @@ export const SettingsSecurityOptionsList = () => { return ( -