feat: BROS-73: [FE] Create empty states for panels: info, regions, relations, history

[ricardoantoniocm]

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.

Key improvements include:

• New EmptyState Component: 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.
• Updated Panel Content:
  • Info Panel: Displays "Info" as the title and "Select a region to view its details."
  • Regions Panel (Outliner): Utilizes the new EmptyState component when no regions are present, with a relevant icon and "Learn more" link (hidden in white-label mode).
  • Relations Panel: Uses the new relations icon and displays "Create a relation" with the description "Created relations will be listed here."
  • History Panel: Displays "Draft creation, annotation submission, and annotation reviews will be listed here."
• Dynamic Documentation Links: A new utility (utils/docs.ts) generates documentation URLs dynamically based on the deployment (Open Source vs. Enterprise) and ensures links are hidden for white-labeled environments.
• Visibility: The new empty states will appear in quick view, label stream, review stream, and label config preview.
• Code Quality: Various React functional components have been refactored for improved TypeScript typing, consistent named function expressions for observers, and cleaned-up callbacks (e.g., for region sorting, grouping, filtering).
• Icon alignment: Two icons used to represent region types were reduced from 32x32 to 24x24 to ensure they are properly display and do not cause alignment issues.
• Updated failing outliner and regions panel tests.

Other minor improvements:

• Fixed size of polygon and rectangle tool icons to prevent alignment issues on Regions and Info panels.

Screenshots

Before:

After:

Testing

• Unit Tests:
  • Added EmptyState.test.tsx with unit tests for the new EmptyState component, verifying:
    • Correct rendering of icon, header, and description props.
    • Behavior of the "Learn more" link, including its absence in white-label mode.
• Manual Verification:
  • Confirmed that the new empty states display correctly in the Info, Regions, Relations, and History panels.
  • Verified visibility and correct content in:
    • Quick view
    • Label stream
    • Review stream
    • Label config preview
  • Ensured "Learn more" links are appropriately hidden in white-labeled environments.
  • Confirmed new icons (IconHistoryRewind, IconLsLabeling, new relations icon) and text content match the specifications.

Reviewer notes

• Please verify the correct display and behavior of the "Learn more" links, especially in the context of white-labeled environments. The utility utils/docs.ts handles the dynamic URL generation.
• Note the refactoring in DetailsPanel.tsx and OutlinerPanel.tsx for 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 EmptyState component promotes consistency and maintainability. Additionally, the changes include general code quality improvements such as enhanced TypeScript typings and refactoring of component logic.

[netlify]

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

Name	Link
🔨 Latest commit	ee93399
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/684ddac0369f100008c00709

[netlify]

✅ Deploy Preview for label-studio-playground ready!

Name	Link
🔨 Latest commit	ee93399
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/684ddac084c17d00089a3cca
😎 Deploy Preview	https://deploy-preview-7694--label-studio-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	ee93399
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/684ddac0c9c81d00090c89ed
😎 Deploy Preview	https://deploy-preview-7694--label-studio-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	ee93399
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/684ddac066d8c3000816702e

[ricardoantoniocm]

/fm sync

Workflow run

[ricardoantoniocm]

/fm sync

Workflow run

[ricardoantoniocm]

/fm sync

Workflow run

[yyassi-heartex]

/git merge

Workflow run
Successfully merged: 2 files changed, 85 insertions(+), 15 deletions(-)