chore(newchart): update chart creation dataset selection help text, styles

[codyml]

SUMMARY

• Update help text to be "Add a dataset or view instructions."
• Make "Add a dataset" link to the dataset CRUD page in a new tab with the + Dataset modal open
  • Add support for a #create URL hash on the dataset CRUD page that opens the + Dataset modal at load
• Make "view instructions" link to the documentation in a new tab, as before
• Update font styles and spacing on page

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TESTING INSTRUCTIONS

• Visit /chart/add and open the "Choose a dataset" select.
• Confirm that clicking "Add a dataset" opens /tablemodelview/list in a new tab with the "Add dataset" modal open.

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

[codecov]

Codecov Report

Merging #20369 (ab28ae4) into master (f53018c) will decrease coverage by 0.14%.
The diff coverage is 85.31%.

❗ Current head ab28ae4 differs from pull request most recent head 105ee69. Consider uploading reports for the commit 105ee69 to get more accurate results

@@            Coverage Diff             @@
##           master   #20369      +/-   ##
==========================================
- Coverage   66.70%   66.56%   -0.15%     
==========================================
  Files        1739     1738       -1     
  Lines       65148    65119      -29     
  Branches     6897     6899       +2     
==========================================
- Hits        43457    43345     -112     
- Misses      19938    20020      +82     
- Partials     1753     1754       +1     

Flag	Coverage Δ
hive	?
mysql	82.33% <88.73%> (+0.07%)	⬆️
postgres	82.40% <88.73%> (+0.07%)	⬆️
presto	?
python	82.48% <88.73%> (-0.29%)	⬇️
sqlite	82.19% <88.73%> (+0.07%)	⬆️
unit	?

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

Impacted Files	Coverage Δ
...chart-controls/src/shared-controls/dndControls.tsx	26.92% <ø> (ø)
...ui-core/src/chart/components/FallbackComponent.tsx	100.00% <ø> (ø)
...packages/superset-ui-core/src/query/types/Query.ts	100.00% <ø> (ø)
.../plugins/plugin-chart-echarts/src/BoxPlot/types.ts	0.00% <ø> (ø)
.../plugin-chart-echarts/src/Funnel/transformProps.ts	71.73% <ø> (ø)
...d/plugins/plugin-chart-echarts/src/Funnel/types.ts	100.00% <ø> (ø)
...nd/plugins/plugin-chart-echarts/src/Gauge/types.ts	100.00% <ø> (ø)
...nd/plugins/plugin-chart-echarts/src/Graph/types.ts	100.00% <ø> (ø)
...chart-echarts/src/MixedTimeseries/controlPanel.tsx	65.00% <ø> (ø)
.../plugin-chart-echarts/src/MixedTimeseries/types.ts	100.00% <ø> (ø)
... and 103 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 f53018c...105ee69. Read the comment docs.

[michael-s-molina]

Make "Choose a dataset" select element refresh its options on load so newly-added datasets are included

@codyml I think adding an option to disable the cache is not the optimal solution. Especially because users will not create new datasets most of the time. A better solution is to provide a way for invalidating the cache when necessary, giving more control to the developers. We can use the ref for this purpose. Let me submit a PR adding this feature and you can rebase your PR on top of it.

[codyml]

@michael-s-molina Re: opening the + Dataset modal via URL: I tried changing the trigger from hash #create to query param (create=true), but the table on the page clears the query params and sets its own as soon as it renders and though I didn't dig into it too deeply, it seemed like adjusting that behavior to allow my create=true one to survive long enough to be read would be a challenge. OK to leave it as a hash or want me to keep working on making it a query param?

[ktmud]

Can we maybe make the "Add dataset" modal reusable and open the modal directly from the "Add a dataset" link here?

Also, it seems the current "Add a dataset" modal supports only adding a physical dataset. We should probably design a way for users to create virtual datasets here, too.

[codyml]

Can we maybe make the "Add dataset" modal reusable and open the modal directly from the "Add a dataset" link here?

Also, it seems the current "Add a dataset" modal supports only adding a physical dataset. We should probably design a way for users to create virtual datasets here, too.

That all sounds reasonable to me, but from what I can tell the addSlice page creates its own React tree so it might take some work to get the working modal to render there. Maybe as a separate issue?

[ktmud]

Unless there is immediate urgency in adding this feature right now, I'd say we should implement the optimal user experience in one go instead of shipping something we'd likely to change again very soon. The redesign of the add dataset model should definitely be future work, but the reusing the modal shouldn't be that difficult as there are very limited number of input fields in it...

[codyml]

@ktmud After some digging it looks like bringing the addSlice page into the SPA is on the Preset roadmap for the near future, so if we hold off on bringing the modal in until that's done we won't have to reproduce its state and API dependencies.

[michael-s-molina]

/testenv up

[github-actions]

@michael-s-molina Ephemeral environment spinning up at http://34.221.182.114:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[michael-s-molina]

@michael-s-molina Re: opening the + Dataset modal via URL: I tried changing the trigger from hash #create to query param (create=true), but the table on the page clears the query params and sets its own as soon as it renders and though I didn't dig into it too deeply, it seemed like adjusting that behavior to allow my create=true one to survive long enough to be read would be a challenge. OK to leave it as a hash or want me to keep working on making it a query param?

I think it's ok to use the hash if we consider the modal as a subordinate of the listing.

[michael-s-molina]

/testenv up

[github-actions]

@michael-s-molina Ephemeral environment spinning up at http://34.222.96.94:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[michael-s-molina]

Thanks for the work @codyml! As agreed, we'll work on syncing the Select dataset and opening the modal in place in a follow-up PR after the SPA work. I left some non-blocking suggestions.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.