feat: FIT-1123: Add resizer between Preview and left-side Panels in Template Builder

[ricardoantoniocm]

This pull request introduces a significant UI/UX improvement to the Create Project configuration page by implementing a resizable code editor and preview panel, along with various layout and style refinements. The changes enhance the flexibility and responsiveness of the interface, making it easier for users to adjust the workspace according to their needs.

Recording

https://www.loom.com/share/a43ec6f4cddd481e94512f3bdc6a2e28

Below are the most important changes grouped by theme:

Resizable Editor and Preview Panel

• Added a new resizer component (EditorResizer) and associated hook (useConfigResizer) to allow users to adjust the width of the code editor and preview panel dynamically. This includes tracking container width and enforcing min/max constraints for resizing. [1] [2] [3] [4]
• Updated the main container layout to use CSS grid, enabling responsive resizing between the editor and preview areas. [1] [2] [3]

UI and Layout Improvements

• Refined the layout and spacing of the configuration page, including changes to flex and grid properties, padding, and alignment for a more polished appearance. This affects both the editor and preview sections, as well as form actions and labels. [1] [2] [3] [4] [5] [6]
• Improved the appearance and behavior of select controls and input fields within the configuration wizard, ensuring better alignment and usability. [1] [2] [3]

Code Quality and Minor Enhancements

• Refactored event handlers and memoization logic for select controls, improving readability and maintainability of the configuration column selection code. [1] [2]
• Made minor updates to warning state management and API call logic for fetching data columns, ensuring more robust data handling. [1] [2]
• Updated copy and links for tag configuration guidance, improving clarity for users.

These changes collectively result in a more flexible, visually consistent, and user-friendly configuration experience for project setup in Label Studio.

[netlify]

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	2b72b05
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/696552b53c6f30000856c930

[netlify]

✅ Deploy Preview for label-studio-storybook canceled.

Name	Link
🔨 Latest commit	2b72b05
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/696552b4daee180008077ea6

[netlify]

✅ Deploy Preview for label-studio-playground canceled.

Name	Link
🔨 Latest commit	2b72b05
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/696552b4a136b300085686cb

[netlify]

✅ Deploy Preview for label-studio-docs-new-theme canceled.

Name	Link
🔨 Latest commit	2b72b05
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/696552b44f6de4000823e83e

[yyassi-heartex]

approving recreated pr

[codecov]

Codecov Report

❌ Patch coverage is 68.04408% with 116 lines in your changes missing coverage. Please review.
✅ Project coverage is 57.95%. Comparing base (f470537) to head (2b72b05).
⚠️ Report is 1 commits behind head on develop.

Files with missing lines	Patch %	Lines
...omponents/AnnotationsCarousel/AnnotationButton.tsx	67.13%	116 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (f470537) and HEAD (2b72b05). Click for more details.

HEAD has 1 upload less than BASE

Flag	BASE (f470537)	HEAD (2b72b05)
pytests	1	0

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #9160      +/-   ##
===========================================
- Coverage    66.84%   57.95%   -8.89%     
===========================================
  Files          828      557     -271     
  Lines        64522    40436   -24086     
  Branches     10831    10943     +112     
===========================================
- Hits         43129    23435   -19694     
+ Misses       21389    16997    -4392     
  Partials         4        4              

Flag	Coverage Δ
lsf-e2e	52.41% <52.07%> (+0.06%)	⬆️
lsf-integration	48.25% <56.23%> (-0.01%)	⬇️
lsf-unit	8.85% <0.00%> (-0.06%)	⬇️
pytests	?

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.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ricardoantoniocm]

/git merge

Workflow run
Successfully merged: Already up to date.