feat(explore): UI changes in dataset panel on Explore page

[kgabryje]

SUMMARY

This PR implements several UI changes in Explore's dataset panel.
List of changes:

• change color of background to white
• separate each column/metric label with vertical margins
• add dots icon to column/metric labels to indicate they're draggable
• move certification icon to the right side of the label
• Change font size of column/metric section labels to 12 and remove separation line

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

Verify that everything works like before

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

CC @kasiazjc

[michael-s-molina]

I love the changes! Really improved the user experience. cc @kasiazjc

I have one suggestion that may be tackled in a separate PR if you wish. Can we make the draggable image respect the border-radius and width of the original component? If we do that, when the user is dropping, it will fit exactly in the droppable area 🤩

Screen.Recording.2022-03-28.at.2.58.13.PM.mov

[kgabryje]

Can we make the draggable image respect the border-radius and width of the original component

Good point, done!

[michael-s-molina]

LGTM. Thanks for the amazing changes @kgabryje! It looks so much better!

[codecov]

Codecov Report

Merging #19394 (df994fc) into master (a619cb4) will increase coverage by 0.00%.
The diff coverage is 93.54%.

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

@@           Coverage Diff           @@
##           master   #19394   +/-   ##
=======================================
  Coverage   66.48%   66.49%           
=======================================
  Files        1670     1670           
  Lines       63968    63971    +3     
  Branches     6512     6510    -2     
=======================================
+ Hits        42531    42535    +4     
+ Misses      19748    19747    -1     
  Partials     1689     1689           

Flag	Coverage Δ
javascript	51.33% <93.54%> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
...ntrols/src/components/CertifiedIconWithTooltip.tsx	80.00% <ø> (ø)
...d/packages/superset-ui-chart-controls/src/index.ts	100.00% <ø> (ø)
...omponents/ColumnConfigControl/ColumnConfigItem.tsx	0.00% <ø> (ø)
...tiveFilters/FiltersConfigModal/DraggableFilter.tsx	71.87% <ø> (ø)
...-ui-chart-controls/src/components/ColumnOption.tsx	85.71% <50.00%> (+1.09%)	⬆️
...d/src/explore/components/DatasourcePanel/index.tsx	69.23% <80.00%> (-0.13%)	⬇️
...src/components/ColumnTypeLabel/ColumnTypeLabel.tsx	100.00% <100.00%> (ø)
...controls/src/components/InfoTooltipWithTrigger.tsx	100.00% <100.00%> (ø)
...-ui-chart-controls/src/components/MetricOption.tsx	94.73% <100.00%> (+0.29%)	⬆️
...ontend/src/dashboard/components/dnd/DragHandle.tsx	83.33% <100.00%> (-2.39%)	⬇️
... and 3 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 a619cb4...cdac852. Read the comment docs.