fix: order of query editor extensions not working

[ruanyl]

Description

When the react portal was created asynchronously within the same container, the order of query editor extensions cannot not be guaranteed. As react portal append the rendered component to the same container at the time when it's mounted. To fix the issue, now rendering the extension to different pre-ordered container.

This PR also introduced a few style changes so that multiple extensions can be render horizontally:

Issues Resolved

Screenshot

Testing the changes

Changelog

• fix: order of query editor extensions not working

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

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[ruanyl]

@joshuali925 @kavilla @ashwin-pc Could you take a look at this bug fix please, thanks!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 60.59%. Comparing base (d9c9aad) to head (1e961cf).
Report is 6 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8045      +/-   ##
==========================================
- Coverage   60.60%   60.59%   -0.02%     
==========================================
  Files        3732     3732              
  Lines       88427    88430       +3     
  Branches    13701    13701              
==========================================
- Hits        53589    53580       -9     
- Misses      31579    31590      +11     
- Partials     3259     3260       +1     

Flag	Coverage Δ
Linux_1	28.75% <ø> (ø)
Linux_2	56.26% <ø> (ø)
Linux_3	37.44% <100.00%> (-0.01%)	⬇️
Linux_4	29.65% <ø> (+<0.01%)	⬆️
Windows_1	28.77% <ø> (-0.02%)	⬇️
Windows_2	56.21% <ø> (ø)
Windows_3	37.45% <100.00%> (+<0.01%)	⬆️
Windows_4	29.64% <ø> (ø)

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.

[joshuali925]

thanks!