feat(explore): SQL popover in datasource panel

[kgabryje]

SUMMARY

Previously, we displayed metric's or calculateed column's SQL expression in a tooltip. This PR refactors that component to use a popover and present the SQL in ace editor - thanks to that the code is nicely formatted and easier to read. Also, the icon has been change from a question mark to a calculator.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TESTING INSTRUCTIONS

1. Create a chart using a dataset with saved metrics and calculated columns
2. Verify that the SQL popovers in dataset panel display correctly

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

[zhaoyongjie]

Codes LGTM! Thanks for bringing this Popover, and the SQL is more readable!

There are some no-blocking design suggestions:

1. Could we add a scalable modal so that zoom in and out.

2. The new icon for SQL expression doesn't look like SQL instead of a calculator.

cc: @kasiazjc

[villebro]

Lovely improvement! LGTM with a few non-blocking comments

[villebro]

bycatch nit: not yours, but could this be in devDependencies? Same for @types/react

[kgabryje]

Codes LGTM! Thanks for bringing this Popover, and the SQL is more readable!

There are some no-blocking design suggestions:

1. Could we add a scalable modal so that zoom in and out.

Thanks for the review! I like the idea of adding a resizer to the popover. However I'd suggest implementing it as a separate PR as there are a few edge cases to consider

[kgabryje]

/testenv up

[github-actions]

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

[codecov]

Codecov Report

Merging #19308 (14519aa) into master (90dbe8d) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master   #19308   +/-   ##
=======================================
  Coverage   66.58%   66.58%           
=======================================
  Files        1677     1678    +1     
  Lines       64238    64242    +4     
  Branches     6538     6538           
=======================================
+ Hits        42773    42777    +4     
  Misses      19766    19766           
  Partials     1699     1699           

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

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

Impacted Files	Coverage Δ
...c/SqlLab/components/TemplateParamsEditor/index.tsx	75.00% <ø> (ø)
...-ui-chart-controls/src/components/ColumnOption.tsx	85.71% <100.00%> (ø)
...-ui-chart-controls/src/components/MetricOption.tsx	94.73% <100.00%> (ø)
...et-ui-chart-controls/src/components/SQLPopover.tsx	100.00% <100.00%> (ø)
...t-frontend/src/components/AsyncAceEditor/index.tsx	90.90% <100.00%> (-0.21%)	⬇️

---

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 90dbe8d...14519aa. Read the comment docs.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.