Automated cherry pick of #2961 (#2985)

* Enable emojis for profile icons from webhooks

Removes borders from profile icons when it is from a custom URL.

* feat: reapply border for all profile pictures and shrink emojis

* feat: remove border from emoji profile pictures

* feat: decide if post has emoji icon through props instead of url

* refactor: better checking of potentially undefined property

Co-Authored-By: Elias Nahum <nahumhbl@gmail.com>

app/components/post_profile_picture/index.js

@@ -4,6 +4,7 @@
 import {connect} from 'react-redux';
 
 import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
+import {Client4} from 'mattermost-redux/client';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
@@ -19,14 +20,17 @@ function mapStateToProps(state, ownProps) {
     const post = ownProps.post;
     const user = getUser(state, post.user_id);
 
+    const overrideIconUrl = Client4.getAbsoluteUrl(post?.props?.override_icon_url); // eslint-disable-line camelcase
+
     return {
         enablePostIconOverride: config.EnablePostIconOverride === 'true' && post?.props?.use_user_icon !== 'true', // eslint-disable-line camelcase
         fromWebHook: post?.props?.from_webhook === 'true', // eslint-disable-line camelcase
         isSystemMessage: isSystemMessage(post),
         fromAutoResponder: fromAutoResponder(post),
-        overrideIconUrl: post?.props?.override_icon_url, // eslint-disable-line camelcase
+        overrideIconUrl,
         userId: post.user_id,
         isBot: (user ? user.is_bot : false),
+        isEmoji: Boolean(post?.props?.override_icon_emoji), // eslint-disable-line camelcase
         theme: getTheme(state),
     };
 }

app/components/post_profile_picture/post_profile_picture.js

@@ -22,6 +22,7 @@ export default class PostProfilePicture extends PureComponent {
         theme: PropTypes.object,
         userId: PropTypes.string,
         isBot: PropTypes.bool,
+        isEmoji: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -39,6 +40,7 @@ export default class PostProfilePicture extends PureComponent {
             theme,
             userId,
             isBot,
+            isEmoji,
         } = this.props;
 
         if (isSystemMessage && !fromAutoResponder && !isBot) {
@@ -55,15 +57,26 @@ export default class PostProfilePicture extends PureComponent {
 
         if (fromWebHook && enablePostIconOverride) {
             const icon = overrideIconUrl ? {uri: overrideIconUrl} : webhookIcon;
+            const frameSize = ViewTypes.PROFILE_PICTURE_SIZE;
+            const pictureSize = isEmoji ? ViewTypes.PROFILE_PICTURE_EMOJI_SIZE : ViewTypes.PROFILE_PICTURE_SIZE;
+            const borderRadius = isEmoji ? 0 : ViewTypes.PROFILE_PICTURE_SIZE / 2;
 
             return (
-                <View>
+                <View
+                    style={{
+                        borderRadius,
+                        overflow: 'hidden',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: frameSize,
+                        width: frameSize,
+                    }}
+                >
                     <Image
                         source={icon}
                         style={{
-                            height: ViewTypes.PROFILE_PICTURE_SIZE,
-                            width: ViewTypes.PROFILE_PICTURE_SIZE,
-                            borderRadius: ViewTypes.PROFILE_PICTURE_SIZE / 2,
+                            height: pictureSize,
+                            width: pictureSize,
                         }}
                     />
                 </View>

app/constants/view.js

@@ -110,6 +110,7 @@ export default {
     IOSX_TOP_PORTRAIT: 88,
     STATUS_BAR_HEIGHT: 20,
     PROFILE_PICTURE_SIZE: 32,
+    PROFILE_PICTURE_EMOJI_SIZE: 28,
     DATA_SOURCE_USERS: 'users',
     DATA_SOURCE_CHANNELS: 'channels',
     NotificationLevels,

app/screens/notification/notification.js

@@ -16,6 +16,7 @@ import {Navigation} from 'react-native-navigation';
 import * as Animatable from 'react-native-animatable';
 import {PanGestureHandler} from 'react-native-gesture-handler';
 
+import {Client4} from 'mattermost-redux/client';
 import {isDirectChannel} from 'mattermost-redux/utils/channel_utils';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
@@ -167,7 +168,8 @@ export default class Notification extends PureComponent {
         );
 
         if (data.from_webhook && config.EnablePostIconOverride === 'true' && data.use_user_icon !== 'true') {
-            const wsIcon = data.override_icon_url ? {uri: data.override_icon_url} : webhookIcon;
+            const overrideIconURL = Client4.getAbsoluteUrl(data.override_icon_url); // eslint-disable-line camelcase
+            const wsIcon = data.override_icon_url ? {uri: overrideIconURL} : webhookIcon;
             icon = (
                 <Image
                     source={wsIcon}