fix: increase dataset edit modal size (#38215)

[Vikash-Kumar-23]

SUMMARY

Closes #38215

This PR improves the usability of the Edit Dataset modal by increasing its default size and giving SQL editing more room.

• Increased Edit Dataset modal size to use about 90% of the viewport (90vw / 90vh) with a max-width cap for large screens.
• Kept the header/footer visible and made the modal body scrollable.
• Improved Metrics and Calculated Columns editing with a wider, side-by-side style layout so SQL expression fields have significantly more horizontal space.
• Scoped changes only to the dataset edit flow (no global modal defaults changed).

BEFORE SCREENSHOTS

AFTER SCREENSHOTS

TESTING INSTRUCTIONS

1. Navigate to Datasets and edit any dataset to open the modal.
2. Verify the modal is noticeably larger on laptop and desktop screens.
3. Verify body scrolling works and footer actions remain fixed and accessible.
4. Go to the Metrics and Calculated Columns tabs to verify the wider SQL editing experience.
5. Verify the ESC key closes the modal and tab/focus behavior remains unchanged.

ADDITIONAL INFORMATION

• Has associated issue: Fixes Increase dataset edit modal size using more of the available screen space #38215
• 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

[rusackas]

Looks like we need to address bot comments here and rebase to resolve the merge conflict. Thanks for the PR.

[netlify]

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	7e78165
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/6abb3f97c6cb4c0008d5fe2f
😎 Deploy Preview	https://deploy-preview-39257--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[rusackas]

Thanks @Vikash-Kumar-23, but this is still conflicting against master and needs a rebase before it can go anywhere.

Also still seeing the open bot notes: the canEdit prop on TextAreaControl isn't a real prop, and .datasource-label-cell is still applied on the metrics verbose_name column though its width rule was dropped.

Mind cleaning those up in the same pass, and then we'll review again?

[rusackas]

This still needs a rebase against master before it can move, and the canEdit prop on TextAreaControl isn't a real prop (it's just swallowed by the index signature) so it should come off. Ping me once those land and we'll re-review. I'll see if I can fix that, to help get it across the finish line and close out the issue.

[rusackas]

Still conflicting with master, so this can't go anywhere until it's rebased.

Also the canEdit prop on TextAreaControl in DatasourceEditor.tsx is still there (both metrics and calculated columns expression renderers). It's not a real prop on that component, just swallowed by its [key: string]: unknown index signature, so it's dead weight left over from copy-pasting EditableTitle. I asked for this twice now (April and June) and it's still in the diff.

@Vikash-Kumar-23 I'll see about a rebase, but then if you can drop canEdit and ping me, I'll take another pass.

[codecov]

Codecov Report

❌ Patch coverage is 81.25000% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.50%. Comparing base (0e5a3b2) to head (d57cb94).
⚠️ Report is 43 commits behind head on master.

Files with missing lines	Patch %	Lines
...e/components/DatasourceEditor/DatasourceEditor.tsx	78.57%	3 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #39257   +/-   ##
=======================================
  Coverage   81.50%   81.50%           
=======================================
  Files        2973     2973           
  Lines      180155   180165   +10     
  Branches    41713    41712    -1     
=======================================
+ Hits       146836   146849   +13     
+ Misses      30602    30599    -3     
  Partials     2717     2717           

Flag	Coverage Δ
javascript	77.00% <81.25%> (+<0.01%)	⬆️

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.

[bito-code-review]

Code Review Agent Run #d1d8a5

Actionable Suggestions - 1

• superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx - 1

  • Checkbox type mismatch · Line 459-461

Review Details

• Files reviewed - 2 · Commit Range: 33ba803..c320477

  • superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
  • superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.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

[bito-code-review]

Code Review Agent Run #c48b25

Actionable Suggestions - 1

• superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx - 1

  • Prop not forwarded to DOM · Line 787-798

Review Details

• Files reviewed - 2 · Commit Range: e01a448..74eba14

  • superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
  • superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.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

[codeant-ai-for-open-source]

Suggestion: The modal now gives Ant Design a fixed 90vw width while also placing it inside the resizable wrapper. Resizing changes the wrapper dimensions, but the nested Ant modal continues to enforce 90vw, so shrinking the modal can leave the content overflowing the resized frame and expanding it does not correctly resize the inner modal. The modal width must be driven by the resizable dimensions or the fixed width must be removed when resizing is enabled. [api mismatch]

Severity Level: Major ⚠️

- ❌ Dataset editor content can overflow after resizing.
- ⚠️ Resizing does not accurately control modal width.
- ⚠️ Footer and body alignment can become inconsistent.

Steps of Reproduction ✅

1. Open the dataset editor through `DatasourceModal` at
`superset-frontend/src/components/Datasource/DatasourceModal/index.tsx:331`, which renders
`StyledDatasourceModal` with `width="90vw"` and `maxWidth="1600px"` at lines 335-336.

2. The same modal enables `resizable` and supplies `defaultSize` through `resizableConfig`
at `superset-frontend/src/components/Datasource/DatasourceModal/index.tsx:385-394`.

3. `Modal` wraps the Ant Design modal inside `Resizable` at
`superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx:249-265`;
resizing changes the wrapper dimensions, while `modalWidth` remains the fixed `width` prop
at lines 188 and 227-233.

4. Drag the resize handle to make the dataset modal narrower or wider and observe that the
nested Ant modal continues using 90vw, causing overflow when narrowed and preventing the
inner modal from matching the resized frame.

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖

This is a comment left during a code review.

**Path:** superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
**Line:** 335:336
**Comment:**
	*Api Mismatch: The modal now gives Ant Design a fixed `90vw` width while also placing it inside the resizable wrapper. Resizing changes the wrapper dimensions, but the nested Ant modal continues to enforce `90vw`, so shrinking the modal can leave the content overflowing the resized frame and expanding it does not correctly resize the inner modal. The modal width must be driven by the resizable dimensions or the fixed width must be removed when resizing is enabled.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎

[rusackas]

There's some real tension here, dragging the resize handle won't shrink the underlying vw width since that's relative to the viewport, not the wrapper. That said it's not a regression from this PR, the modal was already fixed-width under responsive (100vw) before this change. Feels more like a Modal component limitation than something to fix in DatasourceModal, happy to open a separate issue if it's actually causing problems for someone.

[codeant-ai-for-open-source]

Suggestion: Passing tableColumns as sortColumns enables sorting for these tables, but CollectionTable resets an unsorted table from its original propsCollection rather than its locally edited collection. Clearing a sort after an inline edit can therefore discard the latest edit if the parent datasource state has not propagated yet. Sorting must use the current edited collection when resetting, or the local collection must be synchronized before this reset. [logic error]

Severity Level: Major ⚠️

- ❌ Recent column edits can disappear when clearing sort.
- ⚠️ Calculated-column edits may be lost before saving.
- ⚠️ User-visible table state can diverge from datasource state.

Steps of Reproduction ✅

1. Open the Columns or Calculated Columns tab, where `ColumnCollectionTable` is rendered
at `DatasourceEditor.tsx:2421-2519`.

2. The new `sortColumns={tableColumns}` at `DatasourceEditor.tsx:557-558` enables sorting
for every displayed column.

3. Edit a cell inline; `CollectionTable.onCellChange()` updates local state and invokes
the parent callback at
`superset-frontend/src/components/Datasource/components/CollectionTable/index.tsx:70-102`,
while the parent datasource update is still being scheduled.

4. Immediately clear the active table sort. `CollectionTable.handleTableChange()` resets
the array from `propsCollection` rather than the locally edited `collectionArray` at
`CollectionTable/index.tsx:251-289`; if the parent prop has not propagated, the edited
value disappears from the table and subsequent save state can omit that edit.

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖

This is a comment left during a code review.

**Path:** superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
**Line:** 557:558
**Comment:**
	*Logic Error: Passing `tableColumns` as `sortColumns` enables sorting for these tables, but `CollectionTable` resets an unsorted table from its original `propsCollection` rather than its locally edited collection. Clearing a sort after an inline edit can therefore discard the latest edit if the parent datasource state has not propagated yet. Sorting must use the current edited collection when resetting, or the local collection must be synchronized before this reset.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎

[rusackas]

Good catch on the mechanism, handleTableChange does reset from propsCollection rather than the local collectionArray when clearing a sort. That's existing CollectionTable behavior though, this PR just newly turns sorting on for these tables. I'd rather fix the reset-from-props path in CollectionTable itself as a follow-up than roll it into this one.

[codeant-ai-for-open-source]

Suggestion: The inline SQL editor uses initialValue, which TextAreaControl passes to Ace as defaultValue. Because collection rows retain the same id when the parent collection is refreshed, the editor stays mounted and does not update when the expression changes externally, leaving stale SQL visible while the saved collection contains the refreshed value. Use a controlled value or remount the editor when the expression changes. [stale reference]

Severity Level: Major ⚠️

- ❌ Calculated-column SQL can display stale values.
- ⚠️ Users may save an expression different from refreshed metadata.
- ⚠️ Dataset edits become difficult to reconcile visually.

Steps of Reproduction ✅

1. Open the calculated-columns tab, rendered by `DatasourceEditor` at
`superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx:2487-2519`,
and edit an expression using the renderer at lines 787-798.

2. `ColumnCollectionTable` passes the current expression as `initialValue` at lines
789-790 and sends edits through `onChange` at lines 790-791.

3. `TextAreaControl` converts `initialValue` to Ace's `defaultValue` at
`superset-frontend/src/explore/components/controls/TextAreaControl.tsx:112-126`, so later
prop changes do not update the mounted editor value.

4. Trigger a collection refresh such as the metadata synchronization path at
`DatasourceEditor.tsx:1249-1297`, or receive a parent collection update while the row
retains its id; `CollectionTable` updates its local row state at
`superset-frontend/src/components/Datasource/components/CollectionTable/index.tsx:62-68`,
but the mounted editor retains its previous Ace default value and can display SQL
different from the refreshed datasource state.

(Use Cmd/Ctrl + Click for best experience)

Prompt for AI Agent 🤖

This is a comment left during a code review.

**Path:** superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
**Line:** 749:750
**Comment:**
	*Stale Reference: The inline SQL editor uses `initialValue`, which `TextAreaControl` passes to Ace as `defaultValue`. Because collection rows retain the same `id` when the parent collection is refreshed, the editor stays mounted and does not update when the expression changes externally, leaving stale SQL visible while the saved collection contains the refreshed value. Use a controlled value or remount the editor when the expression changes.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix

👍 | 👎

[rusackas]

This is a real gap, if you hit "Sync columns from source" mid-edit the Ace editor won't pick up the refreshed expression since initialValue only sets Ace's defaultValue once. I don't want to key/remount it off the value though, that'd blow away the cursor position on every keystroke. Worth its own fix rather than rushing something here.

[codeant-ai-for-open-source]

✅ Customized review instruction saved!

Instruction:

Do not remount the inline Ace editor on every expression change, since this loses cursor position; preserve the editing state while synchronizing externally refreshed expressions through a non-remount approach.

Applied to:

• superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx

---

💡 To manage or update this instruction, visit: CodeAnt AI Settings

[bito-code-review]

Code Review Agent Run #80ced2

Actionable Suggestions - 2

• superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx - 2

  • Duplicated column list · Line 592-609
  • Duplicated expression renderer · Line 803-814

Additional Suggestions - 2

• superset-frontend/src/components/Datasource/DatasourceModal/index.tsx - 1

  • Initial width exceeds max cap · Line 465-465
    It looks like re-resizable (v6.11.2) applies maxWidth only while the user is resizing, not to the initial defaultSize. On viewports wider than ~1778px (e.g. common 1920px monitors), defaultSize width 90vw renders the Resizable past the MODAL_MAX_WIDTH cap that the CSS maxWidth prop (line 411) sets on .ant-modal, so the initial modal can overflow the intended 1600px cap. Capping defaultSize with min() would keep both layers consistent.
• superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx - 1

  • Stale uncontrolled SQL cell · Line 803-814
    The inline `expression` TextAreaControl is uncontrolled (`initialValue` -> Ace `defaultValue`). If the expression is edited via the expandable fieldset's expression Field (line 626-639) or updated externally, the inline cell won't reflect the new value. Sibling cells use controlled `value={v}`.

Review Details

• Files reviewed - 2 · Commit Range: 3360e6c..7e78165

  • superset-frontend/src/components/Datasource/DatasourceModal/index.tsx
  • superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.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 an incremental AI Review.

• /review full - 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

[bito-code-review]

Code Review Agent Run #9e8260

Actionable Suggestions - 0

Review Details

• Files reviewed - 1 · Commit Range: 7e78165..d57cb94

  • superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.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 an incremental AI Review.

• /review full - 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