chore(ui-client): Review build configuration #37607

tassoevan · 2025-11-25T18:59:00Z

Proposed changes (including videos or screenshots)

It normalizes the ESLint configuration for @rocket.chat/ui-client.

Issue(s)

ARCH-1892

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Chores
- Removed Babel build configuration
- Simplified ESLint configuration and updated ignore patterns
- Added dompurify dependency for enhanced security
Refactoring
- Updated component type system for improved type safety
- Restructured component exports and import patterns
- Consolidated component prop type definitions

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

dionisio-bot · 2025-11-25T18:59:03Z

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-25T18:59:05Z

⚠️ No Changeset found

Latest commit: 56ae291

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-25T18:59:07Z

Caution

Review failed

The pull request is closed.

Walkthrough

This PR refactors the packages/ui-client package to remove Babel configuration, simplify ESLint setup, and modernize TypeScript typing patterns by replacing ComponentProps with ComponentPropsWithoutRef, removing FC type annotations, eliminating explicit ReactElement return types, and converting multiple components to default exports.

Changes

Cohort / File(s)	Summary
Build configuration cleanup `packages/ui-client/.babelrc.json`, `packages/ui-client/.eslintignore`, `packages/ui-client/.eslintrc.json`, `packages/ui-client/package.json`	Removed .babelrc.json with Babel presets; simplified .eslintrc.json extends and ignorePatterns; updated .eslintignore to enable .storybook exclusion; moved dompurify to top-level dependencies and removed `@babel/core` devDependency
Component export refactoring: FeaturePreview `packages/ui-client/src/components/FeaturePreview/FeaturePreview.tsx`, `packages/ui-client/src/components/FeaturePreview/FeaturePreviewOn.tsx`, `packages/ui-client/src/components/FeaturePreview/FeaturePreviewOff.tsx`, `packages/ui-client/src/components/FeaturePreview/FeaturePreview.spec.tsx`, `packages/ui-client/src/components/FeaturePreview/index.ts`	Restructured FeaturePreview from named exports to default exports; introduced FeaturePreviewOnProps and FeaturePreviewOnProps types; split helper components into separate files; updated exports and index re-exports accordingly
Component export refactoring: DotLeader & TextSeparator `packages/ui-client/src/components/DotLeader.tsx`, `packages/ui-client/src/components/DotLeader.stories.tsx`, `packages/ui-client/src/components/TextSeparator.tsx`, `packages/ui-client/src/components/TextSeparator.stories.tsx`	Converted DotLeader to default export with exported DotLeaderProps type; updated imports and removed FC type; updated TextSeparator to use DotLeader default import and removed explicit ReactElement return type
Type system refactoring: React import standardization `packages/ui-client/src/components/AnchorPortal.tsx`, `packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx`, `packages/ui-client/src/components/Header/Header.stories.tsx`, `packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx`, `packages/ui-client/src/components/Wizard/mocks/createMockWizardApi.ts`, `packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.ts`	Converted runtime imports to type-only imports for React types (Meta, StoryFn, ComponentType, FeaturesAvailable, WizardAPI) where used only as type annotations
Type system refactoring: ComponentProps → ComponentPropsWithoutRef `packages/ui-client/src/components/ExternalLink.tsx`, `packages/ui-client/src/components/Header/Header.tsx`, `packages/ui-client/src/components/Header/HeaderAvatar.tsx`, `packages/ui-client/src/components/Header/HeaderContent.tsx`, `packages/ui-client/src/components/Header/HeaderContentRow.tsx`, `packages/ui-client/src/components/Header/HeaderIcon.tsx`, `packages/ui-client/src/components/Header/HeaderState.tsx`, `packages/ui-client/src/components/Header/HeaderSubtitle.tsx`, `packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx`, `packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx`, `packages/ui-client/src/components/Header/HeaderTitle.tsx`, `packages/ui-client/src/components/Header/HeaderTitleButton.tsx`, `packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx`, `packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx`, `packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx`, `packages/ui-client/src/components/HeaderV2/Header.stories.tsx`, `packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx`, `packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx`, `packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagIcon.tsx`, `packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbar.tsx`, `packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx`	Replaced `ComponentProps` with `ComponentPropsWithoutRef` in all Header and HeaderV2 component prop type definitions and imports, excluding ref from component props typing
Type system refactoring: Modal & Wizard components `packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx`, `packages/ui-client/src/components/Modal/GenericModal/GenericModalSkeleton.tsx`, `packages/ui-client/src/components/Modal/ModalBackdrop.tsx`, `packages/ui-client/src/components/Modal/ModalRegion.tsx`, `packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx`, `packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx`, `packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx`, `packages/ui-client/src/components/Wizard/Wizard.tsx`, `packages/ui-client/src/components/Wizard/WizardActions.tsx`, `packages/ui-client/src/components/Wizard/WizardActions.stories.tsx`, `packages/ui-client/src/components/Wizard/WizardBackButton.tsx`, `packages/ui-client/src/components/Wizard/WizardNextButton.tsx`	Replaced `ComponentProps` with `ComponentPropsWithoutRef` in Modal, MultiSelectCustom, and Wizard component props; exported previously internal props types; removed explicit ReactElement return types
Type system refactoring: UserStatus & other components `packages/ui-client/src/components/UserStatus/Away.tsx`, `packages/ui-client/src/components/UserStatus/Busy.tsx`, `packages/ui-client/src/components/UserStatus/Loading.tsx`, `packages/ui-client/src/components/UserStatus/Offline.tsx`, `packages/ui-client/src/components/UserStatus/Online.tsx`, `packages/ui-client/src/components/UserStatus/UserStatus.tsx`, `packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx`, `packages/ui-client/src/components/TooltipComponent.tsx`, `packages/ui-client/src/helpers/imperativeModal.tsx`	Replaced `ComponentProps` with `ComponentPropsWithoutRef`; updated UserStatus variants to use UserStatusProps; removed explicit ReactElement return types
FC removal & explicit type exports `packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx`, `packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryWrapper.tsx`, `packages/ui-client/src/components/Header/HeaderDivider.tsx`, `packages/ui-client/src/components/Header/HeaderTag/HeaderTagSkeleton.tsx`, `packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx`, `packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx`	Removed FC type annotations; exported previously internal props type aliases; adjusted function signatures to plain functions with explicit prop typing

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Areas requiring extra attention:

FeaturePreview refactor (packages/ui-client/src/components/FeaturePreview/*): Complex restructuring with new files, split components, and export reorganization; verify that the new component hierarchy maintains API compatibility and that cloneElement usage with featureToggleEnabled prop works correctly across test scenarios.
Export pattern changes: Multiple components converted to default exports; ensure all imports across the codebase are updated consistently and that re-exports in index files are correct.
ComponentProps → ComponentPropsWithoutRef migration: While repetitive, verify that the ref-exclusion is intentional for all affected components and that no forwardRef-based patterns are broken.
Build configuration removal: Confirm that removal of .babelrc.json doesn't break the build pipeline and that parent config or tooling properly handles JSX/TypeScript transpilation.

Possibly related PRs

chore(web-ui-registration): Review build configuration #37584: Removes per-package Babel config and @babel/core devDependencies across multiple packages in parallel efforts.
chore: bump fuselage packages #37420: Implements the same ComponentProps → ComponentPropsWithoutRef type refactoring pattern in other ui-related packages.
chore(ui-avatar): Review build configuration #37608: Simplifies package-level ESLint configurations with similar .eslintignore and extends restructuring.

Suggested labels

chore, refactoring, type-safety

Suggested reviewers

ggazzo
dougfabris

Poem

🐰 A Rabbit's Refactoring Song

Babel's gone, and types shine bright,
Components leap to new heights—
Default exports, refs take flight,
PropTypes flow, the code's just right!
~Hoppy rabbit waves paw ✨

✨ 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/ui-client-build-configuration

📜 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 f5eedbe and 56ae291.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (67)

packages/ui-client/.babelrc.json (0 hunks)
packages/ui-client/.eslintignore (0 hunks)
packages/ui-client/.eslintrc.json (1 hunks)
packages/ui-client/package.json (1 hunks)
packages/ui-client/src/components/AnchorPortal.tsx (1 hunks)
packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx (1 hunks)
packages/ui-client/src/components/DotLeader.stories.tsx (1 hunks)
packages/ui-client/src/components/DotLeader.tsx (1 hunks)
packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx (1 hunks)
packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryWrapper.tsx (1 hunks)
packages/ui-client/src/components/ExternalLink.tsx (1 hunks)
packages/ui-client/src/components/FeaturePreview/FeaturePreview.spec.tsx (1 hunks)
packages/ui-client/src/components/FeaturePreview/FeaturePreview.tsx (2 hunks)
packages/ui-client/src/components/FeaturePreview/FeaturePreviewOff.tsx (1 hunks)
packages/ui-client/src/components/FeaturePreview/FeaturePreviewOn.tsx (1 hunks)
packages/ui-client/src/components/FeaturePreview/index.ts (1 hunks)
packages/ui-client/src/components/Header/Header.stories.tsx (1 hunks)
packages/ui-client/src/components/Header/Header.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderAvatar.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderContent.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderContentRow.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderDivider.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderIcon.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderState.tsx (2 hunks)
packages/ui-client/src/components/Header/HeaderSubtitle.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderTag/HeaderTagSkeleton.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderTitle.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderTitleButton.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx (1 hunks)
packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx (2 hunks)
packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx (1 hunks)
packages/ui-client/src/components/HeaderV2/Header.stories.tsx (2 hunks)
packages/ui-client/src/components/HeaderV2/HeaderIcon.tsx (1 hunks)
packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTag.tsx (1 hunks)
packages/ui-client/src/components/HeaderV2/HeaderTag/HeaderTagIcon.tsx (1 hunks)
packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbar.tsx (1 hunks)
packages/ui-client/src/components/HeaderV2/HeaderToolbar/HeaderToolbarAction.tsx (1 hunks)
packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx (2 hunks)
packages/ui-client/src/components/Modal/GenericModal/GenericModalSkeleton.tsx (1 hunks)
packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx (1 hunks)
packages/ui-client/src/components/Modal/ModalBackdrop.tsx (2 hunks)
packages/ui-client/src/components/Modal/ModalRegion.tsx (1 hunks)
packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx (3 hunks)
packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx (2 hunks)
packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx (1 hunks)
packages/ui-client/src/components/TextSeparator.stories.tsx (1 hunks)
packages/ui-client/src/components/TextSeparator.tsx (1 hunks)
packages/ui-client/src/components/TooltipComponent.tsx (1 hunks)
packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx (3 hunks)
packages/ui-client/src/components/UserStatus/Away.tsx (1 hunks)
packages/ui-client/src/components/UserStatus/Busy.tsx (1 hunks)
packages/ui-client/src/components/UserStatus/Loading.tsx (1 hunks)
packages/ui-client/src/components/UserStatus/Offline.tsx (1 hunks)
packages/ui-client/src/components/UserStatus/Online.tsx (1 hunks)
packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx (1 hunks)
packages/ui-client/src/components/UserStatus/UserStatus.tsx (1 hunks)
packages/ui-client/src/components/Wizard/Wizard.tsx (1 hunks)
packages/ui-client/src/components/Wizard/WizardActions.stories.tsx (2 hunks)
packages/ui-client/src/components/Wizard/WizardActions.tsx (1 hunks)
packages/ui-client/src/components/Wizard/WizardBackButton.tsx (1 hunks)
packages/ui-client/src/components/Wizard/WizardNextButton.tsx (1 hunks)
packages/ui-client/src/components/Wizard/mocks/createMockWizardApi.ts (1 hunks)
packages/ui-client/src/helpers/imperativeModal.tsx (1 hunks)
packages/ui-client/src/hooks/usePreferenceFeaturePreviewList.ts (1 hunks)

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-11-25T19:24:56Z

📦 Docker Image Size Report

📈 Changes

Service	Current	Baseline	Change
sum of all images	1.2GiB	1.2GiB	+12MiB
rocketchat	358MiB	346MiB	+12MiB
omnichannel-transcript-service	132MiB	132MiB	-227B
queue-worker-service	132MiB	132MiB	+636B
ddp-streamer-service	127MiB	127MiB	+490B
account-service	114MiB	114MiB	-623B
stream-hub-service	111MiB	111MiB	+141B
authorization-service	111MiB	111MiB	+415B
presence-service	111MiB	111MiB	-4.6KiB

📊 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/25 19:24 (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]
  line "authorization-service" [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]
  line "omnichannel-transcript-service" [0.14, 0.14, 0.14, 0.14, 0.14, 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]
  line "queue-worker-service" [0.14, 0.14, 0.14, 0.14, 0.14, 0.13, 0.13, 0.13]
  line "rocketchat" [0.36, 0.36, 0.35, 0.35, 0.35, 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]

Statistics (last 7 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-37607
Baseline: develop
Timestamp: 2025-11-25 19:24:56 UTC
Historical data points: 7

Updated: Tue, 25 Nov 2025 19:24:56 GMT

codecov · 2025-11-25T20:25:22Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.82%. Comparing base (f5eedbe) to head (56ae291).
⚠️ Report is 2 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #37607      +/-   ##
===========================================
- Coverage    68.83%   68.82%   -0.02%     
===========================================
  Files         3361     3361              
  Lines       114340   114291      -49     
  Branches     20619    20618       -1     
===========================================
- Hits         78706    78658      -48     
- Misses       33536    33539       +3     
+ Partials      2098     2094       -4

Flag	Coverage Δ
e2e	`57.32% <ø> (-0.02%)`	⬇️
e2e-api	`42.28% <ø> (+0.05%)`	⬆️

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.

chore(ui-client): Review build configuration

56ae291

tassoevan added this to the 7.14.0 milestone Nov 25, 2025

tassoevan marked this pull request as ready for review November 25, 2025 20:25

tassoevan requested a review from a team November 25, 2025 20:25

ggazzo added the stat: QA assured Means it has been tested and approved by a company insider label Nov 25, 2025

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

ggazzo approved these changes Nov 25, 2025

View reviewed changes

ggazzo merged commit 427f4ef into develop Nov 25, 2025
103 of 116 checks passed

ggazzo deleted the chore/ui-client-build-configuration branch November 25, 2025 20:27

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(ui-client): Review build configuration #37607

chore(ui-client): Review build configuration #37607

Uh oh!

tassoevan commented Nov 25, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

dionisio-bot bot commented Nov 25, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 25, 2025

Uh oh!

coderabbitai bot commented Nov 25, 2025 •

edited

Loading

Review failed

Uh oh!

github-actions bot commented Nov 25, 2025

Uh oh!

codecov bot commented Nov 25, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

chore(ui-client): Review build configuration #37607

chore(ui-client): Review build configuration #37607

Uh oh!

Conversation

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

Uh oh!

Uh oh!

changeset-bot bot commented Nov 25, 2025

⚠️ No Changeset found

Uh oh!

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

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

github-actions bot commented Nov 25, 2025

📦 Docker Image Size Report

📈 Changes

📊 Historical Trend

Uh oh!

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

4 participants

tassoevan commented Nov 25, 2025 •

edited by coderabbitai bot

Loading

dionisio-bot bot commented Nov 25, 2025 •

edited

Loading

coderabbitai bot commented Nov 25, 2025 •

edited

Loading

codecov bot commented Nov 25, 2025 •

edited

Loading