Can't add multiple domains to blocklist

[BOHEUS]

Scenario:

1. Log in
2. Go to Settings > Accounts
3. Type few domains separated with comma (e.g. @apple.com, @test.com)
4. Save changes

Actual: Multiple domains can't be saved despite placeholder suggesting it's possible to save multiple domains at the same time

Expected: Multiple domains are separated and saved

[sonarly]

🟡 Sonarly Analysis — Medium Severity

Validation rejects comma-separated blocklist domains

Accounts blocklist input accepts only one value per submit, but the placeholder explicitly suggests comma-separated multiple values. Users entering multiple domains get validation errors and cannot complete bulk add in one action.

Root Cause

The failure is caused by a frontend input contract mismatch:

• The UI placeholder says multiple values are expected ("eddy@gmail.com, @apple.com").
• The form schema validates exactly one emailOrDomain string (email OR @domain) and does not split commas.
• Submit sends a single string to updateBlockedEmailList, which creates one record only.

Evidence:

• Placeholder with comma example and single-field validation path in SettingsAccountsBlocklistInput.tsx:
  • placeholder={t\eddy@gmail.com, @apple.com`}`
  • emailOrDomain: z.string().trim().pipe(z.email(...)).or(z.string().refine(...))
  • updateBlockedEmailList(data.emailOrDomain)
    [ref:read-SettingsAccountsBlocklistInput]
• Parent section creates one record per submit (createOneRecord) and accepts a single handle string:
  • const updateBlockedEmailList = (handle: string) => { createBlocklistItem({ handle, ... }) }
    [ref:read-SettingsAccountsBlocklistSection]

Why it failed now:

• This is not a new outage pattern; it is a latent UX/validation mismatch triggered when users follow the placeholder and enter comma-separated values.
• The strict single-value validation was introduced in commit d23e02adca8e0c6c65ac7e518e3d7aaa32d1e7fa (“add validation for blocklist”), while keeping the comma-separated placeholder example. That made comma input explicitly fail validation (Invalid email or domain) instead of being accepted as free text.
  [ref:show-d23e02adca8] [ref:blame-SettingsAccountsBlocklistInput]

Blame commit: d23e02ad by bosiraphael — 4001 add validation for blocklist (#5172)

Suggested Fix

I fixed the mismatch between the placeholder and form behavior by adding first-class support for comma-separated blocklist input in the frontend flow:

1. SettingsAccountsBlocklistInput.tsx

• Changed the callback contract from single value to multiple values:
  • updateBlockedEmailList: (emailsOrDomains: string[]) => void
• Added parsing helper to split comma-separated input, trim tokens, and drop empties.
• Added per-token validation helper:
  • valid email OR @domain (using existing isValidHostname rules).
• Updated Zod validation to validate all parsed tokens and ensure none already exist in the current blocklist.
• Updated submit logic to send deduplicated parsed values in one call.

2. SettingsAccountsBlocklistSection.tsx

• Updated updateBlockedEmailList to accept handles: string[] and create one blocklist record per handle.

3. SettingsAccountsBlocklistInput.stories.tsx

• Updated Storybook assertion to match new callback payload (['test@twenty.com']).

This keeps validation strict while matching the UI expectation that users can input multiple comma-separated entries in one submit action.

---

Analyzed by Sonarly · View full analysis

[git-init-priyanshu]

I would like to work on this. Thanks.

[bosiraphael]

Didn't thought the placeholder would be misleading aha. I'm assigning you @git-init-priyanshu