Skip to content

refactor(ui-video-conf): remove unnecessary ReactElement type annotations across components#40806

Merged
tassoevan merged 1 commit into
developfrom
refactor/prepare-types-for-react-19-4
Jun 5, 2026
Merged

refactor(ui-video-conf): remove unnecessary ReactElement type annotations across components#40806
tassoevan merged 1 commit into
developfrom
refactor/prepare-types-for-react-19-4

Conversation

@tassoevan

@tassoevan tassoevan commented Jun 4, 2026

Copy link
Copy Markdown
Member

⚠️ This is part 4/23 of #40796. PR for refactor/prepare-types-for-react-19-3 must be merged first.


Proposed changes (including videos or screenshots)

As a first step towards upgrading to React 19, it handles types from @types/react looking forward the next major.

Issue(s)

Task: ARCH-2170

Steps to test or reproduce

Further comments

No runtime change is expected from it.

Summary by CodeRabbit

  • Refactor
    • Internal code improvements to enhance maintainability; no changes to user-facing functionality.

@changeset-bot

changeset-bot Bot commented Jun 4, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 7364a00

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

@dionisio-bot

dionisio-bot Bot commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

@coderabbitai

coderabbitai Bot commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

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: 31068a1c-9e8b-4b02-921c-842a52403f87

📥 Commits

Reviewing files that changed from the base of the PR and between d40f5d2 and 7364a00.

📒 Files selected for processing (24)
  • packages/ui-video-conf/src/VideoConfButton/VideoConfButton.tsx
  • packages/ui-video-conf/src/VideoConfController/VideoConfController.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageActions.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageButton.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageContent.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageIcon.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupBackdrop.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupControllers.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooter.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooterButtons.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupHeader.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupIcon.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupInfo.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupTitle.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). (5)
  • GitHub Check: 📦 Build Packages
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: Hacktron Security Check
  • GitHub Check: CodeQL-Build
  • GitHub Check: CodeQL-Build
🧰 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-video-conf/src/VideoConfPopup/VideoConfPopupHeader.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageContent.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupControllers.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooterButtons.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageActions.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupBackdrop.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
  • packages/ui-video-conf/src/VideoConfButton/VideoConfButton.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupIcon.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooter.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupInfo.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageButton.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageIcon.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupTitle.tsx
  • packages/ui-video-conf/src/VideoConfController/VideoConfController.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx
🧠 Learnings (5)
📓 Common learnings
Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 39304
File: packages/ui-contexts/src/ActionManagerContext.ts:26-26
Timestamp: 2026-03-04T14:16:49.202Z
Learning: In `packages/ui-contexts/src/ActionManagerContext.ts` (TypeScript, RocketChat/Rocket.Chat), the `disposeView` method in `IActionManager` uses an intentionally explicit union `UiKit.ModalView['id'] | UiKit.BannerView['viewId'] | UiKit.ContextualBarView['id']` to document which view types are accepted, even though all constituents resolve to the same primitive. The inline `// eslint-disable-next-line typescript-eslint/no-duplicate-type-constituents` comment is intentional and should not be flagged or removed.
📚 Learning: 2026-03-27T14:53:01.096Z
Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:53:01.096Z
Learning: In RocketChat/Rocket.Chat, there are two different `ModalBackdrop` components:
1. `rocket.chat/fuselage` `ModalBackdrop`: its `ModalBackdropProps` is `BoxProps`, so it accepts `onClick` and all other Box/DOM props. There is no `onDismiss` prop on this component.
2. `rocket.chat/ui-client` `ModalBackdrop` (packages/ui-client/src/components/Modal/ModalBackdrop.tsx): has a narrower interface `{ children?: ReactNode; onDismiss?: () => void }` and calls `onDismiss` on Escape keypress and outside mouse-up. It does NOT forward arbitrary DOM props like `onClick`.
When reviewing usage of `ModalBackdrop`, always check the import source to determine which component is being used and which props are valid.

Applied to files:

  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupHeader.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageContent.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupControllers.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooterButtons.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageActions.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupBackdrop.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
  • packages/ui-video-conf/src/VideoConfButton/VideoConfButton.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupIcon.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooter.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupInfo.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageIcon.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupTitle.tsx
  • packages/ui-video-conf/src/VideoConfController/VideoConfController.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx
📚 Learning: 2026-03-04T14:16:49.202Z
Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 39304
File: packages/ui-contexts/src/ActionManagerContext.ts:26-26
Timestamp: 2026-03-04T14:16:49.202Z
Learning: In `packages/ui-contexts/src/ActionManagerContext.ts` (TypeScript, RocketChat/Rocket.Chat), the `disposeView` method in `IActionManager` uses an intentionally explicit union `UiKit.ModalView['id'] | UiKit.BannerView['viewId'] | UiKit.ContextualBarView['id']` to document which view types are accepted, even though all constituents resolve to the same primitive. The inline `// eslint-disable-next-line typescript-eslint/no-duplicate-type-constituents` comment is intentional and should not be flagged or removed.

Applied to files:

  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupControllers.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageActions.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageIcon.tsx
  • packages/ui-video-conf/src/VideoConfController/VideoConfController.tsx
📚 Learning: 2026-02-26T19:22:36.646Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.tsx:40-40
Timestamp: 2026-02-26T19:22:36.646Z
Learning: In packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.tsx, when the media session state is 'unavailable', the voiceCall action is not included in the actions object passed to CallHistoryActions, so it won't appear in the menu at all. The action filtering happens upstream before getItems is called, preventing any tooltip confusion for the unavailable state.

Applied to files:

  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageActions.tsx
📚 Learning: 2025-11-17T15:07:13.273Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37398
File: packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx:357-363
Timestamp: 2025-11-17T15:07:13.273Z
Learning: In packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx, IconElement is a presentational, non-actionable element that does not require wrapping in AppIdProvider, similar to plain_text and mrkdwn renderers. Only actionable elements (those with actions, actionId, or interactive behavior) should be wrapped in AppIdProvider.

Applied to files:

  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx
  • packages/ui-video-conf/src/VideoConfButton/VideoConfButton.tsx
  • packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupIcon.tsx
  • packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageIcon.tsx
  • packages/ui-video-conf/src/VideoConfController/VideoConfController.tsx
🔇 Additional comments (24)
packages/ui-video-conf/src/VideoConfButton/VideoConfButton.tsx (1)

3-3: LGTM!

Also applies to: 14-14

packages/ui-video-conf/src/VideoConfController/VideoConfController.tsx (1)

3-3: LGTM!

Also applies to: 13-13

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx (1)

2-2: LGTM!

Also applies to: 4-4

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageActions.tsx (1)

2-2: LGTM!

Also applies to: 4-4

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageButton.tsx (1)

2-2: LGTM!

Also applies to: 6-6

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupControllers.tsx (1)

2-2: LGTM!

Also applies to: 4-4

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooter.tsx (1)

2-2: LGTM!

Also applies to: 4-4

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooterButtons.tsx (1)

2-2: LGTM!

Also applies to: 4-4

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx (1)

2-2: LGTM!

Also applies to: 6-6

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx (1)

2-2: LGTM!

Also applies to: 6-6

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx (1)

2-2: LGTM!

Also applies to: 9-9

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx (1)

2-2: LGTM!

Also applies to: 6-6

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx (1)

5-5: LGTM!

Also applies to: 13-13

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx (1)

4-4: LGTM!

Also applies to: 24-24

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupBackdrop.tsx (1)

3-3: LGTM!

Also applies to: 17-17

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx (1)

2-2: LGTM!

Also applies to: 4-4

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageContent.tsx (1)

2-2: LGTM!

Also applies to: 6-6

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx (1)

2-2: LGTM!

Also applies to: 8-8

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx (1)

2-2: LGTM!

Also applies to: 6-6

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageIcon.tsx (1)

25-25: LGTM!

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupHeader.tsx (1)

2-2: LGTM!

Also applies to: 4-4

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupIcon.tsx (1)

2-2: LGTM!

Also applies to: 4-4

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupInfo.tsx (1)

2-2: LGTM!

Also applies to: 5-5, 10-10

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupTitle.tsx (1)

8-8: LGTM!


Walkthrough

This PR removes explicit ReactElement return type annotations from 24 React components across the video conf UI package, replacing them with TypeScript's type inference. Component prop types are updated from ReactElement to ReactNode where applicable, and React type imports are narrowed to only what each component requires.

Changes

React type inference refactoring

Layer / File(s) Summary
Button and Controller components
packages/ui-video-conf/src/VideoConfButton/VideoConfButton.tsx, packages/ui-video-conf/src/VideoConfController/VideoConfController.tsx
VideoConfButton and VideoConfController drop explicit ReactElement return types and adjust their React type imports to include only ButtonHTMLAttributes.
VideoConfMessage and related subcomponents
packages/ui-video-conf/src/VideoConfMessage/*
The main VideoConfMessage component and its 13 related subcomponents (Action, Actions, Button, Content, Footer, FooterText, Icon, Row, Skeleton, Text, UserStack) all remove explicit ReactElement return type annotations. React imports are simplified to use type-only declarations where needed; some components move to ComponentProps, AllHTMLAttributes, or ReactNode based on their props requirements.
VideoConfPopup and related subcomponents
packages/ui-video-conf/src/VideoConfPopup/*
The main VideoConfPopup component and its 9 related subcomponents (Backdrop, Content, Controllers, Footer, FooterButtons, Header, Icon, Info, Title) follow the same pattern: explicit return type annotations are removed and React imports are narrowed. VideoConfPopupInfo.avatar is broadened from ReactElement to ReactNode to accept a wider range of content types.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested labels

type: chore

Suggested reviewers

  • ggazzo
  • dougfabris
🚥 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 summarizes the main change: removing unnecessary ReactElement type annotations from components in the ui-video-conf package. It is concise, specific, and reflects the primary refactoring objective.
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

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (2)
  • REACT-19: Request failed with status code 401
  • ARCH-2170: Request failed with status code 401

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.

@codecov

codecov Bot commented Jun 4, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.05%. Comparing base (d40f5d2) to head (7364a00).

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #40806      +/-   ##
===========================================
- Coverage    70.08%   70.05%   -0.04%     
===========================================
  Files         3337     3337              
  Lines       123506   123506              
  Branches     22009    22003       -6     
===========================================
- Hits         86557    86517      -40     
- Misses       33610    33642      +32     
- Partials      3339     3347       +8     
Flag Coverage Δ
e2e 59.35% <ø> (-0.07%) ⬇️
e2e-api 46.28% <ø> (-0.02%) ⬇️
unit 70.85% <100.00%> (-0.03%) ⬇️

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.

@tassoevan tassoevan force-pushed the refactor/prepare-types-for-react-19-4 branch from 108a417 to a18ff4e Compare June 5, 2026 04:57
@tassoevan tassoevan force-pushed the refactor/prepare-types-for-react-19-4 branch from a18ff4e to 7364a00 Compare June 5, 2026 17:19
@tassoevan tassoevan requested a review from a team June 5, 2026 17:19
@tassoevan tassoevan added this to the 8.6.0 milestone Jun 5, 2026
@tassoevan tassoevan marked this pull request as ready for review June 5, 2026 17:19

@dougfabris dougfabris left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM!

@tassoevan tassoevan added the stat: QA assured Means it has been tested and approved by a company insider label Jun 5, 2026
@dionisio-bot dionisio-bot Bot added the stat: ready to merge PR tested and approved waiting for merge label Jun 5, 2026

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

No issues found across 24 files

Re-trigger cubic

@tassoevan tassoevan added this pull request to the merge queue Jun 5, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jun 5, 2026
@tassoevan tassoevan added this pull request to the merge queue Jun 5, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jun 5, 2026
@tassoevan tassoevan added this pull request to the merge queue Jun 5, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jun 5, 2026
@tassoevan tassoevan added this pull request to the merge queue Jun 5, 2026
Merged via the queue into develop with commit 0533748 Jun 5, 2026
83 of 85 checks passed
@tassoevan tassoevan deleted the refactor/prepare-types-for-react-19-4 branch June 5, 2026 21:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

stat: QA assured Means it has been tested and approved by a company insider stat: ready to merge PR tested and approved waiting for merge type: chore

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants