[PR] fix(version-history): preview banner, history panel layout, scope labels and current-version marking [superset]

Mon, 19 Oct 2026 11:06:59 -0700 


mikebridge opened a new pull request, #45471:
URL: https://github.com/apache/superset/pull/45471

   ### SUMMARY
   
   **TL;DR:** Four small layout fixes for version history, one commit each. On 
dashboards, the preview banner no longer collides with the horizontal filter 
bar, and the history panel opens the same way at every window width. In the 
panel, the scope filter's labels are readable. Charts and dashboards mark the 
current version once instead of twice.
   
   **Background.** Version history adds a side panel to dashboards and charts. 
Opening an older version shows a "Previewing historical version" banner over a 
read-only preview. Early use turned up four layout problems.
   
   **Problems**
   
   1. **Preview banner vs. horizontal filter bar.** On a dashboard with a 
horizontal filter bar, scrolling during a preview made the banner overlap the 
filter bar.
   2. **The history panel opened two different ways.** On wide windows, the 
dashboard history panel pushed the dashboard over and left an empty strip 
beside the header. On narrower windows it opened over the dashboard's right 
edge. Window width and browser zoom decided which one you got.
   3. **Cut-off scope labels.** The scope filter ("All changes" / "This 
dashboard only" / "This chart only" / "Related items only") was cut off in the 
control and in its option list.
   4. **Two "current" markers.** Chart history showed a "Current version" 
section, and also a dated row flagged "Current" with the same check icon.
   
   **Changes**
   
   1. **The banner moves into the dashboard's sticky header**, below the 
horizontal filter bar and the tabs.
      - It can no longer meet the filter bar.
      - Its Restore / Open as new / Close preview actions stay reachable while 
you scroll.
      - The measured header height now includes the banner. That height 
positions the history panel and nested sticky tab bars, so they sit below it.
      - The preview gate on the horizontal filter bar now stays opaque and 
fades only the bar inside it. Before, it faded itself, and the sticky header 
has no background of its own, so content scrolled beneath showed through the 
bar. This is what made the banner appear to overlap the filters.
   2. **The history panel has one layout at every width:** the overlay anchored 
in the dashboard content area, directly below the header, which narrower 
windows already used.
      - The side-by-side column was used only from the `screenXXL` breakpoint 
(1600px) up, because below roughly 1450px the dashboard's content column cannot 
shrink to make room. The panel then overflowed the page (#43836).
      - A single overlay means the panel never pushes or resizes the dashboard 
and never leaves an empty strip beside the header.
      - The panel's right edge lines up with the header's right edge.
   3. **The search box and the scope filter are stacked**, each at the panel's 
full width. Side by side they got about 130px each, too narrow for the labels, 
and the option list takes the control's width.
   4. **Dated rows no longer carry a "Current" tag or check icon.** This 
follows the version-history design, where the "Current version" section marks 
the current state and every dated save, the live one included, is a saved 
snapshot.
      - The "Current" tag was added in 
https://github.com/apache/superset/commit/041cf5e56f792a919bf010902614718c0ad9729a
 (part of #41551, which landed on master as 
e103d92b4894807b46c975f8574debd2ede4b106) to mark the newest save as the live 
state. This PR keeps that behaviour and changes only how it is marked.
      - The newest save still cannot be previewed or restored; selecting it 
exits an active preview, and its menu offers only "Open as new".
      - When the "Current version" section is shown, the live dated row is no 
longer highlighted as well. When the section isn't shown, the live row keeps 
its at-rest highlight and is exposed to assistive technology with 
`aria-current`, since no visible label marks it. A preview still moves the 
single highlight to the previewed save.
      - The highlight rule is a small pure helper 
(`selectHighlightedTransactionId`) with a table test. The panel and the section 
share one visibility predicate (`hasCurrentVersionContent`).
      - The test `the newest save shows a Current tag and older saves do not` 
is replaced by tests asserting there is no tag while the live save stays 
non-restorable, and that the section alone marks the current state.
   
   ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
   
   These captures come from a reduced harness, not a running Superset:
   - The real `DashboardBuilder`, `VersionHistoryPanel` and `SaveGroupItem` are 
rendered in jsdom with production-equivalent emotion `css`-prop compilation.
   - The DOM and all emotion/antd CSS are serialized, and the result is 
screenshotted in headless Chromium at 1920px and 1280px.
   - The horizontal filter bar's contents and the dashboard charts are simple 
stand-ins.
   - The header measurement that jsdom can't do is re-run in the page.
   - jsdom can't position the scope dropdown, so the open option list is placed 
below the select at the select's width, as antd places it.
   
   **1. Preview banner and horizontal filter bar (scrolled 300px, 1920px 
wide).** Before, the banner has scrolled under the header, and the dimmed 
filter bar is see-through: the charts show through it. After, the banner stays 
below an opaque, dimmed filter bar.
   
   | | Before | After |
   |---|---|---|
   | 1920px, scrolled | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/before-dashboard-1920-scroll300.png";
 width="420"> | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/after-dashboard-1920-scroll300.png";
 width="420"> |
   | 1280px, scrolled | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/before-dashboard-1280-scroll300.png";
 width="420"> | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/after-dashboard-1280-scroll300.png";
 width="420"> |
   
   **2. History panel placement (top of page).** Before, at 1920px the panel is 
a separate column with an empty strip beside the header, while at 1280px it is 
an overlay. After, it is the same overlay below the header at both widths.
   
   | | Before | After |
   |---|---|---|
   | 1920px | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/before-dashboard-1920-scroll0.png";
 width="420"> | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/after-dashboard-1920-scroll0.png";
 width="420"> |
   | 1280px | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/before-dashboard-1280-scroll0.png";
 width="420"> | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/after-dashboard-1280-scroll0.png";
 width="420"> |
   
   **3. Scope filter (option list open).**
   
   | | Before | After |
   |---|---|---|
   | Dashboard | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/before-dashboard-panel.png";
 width="420"> | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/after-dashboard-panel.png";
 width="420"> |
   | Chart | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/before-chart-panel.png";
 width="420"> | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/after-chart-panel.png";
 width="420"> |
   
   **4. Current-version marking (chart with an unsaved change).** Before, there 
is a "Current version" section and also a dated row with a check icon and a 
"Current" tag. After, the section alone marks the current state.
   
   | | Before | After |
   |---|---|---|
   | Chart | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/before-chart-panel-list.png";
 width="420"> | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/after-chart-panel-list.png";
 width="420"> |
   | Dashboard | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/before-dashboard-panel-list.png";
 width="420"> | <img 
src="https://raw.githubusercontent.com/mikebridge/superset/90756b9ce2dce6d965cd4712b51990ae5513cd73/after-dashboard-panel-list.png";
 width="420"> |
   
   ### TESTING INSTRUCTIONS
   
   Automated:
   
   ```bash
   cd superset-frontend
   npm run test -- 
src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx \
     src/features/versionHistory
   ```
   
   - Each fix has a test that fails on the previous code:
     - banner inside the header, after the filter bar, with an opaque gate 
whose children fade;
     - one panel layout with no breakpoint switch;
     - stacked full-width controls for chart and dashboard;
     - no "Current" tag or check icon on dated rows, the live save still not 
restorable, and the "Current version" section as the only marker.
   - `version-history-placement.spec.ts` (Playwright) now expects the overlay 
at both 1920px and 1280px, with no horizontal overflow and the panel's right 
edge on the header's.
   
   Manual, with the `VERSION_HISTORY` feature flag on:
   
   1. Open a dashboard with a horizontal filter bar, open version history (⋯ → 
View version history) and preview an older version. Scroll down: the banner 
stays below the filter bar, the filter bar stays opaque (dimmed), and nothing 
shows through it.
   2. Open version history at window widths on both sides of 1600px (or zoom 
the browser): the panel opens in the same place, over the right edge of the 
dashboard below the header, with no blank area beside the header and no 
horizontal scroll.
   3. Open the scope filter in the dashboard and chart panels: every option is 
fully readable.
   4. In Explore, change a control without saving, then open version history: 
"Current version" lists the unsaved change, and no dated row carries a 
"Current" tag. The newest save's ⋯ menu offers only "Open as new chart".
   
   ### ADDITIONAL INFORMATION
   - [ ] Has associated issue:
   - [x] Required feature flags: `VERSION_HISTORY`
   - [x] Changes UI
   - [ ] Includes DB Migration (follow approval process in 
[SIP-59](https://github.com/apache/superset/issues/13351))
     - [ ] 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
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to