chore(explore): make metric/column search input clearable

[kgabryje]

SUMMARY

When using drag and drop feature, user often interacts with the left panel of Explore view and its search metrics/columns functionality. In order to improve the user experience of using search, this PR adds a clear button to the input field.
I also fixed the issue with input field "jumping" after user starts typing (input height increased by 2px after starting typing)

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

0. Enable drag and drop
1. Open a chart and start typing something in the search field
2. Metrics and columns should get filtered and an "x" button should appear on the right side of input
3. Clicking "X" should clear the input and restore all filtered metrics and columns

ADDITIONAL INFORMATION

• Has associated issue: closes [explore] add clear button on the search filed on left panel in explore? #16300
• 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

CC @junlincc @jinghua-qa

[villebro]

Very nice! One small comment (harmless typo from before)

[codecov]

Codecov Report

Merging #16320 (58d45dc) into master (4960b5e) will decrease coverage by 0.07%.
The diff coverage is 71.42%.

❗ Current head 58d45dc differs from pull request most recent head b85c164. Consider uploading reports for the commit b85c164 to get more accurate results

@@            Coverage Diff             @@
##           master   #16320      +/-   ##
==========================================
- Coverage   76.65%   76.58%   -0.08%     
==========================================
  Files         999      999              
  Lines       53397    53393       -4     
  Branches     6819     6819              
==========================================
- Hits        40933    40890      -43     
- Misses      12227    12266      +39     
  Partials      237      237              

Flag	Coverage Δ
javascript	70.78% <68.18%> (+<0.01%)	⬆️
presto	?

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

Impacted Files	Coverage Δ
...d/src/explore/components/DatasourcePanel/index.tsx	73.95% <68.18%> (-2.05%)	⬇️
superset/connectors/sqla/models.py	88.28% <100.00%> (-1.43%)	⬇️
superset/db_engine_specs/presto.py	84.51% <0.00%> (-5.86%)	⬇️
superset/models/core.py	89.14% <0.00%> (-0.26%)	⬇️
superset-frontend/src/components/Select/Select.tsx	74.77% <0.00%> (+1.35%)	⬆️

---

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 4960b5e...b85c164. Read the comment docs.

[henryyeh]

🏷️ 2021.31