feat: showing results pane in dashboard

[zhaoyongjie]

SUMMARY

This PR has finally come to the end after completing these PRs:

• refactor: decouple DataTableControl #20226
• fix: unable to set destroyOnClose on ModalTrigger #20201
• refactor: decouple DataTablesPane #20109
• feat: add samples endpoint #20170

Show ResultsPane in Dashboard and keep all functions as ResultsPane on explore page.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Mulitple charts

data.pane.in.dashboard.mov

Results data copy to clipboard and formatted time switching

results.pane.in.Dashboard.2.mov

TESTING INSTRUCTIONS

1. The functionality in ResultsPane should same between Dashboard and Explore
2. The HTTP request should not resend if chart not apply new filter on Dashboard. (for example, the results data will be cached until apply a new native filter)
3. Should correctly copy results data to clipboard both in Dashboard and Explore

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

[rusackas]

Loving this!!

Capturing a few UI/UX change requests that have come up in design feedback (CC @kasiazjc ❤️ )

• In the modal header, instead of "View Results" maybe we could get more specific, like one of these:
  • {Name} Data
  • {Name} Results
  • Chart Data: {Name}
  • ... or others?
• In the footer of the modal, can we add two buttons?
  • (left/secondary button) "Open in Explore" (or is this "Edit chart" now?)
  • (right/primary button) "Close"

[kasiazjc]

Loving this!!

Capturing a few UI/UX change requests that have come up in design feedback (CC @kasiazjc ❤️ )

• In the modal header, instead of "View Results" maybe we could get more specific, like one of these:

  • {Name} Data
  • {Name} Results
  • Chart Data: {Name}
  • ... or others?

• In the footer of the modal, can we add two buttons?

  • (left/secondary button) "Open in Explore" (or is this "Edit chart" now?)
  • (right/primary button) "Close"

Thanks @rusackas for adding those and @zhaoyongjie for working on it ❤️

Following up:

1. I think we should definitely add a footer, the secondary button would be "edit chart"
2. The best title would probably be your third idea "Chart data: {Name}", because if the chart has a still long name users will still be able to see the context as it's right at the beginning!

[villebro]

I also really love this feature! This will also be the perfect mechanism for showing raw data underlying a highlighted slice on a chart (project Drill Down)

[codecov]

Codecov Report

Merging #20144 (d50e809) into master (7faf874) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Current head d50e809 differs from pull request most recent head 5f4a5a0. Consider uploading reports for the commit 5f4a5a0 to get more accurate results

@@           Coverage Diff           @@
##           master   #20144   +/-   ##
=======================================
  Coverage   66.64%   66.64%           
=======================================
  Files        1729     1729           
  Lines       64903    64904    +1     
  Branches     6841     6842    +1     
=======================================
+ Hits        43255    43257    +2     
  Misses      19897    19897           
+ Partials     1751     1750    -1     

Flag	Coverage Δ
javascript	51.56% <100.00%> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
...dashboard/components/SliceHeaderControls/index.tsx	64.28% <100.00%> (+0.43%)	⬆️
superset-frontend/src/components/Modal/Modal.tsx	88.05% <0.00%> (+1.49%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7faf874...5f4a5a0. Read the comment docs.

[zhaoyongjie]

/testenv up

[github-actions]

@zhaoyongjie Ephemeral environment spinning up at http://35.167.214.140:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[kgabryje]

LGTM!

[jinghua-qa]

LGTM!

[jinghua-qa]

QA tested and LGTM

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.