fix: FIT-159: Storage error logs modal not optimized for dark mode #7867

ricardoantoniocm · 2025-06-27T15:17:41Z

Reason for change

The Storage error logs modal on the Settings > Cloud Storage page was not optimized for Dark Mode, making the text unreadable when a failed sync occurred. This PR addresses the issue by implementing design improvements to ensure the modal's readability and overall user experience in Dark Mode.

This PR also includes the following improvements:

Proper handling of the error overflowing the code block container.
Increase discoverability of Sync Log modal by adding the text "(View Logs)" when displaying the Failed status
Custom scrollbars
Added variants to Code Block component to support for negative and warning types.
Refactored the Code Block to apply the monospace font using the pre tag.

Screenshots

Before:

LSE

After:

LSO

LSE

Testing

The changes have been verified by:

Manually testing in Dark Mode:
- Navigating to Settings > Cloud Storage with Dark Mode enabled.
- Triggering a failed sync to open the Storage error logs modal.
- Confirming that the text within the modal is now optimized and readable in Dark Mode.
Testing copy-to-clipboard functionality:
- Verifying that the "Copy" button correctly copies the error log text to the clipboard.
- Confirming the button label changes to "Copied!" after a successful copy.
Checking updated link and text:
- Ensuring the documentation link in the modal footer points to the correct troubleshooting page.
- Verifying the updated text for the "Failed (View Logs)" status.

…into fb-fit-159/storage-error-logs-modal-not-optimized-for-dark-mode

netlify · 2025-06-27T15:17:46Z

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	`c0ddbe4`
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/686ebf0a0c9dd20008d2638d

ricardoantoniocm · 2025-06-27T15:17:52Z

/git merge

Workflow run
Successfully merged: Already up to date.

netlify · 2025-06-27T15:18:25Z

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	`c0ddbe4`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/686ebf0a039f8200083359ef
😎 Deploy Preview	https://deploy-preview-7867--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 · 2025-06-27T15:18:35Z

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

Name	Link
🔨 Latest commit	`c0ddbe4`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/686ebf0ad6429b00085c5660

netlify · 2025-06-27T15:18:51Z

✅ Deploy Preview for label-studio-playground ready!

Name	Link
🔨 Latest commit	`c0ddbe4`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/686ebf0a1e94c900089f70db
😎 Deploy Preview	https://deploy-preview-7867--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.

ricardoantoniocm · 2025-06-27T17:45:02Z

/git merge

Workflow run
Successfully merged: 9 files changed, 41 insertions(+), 8 deletions(-)

…optimized-for-dark-mode' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/15932578465

ricardoantoniocm · 2025-06-27T20:00:53Z

/git merge

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

…optimized-for-dark-mode' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/15934890694

…environments. Improves look and feel of Card component so the card for added storage is adapted to dark mode. Reuses existing useCopyText utility for copying. Increases the visibility of the Failed status and adds (View Logs) text to convey that it can be clicked.

…rage-error-logs-modal-not-optimized-for-dark-mode

codecov · 2025-07-07T19:24:42Z

Codecov Report

Attention: Patch coverage is 0% with 2 lines in your changes missing coverage. Please review.

Project coverage is 65.41%. Comparing base (07a30ac) to head (c0ddbe4).
Report is 4 commits behind head on develop.

Files with missing lines	Patch %	Lines
web/libs/ui/src/lib/code-block/code-block.tsx	0.00%	2 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #7867      +/-   ##
===========================================
- Coverage    69.91%   65.41%   -4.50%     
===========================================
  Files          675      466     -209     
  Lines        48981    32238   -16743     
  Branches      8409     8409              
===========================================
- Hits         34243    21090   -13153     
+ Misses       14738    11148    -3590

Flag	Coverage Δ
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.

Copilot

Pull Request Overview

This PR optimizes the Storage error logs modal for Dark Mode and refines related UI components to improve readability, styling consistency, and user interaction.

Introduces variant prop in CodeBlock for different visual states and adds custom scrollbars with <pre> wrapping.
Unifies card component borders by replacing box-shadows with border-bottoms and updating border color tokens.
Refactors the error-log modal in StorageSummary to use CodeBlock, adds a copy-to-clipboard CopyButton, updates modal title, footer link, and status text to "Failed (View Logs)".

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
web/libs/ui/src/lib/code-block/code-block.tsx	Added `variant` prop/styles, custom scrollbars, refactored to wrap code in `<pre>`
web/libs/ui/src/lib/Card/Card.module.scss	Replaced box-shadow with border-bottom; updated border color variable
web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSummary.jsx	Reworked error-log modal to use `CodeBlock` + `CopyButton`, updated link, modal title, and status
web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageCard.jsx	Added top margin (`mt-3`) to the sync button container
web/apps/labelstudio/src/components/Card/Card.scss	Replaced box-shadow with border-bottom for consistency

web/libs/ui/src/lib/code-block/code-block.tsx

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSummary.jsx

web/libs/ui/src/lib/code-block/code-block.tsx

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSummary.jsx

… as a parameter.

…into fb-fit-159/storage-error-logs-modal-not-optimized-for-dark-mode

ricardoantoniocm · 2025-07-09T12:55:07Z

/fm sync

Workflow run

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

…optimized-for-dark-mode' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/16169909166

ricardoantoniocm · 2025-07-09T13:28:48Z

/git merge

Workflow run
Successfully merged: Already up to date.

…into fb-fit-159/storage-error-logs-modal-not-optimized-for-dark-mode

ricardoantoniocm · 2025-07-09T19:10:22Z

/git merge

Workflow run
Successfully merged: 2 files changed, 91 insertions(+), 9 deletions(-)

…optimized-for-dark-mode' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/16178107263

ricardoantoniocm added 2 commits May 26, 2025 09:41

fix: FIT-159: Storage error logs modal is not optimized for Dark mode

24f92b2

Merge branch 'develop' of https://github.com/heartexlabs/label-studio …

94079a1

…into fb-fit-159/storage-error-logs-modal-not-optimized-for-dark-mode

github-actions bot added the title needs formatting label Jun 27, 2025

ricardoantoniocm changed the title ~~Fix: FIT-159: Storage error logs modal not optimized for dark mode~~ fix: FIT-159: Storage error logs modal not optimized for dark mode Jun 27, 2025

github-actions bot added fix and removed title needs formatting labels Jun 27, 2025

Merge branch 'develop' into 'fb-fit-159/storage-error-logs-modal-not-…

96dfa9f

…optimized-for-dark-mode' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/15932578465

ricardoantoniocm and others added 6 commits June 27, 2025 20:01

Merge branch 'develop' into 'fb-fit-159/storage-error-logs-modal-not-…

f8d2aee

…optimized-for-dark-mode' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/15934890694

Adds support for warning/negative variants to CodeBlock component.

da560fa

Merge https://github.com/heartexlabs/label-studio into fb-fit-159/sto…

0bb7a5d

…rage-error-logs-modal-not-optimized-for-dark-mode

Adds spacing between Sync button and the rest of the card content.

66c8044

Uses pre tag to apply monospace font. Removes margin from component.

617e933

ricardoantoniocm requested review from Copilot and hlomzik July 7, 2025 19:20

ricardoantoniocm marked this pull request as ready for review July 7, 2025 19:24

Copilot AI reviewed Jul 7, 2025

View reviewed changes

ricardoantoniocm requested review from jombooth and yyassi-heartex July 7, 2025 19:58

bmartel reviewed Jul 8, 2025

View reviewed changes

web/libs/ui/src/lib/code-block/code-block.tsx Outdated Show resolved Hide resolved

Refactors to use cnm helper instead of string concat.

e820a26

bmartel reviewed Jul 8, 2025

View reviewed changes

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSummary.jsx Outdated Show resolved Hide resolved

Refactors to define CopyButton at module level and to take in the msg…

ade253e

… as a parameter.

bmartel approved these changes Jul 8, 2025

View reviewed changes

ricardoantoniocm enabled auto-merge (squash) July 8, 2025 19:45

Merge branch 'develop' of https://github.com/heartexlabs/label-studio …

df6727a

…into fb-fit-159/storage-error-logs-modal-not-optimized-for-dark-mode

ricardoantoniocm disabled auto-merge July 8, 2025 20:36

ricardoantoniocm self-assigned this Jul 9, 2025

ricardoantoniocm added 2 commits July 9, 2025 12:58

Sync Follow Merge dependencies

6e54187

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

Merge branch 'develop' into 'fb-fit-159/storage-error-logs-modal-not-…

d70db94

…optimized-for-dark-mode' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/16169909166

robot-ci-heartex added the FM Stale label Jul 9, 2025

ricardoantoniocm added 3 commits July 9, 2025 11:54

Merge branch 'develop' of https://github.com/heartexlabs/label-studio …

becd8a4

…into fb-fit-159/storage-error-logs-modal-not-optimized-for-dark-mode

Improves the layout of the Storage Sync Error Log further.

fcd1ad0

Adds spacing between storage summager and storage sync button.

a044244

Merge branch 'develop' into 'fb-fit-159/storage-error-logs-modal-not-…

c0ddbe4

…optimized-for-dark-mode' Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/16178107263

ricardoantoniocm merged commit 214e8c2 into develop Jul 9, 2025
44 of 46 checks passed

robot-ci-heartex deleted the fb-fit-159/storage-error-logs-modal-not-optimized-for-dark-mode branch July 9, 2025 20:38

fix: FIT-159: Storage error logs modal not optimized for dark mode #7867

fix: FIT-159: Storage error logs modal not optimized for dark mode #7867

Uh oh!

Conversation

ricardoantoniocm commented Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reason for change

Screenshots

Before:

After:

Testing

Uh oh!

netlify bot commented Jun 27, 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!

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

Uh oh!

Uh oh!

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

Uh oh!

✅ Deploy Preview for label-studio-storybook ready!

Uh oh!

netlify bot commented Jun 27, 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 Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-playground ready!

Uh oh!

ricardoantoniocm commented Jun 27, 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 Jun 27, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jul 7, 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!

Uh oh!

Uh oh!

Uh oh!

ricardoantoniocm commented Jul 9, 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 Jul 9, 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 Jul 9, 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ricardoantoniocm commented Jun 27, 2025 •

edited

Loading

netlify bot commented Jun 27, 2025 •

edited

Loading

ricardoantoniocm commented Jun 27, 2025 •

edited by robot-ci-heartex

Loading

netlify bot commented Jun 27, 2025 •

edited

Loading

netlify bot commented Jun 27, 2025 •

edited

Loading

netlify bot commented Jun 27, 2025 •

edited

Loading

ricardoantoniocm commented Jun 27, 2025 •

edited by robot-ci-heartex

Loading

ricardoantoniocm commented Jun 27, 2025 •

edited by robot-ci-heartex

Loading

codecov bot commented Jul 7, 2025 •

edited

Loading

ricardoantoniocm commented Jul 9, 2025 •

edited by robot-ci-heartex

Loading

ricardoantoniocm commented Jul 9, 2025 •

edited by robot-ci-heartex

Loading

ricardoantoniocm commented Jul 9, 2025 •

edited by robot-ci-heartex

Loading