Skip to content

feat: Update cozy-ui 138#3790

Merged
doubleface merged 5 commits intomasterfrom
feat/update-cozy-ui-138
Apr 8, 2026
Merged

feat: Update cozy-ui 138#3790
doubleface merged 5 commits intomasterfrom
feat/update-cozy-ui-138

Conversation

@zatteo
Copy link
Copy Markdown
Member

@zatteo zatteo commented Apr 8, 2026

Summary by CodeRabbit

  • Chores

    • Updated multiple package dependencies; test setup exposes the Stream API globally and adds a module mock for search-related UI.
    • Adjusted reducer composition to remove legacy bar reducers.
  • Style

    • Replaced circular/badge elements with avatar components for consistency.
    • Swapped card wrappers for box-style containers to preserve layout.
    • Refined alert/banner presentation and action layout; capped large counts at "99+".

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 8, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

This PR updates runtime dependency versions in package.json, exposes TransformStream on the global Jest/jsdom runtime and adds a Jest mock for cozy-search. It replaces many Circle usages with Avatar, swaps several container Card wrappers for Box with explicit layout/styling props, replaces Banner with Alert in push-related components, updates file-thumbnail badges to use Badge, and removes barReducers from the root reducer composition.

Possibly related PRs

Suggested reviewers

  • JF-Cozy
  • lethemanh
  • rezk2ll
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: Update cozy-ui 138' accurately reflects the main change: updating cozy-ui to version 138, which is evidenced by the package.json dependency updates and the subsequent component refactorings throughout the changeset.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/update-cozy-ui-138

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

codescene-delta-analysis[bot]

This comment was marked as outdated.

@doubleface doubleface force-pushed the feat/update-cozy-ui-138 branch from 83fb157 to 9ff2a54 Compare April 8, 2026 09:29
codescene-delta-analysis[bot]

This comment was marked as outdated.

codescene-delta-analysis[bot]

This comment was marked as outdated.

@doubleface doubleface marked this pull request as ready for review April 8, 2026 10:00
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
src/modules/filelist/icons/FileThumbnail.tsx (1)

170-212: Extract repeated badge wrapper UI into a reusable class/component.

Lines 173-183 and Line 195-207 duplicate inline wrapper rendering/styling. Centralizing this will reduce drift and simplify future theme adjustments.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/modules/filelist/icons/FileThumbnail.tsx` around lines 170 - 212, The
Badge wrapper markup for the small rounded icon (used around Icon/LinkIcon at
the first Badge badgeContent) and the sharing badge (used around
SharingShortcutIcon and SharingOwnerAvatar) duplicates inline wrapper div
styles; create a small reusable presentational component or CSS class (e.g.,
FileThumbnailBadge or .file-thumbnail-badge) and replace the inline divs in the
Badge badgeContent blocks, moving shared styles (padding, sizing,
backgroundColor, color, boxShadow/border, borderRadius, flex centering) into
that component/class and use it for both occurrences so Badge (and consumers
like Icon, LinkIcon, SharingShortcutIcon, SharingOwnerAvatar, fileIcon) render
consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/ColorPicker/ColorPicker.jsx`:
- Around line 42-47: The Avatar instances in ColorPicker.jsx are using a
non-existent backgroundColor prop so the background stays as the hardcoded color
prop; replace the backgroundColor prop with the color prop on both Avatar usages
so the component uses the dynamic values (e.g., change the Avatar that should
use the paper background to color="var(--papeBackgroundColor)" and change the
swatch Avatar inside the COLORS mapping to color={color}); update the two Avatar
prop names accordingly (refer to the Avatar component and the COLORS
array/swatches in the ColorPicker component).

In `@src/components/pushClient/Banner.jsx`:
- Around line 83-91: The anchor rendered in Banner.jsx that uses component="a"
with target="_blank" (the element with props label={t('Nav.banner-btn-client')},
onClick={() => this.markAsSeen('banner')}, startIcon={<Icon icon={DownloadIcon}
/>}, href={link}) must include rel="noopener noreferrer"; update that JSX
element to add the rel prop to prevent reverse-tabnabbing while preserving
existing props and behavior.

In `@src/modules/filelist/virtualized/cells/SharingShortcutBadge.jsx`:
- Around line 13-18: The Avatar component in SharingShortcutBadge.jsx
accidentally receives a stray boolean prop "Avatar" (the token "Avatar" on the
opening <Avatar ...> tag) which should be removed; locate the Avatar JSX element
in the SharingShortcutBadge functional component and delete the lone "Avatar"
attribute so the component only has valid props (e.g., color, textColor, size)
passed.

---

Nitpick comments:
In `@src/modules/filelist/icons/FileThumbnail.tsx`:
- Around line 170-212: The Badge wrapper markup for the small rounded icon (used
around Icon/LinkIcon at the first Badge badgeContent) and the sharing badge
(used around SharingShortcutIcon and SharingOwnerAvatar) duplicates inline
wrapper div styles; create a small reusable presentational component or CSS
class (e.g., FileThumbnailBadge or .file-thumbnail-badge) and replace the inline
divs in the Badge badgeContent blocks, moving shared styles (padding, sizing,
backgroundColor, color, boxShadow/border, borderRadius, flex centering) into
that component/class and use it for both occurrences so Badge (and consumers
like Icon, LinkIcon, SharingShortcutIcon, SharingOwnerAvatar, fileIcon) render
consistently.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4bbde1e9-c551-4133-86c4-218463fa90e1

📥 Commits

Reviewing files that changed from the base of the PR and between e0879ff and db74402.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (14)
  • jestHelpers/setup.js
  • package.json
  • src/components/ColorPicker/ColorPicker.jsx
  • src/components/FolderPicker/FolderPickerHeader.tsx
  • src/components/FolderPicker/FolderPickerHeaderIllustration.tsx
  • src/components/PushBanner/QuotaBanner.jsx
  • src/components/pushClient/Banner.jsx
  • src/modules/filelist/File.jsx
  • src/modules/filelist/cells/SharingShortcutBadge.jsx
  • src/modules/filelist/icons/FileThumbnail.tsx
  • src/modules/filelist/virtualized/GridFile.jsx
  • src/modules/filelist/virtualized/cells/SharingShortcutBadge.jsx
  • src/modules/navigation/NavContent.tsx
  • src/store/rootReducer.js
💤 Files with no reviewable changes (1)
  • src/store/rootReducer.js

Comment thread src/components/ColorPicker/ColorPicker.jsx
Comment thread src/components/pushClient/Banner.jsx
codescene-delta-analysis[bot]

This comment was marked as outdated.

@bundlemon
Copy link
Copy Markdown

bundlemon bot commented Apr 8, 2026

BundleMon

Files updated (8)
Status Path Size Limits
public/static/js/(chunkId).(hash).js
1.1MB (+100.62KB +9.77%) -
static/js/(chunkId).(hash).js
1.17MB (+100.3KB +9.16%) -
static/js/cozy.(hash).js
919.45KB (+24.51KB +2.74%) -
public/static/js/cozy.(hash).js
782.19KB (+23.3KB +3.07%) -
static/js/main.(hash).js
168.15KB (+181B +0.11%) -
public/static/js/public.(hash).js
141.73KB (+158B +0.11%) -
public/static/css/cozy.(hash).css
31.56KB (-2.22KB -6.56%) -
static/css/cozy.(hash).css
31.56KB (-2.22KB -6.56%) -
Unchanged files (13)
Status Path Size Limits
(hash).js
336.11KB -
public/(hash).js
336.11KB -
services/qualificationMigration.js
283.13KB -
services/dacc.js
262.86KB -
public/static/js/lib-react.(hash).js
43.88KB -
static/js/lib-react.(hash).js
43.88KB -
public/static/js/lib-router.(hash).js
21.86KB -
static/js/lib-router.(hash).js
21.86KB -
static/css/main.(hash).css
17.04KB -
public/static/css/public.(hash).css
6.76KB -
manifest.webapp
3.04KB -
index.html
700B -
assets/manifest.json
185B -

Total files change +244.62KB +4.42%

Groups updated (2)
Status Path Size Limits
**/*.js
7.61MB (+246.9KB +3.27%) -
**/*.css
120.14KB (-8.24KB -6.42%) -
Unchanged groups (1)
Status Path Size Limits
**/*.{png,svg,ico}
2.19MB -

Final result: ✅

View report in BundleMon website ➡️


Current branch size history | Target branch size history

@doubleface doubleface force-pushed the feat/update-cozy-ui-138 branch from f4f1fb3 to 2a6b7c2 Compare April 8, 2026 13:17
codescene-delta-analysis[bot]

This comment was marked as outdated.

zatteo and others added 4 commits April 8, 2026 15:25
The Alert component from cozy-ui accepts `action` (singular), not
`actions`. The wrong prop name caused buttons to be passed as an HTML
attribute and never rendered.
cozy-bar (via cozy-search -> @assistant-ui/react -> assistant-stream)
uses the Fetch API `Response` class at module level, which is not
available in the jsdom test environment.

Mocking cozy-search breaks the import chain before the problematic
code is reached, fixing the suites that called
jest.requireActual('cozy-bar').
…rnings

cozy-bar's BarRoutes.js calls React.createElement with AssistantDialog
and
SearchDialog from cozy-search at module load time. Mocking cozy-search
with
an empty object caused React to log an invalid-type warning before any
test
ran, triggering the ConsoleUsageReporter.
@doubleface doubleface force-pushed the feat/update-cozy-ui-138 branch from 2a6b7c2 to 527a3e9 Compare April 8, 2026 13:25
codescene-delta-analysis[bot]

This comment was marked as outdated.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/components/pushClient/Banner.jsx (1)

87-97: Remove unused callback arguments for clarity.

At Line 87 and Line 97, markAsSeen is called with arguments that are never consumed. This is harmless but noisy.

♻️ Suggested cleanup
-                onClick={() => this.markAsSeen('banner')}
+                onClick={() => this.markAsSeen()}
...
-                onClick={() => this.markAsSeen('close')}
+                onClick={() => this.markAsSeen()}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/pushClient/Banner.jsx` around lines 87 - 97, The onClick
handlers in Banner.jsx call markAsSeen with unused arguments ('banner' and
'close'); remove those unnecessary args to clean up the code by changing the
onClick callbacks to call this.markAsSeen() instead (update both occurrences
where markAsSeen is referenced in the Button and the other clickable element to
use no arguments).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/modules/filelist/virtualized/cells/SharingShortcutBadge.jsx`:
- Around line 13-17: Prettier is failing because the Avatar JSX props in
SharingShortcutBadge.jsx are split across multiple lines; update the Avatar
element (the Avatar component instance) so its props are on a single line (e.g.,
combine color, textColor, and size into one line) to satisfy the
prettier/prettier rule and re-run CI.

---

Nitpick comments:
In `@src/components/pushClient/Banner.jsx`:
- Around line 87-97: The onClick handlers in Banner.jsx call markAsSeen with
unused arguments ('banner' and 'close'); remove those unnecessary args to clean
up the code by changing the onClick callbacks to call this.markAsSeen() instead
(update both occurrences where markAsSeen is referenced in the Button and the
other clickable element to use no arguments).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e2ca9ef9-1507-4cc1-bf99-6aa1e45027c7

📥 Commits

Reviewing files that changed from the base of the PR and between f4f1fb3 and 2a6b7c2.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (14)
  • jestHelpers/setup.js
  • package.json
  • src/components/ColorPicker/ColorPicker.jsx
  • src/components/FolderPicker/FolderPickerHeader.tsx
  • src/components/FolderPicker/FolderPickerHeaderIllustration.tsx
  • src/components/PushBanner/QuotaBanner.jsx
  • src/components/pushClient/Banner.jsx
  • src/modules/filelist/File.jsx
  • src/modules/filelist/cells/SharingShortcutBadge.jsx
  • src/modules/filelist/icons/FileThumbnail.tsx
  • src/modules/filelist/virtualized/GridFile.jsx
  • src/modules/filelist/virtualized/cells/SharingShortcutBadge.jsx
  • src/modules/navigation/NavContent.tsx
  • src/store/rootReducer.js
💤 Files with no reviewable changes (1)
  • src/store/rootReducer.js
✅ Files skipped from review due to trivial changes (7)
  • src/modules/filelist/cells/SharingShortcutBadge.jsx
  • src/modules/filelist/virtualized/GridFile.jsx
  • src/modules/filelist/File.jsx
  • src/modules/filelist/icons/FileThumbnail.tsx
  • src/components/FolderPicker/FolderPickerHeader.tsx
  • package.json
  • src/components/PushBanner/QuotaBanner.jsx
🚧 Files skipped from review as they are similar to previous changes (3)
  • jestHelpers/setup.js
  • src/components/FolderPicker/FolderPickerHeaderIllustration.tsx
  • src/components/ColorPicker/ColorPicker.jsx

Comment thread src/modules/filelist/virtualized/cells/SharingShortcutBadge.jsx Outdated
Copy link
Copy Markdown

@codescene-delta-analysis codescene-delta-analysis bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gates Passed
3 Quality Gates Passed

See analysis details in CodeScene

Quality Gate Profile: The Bare Minimum
Install CodeScene MCP: safeguard and uplift AI-generated code. Catch issues early with our IDE extension and CLI tool.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/components/pushClient/Banner.jsx (1)

50-53: Unused parameters passed to markAsSeen.

The markAsSeen() method takes no parameters, but it's called with 'banner' and 'close' string arguments on lines 87 and 97. These values are silently ignored. If the distinction was intended for analytics or debugging, consider using the parameter; otherwise, remove the arguments for clarity.

♻️ Suggested fix (if distinction not needed)
-                onClick={() => this.markAsSeen('banner')}
+                onClick={() => this.markAsSeen()}
-                onClick={() => this.markAsSeen('close')}
+                onClick={() => this.markAsSeen()}

Also applies to: 87-87, 97-97

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/pushClient/Banner.jsx` around lines 50 - 53, The markAsSeen
method currently ignores any arguments which leads to misleading calls; either
remove the unused string args where markAsSeen(...) is invoked or update
markAsSeen to accept and use a parameter for analytics; specifically, for a
simple clarity fix remove the `'banner'` and `'close'` arguments from the calls
and keep markAsSeen() as defined (which sets DESKTOP_BANNER via localforage and
this.setState({ mustShow: false })), or if you need the distinction, change
markAsSeen to markAsSeen(reason) and record/use the reason (e.g., send to
analytics or include in a log) while preserving the localforage setItem and
state update.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/pushClient/Banner.jsx`:
- Around line 50-53: The markAsSeen method currently ignores any arguments which
leads to misleading calls; either remove the unused string args where
markAsSeen(...) is invoked or update markAsSeen to accept and use a parameter
for analytics; specifically, for a simple clarity fix remove the `'banner'` and
`'close'` arguments from the calls and keep markAsSeen() as defined (which sets
DESKTOP_BANNER via localforage and this.setState({ mustShow: false })), or if
you need the distinction, change markAsSeen to markAsSeen(reason) and record/use
the reason (e.g., send to analytics or include in a log) while preserving the
localforage setItem and state update.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6752ad88-b134-44c8-aa39-14586ce2f8cb

📥 Commits

Reviewing files that changed from the base of the PR and between 2a6b7c2 and 527a3e9.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (14)
  • jestHelpers/setup.js
  • package.json
  • src/components/ColorPicker/ColorPicker.jsx
  • src/components/FolderPicker/FolderPickerHeader.tsx
  • src/components/FolderPicker/FolderPickerHeaderIllustration.tsx
  • src/components/PushBanner/QuotaBanner.jsx
  • src/components/pushClient/Banner.jsx
  • src/modules/filelist/File.jsx
  • src/modules/filelist/cells/SharingShortcutBadge.jsx
  • src/modules/filelist/icons/FileThumbnail.tsx
  • src/modules/filelist/virtualized/GridFile.jsx
  • src/modules/filelist/virtualized/cells/SharingShortcutBadge.jsx
  • src/modules/navigation/NavContent.tsx
  • src/store/rootReducer.js
💤 Files with no reviewable changes (1)
  • src/store/rootReducer.js
✅ Files skipped from review due to trivial changes (7)
  • src/modules/filelist/virtualized/cells/SharingShortcutBadge.jsx
  • src/modules/filelist/virtualized/GridFile.jsx
  • src/modules/filelist/cells/SharingShortcutBadge.jsx
  • src/modules/filelist/File.jsx
  • package.json
  • src/components/FolderPicker/FolderPickerHeader.tsx
  • src/modules/filelist/icons/FileThumbnail.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
  • jestHelpers/setup.js
  • src/components/FolderPicker/FolderPickerHeaderIllustration.tsx
  • src/modules/navigation/NavContent.tsx
  • src/components/PushBanner/QuotaBanner.jsx

@doubleface doubleface merged commit c4c01dd into master Apr 8, 2026
6 checks passed
@doubleface doubleface deleted the feat/update-cozy-ui-138 branch April 8, 2026 13:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants