Update data explorer ui to use compressed components

[ps48]

Description

• Make use of compressed fields components
• Update query editor padding to center fit the text
• Update data explorer side bar search field

Screenshot

Data explorer with query enhancements enabled:

Data explorer with query enhancements disabled:

Testing the changes

Changelog

• fix: Update data explorer ui to use compressed components

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

Project coverage is 64.05%. Comparing base (b826df8) to head (575e39a).
Report is 19 commits behind head on main.

Files with missing lines	Patch %	Lines
...ins/data/public/ui/query_editor/editors/shared.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8222   +/-   ##
=======================================
  Coverage   64.05%   64.05%           
=======================================
  Files        3741     3741           
  Lines       88629    88633    +4     
  Branches    13801    13804    +3     
=======================================
+ Hits        56771    56775    +4     
  Misses      31260    31260           
  Partials      598      598           

Flag	Coverage Δ
Linux_1	30.07% <0.00%> (+<0.01%)	⬆️
Linux_2	58.83% <ø> (ø)
Linux_3	40.37% <0.00%> (-0.01%)	⬇️
Linux_4	31.46% <0.00%> (ø)
Windows_1	30.08% <0.00%> (+<0.01%)	⬆️
Windows_2	58.78% <ø> (ø)
Windows_3	40.37% <0.00%> (-0.01%)	⬇️
Windows_4	31.46% <0.00%> (ø)

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[AMoo-Miki]

#8204 should merged before this.