fix(Select): options in the select component will be overwritten due to timing of React.setState

[stephenLYZ]

SUMMARY

This PR fix the problem that when user undo delete of a native filter, the options under column is gone. The root cause is due to the setState mechanism of the react hook. In the Select component, there is one case that we update the component selectOptions which based on the incoming props:

useEffect(() => {
    fetchedQueries.current.clear();
    setSelectOptions(
      options && Array.isArray(options) ? options : EMPTY_OPTIONS,
    );
    setAllValuesLoaded(false);
}, [options]);

and a logic we use useEffect to update selectOptions:

 useEffect(() => {
    if (selectValue) {
      // ...
      if (options.length > 0) {
        setSelectOptions([...options, ...selectOptions]);
      }
    }
}, [labelInValue, isAsync, selectOptions, selectValue]);

So there is a problem that useEffect knows the state has changed, but the value taken at this time is still the old value.

The solution is we can pass an updater function to transform it so we can use the pending state. see https://beta.reactjs.org/reference/usestate#passing-an-updater-function-to-setstate.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before

Screen.Recording.2021-09-28.at.10.23.30.PM.mov

after

2022-01-07.1.21.55.mov

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue: [native filter] when user undo delete of a native filter, the options under column is gone #16887
• 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 #17951 (3b1aa1f) into master (f75908b) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master   #17951   +/-   ##
=======================================
  Coverage   67.07%   67.07%           
=======================================
  Files        1609     1609           
  Lines       64905    64907    +2     
  Branches     6868     6868           
=======================================
+ Hits        43537    43539    +2     
  Misses      19502    19502           
  Partials     1866     1866           

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

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

Impacted Files	Coverage Δ
superset-frontend/src/components/Select/Select.tsx	86.42% <100.00%> (+0.09%)	⬆️

---

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 f75908b...3b1aa1f. Read the comment docs.

[michael-s-molina]

Nice catch! Thanks for the fix.

[rusackas]

Thank you for the excellent PR description! This helps a LOT. :D