From 2c4558091806e831b840473fdf18f91fe72aa0a6 Mon Sep 17 00:00:00 2001
From: SP Singh <19812199+spcheema@users.noreply.github.com>
Date: Fri, 11 Aug 2023 22:59:47 +1000
Subject: [PATCH 1/7] Enable avatar preview for workspace & thread replies

---
 src/components/AttachmentModal.js             |  5 ++
 .../Attachments/AttachmentView/index.js       | 12 +++-
 src/components/RoomHeaderAvatars.js           | 69 ++++++++++++++-----
 3 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 665123852b77..bbfb21abb334 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -71,6 +71,9 @@ const propTypes = {
     ...withLocalizePropTypes,
 
     ...windowDimensionsPropTypes,
+
+    /** Denotes whether it is an avatar or a workspace avatar */
+    isWorkspaceAvatar: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -86,6 +89,7 @@ const defaultProps = {
     onModalShow: () => {},
     onModalHide: () => {},
     onCarouselAttachmentChange: () => {},
+    isWorkspaceAvatar: false,
 };
 
 function AttachmentModal(props) {
@@ -345,6 +349,7 @@ function AttachmentModal(props) {
                                 isAuthTokenRequired={isAuthTokenRequired}
                                 file={file}
                                 onToggleKeyboard={updateConfirmButtonVisibility}
+                                isWorkspaceAvatar={props.isWorkspaceAvatar}
                             />
                         )
                     )}
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 3ad643d34bcd..80871894316f 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -15,7 +15,7 @@ import variables from '../../../styles/variables';
 import AttachmentViewImage from './AttachmentViewImage';
 import AttachmentViewPdf from './AttachmentViewPdf';
 import addEncryptedAuthTokenToURL from '../../../libs/addEncryptedAuthTokenToURL';
-
+import * as StyleUtils from '../../../styles/StyleUtils';
 import {attachmentViewPropTypes, attachmentViewDefaultProps} from './propTypes';
 
 const propTypes = {
@@ -34,6 +34,9 @@ const propTypes = {
     /** Extra styles to pass to View wrapper */
     // eslint-disable-next-line react/forbid-prop-types
     containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Denotes whether it is an avatar or a workspace avatar */
+    isWorkspaceAvatar: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -42,6 +45,7 @@ const defaultProps = {
     shouldShowLoadingSpinnerIcon: false,
     onToggleKeyboard: () => {},
     containerStyles: [],
+    isWorkspaceAvatar: false,
 };
 
 function AttachmentView({
@@ -57,16 +61,22 @@ function AttachmentView({
     onToggleKeyboard,
     translate,
     isFocused,
+    isWorkspaceAvatar,
 }) {
     const [loadComplete, setLoadComplete] = useState(false);
 
     // Handles case where source is a component (ex: SVG)
     if (_.isFunction(source)) {
+        const iconFillColor = isWorkspaceAvatar ? StyleUtils.getDefaultWorkspaceAvatarColor(file.name).fill : '';
+        const additionalStyles = isWorkspaceAvatar ? [StyleUtils.getDefaultWorkspaceAvatarColor(file.name)] : [];
+
         return (
             <Icon
                 src={source}
                 height={variables.defaultAvatarPreviewSize}
                 width={variables.defaultAvatarPreviewSize}
+                fill={iconFillColor}
+                additionalStyles={additionalStyles}
             />
         );
     }
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 6f78e6ace66d..b991bd151305 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -9,6 +9,9 @@ import Avatar from './Avatar';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import avatarPropTypes from './avatarPropTypes';
+import PressableWithoutFocus from './Pressable/PressableWithoutFocus';
+import * as UserUtils from '../libs/UserUtils';
+import AttachmentModal from './AttachmentModal';
 
 const propTypes = {
     icons: PropTypes.arrayOf(avatarPropTypes),
@@ -25,14 +28,30 @@ function RoomHeaderAvatars(props) {
 
     if (props.icons.length === 1) {
         return (
-            <Avatar
-                source={props.icons[0].source}
-                imageStyles={[styles.avatarLarge]}
-                fill={themeColors.iconSuccessFill}
-                size={CONST.AVATAR_SIZE.LARGE}
-                name={props.icons[0].name}
-                type={props.icons[0].type}
-            />
+            <AttachmentModal
+                headerTitle={props.icons[0].name}
+                source={UserUtils.getFullSizeAvatar(props.icons[0].source, props.icons[0].id)}
+                isAuthTokenRequired
+                isWorkspaceAvatar={props.icons[0].type === CONST.ICON_TYPE_WORKSPACE}
+                originalFileName={props.icons[0].name}
+            >
+                {({show}) => (
+                    <PressableWithoutFocus
+                        onPress={show}
+                        accessibilityRole="imagebutton"
+                        accessibilityLabel={props.icons[0].name}
+                    >
+                        <Avatar
+                            source={props.icons[0].source}
+                            imageStyles={[styles.avatarLarge]}
+                            fill={themeColors.iconSuccessFill}
+                            size={CONST.AVATAR_SIZE.LARGE}
+                            name={props.icons[0].name}
+                            type={props.icons[0].type}
+                        />
+                    </PressableWithoutFocus>
+                )}
+            </AttachmentModal>
         );
     }
 
@@ -45,21 +64,37 @@ function RoomHeaderAvatars(props) {
         StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED),
     ];
     return (
-        <View pointerEvents="none">
+        <View pointerEvents="box-none">
             <View style={[styles.flexRow, styles.wAuto, styles.ml3]}>
                 {_.map(iconsToDisplay, (icon, index) => (
                     <View
                         key={`${icon.source}${index}`}
                         style={[styles.justifyContentCenter, styles.alignItemsCenter]}
                     >
-                        <Avatar
-                            source={icon.source}
-                            fill={themeColors.iconSuccessFill}
-                            size={CONST.AVATAR_SIZE.LARGE}
-                            containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
-                            name={icon.name}
-                            type={icon.type}
-                        />
+                        <AttachmentModal
+                            headerTitle={icon.name}
+                            source={UserUtils.getFullSizeAvatar(icon.source, icon.id)}
+                            isAuthTokenRequired
+                            originalFileName={icon.name}
+                            isWorkspaceAvatar={icon.type === CONST.ICON_TYPE_WORKSPACE}
+                        >
+                            {({show}) => (
+                                <PressableWithoutFocus
+                                    onPress={show}
+                                    accessibilityRole="imagebutton"
+                                    accessibilityLabel={icon.name}
+                                >
+                                    <Avatar
+                                        source={icon.source}
+                                        fill={themeColors.iconSuccessFill}
+                                        size={CONST.AVATAR_SIZE.LARGE}
+                                        containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
+                                        name={icon.name}
+                                        type={icon.type}
+                                    />
+                                </PressableWithoutFocus>
+                            )}
+                        </AttachmentModal>
                         {index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.icons.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && (
                             <>
                                 <View

From 9d4d7925533640a82ec0c55c3db0b6967fe900db Mon Sep 17 00:00:00 2001
From: SP Singh <19812199+spcheema@users.noreply.github.com>
Date: Sat, 12 Aug 2023 00:08:48 +1000
Subject: [PATCH 2/7] Update props docs

---
 src/components/AttachmentModal.js                  | 2 +-
 src/components/Attachments/AttachmentView/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index bbfb21abb334..46d693a507dd 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -72,7 +72,7 @@ const propTypes = {
 
     ...windowDimensionsPropTypes,
 
-    /** Denotes whether it is an avatar or a workspace avatar */
+    /** Denotes whether it is a workspace avatar or not */
     isWorkspaceAvatar: PropTypes.bool,
 };
 
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 80871894316f..b2a8dc248e6f 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -35,7 +35,7 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     containerStyles: PropTypes.arrayOf(PropTypes.object),
 
-    /** Denotes whether it is an avatar or a workspace avatar */
+    /** Denotes whether it is a workspace avatar or not */
     isWorkspaceAvatar: PropTypes.bool,
 };
 

From ffcf5752898b7997d7e72c008a6079a8df7489d6 Mon Sep 17 00:00:00 2001
From: SP Singh <19812199+spcheema@users.noreply.github.com>
Date: Tue, 15 Aug 2023 19:25:12 +1000
Subject: [PATCH 3/7] Avoid duplicate func call

---
 src/components/Attachments/AttachmentView/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index b2a8dc248e6f..00674eca6331 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -67,8 +67,9 @@ function AttachmentView({
 
     // Handles case where source is a component (ex: SVG)
     if (_.isFunction(source)) {
-        const iconFillColor = isWorkspaceAvatar ? StyleUtils.getDefaultWorkspaceAvatarColor(file.name).fill : '';
-        const additionalStyles = isWorkspaceAvatar ? [StyleUtils.getDefaultWorkspaceAvatarColor(file.name)] : [];
+        const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name);
+        const iconFillColor = isWorkspaceAvatar ? defaultWorkspaceAvatarColor.fill : '';
+        const additionalStyles = isWorkspaceAvatar ? [defaultWorkspaceAvatarColor] : [];
 
         return (
             <Icon

From 0a982491cf3f107d68d9fca6a1fbd858fcb4d19c Mon Sep 17 00:00:00 2001
From: SP Singh <19812199+spcheema@users.noreply.github.com>
Date: Tue, 15 Aug 2023 19:27:29 +1000
Subject: [PATCH 4/7] Refactor & cleanup

---
 src/components/Attachments/AttachmentView/index.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 00674eca6331..47353d915060 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -67,9 +67,13 @@ function AttachmentView({
 
     // Handles case where source is a component (ex: SVG)
     if (_.isFunction(source)) {
-        const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name);
-        const iconFillColor = isWorkspaceAvatar ? defaultWorkspaceAvatarColor.fill : '';
-        const additionalStyles = isWorkspaceAvatar ? [defaultWorkspaceAvatarColor] : [];
+        let iconFillColor = '';
+        let additionalStyles = [];
+        if (isWorkspaceAvatar) {
+            const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name);
+            iconFillColor = defaultWorkspaceAvatarColor.fill;
+            additionalStyles = [defaultWorkspaceAvatarColor];
+        }
 
         return (
             <Icon

From 0282519d57b9a35e68a78508fb981d6abe949b75 Mon Sep 17 00:00:00 2001
From: SP Singh <19812199+spcheema@users.noreply.github.com>
Date: Tue, 15 Aug 2023 19:34:00 +1000
Subject: [PATCH 5/7] Update src/components/RoomHeaderAvatars.js

Co-authored-by: Aimane Chnaif <96077027+aimane-chnaif@users.noreply.github.com>
---
 src/components/RoomHeaderAvatars.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index b991bd151305..e24d31b9b5a1 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -38,7 +38,7 @@ function RoomHeaderAvatars(props) {
                 {({show}) => (
                     <PressableWithoutFocus
                         onPress={show}
-                        accessibilityRole="imagebutton"
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                         accessibilityLabel={props.icons[0].name}
                     >
                         <Avatar

From 301ad3588aa1f0731cb1cd8224fc2da2ffa132d9 Mon Sep 17 00:00:00 2001
From: SP Singh <19812199+spcheema@users.noreply.github.com>
Date: Tue, 15 Aug 2023 19:35:36 +1000
Subject: [PATCH 6/7] Replace static string with const

---
 src/components/RoomHeaderAvatars.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index e24d31b9b5a1..3d803e6761a2 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -81,7 +81,7 @@ function RoomHeaderAvatars(props) {
                             {({show}) => (
                                 <PressableWithoutFocus
                                     onPress={show}
-                                    accessibilityRole="imagebutton"
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                                     accessibilityLabel={icon.name}
                                 >
                                     <Avatar

From 8ff1d2f291f128c5583e627f78dba2a9c5160ddf Mon Sep 17 00:00:00 2001
From: SP Singh <19812199+spcheema@users.noreply.github.com>
Date: Tue, 15 Aug 2023 20:35:07 +1000
Subject: [PATCH 7/7] Fix avatar hover issue in the case of multiple avatars

---
 src/components/RoomHeaderAvatars.js | 3 +++
 src/styles/styles.js                | 1 -
 src/styles/utilities/spacing.js     | 4 ++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 3d803e6761a2..af594dc2415a 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -37,6 +37,7 @@ function RoomHeaderAvatars(props) {
             >
                 {({show}) => (
                     <PressableWithoutFocus
+                        style={[styles.noOutline]}
                         onPress={show}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                         accessibilityLabel={props.icons[0].name}
@@ -80,6 +81,7 @@ function RoomHeaderAvatars(props) {
                         >
                             {({show}) => (
                                 <PressableWithoutFocus
+                                    style={[styles.mln4, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
                                     onPress={show}
                                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                                     accessibilityLabel={icon.name}
@@ -101,6 +103,7 @@ function RoomHeaderAvatars(props) {
                                     style={[
                                         styles.roomHeaderAvatarSize,
                                         styles.roomHeaderAvatar,
+                                        styles.mln4,
                                         ...iconStyle,
                                         StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type),
                                         styles.roomHeaderAvatarOverlay,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 581410e0e5a5..174662ed1d29 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2358,7 +2358,6 @@ const styles = {
 
     roomHeaderAvatar: {
         backgroundColor: themeColors.appBG,
-        marginLeft: -16,
         borderRadius: 100,
         borderColor: themeColors.componentBG,
         borderWidth: 4,
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index a77ede807794..4adb7e79a9ff 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -133,6 +133,10 @@ export default {
         marginLeft: 16,
     },
 
+    mln4: {
+        marginLeft: -16,
+    },
+
     ml5: {
         marginLeft: 20,
     },