chore: Changes the AlertReportModal to use the new Select component

[michael-s-molina]

SUMMARY

Changes the AlertReportModal to use the new Select component.

@junlincc @jinghua-qa @adam-stasiak @rusackas

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2021-08-09.at.9.05.16.AM.mov

Screen.Recording.2021-08-09.at.10.45.45.AM.mov

TESTING INSTRUCTIONS

• Enable the ALERT_REPORTS feature flag.
• Go to the Alerts & Reports in Settings
• Check the replaced selects

ADDITIONAL INFORMATION

• Has associated issue:
• 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 #16144 (dec08e2) into master (ddb5005) will decrease coverage by 0.16%.
The diff coverage is 60.71%.

@@            Coverage Diff             @@
##           master   #16144      +/-   ##
==========================================
- Coverage   76.83%   76.67%   -0.17%     
==========================================
  Files         995      995              
  Lines       52884    53021     +137     
  Branches     6721     6767      +46     
==========================================
+ Hits        40636    40654      +18     
- Misses      12023    12137     +114     
- Partials      225      230       +5     

Flag	Coverage Δ
javascript	70.92% <60.71%> (-0.31%)	⬇️

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

Impacted Files	Coverage Δ
...frontend/src/views/CRUD/alert/AlertReportModal.tsx	61.48% <58.75%> (-1.41%)	⬇️
...frontend/src/components/TimezoneSelector/index.tsx	97.72% <100.00%> (-0.06%)	⬇️
...views/CRUD/alert/components/NotificationMethod.tsx	72.97% <100.00%> (-0.72%)	⬇️
...mponents/controls/MetricControl/MetricsControl.jsx	42.05% <0.00%> (-40.89%)	⬇️
...perset-frontend/src/addSlice/AddSliceContainer.tsx	56.66% <0.00%> (-22.13%)	⬇️
...et-frontend/src/components/Select/NativeSelect.tsx	80.00% <0.00%> (-20.00%)	⬇️
...controls/DndColumnSelectControl/DndSelectLabel.tsx	77.27% <0.00%> (-7.73%)	⬇️
...tend/src/explore/components/ExploreChartHeader.jsx	49.29% <0.00%> (-6.26%)	⬇️
...d/src/explore/components/DatasourcePanel/index.tsx	76.00% <0.00%> (-4.73%)	⬇️
...frontend/src/dashboard/components/Header/index.jsx	59.88% <0.00%> (-3.86%)	⬇️
... and 37 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 ddb5005...dec08e2. Read the comment docs.

[michael-s-molina]

/testenv up FEATURE_ALERT_REPORTS=true

[github-actions]

@michael-s-molina Ephemeral environment spinning up at http://34.219.73.77:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[geido]

Hey @michael-s-molina this looks good. I have spotted some small glitches that I believe we should review

1. Before changing between Message Content - Chart or Dashboard leave a dropdown open, then change option, then go back to the previous option. You will see the dropdown appears for a moment. I think it should get programmatically closed when changing option to avoid this UI glitch.

Superset.mp4

2. When opening an Async dropdown you will see the "No data" appearing briefly before the data is rendered on screen. I think this is a glitch that was solved some time back but it is now coming back.

I think both issues affect the Select Component throughout the whole project, not specifically related to this PR.

[michael-s-molina]

@geido

Before changing between Message Content - Chart or Dashboard leave a dropdown open, then change option, then go back to the previous option. You will see the dropdown appears for a moment. I think it should get programmatically closed when changing option to avoid this UI glitch.

Fixed.

When opening an Async dropdown you will see the "No data" appearing briefly before the data is rendered on screen. I think this is a glitch that was solved some time back but it is now coming back.

Already added to the list of Select improvements.

[michael-s-molina]

/testenv up

[github-actions]

@michael-s-molina Ephemeral environment spinning up at http://54.184.17.2:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[villebro]

Code LGTM

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.