Merge pull request #15680 from Expensify/beaman-showThumbnailAvatarInLHN

Show user's thumbnail avatar in the LHN (in Settings button at the top)

src/components/AvatarWithIndicator.js

@@ -15,6 +15,7 @@ import {policyPropTypes} from '../pages/workspace/withPolicy';
 import walletTermsPropTypes from '../pages/EnablePayments/walletTermsPropTypes';
 import * as PolicyUtils from '../libs/PolicyUtils';
 import * as PaymentMethods from '../libs/actions/PaymentMethods';
+import * as ReportUtils from '../libs/ReportUtils';
 
 const propTypes = {
     /** URL for the avatar */
@@ -89,7 +90,7 @@ const AvatarWithIndicator = (props) => {
             <Tooltip text={props.tooltipText}>
                 <Avatar
                     imageStyles={[isLarge ? styles.avatarLarge : null]}
-                    source={props.source}
+                    source={ReportUtils.getSmallSizeAvatar(props.source)}
                     size={props.size}
                 />
                 {shouldShowIndicator && (

src/libs/ReportUtils.js

@@ -558,6 +558,28 @@ function getFullSizeAvatar(avatarURL, login) {
     return source.replace('_128', '');
 }
 
+/**
+ * Small sized avatars end with _128.<file-type>. This adds the _128 at the end of the
+ * source URL (before the file type) if it doesn't exist there already.
+ *
+ * @param {String} avatarURL
+ * @param {String} login
+ * @returns {String|Function}
+ */
+function getSmallSizeAvatar(avatarURL, login) {
+    const source = getAvatar(avatarURL, login);
+    if (!_.isString(source)) {
+        return source;
+    }
+
+    // If image source already has _128 at the end, the given avatar URL is already what we want to use here.
+    const lastPeriodIndex = source.lastIndexOf('.');
+    if (source.substring(lastPeriodIndex - 4, lastPeriodIndex) === '_128') {
+        return source;
+    }
+    return `${source.substring(0, lastPeriodIndex)}_128${source.substring(lastPeriodIndex)}`;
+}
+
 /**
  * Returns the appropriate icons for the given chat report using the stored personalDetails.
  * The Avatar sources can be URLs or Icon components according to the chat type.
@@ -1690,5 +1712,6 @@ export {
     getCommentLength,
     openReportFromDeepLink,
     getFullSizeAvatar,
+    getSmallSizeAvatar,
     getIOUOptions,
 };