feat: Debounce TextControl if change handler runs immediately after user input

[kgabryje]

SUMMARY

This PR adds a 500ms debounce to TextControl on Explore control panel, if renderTrigger is true - that means that change handler fires immediately when user types input. If renderTrigger is false, there are no changes.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: see linked issue
After:

TEST PLAN

ADDITIONAL INFORMATION

• Has associated issue: [chart]Customize text input change should not take effect instantly without finishing typing #11938
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

CC: @junlincc @rusackas
@adam-stasiak Can you help with testing?

[junlincc]

Thanks for the quick fix!

LGTM! if the code looks ok, we can merge

[ktmud]

Nice. I had the same idea in the back of my head for a while but never got the chance to do it. Thanks for taking on this!

To keep things simple, maybe instead of check renderTrigger, you can just add debounce 200ms ~ 300ms to all text input? The debounce delay can also be a config option of the TextControl so individual viz types can choose a debounce that works the best for them.

[codecov-io]

Codecov Report

Merging #11985 (e72dbaf) into master (cc44a2c) will increase coverage by 1.13%.
The diff coverage is 65.21%.

@@            Coverage Diff             @@
##           master   #11985      +/-   ##
==========================================
+ Coverage   66.26%   67.39%   +1.13%     
==========================================
  Files         941      941              
  Lines       45715    45726      +11     
  Branches     4395     4398       +3     
==========================================
+ Hits        30293    30817     +524     
+ Misses      15287    14804     -483     
+ Partials      135      105      -30     

Flag	Coverage Δ
cypress	54.53% <63.63%> (+10.72%)	⬆️
javascript	62.65% <26.08%> (-0.03%)	⬇️
python	63.92% <ø> (-0.34%)	⬇️

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

Impacted Files	Coverage Δ
...nd/src/explore/components/controls/TextControl.tsx	69.04% <65.21%> (-1.93%)	⬇️
superset/sql_validators/postgres.py	50.00% <0.00%> (-50.00%)	⬇️
superset/db_engine_specs/mysql.py	79.59% <0.00%> (-12.25%)	⬇️
superset/db_engine_specs/sqlite.py	65.62% <0.00%> (-9.38%)	⬇️
superset/databases/commands/create.py	83.67% <0.00%> (-8.17%)	⬇️
superset/databases/commands/update.py	85.71% <0.00%> (-8.17%)	⬇️
superset/utils/celery.py	96.42% <0.00%> (-3.58%)	⬇️
superset/models/core.py	85.90% <0.00%> (-2.99%)	⬇️
superset/datasets/api.py	89.35% <0.00%> (-2.78%)	⬇️
superset/views/core.py	72.14% <0.00%> (-2.57%)	⬇️
... and 95 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 cc44a2c...e72dbaf. Read the comment docs.