Skip to content

refactor(ui-voip): Make draggable optional and extract MediaCallWidgetViewRouter from MediaCallWidget - #41613

Merged
ggazzo merged 4 commits into
developfrom
ui-voip/refactorDraggableContext
Aug 3, 2026
Merged

refactor(ui-voip): Make draggable optional and extract MediaCallWidgetViewRouter from MediaCallWidget#41613
ggazzo merged 4 commits into
developfrom
ui-voip/refactorDraggableContext

Conversation

@gabriellsh

@gabriellsh gabriellsh commented Jul 28, 2026

Copy link
Copy Markdown
Member

Proposed changes (including videos or screenshots)

Issue(s)

DMVPR-26

Steps to test or reproduce

Further comments

Review in cubic

Summary by CodeRabbit

  • New Features
    • Added draggable call widgets that can be moved within the browser window.
    • Added configurable widget autofocus, enabled by default.
    • Improved automatic selection of call views, including screen sharing and transfer states.
  • Bug Fixes
    • Widgets now safely handle unavailable drag functionality.
    • Closed or unrecognized call sessions no longer display an empty widget.
  • Documentation
    • Updated the Storybook label to identify the draggable widget experience.

@dionisio-bot

dionisio-bot Bot commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

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

@changeset-bot

changeset-bot Bot commented Jul 28, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: f0db607

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

coderabbitai Bot commented Jul 28, 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 Plus

Run ID: 0d32e02d-9637-4860-a4ad-a30523bea3e4

📥 Commits

Reviewing files that changed from the base of the PR and between 2c497c5 and f0db607.

⛔ Files ignored due to path filters (2)
  • packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap is excluded by !**/*.snap
  • packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (1)
  • packages/ui-voip/src/components/Widget/WidgetBase.tsx
💤 Files with no reviewable changes (1)
  • packages/ui-voip/src/components/Widget/WidgetBase.tsx
📜 Recent review details
⏰ Context from checks skipped due to timeout. (4)
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: ⚙️ Variables Setup
  • GitHub Check: CodeQL-Build
  • GitHub Check: Hacktron Security Check
⚠️ CI failures not shown inline (5)

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ✅ **Has milestone or project**
- ✅ **Valid PR title**
- ✅ **Correct target version**

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ❌ **Has milestone or project** — This PR is missing the required milestone or project
- ✅ **Valid PR title**
- ✅ **Correct target version**

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ❌ **Has milestone or project** — This PR is missing the required milestone or project
- ✅ **Valid PR title**
- ✅ **Correct target version**

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ❌ **Has milestone or project** — This PR is missing the required milestone or project
- ✅ **Valid PR title**
- ✅ **Correct target version**

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ❌ **Has milestone or project** — This PR is missing the required milestone or project
- ✅ **Valid PR title**
- ✅ **Correct target version**

Walkthrough

The widget now uses shared draggable infrastructure and configurable autofocus. A provider owns draggable state and position callbacks. Media-call state selection moved into MediaCallWidgetViewRouter, while closed sessions render nothing.

Changes

Draggable media call widget

Layer / File(s) Summary
Shared draggable widget infrastructure
packages/ui-voip/src/components/Widget/*
Added WidgetBase and WidgetDraggableProvider. Updated Widget, WidgetDraggableContext, and WidgetHandle to use optional draggable context, callback refs, and configurable autofocus.

Media-call view routing and integration

Layer / File(s) Summary
Media-call view routing and integration
packages/ui-voip/src/views/MediaCallWidget/*
Added MediaCallWidgetViewRouter for session-state rendering. Wrapped the widget with WidgetDraggableProvider, added a closed-session guard, removed position-tracking props, and updated the Storybook title.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

Suggested labels: type: chore

Sequence Diagram(s)

sequenceDiagram
  participant MediaCallWidget
  participant WidgetDraggableProvider
  participant MediaCallWidgetViewRouter
  participant Widget
  participant CallView

  MediaCallWidget->>WidgetDraggableProvider: Initialize draggable widget state
  WidgetDraggableProvider->>MediaCallWidgetViewRouter: Render routed media-call content
  MediaCallWidgetViewRouter->>CallView: Select view from session state
  Widget->>WidgetDraggableProvider: Read draggable context
  WidgetDraggableProvider-->>Widget: Provide widget and handle refs
Loading
🚥 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 two main changes: optional draggable behavior and extraction of MediaCallWidgetViewRouter.
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.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch

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.

@gabriellsh gabriellsh changed the title refactor(ui-voip): Make draggable optional and extract "MediaCallWidgetViewRou… refactor(ui-voip): Make draggable optional and extract "MediaCallWidgetViewRouter" from MediaCallWidget Jul 28, 2026
@gabriellsh
gabriellsh force-pushed the ui-voip/refactorDraggableContext branch from de74bf5 to 89bfa9c Compare July 28, 2026 19:53
@codecov

codecov Bot commented Jul 28, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 82.41758% with 16 lines in your changes missing coverage. Please review.
✅ Project coverage is 68.75%. Comparing base (a27dd2f) to head (f0db607).
⚠️ Report is 31 commits behind head on develop.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #41613      +/-   ##
===========================================
+ Coverage    68.66%   68.75%   +0.08%     
===========================================
  Files         4138     4158      +20     
  Lines       159082   159741     +659     
  Branches     27942    28071     +129     
===========================================
+ Hits        109238   109833     +595     
- Misses       44696    44739      +43     
- Partials      5148     5169      +21     
Flag Coverage Δ
e2e 58.85% <ø> (+0.01%) ⬆️
e2e-api 45.71% <ø> (+0.08%) ⬆️
unit 70.72% <82.41%> (+0.06%) ⬆️

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
gabriellsh marked this pull request as ready for review July 31, 2026 21:49
@gabriellsh
gabriellsh marked this pull request as draft July 31, 2026 21:51
@gabriellsh
gabriellsh marked this pull request as ready for review July 31, 2026 21:51

@coderabbitai coderabbitai 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.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/ui-voip/src/components/Widget/WidgetBase.tsx (1)

6-7: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Remove implementation TODO comments.

Track unfinished work outside this component. The repository guideline prohibits code comments in implementation. I can prepare a follow-up issue for the draggable initial-position and accessibility work.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui-voip/src/components/Widget/WidgetBase.tsx` around lines 6 - 7,
Remove the implementation TODO comments near the top of WidgetBase, including
the draggable initial-position and accessibility notes. Do not replace them with
other comments; track this unfinished work externally.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui-voip/src/components/Widget/WidgetDraggableProvider.tsx`:
- Around line 19-21: Update the useLayoutEffect containing
boundingRef(document.body) to capture its return value and return it only when
it is a cleanup function, ensuring the document.body boundary ref cleanup
executes while preserving the existing effect dependency on boundingRef.

---

Nitpick comments:
In `@packages/ui-voip/src/components/Widget/WidgetBase.tsx`:
- Around line 6-7: Remove the implementation TODO comments near the top of
WidgetBase, including the draggable initial-position and accessibility notes. Do
not replace them with other comments; track this unfinished work externally.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0c5a886e-a977-4307-979c-5d2608ff6c8a

📥 Commits

Reviewing files that changed from the base of the PR and between 621768d and 89bfa9c.

⛔ Files ignored due to path filters (2)
  • packages/ui-voip/src/components/Widget/__snapshots__/Widget.spec.tsx.snap is excluded by !**/*.snap
  • packages/ui-voip/src/views/MediaCallWidget/__snapshots__/MediaCallWidget.spec.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (9)
  • packages/ui-voip/src/components/Widget/Widget.tsx
  • packages/ui-voip/src/components/Widget/WidgetBase.tsx
  • packages/ui-voip/src/components/Widget/WidgetDraggableContext.ts
  • packages/ui-voip/src/components/Widget/WidgetDraggableProvider.tsx
  • packages/ui-voip/src/components/Widget/WidgetHandle.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx
  • packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (2)
  • GitHub Check: cubic · AI code reviewer
  • GitHub Check: Hacktron Security Check
⚠️ CI failures not shown inline (3)

GitHub Actions: CI / 0_✅ Tests Done.txt: refactor(ui-voip): Make draggable optional and extract "MediaCallWidgetViewRouter" from MediaCallWidget

Conclusion: failure

View job details

##[group]Run if [[ 'success' != 'success' ]]; then
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'success' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'skipped' != 'success' && 'skipped' != 'skipped' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mif [[ 'failure' != 'success' ]]; then�[0m
 �[36;1m  exit 1�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mecho finished�[0m
 shell: /usr/bin/bash -e {0}
 env:
   TOOL_NODE_FLAGS: --max_old_space_size=4096
 ##[endgroup]
 ##[error]Process completed with exit code 1.

GitHub Actions: CI / 22_📦 Track Image Sizes.txt: refactor(ui-voip): Make draggable optional and extract "MediaCallWidgetViewRouter" from MediaCallWidget

Conclusion: failure

View job details

##[group]Run current_total=$(jq -r '.total' current-sizes.json)
 �[36;1mcurrent_total=$(jq -r '.total' current-sizes.json)�[0m
 �[36;1m�[0m
 �[36;1mif [[ ! -f baseline-sizes.json ]]; then�[0m
 �[36;1m  echo "No baseline available"�[0m
 �[36;1m  echo "size-diff=0" >> $GITHUB_OUTPUT�[0m
 �[36;1m  echo "size-diff-percent=0" >> $GITHUB_OUTPUT�[0m
 �[36;1m  echo "comment-triggered=false" >> $GITHUB_OUTPUT�[0m
 �[36;1m�[0m
 �[36;1m  cat > report.md << 'EOF'�[0m
 �[36;1m# 📦 Docker Image Size Report�[0m
 �[36;1m�[0m
 �[36;1m**Status:** First measurement - no baseline for comparison�[0m
 �[36;1m�[0m
 �[36;1m**Total Size:** $(numfmt --to=iec-i --suffix=B $current_total)�[0m
 �[36;1mEOF�[0m
 �[36;1m  exit 0�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mbaseline_total=$(jq -r '.total' baseline-sizes.json)�[0m
 �[36;1mdiff=$((current_total - baseline_total))�[0m
 �[36;1m�[0m
 �[36;1mif [[ $baseline_total -gt 0 ]]; then�[0m
 �[36;1m  percent=$(awk "BEGIN {printf \"%.2f\", ($diff / $baseline_total) * 100}")�[0m
 �[36;1melse�[0m
 �[36;1m  percent=0�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mecho "size-diff=$diff" >> $GITHUB_OUTPUT�[0m
 �[36;1mecho "size-diff-percent=$percent" >> $GITHUB_OUTPUT�[0m
 �[36;1m�[0m
 �[36;1m# Only comment when size is bigger than baseline; optionally require per-image thresholds�[0m
 �[36;1mTHRESHOLDS="$SIZE_THRESHOLDS"�[0m
 �[36;1mFAIL_THRESHOLDS="$FAIL_THRESHOLDS"�[0m
 �[36;1mcomment_triggered=false�[0m
 �[36;1mfail_triggered=false�[0m
 �[36;1mif [[ $diff -gt 0 ]]; then�[0m
 �[36;1m  if [[ -z "$THRESHOLDS" ]] || [[ "$THRESHOLDS" == "{}" ]]; then�[0m
 �[36;1m    comment_triggered=true�[0m
 �[36;1m  fi�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1mcolor="gray"�[0m
 �[36;1mif (( $(awk "BEGIN {print ($percent > 0.01)}") )); then�[0m
 �[36;1m  color="red"�[0m
 �[36;1melif (( $(awk "BEGIN {print ($percent < -0.01)}") )); then�[0m
 �[36;1m  color="green"�[0m
 �[36;1mfi�[0m
 �[36;1m�[0m
 �[36;1m# Generate report�[0m
 �[36;1mif [[ $diff -gt 0 ]]; then�[0m
 �[36;1m  emoji=...

GitHub Actions: CI / 20_🔨 Test Federation Matrix.txt: refactor(ui-voip): Make draggable optional and extract "MediaCallWidgetViewRouter" from MediaCallWidget

Conclusion: failure

View job details

)�[33m.�[39mtoHaveProperty(�[32m'_id'�[39m)�[33m;�[39m
      �[90m     |�[39m 					                         �[31m�[1m^�[22m�[39m
      �[90m 728 |�[39m 					expect(federatedChannel)�[33m.�[39mtoHaveProperty(�[32m'name'�[39m�[33m,�[39m channelName)�[33m;�[39m
      �[90m 729 |�[39m 					expect(federatedChannel)�[33m.�[39mtoHaveProperty(�[32m't'�[39m�[33m,�[39m �[32m'p'�[39m)�[33m;�[39m
      �[90m 730 |�[39m 					expect(federatedChannel)�[33m.�[39mtoHaveProperty(�[32m'federated'�[39m�[33m,�[39m �[36mtrue�[39m)�[33m;�[39m�[0m
       at Object.toHaveProperty (tests/end-to-end/messaging.spec.ts:727:31)
   ● Federation › Messaging › Media › On RC › Upload one Audio, and add a description › should appear in the list of files locally
     expect(received).toHaveProperty(path)
     Matcher error: received value must not be null nor undefined
     Received has value: undefined
     �[0m �[90m 725 |�[39m 					federatedChannel �[33m=�[39m createResponse�[33m.�[39mbody�[33m.�[39mgroup�[33m;�[39m
      �[90m 726 |�[39m
     �[31m�[1m>�[22m�[39m�[90m 727 |�[39m 					expect(federatedChannel)�[33m.�[39mtoHaveProperty(�[32m'_id'�[39m)�[33m;�[39m
      �[90m     |�[39m 					                         �[31m�[1m^�[22m�[39m
      �[90m 728 |�[39m 					expect(federatedChannel)�[33m.�[39mtoHaveProperty(�[32m'name'�[39m�[33m,�[39m channelName)�[33m;�[39m
      �[90m 729 |�[39m 					expect(federatedChannel)�[33m.�[39mtoHaveProperty(�[32m't'�[39m�[33m,�[39m �[32m'p'�[39m)�[33m;�[39m
      �[90m 730 |�[39m 					expect(federatedChannel)�[33m.�[39mtoHaveProperty(�[32m'federated'�[39m�[33m,�[39m �[36mtrue�[39m)�[33m;�[39m�[0m
       at Object.toHaveProperty (tests/end-to-end/messaging.spec.ts:727:31)
   ● Federation › Messaging › Media › On RC › Upload one Audio, and add a description › should be able to download the files locally and on the remote Element
     expect(received).toHaveProperty(path)
     Matcher error: received value must not be null nor undefined
     Received has value: undefi...
🧰 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/views/MediaCallWidget/MediaCallWidget.stories.tsx
  • packages/ui-voip/src/components/Widget/WidgetBase.tsx
  • packages/ui-voip/src/components/Widget/WidgetHandle.tsx
  • packages/ui-voip/src/components/Widget/WidgetDraggableProvider.tsx
  • packages/ui-voip/src/components/Widget/WidgetDraggableContext.ts
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx
  • packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
  • packages/ui-voip/src/components/Widget/Widget.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
🧠 Learnings (6)
📚 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/views/MediaCallWidget/MediaCallWidget.stories.tsx
  • packages/ui-voip/src/components/Widget/WidgetBase.tsx
  • packages/ui-voip/src/components/Widget/WidgetHandle.tsx
  • packages/ui-voip/src/components/Widget/WidgetDraggableProvider.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx
  • packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
  • packages/ui-voip/src/components/Widget/Widget.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.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/views/MediaCallWidget/MediaCallWidget.stories.tsx
  • packages/ui-voip/src/components/Widget/WidgetBase.tsx
  • packages/ui-voip/src/components/Widget/WidgetHandle.tsx
  • packages/ui-voip/src/components/Widget/WidgetDraggableProvider.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx
  • packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
  • packages/ui-voip/src/components/Widget/Widget.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.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/views/MediaCallWidget/MediaCallWidget.stories.tsx
  • packages/ui-voip/src/components/Widget/WidgetBase.tsx
  • packages/ui-voip/src/components/Widget/WidgetHandle.tsx
  • packages/ui-voip/src/components/Widget/WidgetDraggableProvider.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx
  • packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
  • packages/ui-voip/src/components/Widget/Widget.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
📚 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/views/MediaCallWidget/MediaCallWidget.stories.tsx
  • packages/ui-voip/src/components/Widget/WidgetBase.tsx
  • packages/ui-voip/src/components/Widget/WidgetHandle.tsx
  • packages/ui-voip/src/components/Widget/WidgetDraggableProvider.tsx
  • packages/ui-voip/src/components/Widget/WidgetDraggableContext.ts
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx
  • packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
  • packages/ui-voip/src/components/Widget/Widget.tsx
  • packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx
📚 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/components/Widget/WidgetDraggableContext.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/components/Widget/WidgetDraggableContext.ts
🔇 Additional comments (10)
packages/ui-voip/src/components/Widget/WidgetBase.tsx (1)

1-4: LGTM!

Also applies to: 8-41

packages/ui-voip/src/components/Widget/WidgetDraggableContext.ts (1)

1-12: LGTM!

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

1-18: LGTM!

Also applies to: 23-26

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

2-5: LGTM!

Also applies to: 12-28


7-10: 📐 Maintainability & Code Quality

Direct Widget consumers do not use removed props.

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

23-27: LGTM!

packages/ui-voip/src/views/MediaCallWidget/MediaCallWidgetViewRouter.tsx (1)

1-34: LGTM!

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

1-24: LGTM!

packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx (1)

60-60: LGTM!

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

21-21: LGTM!

Comment thread packages/ui-voip/src/components/Widget/WidgetDraggableProvider.tsx

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

All reported issues were addressed across 11 files

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

Comment thread packages/ui-voip/src/components/Widget/WidgetDraggableProvider.tsx
Comment thread packages/ui-voip/src/components/Widget/WidgetBase.tsx Outdated
@gabriellsh gabriellsh changed the title refactor(ui-voip): Make draggable optional and extract "MediaCallWidgetViewRouter" from MediaCallWidget refactor(ui-voip): Make draggable optional and extract MediaCallWidgetViewRouter from MediaCallWidget Aug 3, 2026

@pierre-lehnen-rc pierre-lehnen-rc 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.

This extra check for username needs to be removed.
I've opened a PR removing it from the current code, but since you're moving it to a separate component this won't cause conflicts.

@gabriellsh gabriellsh added this to the 8.8.0 milestone Aug 3, 2026
@ggazzo ggazzo added the stat: QA assured Means it has been tested and approved by a company insider label Aug 3, 2026
@dionisio-bot dionisio-bot Bot added the stat: ready to merge PR tested and approved waiting for merge label Aug 3, 2026
@gabriellsh
gabriellsh dismissed pierre-lehnen-rc’s stale review August 3, 2026 20:35

will be solved in another pr

@ggazzo
ggazzo added this pull request to the merge queue Aug 3, 2026
Merged via the queue into develop with commit 543c772 Aug 3, 2026
56 checks passed
@ggazzo
ggazzo deleted the ui-voip/refactorDraggableContext branch August 3, 2026 21:49
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.

3 participants