chore(deps): upgrade @rocket.chat/fuselage 0.58.0 → 0.78.0

[jeanfbrito]

Summary

Upgrades @rocket.chat/fuselage from 0.58.0 → 0.78.0 (latest stable), along with the companion packages it depends on at that version. The bump was performed incrementally across the version ladder so each set of breaking changes could be isolated, migrated, and verified independently rather than in a single high-risk jump.

0.78.0 is the newest published stable release; 0.78.1 appears in the changelog but is not yet on the npm registry.

Approach

The upgrade was walked in four-minor hops, each landing as its own commit, with tsc --noEmit acting as the breaking-change detector and a token/literal lint gate ensuring no new hardcoded design values were introduced:

Hop	Version	Breaking change	Migration
1	0.58.0 → 0.62.0	—	none
2	0.62.0 → 0.66.0	Modal compound API removed	Modal.Header / .Icon / .HeaderText / .Title / .Close / .Content / .Footer / .FooterControllers → top-level named exports (ModalHeader, ModalIcon, …)
3	0.66.0 → 0.70.0	—	none
4	0.70.0 → 0.74.0	MenuV2 promoted to Menu	MenuV2 import + JSX → Menu
5	0.74.0 → 0.78.0	—	none

Companion package alignment

Fuselage's sibling packages are versioned independently and had to be advanced to match what 0.78 requires at runtime:

• @rocket.chat/fuselage-hooks ~0.33.1 → ~0.41.0 — fuselage 0.78's Scrollable calls useStableCallback, which only exists in hooks 0.41+. The stale pin type-checked cleanly (the compiler resolved the old hooks declarations) but threw TypeError: useStableCallback is not a function in the renderer at startup, caught by the app's error boundary. Verified live in yarn start before and after the fix.
• @rocket.chat/css-in-js ~0.31.25 → ~0.32.0 — satisfies fuselage 0.78's ^0.32.0 requirement.

Code changes

• src/ui/components/SupportedVersionDialog/index.tsx — migrated from the removed Modal.* compound API to the current top-level Modal* named exports.
• src/ui/components/SideBar/index.tsx — renamed MenuV2 → Menu following its promotion in 0.72.0.
• package.json / yarn.lock — @rocket.chat/fuselage → 0.78.0, plus the companion-package bumps above.

The app uses none of the deprecated namespaces removed in this range (Message.* removed in 0.71; Option.* / Options.* / Avatar.* / Field.* removed in 0.67), and there is no direct use of useEffectEvent (renamed to useStableCallback in 0.72). @rocket.chat/fuselage-polyfills@0.31.25 continues to resolve as a standalone package and remains pinned.

Verification

• tsc --noEmit — clean (0 errors) on the target version.
• Lint/token gate — zero new literal-value violations introduced; pre-existing legacy styles.* violations left untouched as out of scope.
• Runtime — yarn build + app launch verified: the startup crash is resolved and the renderer mounts cleanly. Remaining log entries are environmental only (no local server running / QA-server certificate), unrelated to this change.
• Visual QA — confirmed via yarn start; the application renders and behaves correctly across the affected surfaces.

Behavioral notes (reviewer attention)

The type checker cannot detect rendering-level changes. The following landed in this version range and were covered by the manual visual pass; reviewers may want to confirm on their own surfaces:

• Sass rewrite + Inter font integration (~0.72–0.77) — potential font-metric / spacing shifts across the UI.
• Modal margins / open animation — affects SupportedVersionDialog.
• Select inside Modal/Field — a scrollHeight regression was introduced in 0.77.0; the fix ships in the unreleased 0.78.1 patch. Worth a follow-up bump once published.
• SidebarItem padding / visual regressions — several patches in the 0.66.x range.
• Invalid input border colour — fixed in 0.72.

Summary by CodeRabbit

• Chores
  • Updated Rocket.Chat UI framework dependencies to latest compatible versions for improved stability and performance.
  • Refactored internal dialog and menu components to align with updated framework conventions, ensuring consistent UI behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b8b868d0-1c1c-42f5-8232-1622e17b422c

📥 Commits

Reviewing files that changed from the base of the PR and between c2ffcf7 and b3760ed.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (3)

• package.json
• src/ui/components/SideBar/index.tsx
• src/ui/components/SupportedVersionDialog/index.tsx

✅ Files skipped from review due to trivial changes (1)

• src/ui/components/SideBar/index.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• package.json
• src/ui/components/SupportedVersionDialog/index.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: check (ubuntu-latest)
• GitHub Check: check (windows-latest)

---

Walkthrough

This PR upgrades Rocket.Chat Fuselage dependencies from 0.58.0 to 0.78.0 and refactors two UI components to use the new Fuselage API: SideBar replaces MenuV2 with Menu, and SupportedVersionDialog migrates Modal subcomponents from dot-namespace to direct imports.

Changes

Fuselage dependency upgrade and component API migration

Layer / File(s)	Summary
Dependency version upgrade package.json	@rocket.chat/css-in-js, @rocket.chat/fuselage, and @rocket.chat/fuselage-hooks are bumped to newer versions in the dependencies section.
SideBar menu component migration src/ui/components/SideBar/index.tsx	Imports are updated from MenuV2 to Menu, MenuItem, and MenuSection; the settings menu JSX is swapped from <MenuV2> to <Menu> with the same props and nested content preserved.
SupportedVersionDialog modal component migration src/ui/components/SupportedVersionDialog/index.tsx	Fuselage imports are expanded to individual modal subcomponents; the modal JSX is refactored from Modal.* dot-namespace style to direct component form (ModalHeader, ModalIcon, ModalContent, ModalFooter, etc.), preserving all content and handlers.

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main objective of the PR: upgrading the @rocket.chat/fuselage dependency from version 0.58.0 to 0.78.0, which is the primary change across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/ui/components/SideBar/index.tsx

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

src/ui/components/SupportedVersionDialog/index.tsx

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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