feat(explore): improve UI in the control panel

[stephenLYZ]

SUMMARY

This PR improves the styling of the control panel:

• change headers to match metrics&columns section
• attache line dividers to the top of the section header
• change the headers that can be found in the random sections, change them to the 12px and lighter gray color.
• spacing between the label and input should be always 4px
• spacing between different objects in the control panel (for example between the two controls, control and section title etc) should always be 16px

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before	after

TESTING INSTRUCTIONS

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 #19748 (c48e431) into master (594523e) will increase coverage by 0.01%.
The diff coverage is 66.66%.

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

@@            Coverage Diff             @@
##           master   #19748      +/-   ##
==========================================
+ Coverage   66.49%   66.51%   +0.01%     
==========================================
  Files        1689     1690       +1     
  Lines       64614    64618       +4     
  Branches     6650     6656       +6     
==========================================
+ Hits        42966    42979      +13     
+ Misses      19947    19937      -10     
- Partials     1701     1702       +1     

Flag	Coverage Δ
javascript	51.19% <66.66%> (+0.03%)	⬆️

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

Impacted Files	Coverage Δ
...-chart-controls/src/sections/advancedAnalytics.tsx	33.33% <ø> (ø)
...rset-ui-chart-controls/src/sections/chartTitle.tsx	100.00% <ø> (ø)
.../shared-controls/components/RadioButtonControl.tsx	0.00% <ø> (ø)
...legacy-plugin-chart-partition/src/controlPanel.tsx	33.33% <ø> (ø)
...gins/legacy-plugin-chart-rose/src/controlPanel.tsx	100.00% <ø> (ø)
...gins/legacy-preset-chart-nvd3/src/NVD3Controls.tsx	100.00% <ø> (ø)
.../BigNumber/BigNumberWithTrendline/controlPanel.tsx	33.33% <ø> (ø)
...s/plugin-chart-echarts/src/Funnel/controlPanel.tsx	80.00% <ø> (ø)
...ns/plugin-chart-echarts/src/Gauge/controlPanel.tsx	100.00% <ø> (ø)
...ns/plugin-chart-echarts/src/Graph/controlPanel.tsx	23.07% <ø> (ø)
... and 26 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 594523e...0238b73. Read the comment docs.

[kgabryje]

/testenv up

[github-actions]

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

[kasiazjc]

@stephenLYZ thanks for all of the improvements! Looks much cleaner :)

Something weird is happening with the tooltips for controls though - they show up for calculated columns, but not for the normal columns - there is like half of the dot showing on the right of the fields, so I guess the hovering over not only controls, but also fields now triggers something that hides under the chart section? Attaching the video.

Screen.Recording.2022-04-19.at.15.58.09.mov

[kgabryje]

1. Should we decrease the spacing between subsequent checkboxes? @kasiazjc
2. I think in the design the checkbox texts are black, not gray

[kasiazjc]

1. Should we decrease the spacing between subsequent checkboxes? @kasiazjc
2. I think in the design the checkbox texts are black, not gray

That's a good catch, the controls actually have #666666 color.

I think the spacings are looking good - especially if all of those are selected it's less overwhelming.

[stephenLYZ]

@kasiazjc Yeah. Do we need to show the tooltip for the normal columns?

[kgabryje]

@kasiazjc Yeah. Do we need to show the tooltip for the normal columns?

I think what Kasia meant is that for some (most) controls the info tooltips are somewhere off the screen. For example, when you hover over Metrics control, normally there's a tooltip trigger next to "Metrics" header. Here it's pushed off the screen - you can see a tiny part of tooltip trigger circle on the right

[kgabryje]

Maybe it's easier to see on a video

Screen.Recording.2022-04-19.at.18.19.31.mov

[kgabryje]

Request changes - details in comments

[stephenLYZ]

@kgabryje Got it. Thanks for explanation. Pushed new changes here.

[kgabryje]

/testenv up

[github-actions]

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

[kgabryje]

Looks fantastic! Thank you for the improvements. I approved, but let's wait for @kasiazjc stamp before merging

[kasiazjc]

Looks great! Thank you @stephenLYZ :)

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.