fix: Broken contextual-bar app view on refresh

.changeset/young-nails-boil.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fixes contextual-bar not working by apps interaction after a page refresh.

apps/meteor/client/views/room/Room.tsx

@@ -80,6 +80,7 @@ const Room = (): ReactElement => {
 									</ErrorBoundary>
 								)) ||
 								(contextualBarView && (
+									// TODO: improve fallback handling
 									<ErrorBoundary fallback={null}>
 										<SelectedMessagesProvider>
 											<Suspense fallback={<ContextualbarSkeleton />}>

apps/meteor/client/views/room/hooks/useAppsContextualBar.spec.ts

@@ -0,0 +1,55 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useAppsContextualBar } from './useAppsContextualBar';
+import { useUiKitActionManager } from '../../../uikit/hooks/useUiKitActionManager';
+import { useRoomToolbox } from '../contexts/RoomToolboxContext';
+
+jest.mock('@rocket.chat/ui-contexts', () => ({
+	useRouteParameter: jest.fn((param: string) => {
+		if (param === 'context') return 'test-context';
+		if (param === 'tab') return 'app';
+		return undefined;
+	}),
+}));
+
+jest.mock('../../../uikit/hooks/useUiKitActionManager', () => ({
+	useUiKitActionManager: jest.fn(),
+}));
+jest.mock('../contexts/RoomToolboxContext', () => ({
+	useRoomToolbox: jest.fn(),
+}));
+
+const mockGetInteractionPayloadByViewId = jest.fn();
+const mockOn = jest.fn();
+const mockOff = jest.fn();
+const mockCloseTab = jest.fn();
+
+beforeEach(() => {
+	(useUiKitActionManager as jest.Mock).mockReturnValue({
+		getInteractionPayloadByViewId: mockGetInteractionPayloadByViewId,
+		on: mockOn,
+		off: mockOff,
+	});
+	(useRoomToolbox as jest.Mock).mockReturnValue({ closeTab: mockCloseTab });
+});
+
+afterEach(() => {
+	jest.clearAllMocks();
+});
+
+it('should return the view when present', () => {
+	const view = { id: 'view1' };
+	mockGetInteractionPayloadByViewId.mockReturnValue({ view });
+
+	const { result } = renderHook(() => useAppsContextualBar());
+
+	expect(result.current).toBe(view);
+});
+
+it('should call closeTab if view is not present', () => {
+	mockGetInteractionPayloadByViewId.mockReturnValue(undefined);
+
+	renderHook(() => useAppsContextualBar());
+
+	expect(mockCloseTab).toHaveBeenCalled();
+});

apps/meteor/client/views/room/hooks/useAppsContextualBar.ts

@@ -2,30 +2,40 @@ import { useRouteParameter } from '@rocket.chat/ui-contexts';
 import { useCallback, useSyncExternalStore } from 'react';
 
 import { useUiKitActionManager } from '../../../uikit/hooks/useUiKitActionManager';
+import { useRoomToolbox } from '../contexts/RoomToolboxContext';
 
 export const useAppsContextualBar = () => {
-	const viewId = useRouteParameter('context');
+	const context = useRouteParameter('context');
 	const actionManager = useUiKitActionManager();
+	const tab = useRouteParameter('tab');
+	const { closeTab } = useRoomToolbox();
 
 	const getSnapshot = useCallback(() => {
-		if (!viewId) {
+		if (tab !== 'app' || !context) {
 			return undefined;
 		}
 
-		return actionManager.getInteractionPayloadByViewId(viewId)?.view;
-	}, [actionManager, viewId]);
+		return actionManager.getInteractionPayloadByViewId(context)?.view;
+	}, [actionManager, context, tab]);
 
 	const subscribe = useCallback(
 		(handler: () => void) => {
-			if (!viewId) {
+			if (tab !== 'app' || !context) {
 				return () => undefined;
 			}
 
-			actionManager.on(viewId, handler);
+			const view = actionManager.getInteractionPayloadByViewId(context)?.view;
 
-			return () => actionManager.off(viewId, handler);
+			if (!view) {
+				closeTab();
+				return () => undefined;
+			}
+
+			actionManager.on(context, handler);
+
+			return () => actionManager.off(context, handler);
 		},
-		[actionManager, viewId],
+		[actionManager, closeTab, tab, context],
 	);
 
 	const view = useSyncExternalStore(subscribe, getSnapshot);