fix: dataset modal doesn't work in dev mode

[stephenLYZ]

SUMMARY

This problem only exists in dev environments. The reason is the react-hot-loader will use "ProxyFacade", which is a wrapper for Functional Component.

ProxyFacade = function(props, context) {
      /*

        ! THIS IS NOT YOUR COMPONENT !
        !  THIS IS REACT-HOT-LOADER  !

        And you are probably looking for a function component of yours
        It's hidden, but there is a way to fix this - just reconfigure your application a bit
        see https://github.com/gaearon/react-hot-loader/issues/1311

       */

      const result = CurrentComponent(props, context);

And we userecurseReactClone method to create component(see https://github.com/apache/superset/blob/master/superset-frontend/src/CRUD/utils.js), which will pass props to the component. In this case, since the name has been changed, it is not possible to pass onChange props. see screenshot:

Here we use this solution. gaearon/react-hot-loader#1311

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

befre

dev-server.mp4

after

2022-02-10.5.17.06.mov

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue: Dataset modal doesn't work correctly in dev server mode #18655
• 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

[zhaoyongjie]

Please add a todo comment here and link to this PR. We should refactor DatasourceEditor.jsx and decouple it in future.

[villebro]

I wonder if we should consider using @hot-loader/react-dom, as maybe there are other patches there, too, that we're just unaware of right now?

[stephenLYZ]

Good idea. However, this lib has not been updated for three years. 😂

[villebro]

Uhh, good point! 😓

[stephenLYZ]

FYI. We may use react-refresh to replace react-hot-loader in the future, which is more active.

[zhaoyongjie]

LGTM

[villebro]

LGTM, thanks for fixing this!

[codecov]

Codecov Report

Merging #18658 (bdceb5a) into master (00eb6b1) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #18658   +/-   ##
=======================================
  Coverage   66.29%   66.29%           
=======================================
  Files        1603     1603           
  Lines       62744    62744           
  Branches     6320     6320           
=======================================
  Hits        41593    41593           
  Misses      19499    19499           
  Partials     1652     1652           

Flag	Coverage Δ
javascript	51.28% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out 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 00eb6b1...bdceb5a. Read the comment docs.