Hotfix: PLT-4779 Fixing scrolling on loading a channel and missing DM channel headers (#4584)

* Added all parameters to call tracker ids when getting profiles

* Changed channel header rendering to not depend on knowing all users in a DM channel

* Added comment about a race condition in UserActions.populateDMChannelsWithProfiles

* Added a fixed-height placeholder for the ChannelHeader when its state isn't valid for rendering

1 files changed, 13 insertions, 5 deletions

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index 1ce7b4a0e..213f7fd0a 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -68,12 +68,18 @@ export default class ChannelHeader extends React.Component {
         const stats = ChannelStore.getStats(this.props.channelId);
         const users = UserStore.getProfileListInChannel(this.props.channelId);
 
+        let otherUserId = null;
+        if (channel.type === 'D') {
+            otherUserId = Utils.getUserIdFromChannelName(channel);
+        }
+
         return {
             channel,
             memberChannel: ChannelStore.getMyMember(this.props.channelId),
             users,
             userCount: stats.member_count,
             currentUser: UserStore.getCurrentUser(),
+            otherUserId,
             enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true),
             isBusy: WebrtcStore.isBusy(),
             isFavorite: channel && ChannelUtils.isFavoriteChannel(channel)
@@ -84,7 +90,6 @@ export default class ChannelHeader extends React.Component {
         if (!this.state.channel ||
             !this.state.memberChannel ||
             !this.state.users ||
-            (Object.keys(this.state.users).length === 0 && this.state.channel.type === 'D') ||
             !this.state.userCount ||
             !this.state.currentUser) {
             return false;
@@ -240,7 +245,10 @@ export default class ChannelHeader extends React.Component {
         const flagIcon = Constants.FLAG_ICON_SVG;
 
         if (!this.validState()) {
-            return null;
+            // Use an empty div to make sure the header's height stays constant
+            return (
+                <div className='channel-header'/>
+            );
         }
 
         const channel = this.state.channel;
@@ -285,7 +293,7 @@ export default class ChannelHeader extends React.Component {
 
         if (isDirect) {
             const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-            const contact = this.state.users[0];
+            const otherUserId = this.state.otherUserId;
 
             const teammateId = Utils.getUserIdFromChannelName(channel);
             channelTitle = Utils.displayUsername(teammateId);
@@ -293,7 +301,7 @@ export default class ChannelHeader extends React.Component {
             const webrtcEnabled = global.mm_config.EnableWebrtc === 'true' && userMedia && Utils.isFeatureEnabled(PreReleaseFeatures.WEBRTC_PREVIEW);
 
             if (webrtcEnabled) {
-                const isOffline = UserStore.getStatus(contact.id) === UserStatuses.OFFLINE;
+                const isOffline = UserStore.getStatus(otherUserId) === UserStatuses.OFFLINE;
                 const busy = this.state.isBusy;
                 let circleClass = '';
                 let webrtcMessage;
@@ -321,7 +329,7 @@ export default class ChannelHeader extends React.Component {
                     <div className='webrtc__header'>
                         <a
                             href='#'
-                            onClick={() => this.initWebrtc(contact.id, !isOffline)}
+                            onClick={() => this.initWebrtc(otherUserId, !isOffline)}
                             disabled={isOffline}
                         >
                             <svg