Implement Settings Tabs (#6136)
In this PR:
- Renaming SettingsAccountsEmailBlocklist to
SettingsAccountsEmailBlocklist as the blocklist is not tied to
emails/messaging but is user level
- Changing the UI settings UI by removing /emails/{id} page and adding
tabs on /emails page
<img width="1512" alt="image"
src="https://github.com/twentyhq/twenty/assets/12035771/d215a891-fff9-477d-915d-0d7a697742e8">
This commit is contained in:
Charles Bochet
@ -8,8 +8,8 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
|
||||
import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
|
||||
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
|
||||
import { SettingsAccountLoader } from '@/settings/accounts/components/SettingsAccountLoader';
|
||||
import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsBlocklistSection';
|
||||
import { SettingsAccountsConnectedAccountsListCard } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsListCard';
|
||||
import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection';
|
||||
import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
|
||||
@ -55,7 +55,7 @@ export const SettingsAccounts = () => {
|
||||
loading={loading}
|
||||
/>
|
||||
</Section>
|
||||
{isBlocklistEnabled && <SettingsAccountsEmailsBlocklistSection />}
|
||||
{isBlocklistEnabled && <SettingsAccountsBlocklistSection />}
|
||||
<SettingsAccountsSettingsSection />
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { H2Title, IconSettings } from 'twenty-ui';
|
||||
import { IconSettings } from 'twenty-ui';
|
||||
|
||||
import { SettingsAccountsMessageChannelsListCard } from '@/settings/accounts/components/SettingsAccountsMessageChannelsListCard';
|
||||
import { SettingsAccountsMessageChannelsContainer } from '@/settings/accounts/components/SettingsAccountsMessageChannelsContainer';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
|
||||
import { Section } from '@/ui/layout/section/components/Section';
|
||||
@ -16,11 +16,7 @@ export const SettingsAccountsEmails = () => (
|
||||
]}
|
||||
/>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Emails sync"
|
||||
description="Sync your inboxes and set your privacy settings"
|
||||
/>
|
||||
<SettingsAccountsMessageChannelsListCard />
|
||||
<SettingsAccountsMessageChannelsContainer />
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
|
||||
@ -1,128 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import { H2Title, IconRefresh, IconSettings, IconUser } from 'twenty-ui';
|
||||
|
||||
import { MessageChannel } from '@/accounts/types/MessageChannel';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
|
||||
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
|
||||
import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
|
||||
import { SettingsAccountsInboxVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard';
|
||||
import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
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 { MessageChannelVisibility } from '~/generated/graphql';
|
||||
|
||||
export const SettingsAccountsEmailsInboxSettings = () => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const { accountUuid: messageChannelId = '' } = useParams();
|
||||
|
||||
const { record: messageChannel, loading } = useFindOneRecord<MessageChannel>({
|
||||
objectNameSingular: CoreObjectNameSingular.MessageChannel,
|
||||
objectRecordId: messageChannelId,
|
||||
});
|
||||
|
||||
const { updateOneRecord } = useUpdateOneRecord<MessageChannel>({
|
||||
objectNameSingular: CoreObjectNameSingular.MessageChannel,
|
||||
});
|
||||
|
||||
const handleVisibilityChange = (value: MessageChannelVisibility) => {
|
||||
updateOneRecord({
|
||||
idToUpdate: messageChannelId,
|
||||
updateOneRecordInput: {
|
||||
visibility: value,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleContactAutoCreationToggle = (value: boolean) => {
|
||||
updateOneRecord({
|
||||
idToUpdate: messageChannelId,
|
||||
updateOneRecordInput: {
|
||||
isContactAutoCreationEnabled: value,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleIsSyncEnabledToggle = (value: boolean) => {
|
||||
updateOneRecord({
|
||||
idToUpdate: messageChannelId,
|
||||
updateOneRecordInput: {
|
||||
isSyncEnabled: value,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !messageChannel) navigate(AppPath.NotFound);
|
||||
}, [loading, messageChannel, navigate]);
|
||||
|
||||
if (!messageChannel) return null;
|
||||
|
||||
return (
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{ children: 'Accounts', href: '/settings/accounts' },
|
||||
{ children: 'Emails', href: '/settings/accounts/emails' },
|
||||
{ children: messageChannel.handle || '' },
|
||||
]}
|
||||
/>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Email visibility"
|
||||
description="Define what will be visible to other users in your workspace"
|
||||
/>
|
||||
<SettingsAccountsInboxVisibilitySettingsCard
|
||||
value={messageChannel.visibility}
|
||||
onChange={handleVisibilityChange}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Contact auto-creation"
|
||||
description="Automatically create contacts for people you’ve sent emails to"
|
||||
/>
|
||||
<SettingsAccountsToggleSettingCard
|
||||
cardMedia={
|
||||
<SettingsAccountsCardMedia>
|
||||
<IconUser
|
||||
size={theme.icon.size.sm}
|
||||
stroke={theme.icon.stroke.lg}
|
||||
/>
|
||||
</SettingsAccountsCardMedia>
|
||||
}
|
||||
title="Auto-creation"
|
||||
value={!!messageChannel.isContactAutoCreationEnabled}
|
||||
onToggle={handleContactAutoCreationToggle}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Synchronization"
|
||||
description="Past and future emails will automatically be synced to this workspace"
|
||||
/>
|
||||
<SettingsAccountsToggleSettingCard
|
||||
cardMedia={
|
||||
<SettingsAccountsCardMedia>
|
||||
<IconRefresh
|
||||
size={theme.icon.size.sm}
|
||||
stroke={theme.icon.stroke.lg}
|
||||
/>
|
||||
</SettingsAccountsCardMedia>
|
||||
}
|
||||
title="Sync emails"
|
||||
value={!!messageChannel.isSyncEnabled}
|
||||
onToggle={handleIsSyncEnabledToggle}
|
||||
/>
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
);
|
||||
};
|
||||
@ -1,4 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { graphql, HttpResponse } from 'msw';
|
||||
|
||||
import {
|
||||
PageDecorator,
|
||||
@ -25,4 +26,120 @@ export default meta;
|
||||
|
||||
export type Story = StoryObj<typeof SettingsAccountsEmails>;
|
||||
|
||||
export const Default: Story = {};
|
||||
export const NoConnectedAccount: Story = {};
|
||||
|
||||
export const TwoConnectedAccounts: Story = {
|
||||
parameters: {
|
||||
msw: {
|
||||
handlers: [
|
||||
...graphqlMocks.handlers,
|
||||
graphql.query('FindManyConnectedAccounts', () => {
|
||||
return HttpResponse.json({
|
||||
data: {
|
||||
connectedAccounts: {
|
||||
__typename: 'ConnectedAccountConnection',
|
||||
totalCount: 1,
|
||||
pageInfo: {
|
||||
__typename: 'PageInfo',
|
||||
hasNextPage: false,
|
||||
startCursor: '',
|
||||
endCursor: '',
|
||||
},
|
||||
edges: [
|
||||
{
|
||||
__typename: 'ConnectedAccountEdge',
|
||||
cursor: '',
|
||||
node: {
|
||||
__typename: 'ConnectedAccount',
|
||||
accessToken: '',
|
||||
refreshToken: '',
|
||||
updatedAt: '2024-07-03T20:03:35.064Z',
|
||||
createdAt: '2024-07-03T20:03:35.064Z',
|
||||
id: '20202020-954c-4d76-9a87-e5f072d4b7ef',
|
||||
provider: 'google',
|
||||
accountOwnerId: '20202020-03f2-4d83-b0d5-2ec2bcee72d4',
|
||||
lastSyncHistoryId: '',
|
||||
emailAliases: '',
|
||||
handle: 'test.test@gmail.com',
|
||||
authFailedAt: null,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
}),
|
||||
graphql.query('FindManyMessageChannels', () => {
|
||||
return HttpResponse.json({
|
||||
data: {
|
||||
messageChannels: {
|
||||
__typename: 'MessageChannelConnection',
|
||||
totalCount: 2,
|
||||
pageInfo: {
|
||||
__typename: 'PageInfo',
|
||||
hasNextPage: false,
|
||||
startCursor: '',
|
||||
endCursor: '',
|
||||
},
|
||||
edges: [
|
||||
{
|
||||
__typename: 'MessageChannelEdge',
|
||||
cursor: '',
|
||||
node: {
|
||||
__typename: 'MessageChannel',
|
||||
handle: 'test.test@gmail.com',
|
||||
excludeNonProfessionalEmails: true,
|
||||
syncStageStartedAt: null,
|
||||
id: '20202020-ef5a-4822-9e08-ce6e6a4dcb6f',
|
||||
updatedAt: '2024-07-03T20:03:11.903Z',
|
||||
createdAt: '2024-07-03T20:03:11.903Z',
|
||||
connectedAccountId:
|
||||
'20202020-954c-4d76-9a87-e5f072d4b7ef',
|
||||
contactAutoCreationPolicy: 'SENT',
|
||||
syncStage: 'PARTIAL_MESSAGE_LIST_FETCH_PENDING',
|
||||
type: 'email',
|
||||
isContactAutoCreationEnabled: true,
|
||||
syncCursor: '1562764',
|
||||
excludeGroupEmails: true,
|
||||
throttleFailureCount: 0,
|
||||
isSyncEnabled: true,
|
||||
visibility: 'SHARE_EVERYTHING',
|
||||
syncStatus: 'COMPLETED',
|
||||
syncedAt: '2024-07-04T16:25:04.960Z',
|
||||
},
|
||||
},
|
||||
{
|
||||
__typename: 'MessageChannelEdge',
|
||||
cursor: '',
|
||||
node: {
|
||||
__typename: 'MessageChannel',
|
||||
handle: 'test.test2@gmail.com',
|
||||
excludeNonProfessionalEmails: true,
|
||||
syncStageStartedAt: null,
|
||||
id: '20202020-ef5a-4822-9e08-ce6e6a4dcb6a',
|
||||
updatedAt: '2024-07-03T20:03:11.903Z',
|
||||
createdAt: '2024-07-03T20:03:11.903Z',
|
||||
connectedAccountId:
|
||||
'20202020-954c-4d76-9a87-e5f072d4b7ef',
|
||||
contactAutoCreationPolicy: 'SENT',
|
||||
syncStage: 'PARTIAL_MESSAGE_LIST_FETCH_PENDING',
|
||||
type: 'email',
|
||||
isContactAutoCreationEnabled: true,
|
||||
syncCursor: '1562764',
|
||||
excludeGroupEmails: true,
|
||||
throttleFailureCount: 0,
|
||||
isSyncEnabled: true,
|
||||
visibility: 'SHARE_EVERYTHING',
|
||||
syncStatus: 'COMPLETED',
|
||||
syncedAt: '2024-07-04T16:25:04.960Z',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { within } from '@storybook/test';
|
||||
import { graphql, HttpResponse } from 'msw';
|
||||
|
||||
import { MessageChannelVisibility } from '~/generated/graphql';
|
||||
import { SettingsAccountsEmailsInboxSettings } from '~/pages/settings/accounts/SettingsAccountsEmailsInboxSettings';
|
||||
import {
|
||||
PageDecorator,
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
|
||||
const meta: Meta<PageDecoratorArgs> = {
|
||||
title: 'Pages/Settings/Accounts/SettingsAccountsEmailsInboxSettings',
|
||||
component: SettingsAccountsEmailsInboxSettings,
|
||||
decorators: [PageDecorator],
|
||||
args: {
|
||||
routePath: '/settings/accounts/emails/:accountUuid',
|
||||
routeParams: { ':accountUuid': '123' },
|
||||
},
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
msw: {
|
||||
handlers: [
|
||||
graphql.query('FindOneMessageChannel', () => {
|
||||
return HttpResponse.json({
|
||||
data: {
|
||||
messageChannel: {
|
||||
id: '1',
|
||||
visibility: MessageChannelVisibility.ShareEverything,
|
||||
messageThreads: { edges: [] },
|
||||
createdAt: '2021-08-27T12:00:00Z',
|
||||
type: 'email',
|
||||
updatedAt: '2021-08-27T12:00:00Z',
|
||||
targetUrl: 'https://example.com/webhook',
|
||||
connectedAccountId: '1',
|
||||
handle: 'handle',
|
||||
connectedAccount: {
|
||||
id: '1',
|
||||
handle: 'handle',
|
||||
updatedAt: '2021-08-27T12:00:00Z',
|
||||
accessToken: 'accessToken',
|
||||
messageChannels: { edges: [] },
|
||||
refreshToken: 'refreshToken',
|
||||
__typename: 'ConnectedAccount',
|
||||
accountOwner: { id: '1', __typename: 'WorkspaceMember' },
|
||||
provider: 'provider',
|
||||
createdAt: '2021-08-27T12:00:00Z',
|
||||
accountOwnerId: '1',
|
||||
},
|
||||
__typename: 'MessageChannel',
|
||||
},
|
||||
},
|
||||
});
|
||||
}),
|
||||
graphqlMocks.handlers,
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
export type Story = StoryObj<typeof SettingsAccountsEmailsInboxSettings>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await canvas.findByText('Email visibility');
|
||||
await canvas.findByText(
|
||||
'Define what will be visible to other users in your workspace',
|
||||
);
|
||||
await canvas.findByText('Contact auto-creation');
|
||||
await canvas.findByText(
|
||||
'Automatically create contacts for people you’ve sent emails to',
|
||||
);
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user