Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Mar 17, 2023
3 changes: 2 additions & 1 deletion src/components/AvatarWithIndicator.js
chiragsalian marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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 && (
Expand Down
21 changes: 21 additions & 0 deletions src/libs/ReportUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -547,6 +547,26 @@ 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);
const lastPeriodIndex = source.lastIndexOf('.');
Beamanator marked this conversation as resolved.
Show resolved Hide resolved

// If image source is not a String (so wouldn't have _128) or already has _128 at the end,
// given avatar URL is already what we want to use here.
if (!_.isString(source) || 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.
Expand Down Expand Up @@ -1678,5 +1698,6 @@ export {
getCommentLength,
openReportFromDeepLink,
getFullSizeAvatar,
getSmallSizeAvatar,
getIOUOptions,
};