feat(explore-datasource): add new datasource tab to explore view

[pkdotson]

SUMMARY

This pr will update the explore view with a new tab for the datasource component and metrics and columns view. It also adds a search bar to allow search of both columns and metrics for possible long datasources.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

updating existing unit and e2e test for explore and new unit test for the datasource tab component
Visually and manaully tested changes for new layout.

ADDITIONAL INFORMATION

• Has associated issue:
• [x ] Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[codecov-io]

Codecov Report

Merging #12008 (171e45a) into master (655834b) will decrease coverage by 3.91%.
The diff coverage is 61.17%.

@@            Coverage Diff             @@
##           master   #12008      +/-   ##
==========================================
- Coverage   67.46%   63.55%   -3.92%     
==========================================
  Files         959      968       +9     
  Lines       47245    47589     +344     
  Branches     4630     4655      +25     
==========================================
- Hits        31874    30244    -1630     
- Misses      15258    17157    +1899     
- Partials      113      188      +75     

Flag	Coverage Δ
cypress	?
javascript	62.75% <61.17%> (+0.06%)	⬆️
python	64.03% <ø> (-0.28%)	⬇️

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

Impacted Files	Coverage Δ
...ontend/src/explore/components/QueryAndSaveBtns.jsx	60.86% <0.00%> (-30.80%)	⬇️
...nd/src/explore/components/ExploreViewContainer.jsx	41.10% <20.00%> (-35.50%)	⬇️
...rontend/src/explore/components/DatasourcePanel.tsx	77.27% <77.27%> (ø)
...end/src/explore/components/ControlPanelSection.jsx	86.95% <100.00%> (-8.50%)	⬇️
.../src/explore/components/ControlPanelsContainer.jsx	80.82% <100.00%> (-12.04%)	⬇️
.../explore/components/controls/DatasourceControl.jsx	62.71% <100.00%> (-11.21%)	⬇️
superset-frontend/src/SqlLab/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/dashboard/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/setup/setupColors.js	0.00% <0.00%> (-100.00%)	⬇️
... and 210 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 655834b...171e45a. Read the comment docs.

[junlincc]

Thank you so much for making changes on this PR!

I'm seeing some regression after latest changes since last night.

1. I keep getting error msg when load chart data (i did not encounter this issue last few time when i tested, confirmed not relevant 12/15 11:35pm)
   
2. columns and metric sections are not scrollable (critical)
   control panel is not scrollable
3. panel alignments (not critical, but should fix in this PR, )

4.line padding inconsistent (not critical, we can adjust later)

5. uneven padding around datasource and "..." icon (@mihir174, your call)

6. Columns and Metrics should be bold, according to the design

7. Spacing between is too large

[villebro]

This looks awesome! Some comments (will review code separately):

1. I'm not able to replicate @junlincc's error messages reported above. It looks like there's something wrong with the perms and needs superset init to be run.
2. I can also confirm the missing scroll on columns and metrics.
3. The dataset name probably doesn't need to show the name on hover (see video below).
4. The dataset options appear even without a click, is this intentional? (see video below where no mouse clicks happen).
   

[villebro]

Left some comments

[junlincc]

3. The dataset name probably doesn't need to show the name on hover (see video below).

yes we do!! it's for datasource that has long title! i specifically requested it.

4. The dataset options appear even without a click, is this intentional? (see video below where no mouse clicks happen).

well idk if that's intentional, that was not in the scope. but i like hovering to show menu tbh... maybe we shouldn't though

[mihir174]

"5. uneven padding around datasource and "..." icon (@mihir174, your call)
6. Columns and Metrics should be bold, according to the design
7. Spacing between is too large"

Agree with all of these, I've attached the spacing guidelines that I sent to Evan and Philip. I don't think any of these are critical issues for the time being, so they can be added in the next PR

green = 4px
yellow = 8px
orange = 16px

[villebro]

3. The dataset name probably doesn't need to show the name on hover (see video below).

yes we do!! it's for datasource that has long title! i specifically requested it.

Ok that makes sense. It would be nice if it would only show if the title is truncated, but not sure if that's easy to implement.

[etr2460]

could you also add screenshots of the tab in the collapsed view. Also what the tooltips look like?

And finally, it looks like the table in your screenshot got cut off even though it hadn't reached the bottom of the screen. Is that something that was changed here, or did it always happen? Seems like it would be better to allow the chart to go full height if the space allows

[junlincc]

could you also add screenshots of the tab in the collapsed view. Also what the tooltips look like?

@etr2460
collapsed view

tooltip

[junlincc]

Before

Now

And finally, it looks like the table in your screenshot got cut off even though it hadn't reached the bottom of the screen. Is that something that was changed here, or did it always happen? Seems like it would be better to allow the chart to go full height if the space allows

im not sure why the data section is not showing in @pkdotson's screen shot...
@etr2460 i can confirm that pivot table cutoff is a minor existing cosmetic issue, also happening in table viz. we can address it separately.

[junlincc]

heads up, just like resizing the window, charts do re-render as the left panel open/collapse. depending on the size of the dataset, it does have a 1-3 second lag every time you open/collapse...

[junlincc]

collapsible panel ✅
search bar ✅

vertical scroll bar ✅

change datasource ✅
display #of column ✅

tooltip to show complete dataset title✅

cosmetic & alignment ✅
all functionalities work properly while resizing✅ (from the side, bottom and corner)

lgtm!! thanks so much @pkdotson @rusackas for this huge UX improvement in Explore! this feature is getting us one big step closer to drag and drop!

[rusackas]

This is looking great to me! I think the important things in the thread have been addressed. There are a couple of cool add-on ideas/features we can quickly do in fast-follow PRs, but I believe this is ready for prime time!