fix(explore): adhoc metrics popover resets label after hovering outside

[kgabryje]

SUMMARY

When user opened "Add new metric" popover and selected a column and/or aggregate, metric title is automatically set to "column(aggregate)". However, when user hovers with their mouse outside of the popover before saving, the title gets reset. Then, after saving, the label appears to be correct, but an empty string gets passed to executed query as a label, causing seemingly unrelated errors.
This PR converts MetricsControl component from class to functional and uses memoization to prevent resetting the title.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: see linked issue and video in the comments
After:
https://user-images.githubusercontent.com/15073128/129045681-e33f2ab4-4aac-4d95-b928-6f5c3705e13f.mov

TESTING INSTRUCTIONS

1. Open a chart
2. Open new metric popover
3. Add a column and aggregate
4. Hover with your mouse outside of the popover - nothing should happen
5. Save the metric and run query
6. Chart should render as expected

ADDITIONAL INFORMATION

• Has associated issue: fixes [explore] "Unexpected Error"/chart not render on SUM metric #16067
• 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 @graceguo-supercat @junlincc

[kgabryje]

/testenv up

[github-actions]

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

[villebro]

Code LGTM with minor nit. I tried to make this break in every possible way I could but wasn't able to come up with any bugs/regressions. Extra kudos for net negative LOC PR!

[mistercrunch]

I pulled the branch and tried to reproduce the bug that I had become very acquainted with last night and could not reproduce. Tried with flags ENABLE_EXPLORE_DRAG_AND_DROP and UX_BETA on and off and couldn't repro the bug or didn't find any other issues.

[codecov]

Codecov Report

Merging #16196 (86cc19a) into master (4df3672) will decrease coverage by 0.09%.
The diff coverage is 38.57%.

@@            Coverage Diff             @@
##           master   #16196      +/-   ##
==========================================
- Coverage   76.83%   76.73%   -0.10%     
==========================================
  Files         996      996              
  Lines       53060    52999      -61     
  Branches     6766     6738      -28     
==========================================
- Hits        40766    40670      -96     
- Misses      12066    12100      +34     
- Partials      228      229       +1     

Flag	Coverage Δ
javascript	70.97% <38.57%> (-0.21%)	⬇️

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

Impacted Files	Coverage Δ
...mponents/controls/MetricControl/MetricsControl.jsx	42.05% <38.57%> (-40.89%)	⬇️
...ontrols/DndColumnSelectControl/DndMetricSelect.tsx	41.21% <0.00%> (-0.57%)	⬇️

---

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 4df3672...86cc19a. Read the comment docs.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[rosemarie-chiu]

🏷 2021.31