Skip to content

Conversation

bmartel
Copy link
Contributor

@bmartel bmartel commented Oct 10, 2025

This pull request refactors the modal implementation across the Label Studio frontend codebase to use the standardized modal components and APIs from @humansignal/ui. The changes remove custom modal logic, consolidate modal usage, and ensure all modals are wrapped with the necessary application providers for consistency and maintainability. This improves code reuse, simplifies future updates, and enhances backward compatibility.

Modal System Refactor and Standardization

  • Migrated all modal-related logic in Modal.jsx, ModalPopup.jsx, and related files to use the standardized modal API from @humansignal/ui, removing custom modal rendering and lifecycle management. (web/apps/labelstudio/src/components/Modal/Modal.jsx [1] web/apps/labelstudio/src/components/Modal/ModalPopup.jsx [2] web/libs/datamanager/src/components/Common/Modal/Modal.jsx [3]
  • Introduced new wrapper modules (Modal.tsx, ModalPopup.tsx) that automatically inject Label Studio-specific providers (like ApiProvider, ConfigProvider, etc.) into every modal for backward compatibility and seamless integration. (web/apps/labelstudio/src/components/Modal/Modal.tsx [1] web/apps/labelstudio/src/components/Modal/ModalPopup.tsx [2]

Codebase Cleanup and Consistency

  • Removed the custom modal styles in Modal.scss to rely on the styles from @humansignal/ui, ensuring consistent appearance and reducing duplicated CSS. (web/apps/labelstudio/src/components/Modal/Modal.scss web/apps/labelstudio/src/components/Modal/Modal.scssL1-L160)
  • Updated all modal usages and imports in downstream modules (such as StorageProviderForm, AccountSettings, and JWT Token sections) to use the new modal API from @humansignal/ui, eliminating legacy imports and ensuring consistent provider injection. (web/libs/app-common/src/blocks/StorageProviderForm/index.tsx [1] [2]; web/libs/app-common/src/pages/AccountSettings/hooks/useHotkeys.ts [3]; web/libs/app-common/src/pages/AccountSettings/sections/Hotkeys/Help.tsx [4] [5]; web/libs/app-common/src/pages/AccountSettings/sections/PersonalJWTToken.tsx [6]

These changes make modal usage more robust, easier to maintain, and aligned with the shared UI library, reducing technical debt and improving developer experience.

@bmartel bmartel requested review from a team, hlomzik and nick-skriabin as code owners October 10, 2025 17:20
Copy link

netlify bot commented Oct 10, 2025

Deploy Preview for label-studio-playground ready!

Name Link
🔨 Latest commit eeab688
🔍 Latest deploy log https://app.netlify.com/projects/label-studio-playground/deploys/68e98447b8bf1c0007ecedc9
😎 Deploy Preview https://deploy-preview-8626--label-studio-playground.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions bot added the chore label Oct 10, 2025
Copy link

codecov bot commented Oct 10, 2025

Codecov Report

❌ Patch coverage is 80.82192% with 56 lines in your changes missing coverage. Please review.
✅ Project coverage is 59.77%. Comparing base (d49cb36) to head (eeab688).

Files with missing lines Patch % Lines
web/libs/ui/src/components/Modal/ModalPopup.tsx 79.83% 25 Missing ⚠️
web/libs/ui/src/components/Modal/Modal.tsx 69.49% 18 Missing ⚠️
web/libs/core/src/lib/utils/bem.tsx 91.86% 7 Missing ⚠️
web/libs/editor/src/common/Modal/Modal.tsx 57.14% 3 Missing ⚠️
.../libs/ui/src/components/Modal/ModalCloseButton.tsx 25.00% 3 Missing ⚠️

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

HEAD has 2 uploads less than BASE
Flag BASE (d49cb36) HEAD (eeab688)
lsf-unit 1 0
pytests 1 0
Additional details and impacted files
@@             Coverage Diff             @@
##           develop    #8626      +/-   ##
===========================================
- Coverage    67.09%   59.77%   -7.33%     
===========================================
  Files          786      516     -270     
  Lines        60311    37613   -22698     
  Branches     10254    10055     -199     
===========================================
- Hits         40467    22483   -17984     
+ Misses       19841    15130    -4711     
+ Partials         3        0       -3     
Flag Coverage Δ
lsf-e2e 53.03% <80.82%> (-1.32%) ⬇️
lsf-integration 50.78% <35.27%> (-0.09%) ⬇️
lsf-unit ?
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.

Copy link

netlify bot commented Oct 10, 2025

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

Name Link
🔨 Latest commit eeab688
🔍 Latest deploy log https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/68e984476f2fc70008cd263a

Copy link

netlify bot commented Oct 10, 2025

Deploy Preview for label-studio-storybook ready!

Name Link
🔨 Latest commit eeab688
🔍 Latest deploy log https://app.netlify.com/projects/label-studio-storybook/deploys/68e9844730eb8000084dead1
😎 Deploy Preview https://deploy-preview-8626--label-studio-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

netlify bot commented Oct 10, 2025

Deploy Preview for heartex-docs canceled.

Name Link
🔨 Latest commit eeab688
🔍 Latest deploy log https://app.netlify.com/projects/heartex-docs/deploys/68e984474830b800087c1da9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants