[MM-219] Fix issue of username not visible in jitsi embed meeting (#240)

* [MM-219] Fix issue of username not visible in jitsi embed meeting * [MM-219] Add username field in the mock user data * [MM-219] Encode the meeting link * Fix typescript errors and snapshots * [MM-219]: Fixed review commentw * [MM-219]: Fixed review comments * [MM-219]: Fixed review comments --------- Co-authored-by: raghavaggarwal2308 <[email protected]> Co-authored-by: kshitij <[email protected]> Co-authored-by: Ben Schumacher <[email protected]>
mattermost-community · Jun 19, 2024 · ced05f5 · ced05f5
1 parent b240881
commit ced05f5
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 28 deletions.
diff --git a/webapp/src/components/conference/__snapshots__/conference.test.tsx.snap b/webapp/src/components/conference/__snapshots__/conference.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`Conference should render and initialize the conference interface 1`] =
       <Component />
     </FormattedMessage>
     <a
-      href="http://test-meeting-link/test#config.callDisplayName=\\"Test topic\\""
+      href="http://test-meeting-link/test#config.callDisplayName=%22Test%20topic%22"
       onClick={[Function]}
       rel="noopener noreferrer"
       style={
@@ -179,7 +179,7 @@ exports[`Conference should show the correct buttons depending on the state shoul
       <Component />
     </FormattedMessage>
     <a
-      href="http://test-meeting-link/test#config.callDisplayName=\\"Test topic\\""
+      href="http://test-meeting-link/test#config.callDisplayName=%22Test%20topic%22"
       onClick={[Function]}
       rel="noopener noreferrer"
       style={
@@ -289,7 +289,7 @@ exports[`Conference should show the correct buttons depending on the state shoul
       <Component />
     </FormattedMessage>
     <a
-      href="http://test-meeting-link/test#config.callDisplayName=\\"Test topic\\""
+      href="http://test-meeting-link/test#config.callDisplayName=%22Test%20topic%22"
       onClick={[Function]}
       rel="noopener noreferrer"
       style={
@@ -392,7 +392,7 @@ exports[`Conference should show the correct buttons depending on the state shoul
       <Component />
     </FormattedMessage>
     <a
-      href="http://test-meeting-link/test#config.callDisplayName=\\"Test topic\\""
+      href="http://test-meeting-link/test#config.callDisplayName=%22Test%20topic%22"
       onClick={[Function]}
       rel="noopener noreferrer"
       style={
@@ -471,7 +471,7 @@ exports[`Conference should show the the loading spinner depending on the state s
       <Component />
     </FormattedMessage>
     <a
-      href="http://test-meeting-link/test#config.callDisplayName=\\"Test topic\\""
+      href="http://test-meeting-link/test#config.callDisplayName=%22Test%20topic%22"
       onClick={[Function]}
       rel="noopener noreferrer"
       style={
@@ -574,7 +574,7 @@ exports[`Conference should show the the loading spinner depending on the state s
       <Component />
     </FormattedMessage>
     <a
-      href="http://test-meeting-link/test#config.callDisplayName=\\"Test topic\\""
+      href="http://test-meeting-link/test#config.callDisplayName=%22Test%20topic%22"
       onClick={[Function]}
       rel="noopener noreferrer"
       style={

diff --git a/webapp/src/components/conference/conference.test.tsx b/webapp/src/components/conference/conference.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {describe, expect, it} from '@jest/globals';
+import {describe, expect, it, jest} from '@jest/globals';
 import {shallow} from 'enzyme';
 
-import {Post} from 'mattermost-redux/types/posts';
+import {Post, PostMetadata, PostType} from 'mattermost-redux/types/posts';
 
 import Conference from './conference';
 
@@ -20,7 +20,7 @@ describe('Conference', () => {
         root_id: '',
         parent_id: '',
         original_id: '',
-        type: 'custom_jitsi',
+        type: 'custom_jitsi' as PostType,
         hashtags: '',
         props: {
             jwt_meeting_valid_until: 123,
@@ -30,7 +30,10 @@ describe('Conference', () => {
             meeting_topic: 'Test topic',
             meeting_id: 'test',
             meeting_personal: false
-        }
+        },
+        metadata: {} as PostMetadata,
+        pending_post_id: 'test',
+        reply_count: 100
     };
 
     const actions = {
@@ -42,7 +45,10 @@ describe('Conference', () => {
         post: basePost,
         jwt: null,
         actions,
-        currentUserId: 'test'
+        currentUser: {
+            id: 'mockId',
+            username: 'firstLast'
+        }
     };
 
     Conference.prototype.getViewportWidth = () => 10;

diff --git a/webapp/src/components/conference/conference.tsx b/webapp/src/components/conference/conference.tsx
@@ -15,7 +15,10 @@ const MATTERMOST_HEADER_HEIGHT = 60;
 const WINDOW_HEIGHT = 100;
 
 type Props = {
-    currentUserId: string,
+    currentUser: {
+        id: string;
+        username: string;
+    },
     post: Post | null,
     jwt: string | null,
     showPrejoinPage: boolean,
@@ -106,6 +109,9 @@ export default class Conference extends React.PureComponent<Props, State> {
                 this.setState({loading: false});
                 this.resizeIframe();
             },
+            userInfo: {
+                displayName: this.props.currentUser.username
+            },
             configOverwrite: {
                 // Disable the pre-join page
                 prejoinPageEnabled: this.props.meetingEmbedded && this.props.showPrejoinPage
@@ -184,7 +190,7 @@ export default class Conference extends React.PureComponent<Props, State> {
         this.api.executeCommand('hangup');
         setTimeout(() => {
             this.props.actions.openJitsiMeeting(null, null);
-            this.props.actions.setUserStatus(this.props.currentUserId, Constants.ONLINE);
+            this.props.actions.setUserStatus(this.props.currentUser.id, Constants.ONLINE);
             this.setState({
                 minimized: true,
                 loading: true,
@@ -238,7 +244,7 @@ export default class Conference extends React.PureComponent<Props, State> {
             meetingLink += `?jwt=${this.props.jwt}`;
         }
         meetingLink += `#config.callDisplayName="${post.props.meeting_topic || post.props.default_meeting_topic}"`;
-
+        meetingLink = encodeURI(meetingLink);
         return (
             <div style={style.buttons}>
                 {!this.props.showPrejoinPage && this.state.minimized && this.state.position === POSITION_TOP &&

diff --git a/webapp/src/components/conference/index.ts b/webapp/src/components/conference/index.ts
@@ -2,7 +2,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators, Dispatch} from 'redux';
 
 import {GenericAction} from 'mattermost-redux/types/actions';
-import {getCurrentUserId} from 'mattermost-redux/selectors/entities/common';
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/common';
 
 import {GlobalState, plugin} from 'types';
 import {openJitsiMeeting, setUserStatus} from 'actions';
@@ -13,7 +13,7 @@ function mapStateToProps(state: GlobalState) {
     const config = state[`plugins-${manifest.id}` as plugin].config;
 
     return {
-        currentUserId: getCurrentUserId(state),
+        currentUser: getCurrentUser(state),
         post: state[`plugins-${manifest.id}` as plugin].openMeeting,
         jwt: state[`plugins-${manifest.id}` as plugin].openMeetingJwt,
         showPrejoinPage: config.show_prejoin_page,

diff --git a/webapp/src/components/post_type_jitsi/__snapshots__/post_type_jitsi.test.tsx.snap b/webapp/src/components/post_type_jitsi/__snapshots__/post_type_jitsi.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`PostTypeJitsi should render a post if the post type is not null, and sh
             values={Object {}}
           />
           <a
-            href="http://test-meeting-link/test?jwt=xxxxxxxxxxxx#config.callDisplayName=\\"Test topic\\"&userInfo.displayName=\\"First Last\\""
+            href="http://test-meeting-link/test?jwt=xxxxxxxxxxxx#config.callDisplayName=%22Test%20topic%22&userInfo.displayName=%22firstLast%22"
             onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
@@ -84,7 +84,7 @@ exports[`PostTypeJitsi should render a post if the post type is not null, and sh
             <div>
               <a
                 className="btn btn-lg btn-primary"
-                href="http://test-meeting-link/test?jwt=xxxxxxxxxxxx#config.callDisplayName=\\"Test topic\\"&userInfo.displayName=\\"First Last\\""
+                href="http://test-meeting-link/test?jwt=xxxxxxxxxxxx#config.callDisplayName=%22Test%20topic%22&userInfo.displayName=%22firstLast%22"
                 onClick={[Function]}
                 rel="noopener noreferrer"
                 style={
@@ -207,7 +207,7 @@ exports[`PostTypeJitsi should render a post without token if there is no jwt tok
             values={Object {}}
           />
           <a
-            href="http://test-meeting-link/test#config.callDisplayName=\\"Test topic\\"&userInfo.displayName=\\"First Last\\""
+            href="http://test-meeting-link/test#config.callDisplayName=%22Test%20topic%22&userInfo.displayName=%22firstLast%22"
             onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
@@ -229,7 +229,7 @@ exports[`PostTypeJitsi should render a post without token if there is no jwt tok
             <div>
               <a
                 className="btn btn-lg btn-primary"
-                href="http://test-meeting-link/test#config.callDisplayName=\\"Test topic\\"&userInfo.displayName=\\"First Last\\""
+                href="http://test-meeting-link/test#config.callDisplayName=%22Test%20topic%22&userInfo.displayName=%22firstLast%22"
                 onClick={[Function]}
                 rel="noopener noreferrer"
                 style={
@@ -338,7 +338,7 @@ exports[`PostTypeJitsi should render the a different subtitle if the meeting is
             values={Object {}}
           />
           <a
-            href="http://test-meeting-link/test?jwt=xxxxxxxxxxxx#config.callDisplayName=\\"Test topic\\"&userInfo.displayName=\\"First Last\\""
+            href="http://test-meeting-link/test?jwt=xxxxxxxxxxxx#config.callDisplayName=%22Test%20topic%22&userInfo.displayName=%22firstLast%22"
             onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
@@ -360,7 +360,7 @@ exports[`PostTypeJitsi should render the a different subtitle if the meeting is
             <div>
               <a
                 className="btn btn-lg btn-primary"
-                href="http://test-meeting-link/test?jwt=xxxxxxxxxxxx#config.callDisplayName=\\"Test topic\\"&userInfo.displayName=\\"First Last\\""
+                href="http://test-meeting-link/test?jwt=xxxxxxxxxxxx#config.callDisplayName=%22Test%20topic%22&userInfo.displayName=%22firstLast%22"
                 onClick={[Function]}
                 rel="noopener noreferrer"
                 style={

diff --git a/webapp/src/components/post_type_jitsi/post_type_jitsi.test.tsx b/webapp/src/components/post_type_jitsi/post_type_jitsi.test.tsx
@@ -59,7 +59,8 @@ describe('PostTypeJitsi', () => {
         creatorName: 'test',
         currentUser: {
             first_name: 'First',
-            last_name: 'Last'
+            last_name: 'Last',
+            username: 'firstLast'
         },
         useMilitaryTime: false,
         meetingEmbedded: false,

diff --git a/webapp/src/components/post_type_jitsi/post_type_jitsi.tsx b/webapp/src/components/post_type_jitsi/post_type_jitsi.tsx
@@ -5,7 +5,6 @@ import {Theme} from 'mattermost-redux/types/preferences';
 import {ActionResult} from 'mattermost-redux/types/actions';
 import Constants from 'mattermost-redux/constants/general';
 import {UserProfile} from 'mattermost-redux/types/users';
-import {getFullName} from 'mattermost-redux/utils/user_utils';
 
 import Svgs from 'constants/svgs';
 
@@ -60,7 +59,7 @@ export class PostTypeJitsi extends React.PureComponent<Props, State> {
             if (this.props.post) {
                 const props = this.props.post.props;
                 let meetingLink = props.meeting_link + '?jwt=' + (this.state.meetingJwt);
-                meetingLink += `#config.callDisplayName="${props.meeting_topic || props.default_meeting_topic}"`;
+                meetingLink += `#config.callDisplayName=${encodeURIComponent(`"${props.meeting_topic || props.default_meeting_topic}"`)}`;
                 window.open(meetingLink, '_blank');
             }
         }
@@ -99,11 +98,11 @@ export class PostTypeJitsi extends React.PureComponent<Props, State> {
 
         let meetingLink = props.meeting_link;
         if (props.jwt_meeting) {
-            meetingLink += '?jwt=' + (props.meeting_jwt);
+            meetingLink += '?jwt=' + encodeURIComponent(props.meeting_jwt);
         }
 
-        meetingLink += `#config.callDisplayName="${props.meeting_topic || props.default_meeting_topic}"`;
-        meetingLink += `&userInfo.displayName="${getFullName(this.props.currentUser)}"`;
+        meetingLink += `#config.callDisplayName=${encodeURIComponent(`"${props.meeting_topic || props.default_meeting_topic}"`)}`;
+        meetingLink += `&userInfo.displayName=${encodeURIComponent(`"${this.props.currentUser.username}"`)}`;
 
         const preText = (
             <FormattedMessage