refactor(ui-voip): remove unnecessary ReactElement type annotations across components

[tassoevan]

⚠️ This is part 5/23 of #40796. PR for refactor/prepare-types-for-react-19-4 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 for enhanced type safety and maintainability across the VoIP UI components and Storybook files. No changes to user-facing functionality or behavior.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 88d962e

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]

Linter diff in the way? Review this PR in Change Stack to focus on meaningful changes and expand context only when needed.

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: 8d25dd59-5dc8-44fa-904f-8f771c6d6616

📥 Commits

Reviewing files that changed from the base of the PR and between 0533748 and 88d962e.

📒 Files selected for processing (5)

• packages/ui-voip/src/components/Widget/WidgetHeader.tsx
• packages/ui-voip/src/context/MediaCallInstanceContext.ts
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx
• packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.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-voip/src/context/MediaCallInstanceContext.ts
• packages/ui-voip/src/components/Widget/WidgetHeader.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx
• packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx

🧠 Learnings (11)

📓 Common learnings

Learnt from: smirk-dev
Repo: RocketChat/Rocket.Chat PR: 39625
File: apps/meteor/app/api/server/v1/push.ts:85-97
Timestamp: 2026-03-14T14:58:58.834Z
Learning: In RocketChat/Rocket.Chat, the `push.token` POST/DELETE endpoints in `apps/meteor/app/api/server/v1/push.ts` were already migrated to the chained router API pattern on `develop` prior to PR `#39625`. `cleanTokenResult` (which strips `authToken` and returns `PushTokenResult`) and `isPushTokenPOSTProps`/`isPushTokenDELETEProps` validators already exist on `develop`. PR `#39625` only migrates `push.get` and `push.info` to the chained pattern. Do not flag `cleanTokenResult` or `PushTokenResult` as newly introduced behavior-breaking changes when reviewing this PR.

Learnt from: amitb0ra
Repo: RocketChat/Rocket.Chat PR: 39676
File: .changeset/migrate-users-register-openapi.md:3-3
Timestamp: 2026-03-16T21:50:42.118Z
Learning: In RocketChat/Rocket.Chat OpenAPI migration PRs, removing endpoint types and validators from `rocket.chat/rest-typings` (e.g., `UserRegisterParamsPOST`, `/v1/users.register` entry) is the *required* migration pattern per RocketChat/Rocket.Chat-Open-API#150 Rule 7 ("No More rest-typings or Manual Typings"). The endpoint type is re-exposed via a module augmentation `.d.ts` file in the consuming package (e.g., `packages/web-ui-registration/src/users-register.d.ts`). This is NOT a breaking change — the correct changeset bump for `rocket.chat/rest-typings` in this scenario is `minor`, not `major`. Do not flag this as a breaking change during OpenAPI migration reviews.

Learnt from: amitb0ra
Repo: RocketChat/Rocket.Chat PR: 39647
File: apps/meteor/app/api/server/v1/users.ts:710-757
Timestamp: 2026-03-15T14:31:28.969Z
Learning: In RocketChat/Rocket.Chat, the `UserCreateParamsPOST` type in `apps/meteor/app/api/server/v1/users.ts` (migrated from `packages/rest-typings/src/v1/users/UserCreateParamsPOST.ts`) intentionally has `fields: string` (non-optional) and `settings?: IUserSettings` without a corresponding AJV schema entry. This is a pre-existing divergence carried over verbatim from the original rest-typings source (PR `#39647`). Do not flag this type/schema misalignment during the OpenAPI migration review — it is tracked as a separate follow-up fix.

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.

Learnt from: d-gubert
Repo: RocketChat/Rocket.Chat PR: 40463
File: packages/apps/src/lib/SecureFields.ts:17-19
Timestamp: 2026-05-11T21:46:26.540Z
Learning: In `RocketChat/Rocket.Chat`, the package `packages/apps` (`packages/apps/tsconfig.json`) has `"strict": false` set in its TypeScript compiler options. This means `noImplicitAny` and other strict checks are disabled, so indexing `unknown` (e.g., `object?.[kSecureFields]`) does NOT produce TS7053. Do not flag TS7053 or related strict-mode errors for files under `packages/apps/src/`.

📚 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-voip/src/context/MediaCallInstanceContext.ts

📚 Learning: 2026-02-26T19:25:44.063Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In the Rocket.Chat repository, do not reference Biome lint rules in code review feedback. Biome is not used even if biome.json exists; only reference Biome rules if there is explicit, project-wide usage documented. For TypeScript files, review lint implications without Biome guidance unless the project enables Biome rules.

Applied to files:

• packages/ui-voip/src/context/MediaCallInstanceContext.ts

📚 Learning: 2026-02-26T19:25:44.063Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In this repository (RocketChat/Rocket.Chat), Biome lint rules are not used even if a biome.json exists. When reviewing TypeScript files (e.g., packages/ui-voip/src/providers/useMediaSession.ts), ensure lint suggestions do not reference Biome-specific rules. Rely on general ESLint/TypeScript lint rules and project conventions instead.

Applied to files:

• packages/ui-voip/src/context/MediaCallInstanceContext.ts

📚 Learning: 2026-05-06T12:21:44.083Z

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 40256
File: apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx:121-149
Timestamp: 2026-05-06T12:21:44.083Z
Learning: Field wrappers in rocket.chat/fuselage-forms (Field, FieldLabel, FieldRow, FieldError, FieldHint) auto-create htmlFor/id associations, aria-describedby, and role="alert" for errors. Do not manually set htmlFor, id, aria-describedby, or role attributes when using these wrappers. This automatic wiring does not apply to plain rocket.chat/fuselage components, which require explicit ID wiring per the accessibility docs. In code reviews, prefer using fuselage-forms wrappers for form fields and verify there is no unnecessary manual ID/aria wiring in files that use these wrappers. If a component uses plain fuselage components, ensure proper id wiring as per docs.

Applied to files:

• packages/ui-voip/src/context/MediaCallInstanceContext.ts
• packages/ui-voip/src/components/Widget/WidgetHeader.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx
• packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx

📚 Learning: 2026-03-27T14:52:56.865Z

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:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

• packages/ui-voip/src/components/Widget/WidgetHeader.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx
• packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.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-voip/src/components/Widget/WidgetHeader.tsx

📚 Learning: 2026-02-26T19:22:29.385Z

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:29.385Z
Learning: For TSX files in the UI VOIP package, ensure that when a media session state is 'unavailable', the voiceCall action is excluded from the actions object passed to CallHistoryActions so it does not render in the menu. This filtering should occur upstream (before getItems is called) to avoid tooltips or UI hints for unavailable actions. If there are multiple actions with availability states, implement a centralized helper to filter actions based on session state.

Applied to files:

• packages/ui-voip/src/components/Widget/WidgetHeader.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx
• packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx

📚 Learning: 2026-05-05T12:34:29.042Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 40331
File: packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx:69-69
Timestamp: 2026-05-05T12:34:29.042Z
Learning: In Rocket.Chat’s `packages/ui-voip` UI (e.g., media/call widgets), voice/media calls are only supported in Direct Message (DM) rooms. Rocket.Chat models a DM as a “room” with exactly two participants, so handlers like `onClickDirectMessage` are the correct destination—even when the UI text/element says “Open in room” (e.g., on the shared screen card/`StreamCard`). During review, don’t flag a “DM vs room” mismatch for these cases; they intentionally map to the same destination.

Applied to files:

• packages/ui-voip/src/components/Widget/WidgetHeader.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx
• packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx

📚 Learning: 2025-12-18T15:18:31.688Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37773
File: apps/meteor/client/views/mediaCallHistory/MediaCallHistoryInternal.tsx:24-34
Timestamp: 2025-12-18T15:18:31.688Z
Learning: In apps/meteor/client/views/mediaCallHistory/MediaCallHistoryInternal.tsx, for internal call history items, the item.contactId is guaranteed to always match either the caller.id or callee.id in the call data, so the contact resolution in getContact will never result in undefined.

Applied to files:

• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.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-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx
• packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx
• packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx

🔇 Additional comments (5)

packages/ui-voip/src/components/Widget/WidgetHeader.tsx (1)

2-2: LGTM!

Also applies to: 10-10

packages/ui-voip/src/context/MediaCallInstanceContext.ts (1)

16-16: LGTM!

packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx (1)

26-26: LGTM!

Also applies to: 41-41

packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx (1)

33-33: LGTM!

packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx (1)

23-23: LGTM!

---

Walkthrough

The PR removes explicit ReactElement return type annotations from a React component and Storybook story files, allowing TypeScript to infer types implicitly. Additionally, a context ref type is broadened to allow null-valued references. All changes are isolated to the packages/ui-voip/ package.

Changes

React type annotation refactoring in ui-voip

Layer / File(s)	Summary
WidgetHeader component type simplification packages/ui-voip/src/components/Widget/WidgetHeader.tsx	React import narrowed to exclude ReactElement, and the component's explicit return type annotation removed while preserving rendering behavior.
MediaCallInstanceContext ref type broadening packages/ui-voip/src/context/MediaCallInstanceContext.ts	audioElement ref type updated to accept RefObject<HTMLAudioElement | null>, permitting null-valued references.
Storybook stories type cleanup packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx, packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx, packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx	ReactElement type imports and explicit return type annotations removed from three story decorator callbacks.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• RocketChat/Rocket.Chat#40804: Applies identical type annotation refactoring pattern across other UI components by removing explicit ReactElement annotations and imports.
• RocketChat/Rocket.Chat#40806: Same refactoring approach—removes explicit ReactElement return type annotations in the ui-video-conf package components.
• RocketChat/Rocket.Chat#40805: Related type-level refactoring removing explicit ReactElement annotations from UI components and stories.

Suggested labels

type: chore

Suggested reviewers

• dougfabris
• ggazzo

🚥 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 clearly and concisely describes the main change: removing unnecessary ReactElement type annotations across ui-voip components, which aligns with all file modifications shown in the changeset.
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

• X
• Mastodon
• Reddit
• LinkedIn

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

[dionisio-bot]

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.06%. Comparing base (0533748) to head (88d962e).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #40807   +/-   ##
========================================
  Coverage    70.06%   70.06%           
========================================
  Files         3337     3337           
  Lines       123506   123506           
  Branches     22051    22041   -10     
========================================
+ Hits         86530    86537    +7     
+ Misses       33617    33616    -1     
+ Partials      3359     3353    -6     

Flag	Coverage Δ
e2e	59.34% <ø> (-0.06%)	⬇️
e2e-api	47.20% <ø> (+0.94%)	⬆️
unit	70.85% <100.00%> (ø)

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.

[cubic-dev-ai]

No issues found across 5 files

_{Re-trigger cubic}