Skip to content

feat(docs): tier 2 — dashboard view and save-modal tutorial screenshots#39466

Draft
rusackas wants to merge 4 commits intofeat/docs-screenshotsfrom
feat/docs-screenshots-tier2
Draft

feat(docs): tier 2 — dashboard view and save-modal tutorial screenshots#39466
rusackas wants to merge 4 commits intofeat/docs-screenshotsfrom
feat/docs-screenshots-tier2

Conversation

@rusackas
Copy link
Copy Markdown
Member

SUMMARY

Tier 2 of the living docs:screenshots system (stacked on #39444). Adds five Playwright-generated screenshots from the Creating your first dashboard tutorial:

Output path What it shows
tutorial_first_dashboard.png Sales Dashboard content (view mode)
publish_button_dashboard.png Dashboard header with Published badge, Edit button
tutorial_edit_button.png Isolated Edit dashboard button
tutorial_chart_resize.png Dashboard in edit mode with side panel
tutorial_save_slice.png Save chart modal from explore

Refactors the existing dashboard screenshot test to share an openSalesDashboard helper with the three new dashboard-based tests.

Removes the five captured entries from screenshot-manifest.yaml (tutorial count 42 → 37).

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

The five updated images in docs/static/img/tutorial/ are the before/after.

TESTING INSTRUCTIONS

  1. Check out this branch (needs feat(docs): expand docs:screenshots generator with manifest and tutorial captures #39444 merged first, or start local Docker with example data loaded)
  2. cd superset-frontend
  3. PLAYWRIGHT_BASE_URL=http://localhost:8088 PLAYWRIGHT_ADMIN_PASSWORD=admin npm run docs:screenshots
  4. Verify the five tutorial PNGs under docs/static/img/tutorial/ regenerate cleanly

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration
    • 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

Stacked on #39444 — once that merges, this PR's base will rebase onto master.

🤖 Generated with Claude Code

Adds five new Playwright-generated screenshots for the
`creating-your-first-dashboard` tutorial:

- tutorial_first_dashboard.png: Sales Dashboard content (view mode)
- publish_button_dashboard.png: dashboard header with Published badge
- tutorial_edit_button.png: isolated Edit dashboard button
- tutorial_chart_resize.png: dashboard in edit mode with side panel
- tutorial_save_slice.png: Save chart modal from explore

Extracts an `openSalesDashboard` helper shared between the existing
dashboard test and the new tutorial captures, and updates
screenshot-manifest.yaml to remove the five entries that are now
scripted (tutorial count: 42 -> 37).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@github-actions github-actions bot added the doc Namespace | Anything related to documentation label Apr 18, 2026
@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review bot commented Apr 18, 2026

Bito Automatic Review Skipped - Branch Excluded

Bito didn't auto-review because the source or target branch is excluded from automatic reviews.
No action is needed if you didn't intend for the agent to review it. Otherwise, to manually trigger a review, type /review in a comment and save.
You can change the branch exclusion settings here, or contact your Bito workspace admin at evan@preset.io.

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 18, 2026

Deploy Preview for superset-docs-preview ready!

Name Link
🔨 Latest commit d1b0736
🔍 Latest deploy log https://app.netlify.com/projects/superset-docs-preview/deploys/69e4113b79d820000813079d
😎 Deploy Preview https://deploy-preview-39466--superset-docs-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@codecov
Copy link
Copy Markdown

codecov bot commented Apr 18, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.49%. Comparing base (406358c) to head (d1b0736).

Additional details and impacted files
@@                  Coverage Diff                   @@
##           feat/docs-screenshots   #39466   +/-   ##
======================================================
  Coverage                  64.49%   64.49%           
======================================================
  Files                       2557     2557           
  Lines                     133097   133097           
  Branches                   30910    30910           
======================================================
  Hits                       85846    85846           
  Misses                     45761    45761           
  Partials                    1490     1490           
Flag Coverage Δ
javascript 66.33% <ø> (ø)

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.

claude and others added 3 commits April 18, 2026 16:03
- publish button: toggle to Draft and show the informational tooltip
- edit button: include the sibling "..." actions button for context
- chart resize: enter edit mode and start a drag to show the blue
  resize-selection outline on a chart
- save flow + first dashboard: merged into a single test that saves a
  Scatter Plot to a newly-created "Superset Duper Sales Dashboard" and
  captures both the save modal (creatable dropdown option) and the
  resulting fresh single-chart dashboard. Uses the API to clean up
  the created dashboard and its chart, including idempotent
  pre-cleanup to recover from failed prior runs

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- chart resize: target the right-edge handle directly via its class and
  move further so the grid enters isResizing, rendering the vertical
  column guides and the chart's --resizing outline. Clip to a single
  chart + hover action rail to match the original tutorial framing.
- first dashboard: clip width to the chart's right edge + padding so
  the screenshot doesn't include empty grid space to the right.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

doc Namespace | Anything related to documentation size/L

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants