feat: FIT-450: Improve empty state for data manager #8149

ricardoantoniocm · 2025-08-13T15:20:55Z

This PR was automatically generated via Follow Merge. Workflow Run
Please ensure that all linked upstream Pull Requests are merged before proceeding with this one.

feat: FIT-450: Improve empty state for data manager label-studio-sdk#545

Reason for change

This PR addresses the user experience of the data manager's empty state. The previous "blank" state was unhelpful and didn't provide users with clear guidance on how to get started. This change introduces a new, comprehensive empty state component that is more informative.

The new component provides different messaging and actions based on the context:

Empty Projects: Guides Administrators and Managers to import their initial data (via Connecting Cloud Storage or from their computer using the Import modal) and, guides Reviewers and Annotators on what they can do given their role (when applicable).
A link to documentation is added that works dynamically depending on whether it's presented on LSO or LSE. It is excluded from whitelabeled environments.
Empty Filter Results: Informs users when their current filters return no results and provides an easy way to clear the filters.

This improvement enhances the user experience by providing a clear path forward, reducing friction for new users, and improving usability for existing users.

The Connect Storage button pushes the user to the Cloud Storages page and automatically opens the Add Source Storage modal, streamlining the process. It also leverages the Import modal for processing any uploaded files.

This PR also introduces improvements to the destructive confirmation dialogs used in the Data Manager, fixing the variants of the buttons as well as implementing more meaningful copy on the title, body text and buttons.

Screenshots

Before

Empty State

No results from filters

Destructive DM Actions

After

Empty State

No results from filters

Destructive DM Actions

Rollout strategy

The new EmptyState component will be deployed as part of the normal release cycle.
No feature flag is necessary as this change is a direct improvement to the existing UI.
The change is fully backward compatible, as it only affects the presentation layer when a dataset is empty.

Testing

I've conducted the following testing to ensure the new component works as expected:

Unit Tests: Added comprehensive unit tests for the EmptyState component, covering all display modes and props.
Integration Tests:
- Verified that the correct empty state is displayed for a brand new project with no data.
- Confirmed that the "Empty Filter Results" state appears when applying a filter that yields no results.
- Tested the functionality of the "Import" and "Clear Filters" buttons.
- Ensured the component integrates correctly with the main DataManager and Table components.
- Verified the component works as expected on different screen sizes to confirm responsiveness.

Reviewer notes

Please pay close attention to the visual implementation of the new empty states.
Verify that the conditional rendering logic correctly differentiates between truly empty projects and empty filtered results.
Some files may have some automatic linting changes applied, unrelated to the work itself. Those changes should be safe to keep though.

…g and drop and browse to upload functionality.

…d results filter empty state. Adds inbox icon.

netlify · 2025-08-13T15:21:00Z

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

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

netlify · 2025-08-13T15:21:01Z

✅ Deploy Preview for label-studio-playground canceled.

Name	Link
🔨 Latest commit	`49f5dc2`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/68a8ee55cb6b1100085059ae

netlify · 2025-08-13T15:21:01Z

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	`49f5dc2`
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/68a8ee55a5e1380008cf733f

netlify · 2025-08-13T15:21:59Z

✅ Deploy Preview for label-studio-storybook canceled.

Name	Link
🔨 Latest commit	`49f5dc2`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/68a8ee556fd83f0008756c12

codecov · 2025-08-13T15:24:40Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.26%. Comparing base (def47a2) to head (3e841ce).
✅ All tests successful. No failed tests found.

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

HEAD has 1 upload less than BASE

Flag BASE (def47a2) HEAD (3e841ce)

lsf-e2e 1 0

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #8149      +/-   ##
===========================================
- Coverage    70.58%   64.26%   -6.33%     
===========================================
  Files          725      725              
  Lines        52670    52670              
  Branches      9015     9015              
===========================================
- Hits         37179    33846    -3333     
- Misses       15488    18821    +3333     
  Partials         3        3

Flag	Coverage Δ
lsf-e2e	`?`
lsf-integration	`56.32% <ø> (+<0.01%)`	⬆️
lsf-unit	`9.40% <ø> (ø)`
pytests	`78.38% <ø> (ø)`

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.

Copilot

Pull Request Overview

Improves empty state functionality for Data Manager by implementing role-based empty states and enhanced import functionality. This provides better guidance to users based on their permissions and project state.

Unified empty state component that handles different user roles (REVIEWER, ANNOTATOR) and project states
Enhanced drag-and-drop functionality with improved UI feedback and file import capabilities
Updated modal dialogs with improved destructive action patterns and better button styling

Reviewed Changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
web/libs/ui/src/assets/icons/index.ts	Exports new IconInbox icon for empty states
web/libs/datamanager/src/sdk/dm-sdk.js	Adds role property to DataManager configuration
web/libs/datamanager/src/components/MainView/DataView/tests/EmptyState.test.tsx	Test coverage for EmptyState component accessibility features
web/libs/datamanager/src/components/MainView/DataView/Table.scss	Adds dropzone styling with drag-and-drop visual feedback
web/libs/datamanager/src/components/MainView/DataView/Table.jsx	Integrates unified EmptyState component with role-based functionality
web/libs/datamanager/src/components/MainView/DataView/EmptyState.jsx	New unified empty state component with role-based UI and import functionality
web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.jsx	Updates action dialogs with improved destructive action patterns
web/libs/datamanager/src/components/Common/Modal/Modal.scss	Increases modal width for better content display
web/libs/datamanager/src/components/Common/Modal/Modal.jsx	Updates modal buttons to use new variant system
web/libs/datamanager/src/components/Common/Menu/MenuItem.jsx	Adds variant prop while maintaining backward compatibility
web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSettings.jsx	Adds auto-open functionality for source storage modal
web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSet.jsx	Implements ref forwarding for programmatic modal opening
web/apps/labelstudio/src/pages/DataManager/DataManager.jsx	Adds event handlers for storage modal and file import functionality
web/apps/labelstudio/src/pages/CreateProject/Import/Import.jsx	Handles auto-start import when files are provided via event

Comments suppressed due to low confidence (1)

web/libs/datamanager/src/components/MainView/DataView/EmptyState.jsx:294

Direct access to global window.APP_SETTINGS creates tight coupling and makes testing difficult. Consider passing this as a prop or using a context/configuration provider.

)}

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

web/libs/datamanager/src/components/MainView/DataView/EmptyState.jsx

web/libs/datamanager/src/components/MainView/DataView/Table.jsx

The EmptyState component was updated to use 'userRole' instead of 'role' to avoid ARIA role conflicts, but Table.jsx was still passing 'role'. This caused the Reviewer role to show the default empty state instead of the role-specific content.

- Annotators with auto-distribution now see role-specific empty state even when filters are applied, instead of generic filter message - Filter empty state now only applies to Owners/Admins/Managers - Fixed logic order: role-specific checks first, then filter checks - Updated both EmptyState.tsx files to maintain consistency - Cleared caches to ensure fresh component loading

This will help identify why hasFilters is incorrectly true when no filters are applied. Check console for 'DEBUG hasFilters' messages to see the filtersApplied value.

This reverts commit 9daee6d.

ricardoantoniocm · 2025-08-15T13:32:42Z

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/editor/tests/integration/e2e/control_tags/text-with-dual-taxonomy.cy.ts

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/16991079283

ricardoantoniocm · 2025-08-18T12:58:02Z

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/ui/src/shad/components/ui/accordion.tsx

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17041289556

…e file and test file.

… the removed empty state functionality.

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17051876534

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17051876534

nass600

@ricardoantoniocm Looks good. I believe this EmptyState could be promoted to the Design System as we have it spread all over the app

ricardoantoniocm · 2025-08-20T13:50:14Z

/git merge

Workflow run
Successfully merged: 47 files changed, 1763 insertions(+), 97 deletions(-)

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17100417382

ricardoantoniocm · 2025-08-22T19:33:11Z

/git merge

Workflow run
Successfully merged: 67 files changed, 3812 insertions(+), 1028 deletions(-)

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17164304510

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17165254274

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17166412632

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17166412632

ricardoantoniocm · 2025-08-22T21:45:52Z

/fm sync

Workflow run

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17166652170

Workflow run: https://github.com/HumanSignal/label-studio-enterprise/actions/runs/17167243443

ricardoantoniocm added 10 commits August 11, 2025 09:10

feat: FIT-450: Improve empty state for data manager

145bf02

Implements empty state on Data Manager surfacing Connect Storage, dra…

a307038

…g and drop and browse to upload functionality.

Adds docs link.

688c1f2

Linter fixes.

0b90c18

Improves confirmation/destructive action dialogs.

1807e59

Linter fixes.

0a4cf6a

Increases padding for empty state.

6ba0d35

Adds accessibility improvements and tests.

8c2d953

Improvements.

12cc3d6

Introduces role-based handling for the empty state, including improve…

465a155

…d results filter empty state. Adds inbox icon.

ricardoantoniocm self-assigned this Aug 13, 2025

github-actions bot added the feat label Aug 13, 2025

ricardoantoniocm requested a review from Copilot August 13, 2025 15:21

Copilot AI reviewed Aug 13, 2025

View reviewed changes

ricardoantoniocm added 8 commits August 13, 2025 11:36

Refactors to follow react rules.

b4aa364

Fix linting issues: convert EmptyState to TypeScript and fix ARIA roles

b981980

Apply auto-formatting fixes

28c169e

Add debug logging for hasFilters calculation

9daee6d

This will help identify why hasFilters is incorrectly true when no filters are applied. Check console for 'DEBUG hasFilters' messages to see the filtersApplied value.

Revert "Add debug logging for hasFilters calculation"

8d7602b

This reverts commit 9daee6d.

Removes legacy check for filters. Fixes order of filters empty state.

e8ad312

ricardoantoniocm marked this pull request as ready for review August 13, 2025 17:30

ricardoantoniocm requested a review from a team as a code owner August 13, 2025 17:30

Fix tests.

5d3fb48

Adds data-testids to Import and Export buttons on Data Manager.

0c0d0e5

Merge branch 'develop' into 'fb-fit-450/improve-empty-state-data-mana…

2c78268

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/16991079283

ricardoantoniocm and others added 9 commits August 18, 2025 12:58

Merge branch 'develop' into 'fb-fit-450/improve-empty-state-data-mana…

456b17f

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17041289556

Remove interactive upload in empty state. Removes leftover empty stat…

64285c1

…e file and test file.

Reverts changes to Import.

007acb6

Revert changes to Data Manager page related to processing import from…

227be8d

… the removed empty state functionality.

Refactors comment on StorageSet.

9a7527b

Refactors EmptyState component to reduce repeated code.

8e51e02

Sync Follow Merge dependencies

64d6244

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17051876534

Merge branch 'develop' into 'fb-fit-450/improve-empty-state-data-mana…

058bfa5

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17051876534

Slightly copy adjustment to avoid repetition.

5319257

ricardoantoniocm requested a review from yyassi-heartex August 19, 2025 18:20

nass600 approved these changes Aug 20, 2025

View reviewed changes

ricardoantoniocm and others added 2 commits August 20, 2025 13:51

Merge branch 'develop' into 'fb-fit-450/improve-empty-state-data-mana…

ac12620

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17100417382

Fixes typo.

7d8e9cf

ricardoantoniocm and others added 4 commits August 22, 2025 19:33

Merge branch 'develop' into 'fb-fit-450/improve-empty-state-data-mana…

6964da7

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17164304510

Sync Follow Merge dependencies

f8f4a44

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17165254274

Sync Follow Merge dependencies

9966bce

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17166412632

Merge branch 'develop' into 'fb-fit-450/improve-empty-state-data-mana…

d211a93

…ger' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17166412632

robot-ci-heartex and others added 4 commits August 22, 2025 21:46

Sync Follow Merge dependencies

f6caa15

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/17166652170

Updates test with correct string.

aa2a3fb

Linter fixes.

3e841ce

Sync Follow Merge dependencies

49f5dc2

Workflow run: https://github.com/HumanSignal/label-studio-enterprise/actions/runs/17167243443

robot-ci-heartex merged commit 7d639a7 into develop Aug 22, 2025

robot-ci-heartex deleted the fb-fit-450/improve-empty-state-data-manager branch August 22, 2025 22:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: FIT-450: Improve empty state for data manager #8149

feat: FIT-450: Improve empty state for data manager #8149

Uh oh!

ricardoantoniocm commented Aug 13, 2025 •

edited by robot-ci-heartex

Loading

Uh oh!

netlify bot commented Aug 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Aug 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Aug 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Aug 13, 2025 •

edited

Loading

Uh oh!

codecov bot commented Aug 13, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ricardoantoniocm commented Aug 15, 2025 •

edited by robot-ci-heartex

Loading

Uh oh!

ricardoantoniocm commented Aug 18, 2025 •

edited by robot-ci-heartex

Loading

Uh oh!

nass600 left a comment

Uh oh!

ricardoantoniocm commented Aug 20, 2025 •

edited by robot-ci-heartex

Loading

Uh oh!

ricardoantoniocm commented Aug 22, 2025 •

edited by robot-ci-heartex

Loading

Uh oh!

ricardoantoniocm commented Aug 22, 2025 •

edited by robot-ci-heartex

Loading

Uh oh!

Uh oh!

feat: FIT-450: Improve empty state for data manager #8149

feat: FIT-450: Improve empty state for data manager #8149

Uh oh!

Conversation

ricardoantoniocm commented Aug 13, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reason for change

Screenshots

Before

After

Rollout strategy

Testing

Reviewer notes

Uh oh!

netlify bot commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

netlify bot commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-playground canceled.

Uh oh!

netlify bot commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for heartex-docs canceled.

Uh oh!

netlify bot commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-storybook canceled.

Uh oh!

codecov bot commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ricardoantoniocm commented Aug 15, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ricardoantoniocm commented Aug 18, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nass600 left a comment

Choose a reason for hiding this comment

Uh oh!

ricardoantoniocm commented Aug 20, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ricardoantoniocm commented Aug 22, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ricardoantoniocm commented Aug 22, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

ricardoantoniocm commented Aug 13, 2025 •

edited by robot-ci-heartex

Loading

netlify bot commented Aug 13, 2025 •

edited

Loading

netlify bot commented Aug 13, 2025 •

edited

Loading

netlify bot commented Aug 13, 2025 •

edited

Loading

netlify bot commented Aug 13, 2025 •

edited

Loading

codecov bot commented Aug 13, 2025 •

edited

Loading

ricardoantoniocm commented Aug 15, 2025 •

edited by robot-ci-heartex

Loading

ricardoantoniocm commented Aug 18, 2025 •

edited by robot-ci-heartex

Loading

ricardoantoniocm commented Aug 20, 2025 •

edited by robot-ci-heartex

Loading

ricardoantoniocm commented Aug 22, 2025 •

edited by robot-ci-heartex

Loading

ricardoantoniocm commented Aug 22, 2025 •

edited by robot-ci-heartex

Loading