Fix clicking widget channel link (#582)

mattermost · Dec 5, 2023 · 2126351 · 2126351
1 parent d9ed7a7
commit 2126351
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 6 deletions.
diff --git a/e2e/tests/start_call.spec.ts b/e2e/tests/start_call.spec.ts
@@ -3,7 +3,13 @@ import {readFile} from 'fs/promises';
 
 import {adminState} from '../constants';
 import PlaywrightDevPage from '../page';
-import {getChannelNamesForTest, getUsernamesForTest, getUserStoragesForTest} from '../utils';
+import {
+    getChannelNamesForTest,
+    getChannelURL,
+    getUserIdxForTest,
+    getUsernamesForTest,
+    getUserStoragesForTest,
+} from '../utils';
 
 const userStorages = getUserStoragesForTest();
 const usernames = getUsernamesForTest();
@@ -454,3 +460,31 @@ test.describe('switching views', () => {
         await devPage.leaveCall();
     });
 });
+
+test.describe('ux', () => {
+    const userIdx = getUserIdxForTest();
+    test.use({storageState: userStorages[0]});
+
+    test('channel link', async ({page}) => {
+        const devPage = new PlaywrightDevPage(page);
+        await devPage.startCall();
+        await devPage.wait(1000);
+
+        // Check we are on the expected URL
+        await expect(page.url()).toEqual(getChannelURL(getChannelNamesForTest()[0]));
+
+        // Switch channel
+        await page.locator(`#sidebarItem_calls${userIdx + 1}`).click();
+
+        // Verify we switched channel
+        await expect(page.url()).toEqual(getChannelURL(`calls${userIdx + 1}`));
+
+        // Click channel link in widget
+        await page.locator('.calls-channel-link').click();
+
+        // Verify we switched channel through the link
+        await expect(page.url()).toEqual(getChannelURL(getChannelNamesForTest()[0]));
+
+        await devPage.leaveCall();
+    });
+});
diff --git a/e2e/utils.ts b/e2e/utils.ts
@@ -1,7 +1,7 @@
 import {chromium} from '@playwright/test';
 import * as fs from 'fs';
 
-import {channelPrefix, userPrefix} from './constants';
+import {baseURL, channelPrefix, defaultTeam, userPrefix} from './constants';
 import PlaywrightDevPage from './page';
 
 export const headers = {'X-Requested-With': 'XMLHttpRequest'};
@@ -71,3 +71,7 @@ export async function joinCall(userState: string) {
     await userPage.joinCall();
     return userPage;
 }
+
+export function getChannelURL(channelName: string) {
+    return `${baseURL}/${defaultTeam}/channels/${channelName}`;
+}
diff --git a/webapp/src/browser_routing.ts b/webapp/src/browser_routing.ts
@@ -4,7 +4,7 @@
 import React from 'react';
 
 // @ts-ignore
-const WebappUtils = window.WebappUtils;
+const WebappUtils = window.opener ? window.opener.WebappUtils : window.WebappUtils;
 
 export const navigateToURL = (urlPath: string) => {
     WebappUtils.browserHistory.push(urlPath);

diff --git a/webapp/src/components/call_widget/component.tsx b/webapp/src/components/call_widget/component.tsx
@@ -12,6 +12,7 @@ import {isDirectChannel, isGroupChannel, isOpenChannel, isPrivateChannel} from '
 import React, {CSSProperties} from 'react';
 import {IntlShape} from 'react-intl';
 import {compareSemVer} from 'semver-parser';
+import {navigateToURL} from 'src/browser_routing';
 import {AudioInputPermissionsError} from 'src/client';
 import Avatar from 'src/components/avatar/avatar';
 import Badge from 'src/components/badge';
@@ -1761,7 +1762,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
         if (this.props.global) {
             sendDesktopEvent('calls-widget-channel-link-click', message);
         } else {
-            window.postMessage({type: 'browser-history-push-return', message}, window.origin);
+            navigateToURL(this.props.channelURL);
         }
         this.props.trackEvent(Telemetry.Event.OpenChannelLink, Telemetry.Source.Widget);
     };

diff --git a/webapp/src/components/incoming_calls/hooks.ts b/webapp/src/components/incoming_calls/hooks.ts
@@ -14,6 +14,7 @@ import {useIntl} from 'react-intl';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {DID_NOTIFY_FOR_CALL, DID_RING_FOR_CALL} from 'src/action_types';
 import {dismissIncomingCallNotification, ringForCall, showSwitchCallModal, trackEvent} from 'src/actions';
+import {navigateToURL} from 'src/browser_routing';
 import {DEFAULT_RING_SOUND} from 'src/constants';
 import {logDebug} from 'src/log';
 import {
@@ -262,8 +263,7 @@ export const useOnChannelLinkClick = (call: IncomingCallNotification, onWidget =
     return () => {
         notificationsStopRinging();
         dispatch(trackEvent(Telemetry.Event.NotificationClickGotoChannel, source));
-        const win = window.opener ? window.opener : window;
-        win.postMessage({type: 'browser-history-push-return', message: {pathName: channelURL}}, window.origin);
+        navigateToURL(channelURL);
     };
 };