feat(dashboard): Transition to Explore with React Router #20606

kgabryje · 2022-07-05T11:04:43Z

SUMMARY

Currently, when user clicks on chart title or "Edit chart" button in Dashboard view, we first make a POST request to get form_data_key and then open Explore in a new window. In order to fully benefit from Explore SPA project, we need to stay in the SPA context when transitioning from Dashboard to Explore - which means that we should open Explore in the same tab.

This PR changes the default behaviour to open Explore in the same tab using the React Router. If user wants to open Explore in separate tab, they can do cmd+click (on Mac) or ctrl+click (on Linux/Windows). The tooltip was adjusted to make the feature easier to discover.

Why can't we just make the chart title a link and let user "right click -> open in a new tab"? When user clicks "Edit chart", we first need to send an API request to get the form_data_key, which is required to correctly pass dashboard context to Explore. For this reason we can't use standard HTML element and instead we use a button with onClick callback.
In the future, we'll work on improving this behaviour, so that we can use a link to transition to Explore.

Since this change in flow (open Explore in the same tab by default) might be disruptive, user can bring back the old behaviour by enabling the new feature flag DASHBOARD_EDIT_CHART_IN_NEW_TAB.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2022-07-05.at.12.08.44.mov

TESTING INSTRUCTIONS

Go to dashboard
Click on chart title or "Edit chart" in menu or "Edit chart" in "View as table" modal
Verify that Explore opens in the same tab
Go back to Dashboard
Click on chart title while holding CMD
Verify that Explore opens in new tab

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

ktmud · 2022-07-05T16:07:31Z

Flagging #20381 as this is related. I agree we should use a regular link for transition. The form data retrieval (and subsequent redirects) should happen on the Explore page, not dashboard page.

kgabryje · 2022-07-06T10:49:08Z

Flagging #20381 as this is related. The form data retrieval (and subsequent redirects) should happen on the Explore page, not dashboard page.

I think #20381 is related to permissions, this PR is part of the Explore SPA project.

The form data retrieval (and subsequent redirects) should happen on the Explore page, not dashboard page.

Form data retrieval does happen on Explore. What we do on dashboard is post form data with native filters, color scheme and other data related to dashboard and retrieve a form_data_key. We need to figure out a way to skip that step in order to be able to use a link.

Since this change in flow (open Explore in the same tab by default) might be disruptive, I put it behind a new feature flag DASHBOARD_TO_EXPLORE_SPA, which is enabled by default.

…ck to open in new tab

codecov · 2022-07-06T11:23:02Z

Codecov Report

Merging #20606 (002d8c9) into master (f38dd1d) will decrease coverage by 0.00%.
The diff coverage is 52.94%.

@@            Coverage Diff             @@
##           master   #20606      +/-   ##
==========================================
- Coverage   66.82%   66.82%   -0.01%     
==========================================
  Files        1752     1753       +1     
  Lines       65616    65633      +17     
  Branches     6938     6944       +6     
==========================================
+ Hits        43849    43860      +11     
- Misses      20007    20012       +5     
- Partials     1760     1761       +1

Flag	Coverage Δ
hive	`53.82% <ø> (+<0.01%)`	⬆️
javascript	`51.85% <52.94%> (+<0.01%)`	⬆️
mysql	`82.38% <ø> (+<0.01%)`	⬆️
postgres	`82.46% <ø> (+<0.01%)`	⬆️
presto	`53.68% <ø> (+<0.01%)`	⬆️
python	`82.89% <ø> (+<0.01%)`	⬆️
sqlite	`82.24% <ø> (+<0.01%)`	⬆️
unit	`50.67% <ø> (+<0.01%)`	⬆️

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

Impacted Files	Coverage Δ
...ackages/superset-ui-core/src/utils/featureFlags.ts	`100.00% <ø> (ø)`
...et-frontend/src/components/EditableTitle/index.tsx	`64.28% <ø> (ø)`
...dashboard/components/SliceHeaderControls/index.tsx	`63.52% <0.00%> (-0.76%)`	⬇️
superset/config.py	`91.47% <ø> (ø)`
.../src/dashboard/components/gridComponents/Chart.jsx	`56.60% <16.66%> (-2.22%)`	⬇️
...ntend/src/dashboard/util/getSliceHeaderTooltip.tsx	`75.00% <75.00%> (ø)`
...end/src/dashboard/components/SliceHeader/index.tsx	`88.00% <100.00%> (+1.72%)`	⬆️
...set-ui-core/src/ui-overrides/UiOverrideRegistry.ts
...set-ui-core/src/ui-overrides/ExtensionsRegistry.ts	`100.00% <0.00%> (ø)`
superset/security/manager.py	`95.57% <0.00%> (+<0.01%)`	⬆️
... and 2 more

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 f38dd1d...002d8c9. Read the comment docs.

michael-s-molina · 2022-07-06T13:56:27Z

The difference in loading time is better than we expected! Some first-pass comments:

I think DASHBOARD_EDIT_CHART_IN_TAB or some version of it is more descriptive than DASHBOARD_TO_EXPLORE_SPA. Especially because in the future it will be a single application and SPA references won't make any sense (native filters? 😆)

When opening in the same tab, we can pass the form_data using React Router state and avoid the extra GET in Explore. We should still execute the POST to support Explore refreshes.

kgabryje · 2022-07-06T14:28:02Z

I think DASHBOARD_EDIT_CHART_IN_TAB or some version of it is more descriptive than DASHBOARD_TO_EXPLORE_SPA. Especially because in the future it will be a single application and SPA references won't make any sense (native filters? 😆)

Makes sense!

When opening in the same tab, we can pass the form_data using React Router state and avoid the extra GET in Explore. We should still execute the POST to support Explore refreshes.

I intend to make that change while implementing Reuse data from dashboard if available. This PR is a prerequisite.

rusackas · 2022-07-06T14:36:45Z

superset-frontend/src/dashboard/components/SliceHeader/index.tsx

+export const getSliceHeaderTooltip = (sliceName: string | undefined) => {
+  if (!isFeatureEnabled(FeatureFlag.DASHBOARD_TO_EXPLORE_SPA)) {
+    return sliceName
+      ? t('Click to edit %s in ', sliceName)


? t('Click to edit %s in ', sliceName)

Is this missing a word? Edit {sliceName} in...?

...in a new tab. Thanks for spotting!

ktmud · 2022-07-06T14:48:44Z

I misspoke. What I meant is the form data key should be created on the Explore page (and in the Explore page's route if using SPA navigation). Context in the dashboard page should be carried over to Explore via URL params by default and only very large payload will use localStorage if needed (although I doubt it will happen very often).

It's not just permissions, but how making a link depends on a post request has also made it less accessible. The post request adds a sometimes significant delay between users clicking the link to the page opening, which often confuses the users.

kgabryje · 2022-07-06T14:57:15Z

I misspoke. What I meant is the form data key should be created on the Explore page (and in the Explore page's route if using SPA navigation). Context in the dashboard page should be carried over to Explore via URL params by default and only very large payload will use localStorage if needed (although I doubt it will happen very often).

It's not just permissions, but how making a link depends on a post request has also made it less accessible. The post request adds a sometimes significant delay between users clicking the link to the page opening, which often confuses the users.

Thanks for clarifying. Getting rid of that POST request is the next step for us 👍

superset/config.py

michael-s-molina

LGTM. I tested with the feature flag enabled and disabled.

Non-blocking suggestion: also add the tooltip to the Edit Chart option in the 3 dots menu.

michael-s-molina · 2022-07-06T18:24:04Z

Can you also add something to UPDATING.md about the new feature flag?

* feat(dashboard): Use react-router for transition to Explore + cmd click to open in new tab * Update tooltip * Add a feature flag * Update edit chart onclick event * Fix lint * Fix tests * Change feature flag name * Add tooltip to Edit chart

kgabryje requested review from ktmud, zhaoyongjie, etr2460, geido and michael-s-molina July 5, 2022 11:04

superset-github-bot bot added the preset-io label Jul 5, 2022

pull-request-size bot added the size/M label Jul 5, 2022

kgabryje changed the title ~~Feat/react router from dashboard~~ feat(dashboard): Transition to Explore with React Router Jul 5, 2022

kgabryje marked this pull request as draft July 5, 2022 11:05

kgabryje added 4 commits July 6, 2022 12:50

feat(dashboard): Use react-router for transition to Explore + cmd cli…

883537c

…ck to open in new tab

Update tooltip

64b0085

Add a feature flag

b699eed

Update edit chart onclick event

d60f0bd

kgabryje force-pushed the feat/react-router-from-dashboard branch from f1d9b50 to d60f0bd Compare July 6, 2022 11:10

kgabryje marked this pull request as ready for review July 6, 2022 11:16

Fix lint

4ba09bf

rusackas reviewed Jul 6, 2022

View reviewed changes

Fix tests

368fc7f

pull-request-size bot added size/L and removed size/M labels Jul 6, 2022

michael-s-molina reviewed Jul 6, 2022

View reviewed changes

superset/config.py Outdated Show resolved Hide resolved

Change feature flag name

1c64c72

michael-s-molina approved these changes Jul 6, 2022

View reviewed changes

Add tooltip to Edit chart

002d8c9

zhaoyongjie approved these changes Jul 7, 2022

View reviewed changes

kgabryje merged commit de4f7db into apache:master Jul 7, 2022

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.1.0 labels Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard): Transition to Explore with React Router #20606

feat(dashboard): Transition to Explore with React Router #20606

kgabryje commented Jul 5, 2022 •

edited

Loading

ktmud commented Jul 5, 2022

kgabryje commented Jul 6, 2022

codecov bot commented Jul 6, 2022 •

edited

Loading

michael-s-molina commented Jul 6, 2022

kgabryje commented Jul 6, 2022

rusackas Jul 6, 2022 •

edited

Loading

kgabryje Jul 6, 2022

ktmud commented Jul 6, 2022

kgabryje commented Jul 6, 2022

michael-s-molina left a comment

michael-s-molina commented Jul 6, 2022 •

edited

Loading

feat(dashboard): Transition to Explore with React Router #20606

feat(dashboard): Transition to Explore with React Router #20606

Conversation

kgabryje commented Jul 5, 2022 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

ktmud commented Jul 5, 2022

kgabryje commented Jul 6, 2022

codecov bot commented Jul 6, 2022 • edited Loading

Codecov Report

michael-s-molina commented Jul 6, 2022

kgabryje commented Jul 6, 2022

rusackas Jul 6, 2022 • edited Loading

Choose a reason for hiding this comment

kgabryje Jul 6, 2022

Choose a reason for hiding this comment

ktmud commented Jul 6, 2022

kgabryje commented Jul 6, 2022

michael-s-molina left a comment

Choose a reason for hiding this comment

michael-s-molina commented Jul 6, 2022 • edited Loading

kgabryje commented Jul 5, 2022 •

edited

Loading

codecov bot commented Jul 6, 2022 •

edited

Loading

rusackas Jul 6, 2022 •

edited

Loading

michael-s-molina commented Jul 6, 2022 •

edited

Loading