chore: Move `PageScrollableContent` to `ui-client` package #37644

gabriellsh · 2025-11-28T21:48:50Z

Proposed changes (including videos or screenshots)

Initial idea was to move the whole Page component and its subcomponents. Unfortunately that would require moving many other components and files which I don't think should be part of the package, due to being used solely to handle some feature previews.

Issue(s)

VGA-92

Steps to test or reproduce

Further comments

Summary by CodeRabbit

New Features
- Added callback support to engagement dashboard for tab selection tracking.
Refactor
- Reorganized shared UI component dependencies to improve code organization and reusability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

dionisio-bot · 2025-11-28T21:48:54Z

Looks like this PR is not ready to merge, because of the following issues:

This PR is targeting the wrong base branch. It should target 7.14.0, but it targets 7.13.0

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

changeset-bot · 2025-11-28T21:48:55Z

⚠️ No Changeset found

Latest commit: cecd4de

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2025-11-28T21:48:56Z

Walkthrough

This PR migrates the PageScrollableContent component from the local meteor app to the shared packages/ui-client package. Import sources are updated across multiple files in the meteor app, the local export is removed, and the component is re-exported from the ui-client package. An optional onSelectTab callback is added to EngagementDashboardPageProps.

Changes

Cohort / File(s)	Summary
Import path updates (meteor app) `apps/meteor/client/components/Contextualbar/ContextualbarScrollableContent.tsx`, `apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx`, `apps/meteor/client/views/home/DefaultHomePage.tsx`, `apps/meteor/client/views/marketplace/AppInstallPage.tsx`, `apps/meteor/client/components/Page/PageScrollableContentWithShadow.tsx`	Updated `PageScrollableContent` imports from local paths to `@rocket.chat/ui-client` package
Local export removal `apps/meteor/client/components/Page/index.ts`	Removed `PageScrollableContent` from public barrel export
ui-client package exports `packages/ui-client/src/components/Page/index.ts`, `packages/ui-client/src/components/index.ts`	Added re-exports for `PageScrollableContent` and `Page` module to expose component from ui-client package
ui-client component updates `packages/ui-client/src/components/Page/PageScrollableContent.tsx`	Updated imports from external `@rocket.chat/ui-client` to local `../CustomScrollbars`
Feature enhancement `apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx`	Added optional `onSelectTab` callback property to `EngagementDashboardPageProps`
Storybook updates `apps/meteor/client/components/Page/Page.stories.tsx`	Added import of `PageScrollableContent` from `@rocket.chat/ui-client` and removed from local subcomponents export

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Focus areas:
- Verify all import path migrations are consistent across files
- Confirm PageScrollableContent export chain (local removal → ui-client barrel → external re-export) is complete
- Validate the onSelectTab callback integration in EngagementDashboardPage handles undefined case correctly
- Check that circular dependencies are not introduced through the new ui-client exports

Suggested labels

stat: ready to merge, stat: QA assured

Suggested reviewers

MartinSchoeler
tassoevan

Poem

🐰 A component on a journey hops,
From meteor app to package top,
With imports renewed and exports flow,
Shared code in ui-client grows! 🌱

Pre-merge checks and finishing touches

✅ 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 clearly and specifically identifies the main change: moving the PageScrollableContent component to the ui-client package, matching the PR's primary objective.
Linked Issues check	✅ Passed	The PR successfully moves PageScrollableContent to ui-client, limits scope to necessary components only, and avoids moving the entire Page component as required by VGA-92.
Out of Scope Changes check	✅ Passed	All changes are directly related to moving PageScrollableContent to ui-client. The expansion of EngagementDashboardPageProps with onSelectTab is a minimal related change for supporting the moved component's usage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch chore/movePage

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between e1c634a and 07dcfdd.

📒 Files selected for processing (10)

apps/meteor/client/components/Contextualbar/ContextualbarScrollableContent.tsx (1 hunks)
apps/meteor/client/components/Page/Page.stories.tsx (1 hunks)
apps/meteor/client/components/Page/PageScrollableContentWithShadow.tsx (1 hunks)
apps/meteor/client/components/Page/index.ts (0 hunks)
apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx (1 hunks)
apps/meteor/client/views/home/DefaultHomePage.tsx (1 hunks)
apps/meteor/client/views/marketplace/AppInstallPage.tsx (1 hunks)
packages/ui-client/src/components/Page/PageScrollableContent.tsx (1 hunks)
packages/ui-client/src/components/Page/index.ts (1 hunks)
packages/ui-client/src/components/index.ts (1 hunks)

💤 Files with no reviewable changes (1)

apps/meteor/client/components/Page/index.ts

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

packages/ui-client/src/components/index.ts
packages/ui-client/src/components/Page/index.ts
apps/meteor/client/components/Contextualbar/ContextualbarScrollableContent.tsx
apps/meteor/client/components/Page/PageScrollableContentWithShadow.tsx
apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx
apps/meteor/client/views/home/DefaultHomePage.tsx
apps/meteor/client/views/marketplace/AppInstallPage.tsx
packages/ui-client/src/components/Page/PageScrollableContent.tsx
apps/meteor/client/components/Page/Page.stories.tsx

🧠 Learnings (1)

📚 Learning: 2025-11-24T17:08:17.065Z

Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/page-objects/**/*.ts : Utilize existing page objects pattern from `apps/meteor/tests/e2e/page-objects/`

Applied to files:

packages/ui-client/src/components/index.ts
apps/meteor/client/components/Page/PageScrollableContentWithShadow.tsx
apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx
apps/meteor/client/views/home/DefaultHomePage.tsx
apps/meteor/client/views/marketplace/AppInstallPage.tsx
apps/meteor/client/components/Page/Page.stories.tsx

⏰ 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). (1)

GitHub Check: 🚢 Publish Docker Images (ghcr.io)

🔇 Additional comments (10)

apps/meteor/client/views/home/DefaultHomePage.tsx (1)

2-2: LGTM! Import updated correctly.

The import source change to @rocket.chat/ui-client aligns with the component migration. The Page component correctly remains imported from the local path (line 14) as per the PR objectives to move only PageScrollableContent.

apps/meteor/client/views/marketplace/AppInstallPage.tsx (1)

2-2: LGTM! Imports updated correctly.

The import separation is appropriate: PageScrollableContent now comes from @rocket.chat/ui-client while Page and PageHeader remain local to the meteor app, consistent with the PR's limited scope.

Also applies to: 8-8

apps/meteor/client/components/Contextualbar/ContextualbarScrollableContent.tsx (1)

2-2: LGTM! Import updated correctly.

Adding PageScrollableContent to the imports from @rocket.chat/ui-client is correct. The type derivation on line 6 using ComponentProps<typeof PageScrollableContent> will work correctly with the new import source.

packages/ui-client/src/components/Page/index.ts (1)

1-1: Barrel export correctly established.

The PageScrollableContent default export is properly implemented and accessible through this public API.

apps/meteor/client/components/Page/Page.stories.tsx (1)

2-2: LGTM! Story imports updated correctly.

The import strategy is appropriate: PageScrollableContent is now imported from @rocket.chat/ui-client (line 2) while other Page components come from the local barrel (line 6). The component remains documented in Storybook's subcomponents list (line 13), which is correct for documentation purposes. PageScrollableContent has been successfully removed from the local Page barrel exports and is no longer exported from apps/meteor/client/components/Page/index.ts.

packages/ui-client/src/components/index.ts (1)

21-21: LGTM! Page module export added correctly.

This export makes the Page module (including PageScrollableContent) accessible through the ui-client package's public API, which is essential for the migration. The Page module correctly exports PageScrollableContent, and no circular dependencies are present.

packages/ui-client/src/components/Page/PageScrollableContent.tsx (1)

5-6: LGTM! Internal imports updated correctly.

The relative imports for CustomScrollbars are correct. Both OverlayScrollbars (type export) and CustomScrollbars (named export via default re-export) are properly exported from packages/ui-client/src/components/CustomScrollbars/index.ts.

apps/meteor/client/components/Page/PageScrollableContentWithShadow.tsx (1)

1-1: LGTM! Import source updated correctly.

The import path change aligns with the migration of PageScrollableContent to the @rocket.chat/ui-client package. The type derivation on line 7 using typeof PageScrollableContent works correctly with the new import source, and all existing usages across the codebase remain properly configured.

apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx (2)

2-2: PageScrollableContent import and usage align with ui-client migration

Importing PageScrollableContent from @rocket.chat/ui-client and using it as the scrollable container here is consistent with the PR objective of centralizing this component in the ui-client package. Padding and children usage look correct, and keeping Page/PageHeader on the local import avoids pulling more components into ui-client than necessary.

Also applies to: 57-63

12-15: onSelectTab wiring is correct; all interactive usages pass the prop

The implementation correctly handles both optional and required scenarios. The handleTabClick callback properly returns undefined when onSelectTab is not provided, rendering tabs read-only. The sole interactive usage in EngagementDashboardRoute.tsx (lines 80–88) passes onSelectTab with the router navigation handler, and the Storybook story deliberately omits it for a static demonstration. No action needed.

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.}

github-actions · 2025-12-01T16:03:35Z

📦 Docker Image Size Report

📈 Changes

Service	Current	Baseline	Change
sum of all images	1.2GiB	1.2GiB	+12MiB
rocketchat	359MiB	347MiB	+12MiB
omnichannel-transcript-service	132MiB	132MiB	+2.5KiB
queue-worker-service	132MiB	132MiB	+369B
ddp-streamer-service	127MiB	127MiB	+542B
account-service	114MiB	114MiB	-211B
stream-hub-service	111MiB	111MiB	-660B
authorization-service	111MiB	111MiB	+977B
presence-service	111MiB	111MiB	+418B

📊 Historical Trend

---
config:
  theme: "dark"
  xyChart:
    width: 900
    height: 400
---
xychart
  title "Image Size Evolution by Service (Last 30 Days + This PR)"
  x-axis ["11/15 22:28", "11/16 01:28", "11/17 23:50", "11/18 22:53", "11/19 23:02", "11/21 16:49", "11/24 17:34", "11/27 22:32", "11/28 19:05", "12/01 15:59", "12/01 19:34 (PR)"]
  y-axis "Size (GB)" 0 --> 0.5
  line "account-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "authorization-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "ddp-streamer-service" [0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12]
  line "omnichannel-transcript-service" [0.14, 0.14, 0.14, 0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13]
  line "presence-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]
  line "queue-worker-service" [0.14, 0.14, 0.14, 0.14, 0.14, 0.13, 0.13, 0.13, 0.13, 0.13, 0.13]
  line "rocketchat" [0.36, 0.36, 0.35, 0.35, 0.35, 0.34, 0.34, 0.34, 0.34, 0.34, 0.35]
  line "stream-hub-service" [0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11, 0.11]

Statistics (last 10 days):

📊 Average: 1.5GiB
⬇️ Minimum: 1.2GiB
⬆️ Maximum: 1.6GiB
🎯 Current PR: 1.2GiB

ℹ️ About this report

This report compares Docker image sizes from this build against the develop baseline.

Tag: pr-37644
Baseline: develop
Timestamp: 2025-12-01 19:34:16 UTC
Historical data points: 10

Updated: Mon, 01 Dec 2025 19:34:16 GMT

codecov · 2025-12-01T16:28:43Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.81%. Comparing base (ddc9357) to head (cecd4de).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #37644      +/-   ##
===========================================
- Coverage    68.82%   68.81%   -0.02%     
===========================================
  Files         3361     3361              
  Lines       114265   114260       -5     
  Branches     20619    20619              
===========================================
- Hits         78644    78624      -20     
- Misses       33529    33544      +15     
  Partials      2092     2092

Flag	Coverage Δ
e2e	`57.28% <ø> (-0.05%)`	⬇️
e2e-api	`42.25% <ø> (-0.02%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

gabriellsh added 3 commits November 28, 2025 16:44

refactor: move PageScrollableContent to ui-client package

5454cbe

refactor: update imports to use PageScrollableContent from ui-client

938be95

refactor: remove old PageScrollableContent file

efa4129

gabriellsh added 2 commits November 28, 2025 18:58

Lint

367a321

Lint

07dcfdd

gabriellsh marked this pull request as ready for review December 1, 2025 16:00

gabriellsh requested a review from a team as a code owner December 1, 2025 16:00

dougfabris approved these changes Dec 1, 2025

View reviewed changes

dougfabris added this to the 7.14.0 milestone Dec 1, 2025

gabriellsh added the stat: QA assured Means it has been tested and approved by a company insider label Dec 1, 2025

dionisio-bot bot added the stat: ready to merge PR tested and approved waiting for merge label Dec 1, 2025

Merge branch 'develop' into chore/movePage

cecd4de

kodiakhq bot merged commit cbc0953 into develop Dec 1, 2025
106 of 110 checks passed

kodiakhq bot deleted the chore/movePage branch December 1, 2025 20:15

coderabbitai bot mentioned this pull request Dec 2, 2025

chore: Move ContextualBar and subcomponents to ui-client package #37661

Merged

dougfabris modified the milestones: 7.14.0, 8.0.0 Jan 19, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Move `PageScrollableContent` to `ui-client` package #37644

chore: Move `PageScrollableContent` to `ui-client` package #37644

Uh oh!

gabriellsh commented Nov 28, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

dionisio-bot bot commented Nov 28, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 28, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 1, 2025 •

edited

Loading

Uh oh!

codecov bot commented Dec 1, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chore: Move PageScrollableContent to ui-client package #37644

chore: Move PageScrollableContent to ui-client package #37644

Uh oh!

Conversation

gabriellsh commented Nov 28, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Uh oh!

dionisio-bot bot commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Docker Image Size Report

📈 Changes

📊 Historical Trend

Uh oh!

codecov bot commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chore: Move `PageScrollableContent` to `ui-client` package #37644

chore: Move `PageScrollableContent` to `ui-client` package #37644

gabriellsh commented Nov 28, 2025 •

edited by coderabbitai bot

Loading

dionisio-bot bot commented Nov 28, 2025 •

edited

Loading

changeset-bot bot commented Nov 28, 2025 •

edited

Loading

coderabbitai bot commented Nov 28, 2025 •

edited

Loading

github-actions bot commented Dec 1, 2025 •

edited

Loading

codecov bot commented Dec 1, 2025 •

edited

Loading