[WIP]: Blocklist V2

packages/twenty-front/src/modules/accounts/types/BlocklistItem.ts

@@ -1,6 +1,9 @@
+import { BlocklistItemScope } from '@/settings/accounts/types/BlocklistItemScope';
+
 export type BlocklistItem = {
   id: string;
   handle: string;
+  scopes?: BlocklistItemScope[];
   workspaceMemberId: string;
   createdAt: string;
   __typename: 'BlocklistItem';

packages/twenty-front/src/modules/settings/accounts/components/blocklist/__stories__/SettingAccountsBlocklistContainer.stories.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { mockedBlocklist } from '@/settings/accounts/components/blocklist/__stories__/mockedBlocklist';
+import { SettingsAccountsBlocklistContactRow } from '@/settings/accounts/components/blocklist/components/SettingAccountsBlocklistContactRow';
+import { Meta, StoryFn } from '@storybook/react';
+
+export default {
+  title: 'Settings/Accounts/BlocklistContactRow',
+  component: SettingsAccountsBlocklistContactRow,
+  argTypes: {
+    item: {
+      control: 'object',
+      description: 'Blocklist item data to display',
+    },
+  },
+} as Meta<typeof SettingsAccountsBlocklistContactRow>;
+
+const Template: StoryFn<typeof SettingsAccountsBlocklistContactRow> = (
+  args,
+) => <SettingsAccountsBlocklistContactRow {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  item: undefined,
+};
+
+export const WithItem = Template.bind({});
+WithItem.args = {
+  item: mockedBlocklist[0],
+};
+
+export const UpdatingItem = Template.bind({});
+UpdatingItem.args = {
+  item: mockedBlocklist[2],
+};

packages/twenty-front/src/modules/settings/accounts/components/blocklist/__stories__/SettingAccountsBlocklistDropdownComponent.stories.tsx

@@ -0,0 +1,86 @@
+import { Decorator, Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+
+import { SettingsAccountsBlocklistDropdownComponent } from '@/settings/accounts/components/blocklist/components/SettingAccountsBlocklistDropdownComponent';
+import { BLOCKLIST_SCOPE_DROPDOWN_ITEMS } from '@/settings/accounts/constants/BlocklistScopeDropdownItems';
+
+const handleMultiSelectChangeJestFn = fn();
+const setDropdownSearchTextJestFn = fn();
+
+const ClearMocksDecorator: Decorator = (Story, context) => {
+  if (context.parameters.clearMocks === true) {
+    handleMultiSelectChangeJestFn.mockClear();
+    setDropdownSearchTextJestFn.mockClear();
+  }
+  return <Story />;
+};
+
+const meta: Meta<typeof SettingsAccountsBlocklistDropdownComponent> = {
+  title:
+    'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistDropdownComponent',
+  component: SettingsAccountsBlocklistDropdownComponent,
+  decorators: [ClearMocksDecorator],
+  args: {
+    handleMultiSelectChange: handleMultiSelectChangeJestFn,
+    setDropdownSearchText: setDropdownSearchTextJestFn,
+    dropdownSearchText: '',
+    selectedBlocklistScopes: [],
+  },
+  argTypes: {
+    handleMultiSelectChange: { control: false },
+    setDropdownSearchText: { control: false },
+  },
+  parameters: {
+    clearMocks: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SettingsAccountsBlocklistDropdownComponent>;
+
+export const Default: Story = {};
+
+export const SearchAndSelect: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(handleMultiSelectChangeJestFn).toHaveBeenCalledTimes(0);
+    expect(setDropdownSearchTextJestFn).toHaveBeenCalledTimes(0);
+
+    const searchInput = canvas.getByPlaceholderText('Search');
+    await userEvent.type(searchInput, 'domain');
+    expect(setDropdownSearchTextJestFn).toHaveBeenCalledWith('domain');
+
+    const firstItem = canvas.getByText(BLOCKLIST_SCOPE_DROPDOWN_ITEMS[0].label);
+    await userEvent.click(firstItem);
+    expect(handleMultiSelectChangeJestFn).toHaveBeenCalledWith(
+      BLOCKLIST_SCOPE_DROPDOWN_ITEMS[0].id,
+    );
+  },
+};
+
+export const SelectMultipleItems: Story = {
+  args: {
+    selectedBlocklistScopes: [BLOCKLIST_SCOPE_DROPDOWN_ITEMS[0].id],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(handleMultiSelectChangeJestFn).toHaveBeenCalledTimes(0);
+
+    const secondItem = canvas.getByText(
+      BLOCKLIST_SCOPE_DROPDOWN_ITEMS[1].label,
+    );
+    await userEvent.click(secondItem);
+    expect(handleMultiSelectChangeJestFn).toHaveBeenCalledWith(
+      BLOCKLIST_SCOPE_DROPDOWN_ITEMS[1].id,
+    );
+
+    const thirdItem = canvas.getByText(BLOCKLIST_SCOPE_DROPDOWN_ITEMS[2].label);
+    await userEvent.click(thirdItem);
+    expect(handleMultiSelectChangeJestFn).toHaveBeenCalledWith(
+      BLOCKLIST_SCOPE_DROPDOWN_ITEMS[2].id,
+    );
+  },
+};

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistInput.stories.tsx → packages/twenty-front/src/modules/settings/accounts/components/blocklist/__stories__/SettingsAccountsBlocklistInput.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 { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
+import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/blocklist/components/SettingsAccountsBlocklistInput';
 
 const updateBlockedEmailListJestFn = fn();
 

packages/twenty-front/src/modules/settings/accounts/components/blocklist/__stories__/SettingsAccountsBlocklistSection.stories.tsx

@@ -0,0 +1,77 @@
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { mockedBlocklist } from '@/settings/accounts/components/blocklist/__stories__/mockedBlocklist';
+import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components/blocklist/components/SettingsAccountsBlocklistSection';
+import { Decorator, Meta, StoryObj } from '@storybook/react';
+import { expect, within } from '@storybook/test';
+import { ComponentDecorator } from 'twenty-ui';
+
+jest.mock('@/object-record/hooks/useFindManyRecords', () => ({
+  useFindManyRecords: jest.fn(),
+}));
+
+const mockUseFindManyRecords = useFindManyRecords as jest.Mock;
+
+const ClearMocksDecorator: Decorator = (Story, context) => {
+  if (Boolean(context.parameters.clearMocks) === true) {
+    mockUseFindManyRecords.mockClear();
+  }
+  return <Story />;
+};
+
+const meta: Meta<typeof SettingsAccountsBlocklistSection> = {
+  title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistSection',
+  component: SettingsAccountsBlocklistSection,
+  decorators: [ComponentDecorator, ClearMocksDecorator],
+  parameters: {
+    clearMocks: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsAccountsBlocklistSection>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const title = canvas.getByText('Blocklist');
+    expect(title).toBeInTheDocument();
+
+    const description = canvas.getByText(
+      'Exclude the following people and domains from my email sync',
+    );
+    expect(description).toBeInTheDocument();
+  },
+};
+
+export const WithBlocklistItems: Story = {
+  parameters: {
+    clearMocks: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    mockUseFindManyRecords.mockReturnValue({ records: mockedBlocklist });
+
+    mockedBlocklist.forEach((item) => {
+      const blocklistItem = canvas.getByText(item.handle);
+      expect(blocklistItem).toBeInTheDocument();
+    });
+  },
+};
+
+export const EmptyBlocklist: Story = {
+  parameters: {
+    clearMocks: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    mockUseFindManyRecords.mockReturnValue({ records: [] });
+
+    mockedBlocklist.forEach((item) => {
+      const blocklistItem = canvas.queryByText(item.handle);
+      expect(blocklistItem).not.toBeInTheDocument();
+    });
+  },
+};

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistTable.stories.tsx → packages/twenty-front/src/modules/settings/accounts/components/blocklist/__stories__/SettingsAccountsBlocklistTable.stories.tsx

@@ -2,8 +2,8 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 import { ComponentDecorator } from 'twenty-ui';
 
-import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
-import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsBlocklistTable';
+import { mockedBlocklist } from '@/settings/accounts/components/blocklist/__stories__/mockedBlocklist';
+import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/blocklist/components/SettingsAccountsBlocklistTable';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
 
 const handleBlockedEmailRemoveJestFn = fn();

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistTableRow.stories.tsx → packages/twenty-front/src/modules/settings/accounts/components/blocklist/__stories__/SettingsAccountsBlocklistTableRow.stories.tsx

@@ -2,8 +2,8 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 import { ComponentDecorator } from 'twenty-ui';
 
-import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
-import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow';
+import { mockedBlocklist } from '@/settings/accounts/components/blocklist/__stories__/mockedBlocklist';
+import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/blocklist/components/SettingsAccountsBlocklistTableRow';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
 
 const onRemoveJestFn = fn();

packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts → packages/twenty-front/src/modules/settings/accounts/components/blocklist/__stories__/mockedBlocklist.ts

@@ -1,6 +1,7 @@
 import { DateTime } from 'luxon';
 
 import { BlocklistItem } from '@/accounts/types/BlocklistItem';
+import { BlocklistItemScope } from '@/settings/accounts/types/BlocklistItemScope';
 
 export const mockedBlocklist: BlocklistItem[] = [
   {
@@ -22,13 +23,19 @@ export const mockedBlocklist: BlocklistItem[] = [
     handle: '[email protected]',
     workspaceMemberId: '1',
     createdAt: DateTime.now().minus({ days: 3 }).toISO() ?? '',
+    scopes: [BlocklistItemScope.CC],
     __typename: 'BlocklistItem',
   },
   {
     id: '4',
     handle: '@twenty.com',
     workspaceMemberId: '1',
     createdAt: DateTime.now().minus({ days: 4 }).toISO() ?? '',
+    scopes: [
+      BlocklistItemScope.BCC,
+      BlocklistItemScope.CC,
+      BlocklistItemScope.FROM_TO,
+    ],
     __typename: 'BlocklistItem',
   },
 ];