fix(alerts): show typed text in email recipients selector

[sadpandajoe]

SUMMARY

In the Alerts & Reports modal, typing into the "Email recipients" select (and the CC/BCC fields) showed no visible text — the characters were accepted but invisible, so users couldn't see the emails they were entering.

Root cause: StyledNotificationMethod styles the recipient selects with an .email-recipient-select > div { width: 100% } rule that was written for the antd v5 DOM, where the select's direct child div was .ant-select-selector and forcing full width was correct. After the antd v5→v6 upgrade (#41636), the direct child div is .ant-select-content; forcing width: 100% on it collapses it to zero width, which shrinks the search input inside it to ~4px — the typed text renders inside an invisible sliver. Verified in a real browser by injecting the modal's CSS cascade rule-by-rule into an isolated Select render: only this rule collapses the input (89px → 4px).

The fix keeps the full-width rule on the select root only and drops the > div half. The surrounding .email-recipient-container is a stretch flex column, so the selects still fill the modal width.

Also adds NotificationMethodEmailRecipients.test.tsx, which renders the real AsyncSelect (the existing NotificationMethod.test.tsx mocks it, which is why it couldn't catch this):

• a CSS regression test asserting the alerts CSS doesn't override the width of antd Select internals — verified to fail with the old rule and pass with the fix
• behavioral coverage that a typed email stays visible and becomes a selectable option

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screen.Recording.2026-07-15.at.2.56.32.PM.mov

After:

Screen.Recording.2026-07-15.at.2.54.00.PM.mov

TESTING INSTRUCTIONS

1. Go to Alerts & Reports → add (or edit) a report.
2. Expand the "Notification method" section with the Email method selected.
3. Start typing an email address into "Email recipients".
4. The typed text should be visible, and the typed address should appear as a selectable option; selecting it should render a tag. Same for the CC/BCC fields.

Unit tests: npx jest src/features/alerts/components/NotificationMethodEmailRecipients.test.tsx

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

FEATURE FLAGS

FEATURE_ALERT_REPORTS=true
FEATURE_ALERT_REPORT_TABS=true
FEATURE_ALERT_REPORTS_FILTER=true

🤖 Generated with Claude Code

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 65.08%. Comparing base (beb9d53) to head (477ff0e).
⚠️ Report is 11 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #42091   +/-   ##
=======================================
  Coverage   65.08%   65.08%           
=======================================
  Files        2747     2747           
  Lines      153926   153926           
  Branches    35304    35304           
=======================================
  Hits       100186   100186           
  Misses      51828    51828           
  Partials     1912     1912           

Flag	Coverage Δ
javascript	70.51% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🎪 Showtime is building environment on GHA for 477ff0e

[github-actions]

🎪 Showtime deployed environment on GHA for 477ff0e

• Environment: http://44.248.227.90:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

[bito-code-review]

Code Review Agent Run #2b9f07

Actionable Suggestions - 1

• superset-frontend/src/features/alerts/components/NotificationMethodEmailRecipients.test.tsx - 1

  • Missing fetchMock cleanup between tests · Line 54-63

Review Details

• Files reviewed - 2 · Commit Range: 477ff0e..477ff0e

  • superset-frontend/src/features/alerts/components/NotificationMethod.tsx
  • superset-frontend/src/features/alerts/components/NotificationMethodEmailRecipients.test.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[rusackas]

LGTM, thanks @sadpandajoe! Good catch on the v6 .ant-select-content shift. I especially like that the regression test renders the real AsyncSelect instead of the mocked one, since that is exactly why the original slipped past. Approving!