feat: BROS-73: [FE] Create empty states for panels: info, regions, relations, history #7694
Conversation
…tates for Info, Regions, Relations, and History panel in outliner
…to get the Community or Enterprise variant of a docs page. Improves history-rewind icon visual weight.
✅ Deploy Preview for label-studio-docs-new-theme canceled.
|
✅ Deploy Preview for label-studio-playground ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for label-studio-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for heartex-docs canceled.
|
ricardoantoniocm
requested review from
hlomzik,
Gondragos and
nick-skriabin
as code owners
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Co-authored-by: Copilot <[email protected]>
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
….tsx Co-authored-by: Copilot <[email protected]>
…ty-states-info-regions-relations-history-panel-outliner' of https://github.com/heartexlabs/label-studio into fb-bros-73/fe-create-more-informative-user-friendly-empty-states-info-regions-relations-history-panel-outliner
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a reusable EmptyState component and applies it to the Info, Regions (Outliner), Relations, and History panels to provide more informative, consistent empty states. It also adds dynamic documentation link utilities and fixes a typo in design tokens.
- Added
getDocsUrlutility for dynamic documentation links based on deployment - Created
EmptyStatecomponent and integrated it into several side panels - Updated design tokens JSON to correct corner-radius token naming
Reviewed Changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| web/libs/editor/src/utils/docs.ts | New utilities to compute deployment-aware docs URLs |
| web/libs/editor/src/components/SidePanels/Components/EmptyState.tsx | New reusable empty-state component |
| web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx | Use EmptyState for regions panel |
| web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.tsx | Use EmptyState for Info, Relations, History panels |
| web/design-tokens.json | Fixed naming in typography/spacing tokens |
| web/libs/editor/jest.setup.js | Added @testing-library/jest-dom setup |
Comments suppressed due to low confidence (1)
web/design-tokens.json:5699
- The
$letter-spacingkey appears twice in the same object, which will result in invalid JSON or stale overrides. Remove the duplicate block or rename it appropriately to avoid collisions.
"$letter-spacing": {
web/libs/editor/src/components/SidePanels/OutlinerPanel/OutlinerPanel.tsx
Outdated
Show resolved
Hide resolved
…erPanel.tsx Co-authored-by: Copilot <[email protected]>
hlomzik
changed the title
| interface Window { | ||
| APP_SETTINGS?: { | ||
| whitelabel_is_active?: boolean; | ||
| [key: string]: any; |
There was a problem hiding this comment.
that line is excess I believe. @bmartel ?
| [key: string]: any; |
There was a problem hiding this comment.
I think this it is. I don't particular like that we have to redefine in the global objects within a component, that part seems odd to me.
There was a problem hiding this comment.
also true! we can just define all main props we use in APP_SETTINGS in types.d.ts
There was a problem hiding this comment.
We end up ts-ignore'ing it elsewhere, lets just ts-ignore it here too for now.
… grouping properly depending on a specific feature flag.
Reason for change
The existing empty states in the Info, Regions, Relations, and History panels of the outliner are not sufficiently informative or user-friendly. This PR introduces new, improved empty states to provide a better user experience when these panels have no content to display.
The implemented solution follows a consistent design pattern across all affected panels: an icon, a concise title, and a descriptive message.
In addition to these changes, design tokens were updated to fix a typo in corner radius tokens.
Key improvements include:
EmptyStateComponent: A reusable React component (EmptyState.tsx) has been created to display an icon, header, description, and an optional "Learn more" link. This component is designed to hide the "Learn more" link in white-label environments.EmptyStatecomponent when no regions are present, with a relevant icon and "Learn more" link (hidden in white-label mode).utils/docs.ts) generates documentation URLs dynamically based on the deployment (Open Source vs. Enterprise) and ensures links are hidden for white-labeled environments.Other minor improvements:
Screenshots
Before:
After:
Testing
EmptyState.test.tsxwith unit tests for the newEmptyStatecomponent, verifying:IconHistoryRewind,IconLsLabeling, new relations icon) and text content match the specifications.Reviewer notes
utils/docs.tshandles the dynamic URL generation.DetailsPanel.tsxandOutlinerPanel.tsxfor improved typing and maintainability.General notes
This PR focuses on improving the user experience by providing clear and helpful empty states in key areas of the outliner. The introduction of the reusable
EmptyStatecomponent promotes consistency and maintainability. Additionally, the changes include general code quality improvements such as enhanced TypeScript typings and refactoring of component logic.