fix(alerts/reports): misconfigured useEffect hook breaks form valida…

[nytai]

…tion in prod

SUMMARY

A misconfigured instance of the useEffect hook was causing the form validation to not run in prod builds.

I'm guessing useEffect has some performance optimizations to minimize updates in prod. Since this is first run with an empty array, react likely disregards subsequent updates after the component is mounted. Usually an error is thrown when react detects changes in the dependency array length. I think the initial empty array is an exception as that has slightly different semantics.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After:

TEST PLAN

• enable ALERT_REPORTS feature flag
• generate prod build (npm run build)
• navigate to alerts/reports
• fill out required fields
• Add button is enabled

ADDITIONAL INFORMATION

• Has associated issue: Fixes [alert]can't add alerts and reports #12715
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[codecov-io]

Codecov Report

Merging #12779 (f54db87) into master (55c8f9b) will decrease coverage by 15.79%.
The diff coverage is 0.00%.

@@             Coverage Diff             @@
##           master   #12779       +/-   ##
===========================================
- Coverage   66.68%   50.88%   -15.80%     
===========================================
  Files        1021      477      -544     
  Lines       50008    17131    -32877     
  Branches     4905     4421      -484     
===========================================
- Hits        33346     8717    -24629     
+ Misses      16532     8414     -8118     
+ Partials      130        0      -130     

Flag	Coverage Δ
cypress	50.88% <0.00%> (+2.18%)	⬆️
javascript	?
python	?

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	4.46% <0.00%> (-42.33%)	⬇️
...uperset-frontend/src/dashboard/util/dnd-reorder.js	0.00% <0.00%> (-100.00%)	⬇️
...rset-frontend/src/dashboard/util/getEmptyLayout.js	0.00% <0.00%> (-100.00%)	⬇️
...dashboard/components/resizable/ResizableHandle.jsx	0.00% <0.00%> (-100.00%)	⬇️
.../src/dashboard/util/getFilterScopeFromNodesTree.js	0.00% <0.00%> (-93.48%)	⬇️
...set-frontend/src/views/CRUD/alert/ExecutionLog.tsx	11.76% <0.00%> (-88.24%)	⬇️
...src/dashboard/components/gridComponents/Header.jsx	10.52% <0.00%> (-86.85%)	⬇️
superset-frontend/src/components/IconTooltip.tsx	13.33% <0.00%> (-86.67%)	⬇️
...rc/dashboard/components/gridComponents/Divider.jsx	13.33% <0.00%> (-86.67%)	⬇️
...end/src/SqlLab/components/ExploreResultsButton.jsx	8.00% <0.00%> (-84.00%)	⬇️
... and 883 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 55c8f9b...f54db87. Read the comment docs.