fix(dashboard): restore top-level tab drop target for dashboards with content by sadpandajoe · Pull Request #39423 · apache/superset

sadpandajoe · 2026-04-17T05:06:50Z

SUMMARY

PR #37891 moved the DashboardHeader out of the root Droppable in DashboardBuilder.tsx, which left the drop target with zero height when no top-level tabs exist. This made it impossible to drag a "Tabs" component onto dashboards that already have content — the only way to create top-level tabs on an existing dashboard.

The fix adds min-height to .empty-droptarget in StyledHeader, matching the pattern used by DashboardGrid for its empty drop targets.

Root cause: The Droppable renders an empty <div> when no top-level tabs exist. Before #37891, the DashboardHeader was inside it (giving it physical height). After #37891, the header was extracted as a sibling, collapsing the Droppable to zero height — react-dnd cannot detect hover events on a zero-height element.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: Dragging a Tabs component from the builder pane onto a dashboard with existing charts shows no drop indicator and the drop does not register.

Screen.Recording.2026-05-01.at.2.48.34.PM.mov

After: The drop target in the header area has 16px min-height, the drop indicator appears, and top-level tabs can be created.

Screen.Recording.2026-05-01.at.2.46.42.PM.mov

TESTING INSTRUCTIONS

Open a dashboard that already has charts/rows (not a blank dashboard)
Enter edit mode
From the "Layout elements" section in the builder pane, drag the "Tabs" component toward the header area (above the existing content)
Verify the blue drop indicator appears and the drop succeeds, creating top-level tabs
Verify blank dashboards still work (drag Tabs onto empty grid)

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

github-actions · 2026-04-17T05:09:55Z

🎪 Showtime is building environment on GHA for 862b004

github-actions · 2026-04-17T05:27:39Z

🎪 Showtime deployed environment on GHA for 862b004

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

codecov · 2026-04-21T17:02:06Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.36%. Comparing base (673634f) to head (d25c075).
⚠️ Report is 18 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #39423      +/-   ##
==========================================
- Coverage   64.37%   64.36%   -0.01%     
==========================================
  Files        2569     2569              
  Lines      134745   134745              
  Branches    31278    31278              
==========================================
- Hits        86739    86728      -11     
- Misses      46508    46519      +11     
  Partials     1498     1498

Flag	Coverage Δ
javascript	`66.61% <ø> (-0.02%)`	⬇️

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

☔ View full report in Codecov by Sentry.
📢 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.

Copilot

Pull request overview

Restores a usable top-level tab drop target in dashboards that already have content by ensuring the header-area droppable has non-zero height, preventing react-dnd hover/drop failures after the header/droppable layout change in #37891.

Changes:

Add a min-height rule for .empty-droptarget within the dashboard header wrapper styling.
Add a Jest test intended to verify the presence of the new styling.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx	Adds `min-height` to the header-area empty droptarget so the top-level droppable remains hoverable.
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx	Adds a regression test aiming to validate the new header droptarget min-height styling.

bito-code-review · 2026-04-21T21:25:43Z

Yes, the suggestion is valid — it improves test reliability by directly checking the droppable element's class and computed min-height, focusing on actual behavior rather than CSSOM internals.

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx

const droppable = container.querySelector('[data-test="top-level-tabs"]');
  expect(droppable).toBeInTheDocument();
  expect(droppable).toHaveClass('empty-droptarget');
  const computedStyle = getComputedStyle(droppable);
  expect(computedStyle.minHeight).toBe('16px'); // Adjust based on theme.sizeUnit * 4

…ds with content PR #37891 moved the DashboardHeader out of the root Droppable, leaving it with zero height when no top-level tabs exist. This made it impossible to drag a Tabs component onto dashboards that already have content. Add min-height to .empty-droptarget in StyledHeader, matching the pattern used by DashboardGrid for its drop targets. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-05-03T00:35:14Z

🎪 Showtime deployed environment on GHA for 3fe5902

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

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

…on-jest types - Assert min-height is '16px' (theme.sizeUnit * 4) instead of /\S+/ to catch zero-height regressions - Move @emotion/jest type reference from per-file directive to src/types/emotion-jest.d.ts for global availability Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-05-04T19:27:06Z

🎪 Showtime is building environment on GHA for 93066ad

github-actions · 2026-05-04T19:34:57Z

🎪 Showtime is building environment on GHA for d25c075

Copilot

Pull request overview

Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.

github-actions · 2026-05-04T19:43:11Z

🎪 Showtime deployed environment on GHA for 93066ad

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

github-actions · 2026-05-05T18:11:00Z

🎪 Showtime is building environment on GHA for d25c075

github-actions · 2026-05-05T18:27:29Z

🎪 Showtime deployed environment on GHA for d25c075

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

github-actions · 2026-05-05T22:12:03Z

🎪 Showtime is building environment on GHA for 7d6513f

github-actions · 2026-05-05T22:30:51Z

🎪 Showtime deployed environment on GHA for 7d6513f

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

aminghadersohi

Approve — minimal, correct fix with a proper regression test. Two minor nits inline.

aminghadersohi · 2026-05-05T22:45:13Z

+ * under the License.
+ */
+
+/// <reference types="@emotion/jest" />


Nit: this triple-slash directive augments expect globally across all src/ code, not just tests. Harmless in practice since it only adds a type, but the augmentation could live more precisely in spec/helpers/setup.ts (which already does import { matchers } from '@emotion/jest') or via a test-only tsconfig types entry. Not a blocker — putting it in src/types/ is consistent with the existing project convention for ambient declarations.

bito-code-review · 2026-05-06T00:21:54Z

Code Review Agent Run #fc1989

Actionable Suggestions - 0

Review Details

Files reviewed - 3 · Commit Range: 5bb88b2..7d6513f
- superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx
- superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
- superset-frontend/src/types/emotion-jest.d.ts
Files skipped - 0
Tools
- Eslint (Linter) - ✔︎ Successful
- 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

AI Code Review powered by

Use supersetTheme.sizeUnit * 4 instead of hard-coded '16px' so the test stays in sync with the source rule and resilient to theme token changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions · 2026-05-06T17:22:54Z

🎪 Showtime is building environment on GHA for b71c556

github-actions · 2026-05-06T17:39:19Z

🎪 Showtime deployed environment on GHA for b71c556

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

github-actions · 2026-05-07T02:19:21Z

🎪 Showtime is building environment on GHA for 78fada7

github-actions · 2026-05-07T02:36:57Z

🎪 Showtime deployed environment on GHA for 78fada7

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

bito-code-review · 2026-05-07T05:52:04Z

Code Review Agent Run #3bfab6

Actionable Suggestions - 0

Review Details

Files reviewed - 1 · Commit Range: 7d6513f..78fada7
- superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.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

AI Code Review powered by

github-actions · 2026-05-07T17:04:20Z

🎪 Showtime is building environment on GHA for ff323ba

github-actions · 2026-05-07T17:22:08Z

🎪 Showtime deployed environment on GHA for ff323ba

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

pull-request-size Bot added the size/M label Apr 17, 2026

sadpandajoe added showtime-start 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR and removed showtime-start labels Apr 17, 2026

sadpandajoe requested a review from Copilot April 21, 2026 21:20

Copilot started reviewing on behalf of sadpandajoe April 21, 2026 21:21 View session

Copilot AI reviewed Apr 21, 2026

View reviewed changes

Comment thread superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx Outdated

Copilot AI reviewed May 4, 2026

View reviewed changes

Comment thread superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx Outdated

Comment thread superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx Outdated

Merge branch 'master' into fix-no-top-level-tab

d25c075

Copilot AI reviewed May 4, 2026

View reviewed changes

Comment thread superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx Outdated

Merge branch 'master' into fix-no-top-level-tab

7d6513f

aminghadersohi approved these changes May 5, 2026

View reviewed changes

fix(dashboard): derive min-height assertion from theme.sizeUnit

b71c556

Use supersetTheme.sizeUnit * 4 instead of hard-coded '16px' so the test stays in sync with the source rule and resilient to theme token changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Merge branch 'master' into fix-no-top-level-tab

78fada7

Merge branch 'master' into fix-no-top-level-tab

ff323ba

Conversation

sadpandajoe commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

github-actions Bot commented Apr 17, 2026

Uh oh!

github-actions Bot commented Apr 17, 2026

Uh oh!

codecov Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

bito-code-review Bot commented Apr 21, 2026

Uh oh!

github-actions Bot commented May 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

github-actions Bot commented May 5, 2026

Uh oh!

github-actions Bot commented May 5, 2026

Uh oh!

github-actions Bot commented May 5, 2026

Uh oh!

github-actions Bot commented May 5, 2026

Uh oh!

aminghadersohi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

aminghadersohi May 5, 2026

Choose a reason for hiding this comment

Uh oh!

bito-code-review Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #fc1989

Uh oh!

github-actions Bot commented May 6, 2026

Uh oh!

github-actions Bot commented May 6, 2026

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

bito-code-review Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #3bfab6

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

Reviewers

Assignees

sadpandajoe commented Apr 17, 2026 •

edited

Loading

codecov Bot commented Apr 21, 2026 •

edited

Loading

bito-code-review Bot commented May 6, 2026 •

edited

Loading

bito-code-review Bot commented May 7, 2026 •

edited

Loading