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

4 files changed, 51 insertions, 30 deletions

diff --git a/webapp/actions/user_actions.jsx b/webapp/actions/user_actions.jsx
index 304d36a62..9b5bc985c 100644
--- a/webapp/actions/user_actions.jsx
+++ b/webapp/actions/user_actions.jsx
@@ -135,6 +135,7 @@ function populateDMChannelsWithProfiles(userIds) {
     const currentUserId = UserStore.getCurrentId();
 
     for (let i = 0; i < userIds.length; i++) {
+        // TODO There's a race condition here for DM channels if those channels aren't loaded yet
         const channelName = getDirectChannelName(currentUserId, userIds[i]);
         const channel = ChannelStore.getByName(channelName);
         if (channel) {
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
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index a8344b1c5..fd1c42135 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -1,7 +1,7 @@
 @charset 'UTF-8';
 
 .channel-header {
-    @include flex(0 0 56px);
+    @include flex(0 0 57px);
     border-left: none;
     font-size: 14px;
     line-height: 56px;
diff --git a/webapp/utils/async_client.jsx b/webapp/utils/async_client.jsx
index efa9eeb2b..c281f2893 100644
--- a/webapp/utils/async_client.jsx
+++ b/webapp/utils/async_client.jsx
@@ -298,15 +298,17 @@ export function getChannelMember(channelId, userId) {
 }
 
 export function getUser(userId) {
-    if (isCallInProgress(`getUser${userId}`)) {
+    const callName = `getUser${userId}`;
+
+    if (isCallInProgress(callName)) {
         return;
     }
 
-    callTracker[`getUser${userId}`] = utils.getTimestamp();
+    callTracker[callName] = utils.getTimestamp();
     Client.getUser(
         userId,
         (data) => {
-            callTracker[`getUser${userId}`] = 0;
+            callTracker[callName] = 0;
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_PROFILE,
@@ -314,23 +316,25 @@ export function getUser(userId) {
             });
         },
         (err) => {
-            callTracker[`getUser${userId}`] = 0;
+            callTracker[callName] = 0;
             dispatchError(err, 'getUser');
         }
     );
 }
 
 export function getProfiles(offset = UserStore.getPagingOffset(), limit = Constants.PROFILE_CHUNK_SIZE) {
-    if (isCallInProgress(`getProfiles${offset}${limit}`)) {
+    const callName = `getProfiles${offset}${limit}`;
+
+    if (isCallInProgress(callName)) {
         return;
     }
 
-    callTracker[`getProfiles${offset}${limit}`] = utils.getTimestamp();
+    callTracker[callName] = utils.getTimestamp();
     Client.getProfiles(
         offset,
         limit,
         (data) => {
-            callTracker[`getProfiles${offset}${limit}`] = 0;
+            callTracker[callName] = 0;
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_PROFILES,
@@ -338,24 +342,26 @@ export function getProfiles(offset = UserStore.getPagingOffset(), limit = Consta
             });
         },
         (err) => {
-            callTracker[`getProfiles${offset}${limit}`] = 0;
+            callTracker[callName] = 0;
             dispatchError(err, 'getProfiles');
         }
     );
 }
 
 export function getProfilesInTeam(teamId = TeamStore.getCurrentId(), offset = UserStore.getInTeamPagingOffset(), limit = Constants.PROFILE_CHUNK_SIZE) {
-    if (isCallInProgress(`getProfilesInTeam${offset}${limit}`)) {
+    const callName = `getProfilesInTeam${teamId}${offset}${limit}`;
+
+    if (isCallInProgress(callName)) {
         return;
     }
 
-    callTracker[`getProfilesInTeam${offset}${limit}`] = utils.getTimestamp();
+    callTracker[callName] = utils.getTimestamp();
     Client.getProfilesInTeam(
         teamId,
         offset,
         limit,
         (data) => {
-            callTracker[`getProfilesInTeam${offset}${limit}`] = 0;
+            callTracker[callName] = 0;
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_PROFILES_IN_TEAM,
@@ -366,24 +372,26 @@ export function getProfilesInTeam(teamId = TeamStore.getCurrentId(), offset = Us
             });
         },
         (err) => {
-            callTracker[`getProfilesInTeam${offset}${limit}`] = 0;
+            callTracker[callName] = 0;
             dispatchError(err, 'getProfilesInTeam');
         }
     );
 }
 
 export function getProfilesInChannel(channelId = ChannelStore.getCurrentId(), offset = UserStore.getInChannelPagingOffset(), limit = Constants.PROFILE_CHUNK_SIZE) {
-    if (isCallInProgress(`getProfilesInChannel${offset}${limit}`)) {
+    const callName = `getProfilesInChannel${channelId}${offset}${limit}`;
+
+    if (isCallInProgress()) {
         return;
     }
 
-    callTracker[`getProfilesInChannel${offset}${limit}`] = utils.getTimestamp();
+    callTracker[callName] = utils.getTimestamp();
     Client.getProfilesInChannel(
         channelId,
         offset,
         limit,
         (data) => {
-            callTracker[`getProfilesInChannel${offset}${limit}`] = 0;
+            callTracker[callName] = 0;
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_PROFILES_IN_CHANNEL,
@@ -396,24 +404,26 @@ export function getProfilesInChannel(channelId = ChannelStore.getCurrentId(), of
             loadStatusesForProfilesMap(data);
         },
         (err) => {
-            callTracker[`getProfilesInChannel${offset}${limit}`] = 0;
+            callTracker[callName] = 0;
             dispatchError(err, 'getProfilesInChannel');
         }
     );
 }
 
 export function getProfilesNotInChannel(channelId = ChannelStore.getCurrentId(), offset = UserStore.getNotInChannelPagingOffset(), limit = Constants.PROFILE_CHUNK_SIZE) {
-    if (isCallInProgress(`getProfilesNotInChannel${offset}${limit}`)) {
+    const callName = `getProfilesNotInChannel${channelId}${offset}${limit}`;
+
+    if (isCallInProgress(callName)) {
         return;
     }
 
-    callTracker[`getProfilesNotInChannel${offset}${limit}`] = utils.getTimestamp();
+    callTracker[callName] = utils.getTimestamp();
     Client.getProfilesNotInChannel(
         channelId,
         offset,
         limit,
         (data) => {
-            callTracker[`getProfilesNotInChannel${offset}${limit}`] = 0;
+            callTracker[callName] = 0;
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_PROFILES_NOT_IN_CHANNEL,
@@ -426,14 +436,16 @@ export function getProfilesNotInChannel(channelId = ChannelStore.getCurrentId(),
             loadStatusesForProfilesMap(data);
         },
         (err) => {
-            callTracker[`getProfilesNotInChannel${offset}${limit}`] = 0;
+            callTracker[callName] = 0;
             dispatchError(err, 'getProfilesNotInChannel');
         }
     );
 }
 
 export function getProfilesByIds(userIds) {
-    if (isCallInProgress('getProfilesByIds')) {
+    const callName = 'getProfilesByIds' + JSON.stringify(userIds);
+
+    if (isCallInProgress(callName)) {
         return;
     }
 
@@ -441,11 +453,11 @@ export function getProfilesByIds(userIds) {
         return;
     }
 
-    callTracker.getProfilesByIds = utils.getTimestamp();
+    callTracker[callName] = utils.getTimestamp();
     Client.getProfilesByIds(
         userIds,
         (data) => {
-            callTracker.getProfilesByIds = 0;
+            callTracker[callName] = 0;
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_PROFILES,
@@ -453,7 +465,7 @@ export function getProfilesByIds(userIds) {
             });
         },
         (err) => {
-            callTracker.getProfilesByIds = 0;
+            callTracker[callName] = 0;
             dispatchError(err, 'getProfilesByIds');
         }
     );