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">
2024-07-04 19:05:33 +02:00
parent aa2218900c
commit f847e12709
20 changed files with 389 additions and 358 deletions
--- a/packages/twenty-front/src/App.tsx
+++ b/packages/twenty-front/src/App.tsx
@ -55,7 +55,6 @@ import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts';
 import { SettingsAccountsCalendars } from '~/pages/settings/accounts/SettingsAccountsCalendars';
 import { SettingsAccountsCalendarsSettings } from '~/pages/settings/accounts/SettingsAccountsCalendarsSettings';
 import { SettingsAccountsEmails } from '~/pages/settings/accounts/SettingsAccountsEmails';
-import { SettingsAccountsEmailsInboxSettings } from '~/pages/settings/accounts/SettingsAccountsEmailsInboxSettings';
 import { SettingsNewAccount } from '~/pages/settings/accounts/SettingsNewAccount';
 import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject';
 import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail';
@ -188,10 +187,6 @@ const createRouter = (isBillingEnabled?: boolean) =>
                  path={SettingsPath.AccountsEmails}
                  element={<SettingsAccountsEmails />}
                />
-                <Route
-                  path={SettingsPath.AccountsEmailsInboxSettings}
-                  element={<SettingsAccountsEmailsInboxSettings />}
-                />
                <Route
                  path={SettingsPath.Billing}
                  element={<SettingsBilling />}
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx
@ -19,7 +19,7 @@ const StyledLinkContainer = styled.div`
  margin-right: ${({ theme }) => theme.spacing(2)};
 `;

-type SettingsAccountsEmailsBlocklistInputProps = {
+type SettingsAccountsBlocklistInputProps = {
  updateBlockedEmailList: (email: string) => void;
  blockedEmailOrDomainList: string[];
 };
@ -50,10 +50,10 @@ type FormInput = {
  emailOrDomain: string;
 };

-export const SettingsAccountsEmailsBlocklistInput = ({
+export const SettingsAccountsBlocklistInput = ({
  updateBlockedEmailList,
  blockedEmailOrDomainList,
-}: SettingsAccountsEmailsBlocklistInputProps) => {
+}: SettingsAccountsBlocklistInputProps) => {
  const { reset, handleSubmit, control, formState } = useForm<FormInput>({
    mode: 'onSubmit',
    resolver: zodResolver(validationSchema(blockedEmailOrDomainList)),
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx
@ -7,11 +7,11 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput';
-import { SettingsAccountsEmailsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTable';
+import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
+import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsBlocklistTable';
 import { Section } from '@/ui/layout/section/components/Section';

-export const SettingsAccountsEmailsBlocklistSection = () => {
+export const SettingsAccountsBlocklistSection = () => {
  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);

  const { records: blocklist } = useFindManyRecords<BlocklistItem>({
@ -44,11 +44,11 @@ export const SettingsAccountsEmailsBlocklistSection = () => {
        title="Blocklist"
        description="Exclude the following people and domains from my email sync"
      />
-      <SettingsAccountsEmailsBlocklistInput
+      <SettingsAccountsBlocklistInput
        blockedEmailOrDomainList={blocklist.map((item) => item.handle)}
        updateBlockedEmailList={updateBlockedEmailList}
      />
-      <SettingsAccountsEmailsBlocklistTable
+      <SettingsAccountsBlocklistTable
        blocklist={blocklist}
        handleBlockedEmailRemove={handleBlockedEmailRemove}
      />
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistTable.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistTable.tsx
@ -1,13 +1,13 @@
 import styled from '@emotion/styled';

 import { BlocklistItem } from '@/accounts/types/BlocklistItem';
-import { SettingsAccountsEmailsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTableRow';
+import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';

-type SettingsAccountsEmailsBlocklistTableProps = {
+type SettingsAccountsBlocklistTableProps = {
  blocklist: BlocklistItem[];
  handleBlockedEmailRemove: (id: string) => void;
 };
@ -20,10 +20,10 @@ const StyledTableBody = styled(TableBody)`
  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
 `;

-export const SettingsAccountsEmailsBlocklistTable = ({
+export const SettingsAccountsBlocklistTable = ({
  blocklist,
  handleBlockedEmailRemove,
-}: SettingsAccountsEmailsBlocklistTableProps) => {
+}: SettingsAccountsBlocklistTableProps) => {
  return (
    <>
      {blocklist.length > 0 && (
@ -35,7 +35,7 @@ export const SettingsAccountsEmailsBlocklistTable = ({
          </TableRow>
          <StyledTableBody>
            {blocklist.map((blocklistItem) => (
-              <SettingsAccountsEmailsBlocklistTableRow
+              <SettingsAccountsBlocklistTableRow
                key={blocklistItem.id}
                blocklistItem={blocklistItem}
                onRemove={handleBlockedEmailRemove}
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistTableRow.tsx
@ -6,15 +6,15 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { formatToHumanReadableDate } from '~/utils/date-utils';

-type SettingsAccountsEmailsBlocklistTableRowProps = {
+type SettingsAccountsBlocklistTableRowProps = {
  blocklistItem: BlocklistItem;
  onRemove: (id: string) => void;
 };

-export const SettingsAccountsEmailsBlocklistTableRow = ({
+export const SettingsAccountsBlocklistTableRow = ({
  blocklistItem,
  onRemove,
-}: SettingsAccountsEmailsBlocklistTableRowProps) => {
+}: SettingsAccountsBlocklistTableRowProps) => {
  return (
    <TableRow key={blocklistItem.id}>
      <TableCell>{blocklistItem.handle}</TableCell>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
@ -0,0 +1,116 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { H2Title, IconRefresh, IconUser } from 'twenty-ui';
+
+import { MessageChannel } from '@/accounts/types/MessageChannel';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+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 { Section } from '@/ui/layout/section/components/Section';
+import { MessageChannelVisibility } from '~/generated-metadata/graphql';
+
+type SettingsAccountsMessageChannelDetailsProps = {
+  messageChannel: Pick<
+    MessageChannel,
+    'id' | 'visibility' | 'isContactAutoCreationEnabled' | 'isSyncEnabled'
+  >;
+};
+
+const StyledDetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+  padding-top: ${({ theme }) => theme.spacing(6)};
+`;
+
+export const SettingsAccountsMessageChannelDetails = ({
+  messageChannel,
+}: SettingsAccountsMessageChannelDetailsProps) => {
+  const theme = useTheme();
+
+  const { updateOneRecord } = useUpdateOneRecord<MessageChannel>({
+    objectNameSingular: CoreObjectNameSingular.MessageChannel,
+  });
+
+  const handleVisibilityChange = (value: MessageChannelVisibility) => {
+    updateOneRecord({
+      idToUpdate: messageChannel.id,
+      updateOneRecordInput: {
+        visibility: value,
+      },
+    });
+  };
+
+  const handleContactAutoCreationToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: messageChannel.id,
+      updateOneRecordInput: {
+        isContactAutoCreationEnabled: value,
+      },
+    });
+  };
+
+  const handleIsSyncEnabledToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: messageChannel.id,
+      updateOneRecordInput: {
+        isSyncEnabled: value,
+      },
+    });
+  };
+
+  return (
+    <StyledDetailsContainer>
+      <Section>
+        <H2Title
+          title="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>
+    </StyledDetailsContainer>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
@ -0,0 +1,71 @@
+import { useRecoilValue } from 'recoil';
+
+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 { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails';
+import { SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountMessageChannelsTabListComponentId';
+import { TabList } from '@/ui/layout/tab/components/TabList';
+import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+
+export const SettingsAccountsMessageChannelsContainer = () => {
+  const { activeTabIdState } = useTabList(
+    SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID,
+  );
+  const activeTabId = useRecoilValue(activeTabIdState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+
+  const { records: accounts } = useFindManyRecords<ConnectedAccount>({
+    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
+    filter: {
+      accountOwnerId: {
+        eq: currentWorkspaceMember?.id,
+      },
+    },
+  });
+
+  const { records: messageChannels } = useFindManyRecords<
+    MessageChannel & {
+      connectedAccount: ConnectedAccount;
+    }
+  >({
+    objectNameSingular: CoreObjectNameSingular.MessageChannel,
+    filter: {
+      connectedAccountId: {
+        in: accounts.map((account) => account.id),
+      },
+    },
+  });
+
+  const tabs = [
+    ...messageChannels.map((messageChannel) => ({
+      id: messageChannel.id,
+      title: messageChannel.handle,
+    })),
+  ];
+
+  if (!messageChannels.length) {
+    return <SettingsAccountsListEmptyStateCard />;
+  }
+
+  return (
+    <>
+      <TabList
+        tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
+        tabs={tabs}
+      />
+      {messageChannels.map((messageChannel) => (
+        <>
+          {messageChannel.id === activeTabId && (
+            <SettingsAccountsMessageChannelDetails
+              messageChannel={messageChannel}
+            />
+          )}
+        </>
+      ))}
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
@ -1,86 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
-import { IconChevronRight, IconGmail } from 'twenty-ui';
-
-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 { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import {
-  SettingsAccountsSynchronizationStatus,
-  SettingsAccountsSynchronizationStatusProps,
-} from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
-import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
-
-const StyledRowRightContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-export const SettingsAccountsMessageChannelsListCard = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
-  const navigate = useNavigate();
-
-  const { records: accounts, loading: accountsLoading } =
-    useFindManyRecords<ConnectedAccount>({
-      objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
-      filter: {
-        accountOwnerId: {
-          eq: currentWorkspaceMember?.id,
-        },
-      },
-    });
-
-  const { records: messageChannels, loading: messageChannelsLoading } =
-    useFindManyRecords<
-      MessageChannel & {
-        connectedAccount: ConnectedAccount;
-      }
-    >({
-      objectNameSingular: CoreObjectNameSingular.MessageChannel,
-      filter: {
-        connectedAccountId: {
-          in: accounts.map((account) => account.id),
-        },
-      },
-    });
-
-  const messageChannelsWithSyncedEmails: (MessageChannel & {
-    connectedAccount: ConnectedAccount;
-  } & SettingsAccountsSynchronizationStatusProps)[] = messageChannels.map(
-    (messageChannel) => ({
-      ...messageChannel,
-      syncStatus: messageChannel.syncStatus,
-    }),
-  );
-
-  if (!messageChannelsWithSyncedEmails.length) {
-    return <SettingsAccountsListEmptyStateCard />;
-  }
-
-  return (
-    <SettingsListCard
-      items={messageChannelsWithSyncedEmails}
-      getItemLabel={(messageChannel) => messageChannel.handle}
-      isLoading={accountsLoading || messageChannelsLoading}
-      onRowClick={(messageChannel) =>
-        navigate(`/settings/accounts/emails/${messageChannel.id}`)
-      }
-      RowIcon={IconGmail}
-      RowRightComponent={({ item: messageChannel }) => (
-        <StyledRowRightContainer>
-          <SettingsAccountsSynchronizationStatus
-            syncStatus={messageChannel.syncStatus}
-            isSyncEnabled={messageChannel.isSyncEnabled}
-          />
-          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
-        </StyledRowRightContainer>
-      )}
-    />
-  );
-};
--- a/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsEmailsBlocklistInput.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsEmailsBlocklistInput.stories.tsx
@ -2,7 +2,7 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 import { ComponentDecorator } from 'twenty-ui';

-import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput';
+import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';

 const updateBlockedEmailListJestFn = fn();

@ -13,10 +13,9 @@ const ClearMocksDecorator: Decorator = (Story, context) => {
  return <Story />;
 };

-const meta: Meta<typeof SettingsAccountsEmailsBlocklistInput> = {
-  title:
-    'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistInput',
-  component: SettingsAccountsEmailsBlocklistInput,
+const meta: Meta<typeof SettingsAccountsBlocklistInput> = {
+  title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistInput',
+  component: SettingsAccountsBlocklistInput,
  decorators: [ComponentDecorator, ClearMocksDecorator],
  args: {
    updateBlockedEmailList: updateBlockedEmailListJestFn,
@ -31,7 +30,7 @@ const meta: Meta<typeof SettingsAccountsEmailsBlocklistInput> = {
 };

 export default meta;
-type Story = StoryObj<typeof SettingsAccountsEmailsBlocklistInput>;
+type Story = StoryObj<typeof SettingsAccountsBlocklistInput>;

 export const Default: Story = {};

--- a/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsBlocklistSection.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsBlocklistSection.stories.tsx
@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
+import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsBlocklistSection';
+
+const meta: Meta<typeof SettingsAccountsBlocklistSection> = {
+  title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistSection',
+  component: SettingsAccountsBlocklistInput,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsAccountsBlocklistSection>;
+
+export const Default: Story = {};
--- a/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsEmailsBlocklistTable.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsEmailsBlocklistTable.stories.tsx
@ -3,7 +3,7 @@ import { expect, fn, userEvent, within } from '@storybook/test';
 import { ComponentDecorator } from 'twenty-ui';

 import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
-import { SettingsAccountsEmailsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTable';
+import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsBlocklistTable';
 import { formatToHumanReadableDate } from '~/utils/date-utils';

 const handleBlockedEmailRemoveJestFn = fn();
@ -15,10 +15,9 @@ const ClearMocksDecorator: Decorator = (Story, context) => {
  return <Story />;
 };

-const meta: Meta<typeof SettingsAccountsEmailsBlocklistTable> = {
-  title:
-    'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistTable',
-  component: SettingsAccountsEmailsBlocklistTable,
+const meta: Meta<typeof SettingsAccountsBlocklistTable> = {
+  title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistTable',
+  component: SettingsAccountsBlocklistTable,
  decorators: [ComponentDecorator, ClearMocksDecorator],
  args: {
    blocklist: mockedBlocklist,
@ -34,7 +33,7 @@ const meta: Meta<typeof SettingsAccountsEmailsBlocklistTable> = {
 };

 export default meta;
-type Story = StoryObj<typeof SettingsAccountsEmailsBlocklistTable>;
+type Story = StoryObj<typeof SettingsAccountsBlocklistTable>;

 export const Default: Story = {
  play: async ({ canvasElement }) => {
--- a/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsEmailsBlocklistTableRow.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsEmailsBlocklistTableRow.stories.tsx
@ -3,7 +3,7 @@ import { expect, fn, userEvent, within } from '@storybook/test';
 import { ComponentDecorator } from 'twenty-ui';

 import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
-import { SettingsAccountsEmailsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTableRow';
+import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow';
 import { formatToHumanReadableDate } from '~/utils/date-utils';

 const onRemoveJestFn = fn();
@ -15,10 +15,10 @@ const ClearMocksDecorator: Decorator = (Story, context) => {
  return <Story />;
 };

-const meta: Meta<typeof SettingsAccountsEmailsBlocklistTableRow> = {
+const meta: Meta<typeof SettingsAccountsBlocklistTableRow> = {
  title:
-    'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistTableRow',
-  component: SettingsAccountsEmailsBlocklistTableRow,
+    'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistTableRow',
+  component: SettingsAccountsBlocklistTableRow,
  decorators: [ComponentDecorator, ClearMocksDecorator],
  args: {
    blocklistItem: mockedBlocklist[0],
@ -34,7 +34,7 @@ const meta: Meta<typeof SettingsAccountsEmailsBlocklistTableRow> = {
 };

 export default meta;
-type Story = StoryObj<typeof SettingsAccountsEmailsBlocklistTableRow>;
+type Story = StoryObj<typeof SettingsAccountsBlocklistTableRow>;

 export const Default: Story = {
  play: async ({ canvasElement }) => {
--- a/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsEmailsBlocklistSection.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsEmailsBlocklistSection.stories.tsx
@ -1,17 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
-
-import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput';
-import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection';
-
-const meta: Meta<typeof SettingsAccountsEmailsBlocklistSection> = {
-  title:
-    'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistSection',
-  component: SettingsAccountsEmailsBlocklistInput,
-  decorators: [ComponentDecorator],
-};
-
-export default meta;
-type Story = StoryObj<typeof SettingsAccountsEmailsBlocklistSection>;
-
-export const Default: Story = {};
--- a/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsMessageChannelDetails.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsMessageChannelDetails.stories.tsx
@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails';
+import { MessageChannelVisibility } from '~/generated/graphql';
+
+const meta: Meta<typeof SettingsAccountsMessageChannelDetails> = {
+  title:
+    'Modules/Settings/Accounts/MessageChannels/SettingsAccountsMessageChannelDetails',
+  component: SettingsAccountsMessageChannelDetails,
+  decorators: [ComponentDecorator],
+  args: {
+    messageChannel: {
+      id: '20202020-ef5a-4822-9e08-ce6e6a4dcb6a',
+      isContactAutoCreationEnabled: true,
+      isSyncEnabled: true,
+      visibility: MessageChannelVisibility.ShareEverything,
+    },
+  },
+  argTypes: {
+    messageChannel: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsAccountsMessageChannelDetails>;
+
+export const Default: Story = {
+  play: async () => {},
+};
--- a/packages/twenty-front/src/modules/settings/accounts/constants/SettingsAccountMessageChannelsTabListComponentId.ts
+++ b/packages/twenty-front/src/modules/settings/accounts/constants/SettingsAccountMessageChannelsTabListComponentId.ts
@ -0,0 +1,2 @@
+export const SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID =
+  'settings-account-message-channels-tab-list';
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
@ -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 />
          </>
        )}
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx
@ -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>
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
@ -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>
-  );
-};
--- a/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsEmails.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsEmails.stories.tsx
@ -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',
+                    },
+                  },
+                ],
+              },
+            },
+          });
+        }),
+      ],
+    },
+  },
+};
--- a/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsEmailsInboxSettings.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/stories/SettingsAccountsEmailsInboxSettings.stories.tsx
@ -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',
-    );
-  },
-};