fix: show error state with retry when video conference block fails to load

[KumarHarshit3603]

Proposed changes

When the video conference block failed to load (e.g. network error or API failure), the component only showed a loading skeleton with no way to recover. This PR adds a proper error state with a retry action.

Issue

• Where: packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx
• What: On result.isError, the component returned the same <VideoConfMessageSkeleton /> as for loading (result.isPending), so users saw an endless skeleton with no explanation or retry.
• Why it matters: Users could not tell that something went wrong or try again without refreshing or leaving the view.

Changes

1. Separate loading and error handling

   • Loading (result.isPending): Still shows VideoConfMessageSkeleton (unchanged).
   • Error (result.isError): Renders an explicit error state instead of the skeleton.

2. New error state UI

   • Reuses the same message shell (VideoConfMessage / VideoConfMessageRow / VideoConfMessageContent) so the block looks consistent with other video conf states.
   • Uses Fuselage States:
     • Icon: Warning (danger variant).
     • Title: “Something went wrong” (Something_went_wrong).
     • Subtitle: Error message from the query when available, otherwise the generic “We couldn’t retrieve any data” message.
     • Action: “Retry” button that calls result.refetch() to re-run the request.

3. Dependencies

   • Imports from @rocket.chat/fuselage: Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle.

The behavior and layout match the error + retry pattern used elsewhere (e.g. DeviceManagementTable), adapted to the video conference message block.

Issue(s)

• Fixes the missing error handling noted by the // TODO: error handling in VideoConferenceBlock.tsx (previously around lines 111–114).

Steps to test or reproduce

1. Open a room that shows a video conference block (message with a call / “Join”).
2. Simulate a failure (e.g. disconnect network, or temporarily break /v1/video-conference.info).
3. Before: Only the loading skeleton is shown, with no way to retry.
4. After: An error state appears with “Something went wrong”, the error/generic message, and a “Retry” button; clicking “Retry” refetches and, on success, shows the normal block again.
5. With network/API working, the block should still load and show the skeleton while loading, then the normal content when ready.

Summary by CodeRabbit

• Bug Fixes
  • Improved error handling for the video conference block: displays a clear, user-friendly error screen with warning icon, title, message (with fallback) and a Retry button to recover from failures. Loading state is preserved via a skeleton while requests are pending, ensuring smoother and more informative user feedback.

[dionisio-bot]

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

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2a063de

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]

No actionable comments were generated in the recent review. 🎉

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b047817 and 46cc6ac.

📒 Files selected for processing (1)

• packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: cubic · AI code reviewer

---

Walkthrough

A single-file change adds explicit error handling UI to the VideoConferenceBlock component, replacing a TODO with a structured error message and retry button. Control flow now checks pending first, then error, and new fuselage UI components are imported to compose the error state.

Changes

Cohort / File(s)	Summary
Error Handling UI packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx	Added explicit error state rendering with a warning icon, title, error message (with fallback), and Retry button that calls result.refetch(). Adjusted control flow to render skeleton on pending before checking error; added imports for Box, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A carrot click, a retry gleams,
No more TODOs haunting our dreams,
Error lines read clear and spry,
A button hops to try, retry,
The conference block bounds to the sky! 🐰✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly and concisely summarizes the main change: adding error state UI with retry functionality to the video conference block when it fails to load, which directly aligns with the primary objective of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a1c210d and b047817.

📒 Files selected for processing (1)

• packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

🧰 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/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

🧠 Learnings (1)

📚 Learning: 2025-10-28T16:53:42.761Z

Learnt from: ricardogarim
Repo: RocketChat/Rocket.Chat PR: 37205
File: ee/packages/federation-matrix/src/FederationMatrix.ts:296-301
Timestamp: 2025-10-28T16:53:42.761Z
Learning: In the Rocket.Chat federation-matrix integration (ee/packages/federation-matrix/), the createRoom method from rocket.chat/federation-sdk will support a 4-argument signature (userId, roomName, visibility, displayName) in newer versions. Code using this 4-argument call is forward-compatible with planned library updates and should not be flagged as an error.

Applied to files:

• packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: cubic · AI code reviewer

🔇 Additional comments (1)

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx (1)

2-2: LGTM — all new imports are consumed in the error state block.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx`:
- Line 126: The translation key "We_Could_not_retrive_any_data" is misspelled
and must be renamed to "We_Could_not_retrieve_any_data" across locales and code
references; update the key in all language files under
packages/i18n/src/locales/ (replace the misspelled key with the corrected one)
and then update every code reference to the old key (e.g., in
VideoConferenceBlock component StatesSubtitle usage, AccountTokensTable,
DeviceManagementInfoWithData, DeviceManagementTable) to use
"We_Could_not_retrieve_any_data"; after renaming, run the i18n build/extraction
or linting steps and run the app/tests to ensure no missing-key regressions.
- Around line 124-128: The error message access is unsafe because
useVideoConfData returns useQuery without an explicit error type (TError
defaults to unknown); update the hook useVideoConfData to call useQuery with an
Error error type (e.g., useQuery<..., Error>(...)) so result.error is typed as
Error and result.error.message is allowed, or alternatively narrow the error in
the component (VideoConferenceBlock) with a type guard before reading
result.error.message; locate useVideoConfData (the hook that wraps useQuery) and
adjust its generic error type or add a runtime/type-guard in the component
before using StatesSubtitle to render result.error.message.

[cubic-dev-ai]

No issues found across 1 file