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/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';