fix(embedded): show already-added allowed domains in embed modal (closes #35328)

[rusackas]

SUMMARY

Fixes the dashboard "Embed dashboard" modal so that previously saved allowed domains are displayed in the input when the modal is reopened.

This adopts anandraiin3/superset#15 (originally authored via Devin AI). Full credit to @anandraiin3 for the original fix — this PR brings it onto current master with the regression test intact.

Root cause

The Ant Design v5 overhaul (#31590) restructured this form to use the @superset-ui/core/components Form / FormItem wrappers and moved name="allowed-domains" from the <Input> element onto the <FormItem> wrapper:

<Form layout="vertical">
  <FormItem
    name="allowed-domains"   // turns FormItem into a controlled antd field
    label={...}
  >
    <Input
      id="allowed-domains"
      value={allowedDomains}                  // ignored by antd
      onChange={e => setAllowedDomains(...)}  // wrapped/overridden by antd
    />
  </FormItem>
</Form>

When FormItem has a name, Ant Design takes over the field via its internal Form store: it clones the child and injects its own value / onChange, ignoring the explicit value={allowedDomains} passed to the Input. As a result, programmatic state updates from React (i.e. setAllowedDomains(result.allowed_domains.join(', ')) after the GET /embedded call resolves) never propagate to the rendered input.

This is why:

• On first open with no embedded config, the user can type and save normally.
• After navigating away and back, the modal remounts, the GET returns the saved domains, React state is updated, but the form's internal state stays empty — so the input renders empty even though embedded.allowed_domains is populated. This also matches the issue symptom where the input detects a duplicate domain and keeps Save disabled (the isDirty check uses React state, which is populated correctly).

Fix

Replace name="allowed-domains" on <FormItem> with htmlFor="allowed-domains". The FormItem is now used purely as a label/layout wrapper (not a controlled antd field), so the <Input>'s explicit value / onChange are honored as a normal controlled component. The htmlFor keeps the label associated with the input for accessibility (matching the existing id="allowed-domains" on the <Input>).

This is a minimal, focused change that restores the pre-AntD-v5 behavior without changing how data is loaded, saved, or validated.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

N/A — pure UI state-binding fix; no visual styling changes. Verified via the new unit test described below.

TESTING INSTRUCTIONS

Automated:

cd superset-frontend
npm run test -- src/dashboard/components/EmbeddedModal/EmbeddedModal.test.tsx

A new test, populates the allowed-domains input from the API response, asserts that when the GET /api/v1/dashboard/<id>/embedded endpoint returns { allowed_domains: ['example.com'] }, the input element's value is "example.com". This test fails on master and passes with this fix.

Manual (mirrors the issue reproduction):

1. Enable the EMBEDDED_SUPERSET feature flag.
2. Open a dashboard, click ⋮ → Embed dashboard.
3. Enter https://mytestdomain.com and click Save changes.
4. Navigate to Datasets, then back to Dashboards, and reopen the same dashboard.
5. Click ⋮ → Embed dashboard.
6. Expected: the "Allowed Domains (comma separated)" input shows https://mytestdomain.com (previously it was empty).

ADDITIONAL INFORMATION

Adopted from anandraiin3#15 (originally authored via Devin AI). Credit to @anandraiin3.

• Has associated issue: Closes [6.0.0rc2] list of domain names that can embed this dashboard - not showing already added domains #35328
• 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

[bito-code-review]

Code Review Agent Run #abb568

Actionable Suggestions - 0

Review Details

• Files reviewed - 2 · Commit Range: aec4b14..aec4b14

  • superset-frontend/src/dashboard/components/EmbeddedModal/EmbeddedModal.test.tsx
  • superset-frontend/src/dashboard/components/EmbeddedModal/index.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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.44%. Comparing base (6f12d17) to head (aec4b14).

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #41399   +/-   ##
=======================================
  Coverage   64.44%   64.44%           
=======================================
  Files        2655     2655           
  Lines      145473   145473           
  Branches    33575    33575           
=======================================
  Hits        93747    93747           
  Misses      50027    50027           
  Partials     1699     1699           

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

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.