Merge pull request #9068 from Expensify/update-staging-from-main

Update version to 1.1.63-0 on staging
Expensify · May 18, 2022 · 4ecf59b · 4ecf59b
2 parents 7b43fa4 + aa24478
commit 4ecf59b
Show file tree

Hide file tree

Showing 35 changed files with 178 additions and 66 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001016200
-        versionName "1.1.62-0"
+        versionCode 1001016300
+        versionName "1.1.63-0"
     }
     splits {
         abi {

diff --git a/assets/images/avatars/fallback-avatar.svg b/assets/images/avatars/fallback-avatar.svg
diff --git a/assets/images/avatars/fallback-workspace-avatar.svg b/assets/images/avatars/fallback-workspace-avatar.svg
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.62</string>
+	<string>1.1.63</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.62.0</string>
+	<string>1.1.63.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.62</string>
+	<string>1.1.63</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.62.0</string>
+	<string>1.1.63.0</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.62-0",
+  "version": "1.1.63-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
@@ -7,6 +7,7 @@ import Icon from './Icon';
 import themeColors from '../styles/themes/default';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
+import * as Expensicons from './Icon/Expensicons';
 
 const propTypes = {
     /** Source for the avatar. Can be a URL or an icon. */
@@ -23,6 +24,9 @@ const propTypes = {
 
     /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue' */
     fill: PropTypes.string,
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon: PropTypes.func,
 };
 
 const defaultProps = {
@@ -31,9 +35,17 @@ const defaultProps = {
     containerStyles: [],
     size: CONST.AVATAR_SIZE.DEFAULT,
     fill: themeColors.icon,
+    fallbackIcon: Expensicons.FallbackAvatar,
 };
 
 class Avatar extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            imageError: false,
+        };
+    }
+
     render() {
         if (!this.props.source) {
             return null;
@@ -45,13 +57,21 @@ class Avatar extends PureComponent {
         ];
 
         const iconSize = StyleUtils.getAvatarSize(this.props.size);
+
         return (
             <View pointerEvents="none" style={this.props.containerStyles}>
-                {
-                _.isFunction(this.props.source)
-                    ? <Icon src={this.props.source} fill={this.props.fill} height={iconSize} width={iconSize} />
-                    : <Image source={{uri: this.props.source}} style={imageStyle} />
-            }
+                {_.isFunction(this.props.source) || this.state.imageError
+                    ? (
+                        <Icon
+                            src={this.state.imageError ? this.props.fallbackIcon : this.props.source}
+                            height={iconSize}
+                            width={iconSize}
+                            fill={this.state.imageError ? themeColors.offline : this.props.fill}
+                        />
+                    )
+                    : (
+                        <Image source={{uri: this.props.source}} style={imageStyle} onError={() => this.setState({imageError: true})} />
+                    )}
             </View>
         );
     }

diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
@@ -53,6 +53,9 @@ const propTypes = {
     /** Size of Indicator */
     size: PropTypes.oneOf([CONST.AVATAR_SIZE.LARGE, CONST.AVATAR_SIZE.DEFAULT]),
 
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -65,6 +68,7 @@ const defaultProps = {
     isUsingDefaultAvatar: false,
     isUploading: false,
     size: CONST.AVATAR_SIZE.DEFAULT,
+    fallbackIcon: Expensicons.FallbackAvatar,
 };
 
 class AvatarWithImagePicker extends React.Component {
@@ -181,6 +185,8 @@ class AvatarWithImagePicker extends React.Component {
                                     containerStyles={styles.avatarLarge}
                                     imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
                                     source={this.props.avatarURL}
+                                    fallbackIcon={this.props.fallbackIcon}
+                                    size={this.props.size}
                                 />
                             )
                             : (

diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js
@@ -101,6 +101,7 @@ class AvatarWithIndicator extends PureComponent {
                     <Avatar
                         imageStyles={[this.props.size === 'large' ? styles.avatarLarge : null]}
                         source={this.props.source}
+                        size={this.props.size}
                     />
                 </Tooltip>
                 <Tooltip text={this.userStatus()} absolute>

diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -53,7 +53,6 @@ const BaseHTMLEngineProvider = (props) => {
             baseStyle={styles.webViewStyles.baseFontStyle}
             tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
-            dangerouslyDisableWhitespaceCollapsing
             systemFonts={_.values(fontFamily)}
         >
             <RenderHTMLConfigProvider

diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js
@@ -62,8 +62,8 @@ const propTypes = {
         phoneNumber: PropTypes.string,
     })).isRequired,
 
-    /** Whether this is an IOU split and belongs to a group report */
-    isGroupSplit: PropTypes.bool.isRequired,
+    /** Is this IOU associated with existing report */
+    isIOUAttachedToExistingChatReport: PropTypes.bool.isRequired,
 
     ...windowDimensionsPropTypes,
 
@@ -225,6 +225,7 @@ class IOUConfirmationList extends Component {
                 data: [formattedMyPersonalDetails],
                 shouldShow: true,
                 indexOffset: 0,
+                isDisabled: true,
             }, {
                 title: this.props.translate('iOUConfirmationList.whoWasThere'),
                 data: formattedSelectedParticipants,
@@ -350,6 +351,7 @@ class IOUConfirmationList extends Component {
         const shouldDisableButton = selectedParticipants.length === 0 || this.props.network.isOffline;
         const isLoading = this.props.iou.loading && !this.props.network.isOffline;
         const recipient = this.state.participants[0];
+        const canModifyParticipants = this.props.isIOUAttachedToExistingChatReport && this.props.hasMultipleParticipants;
         return (
             <>
                 <ScrollView style={[styles.flexGrow0, styles.flexShrink1, styles.flexBasisAuto, styles.w100]}>
@@ -362,7 +364,7 @@ class IOUConfirmationList extends Component {
                         canSelectMultipleOptions={this.props.hasMultipleParticipants}
                         selectedOptions={this.getSelectedOptions()}
                         onSelectRow={toggleOption}
-                        isDisabled={!this.props.isGroupSplit}
+                        isDisabled={!canModifyParticipants}
                         optionHoveredStyle={hoverStyle}
                     />
                 </ScrollView>

diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
@@ -76,6 +76,8 @@ import AdminRoomAvatar from '../../../assets/images/avatars/admin-room.svg';
 import AnnounceRoomAvatar from '../../../assets/images/avatars/announce-room.svg';
 import Connect from '../../../assets/images/connect.svg';
 import DomainRoomAvatar from '../../../assets/images/avatars/domain-room.svg';
+import FallbackAvatar from '../../../assets/images/avatars/fallback-avatar.svg';
+import FallbackWorkspaceAvatar from '../../../assets/images/avatars/fallback-workspace-avatar.svg';
 
 export {
     ActiveRoomAvatar,
@@ -112,6 +114,8 @@ export {
     Eye,
     EyeDisabled,
     ExpensifyCard,
+    FallbackAvatar,
+    FallbackWorkspaceAvatar,
     Gallery,
     Gear,
     Hashtag,

diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js
@@ -34,6 +34,7 @@ class ImageView extends PureComponent {
             imageWidth: undefined,
             imageHeight: undefined,
             interactionPromise: undefined,
+            containerHeight: undefined,
         };
 
         // Use the default double click interval from the ImageZoom library
@@ -72,7 +73,7 @@ class ImageView extends PureComponent {
             let imageWidth = width;
             let imageHeight = height;
             const containerWidth = Math.round(this.props.windowWidth);
-            const containerHeight = Math.round(this.props.windowHeight - variables.contentHeaderHeight);
+            const containerHeight = Math.round(this.state.containerHeight);
 
             const aspectRatio = Math.min(containerHeight / imageHeight, containerWidth / imageWidth);
 
@@ -134,6 +135,12 @@ class ImageView extends PureComponent {
                         styles.overflowHidden,
                         styles.errorOutline,
                     ]}
+                    onLayout={(event) => {
+                        const layout = event.nativeEvent.layout;
+                        this.setState({
+                            containerHeight: layout.height,
+                        });
+                    }}
                 >
                     <Image
                         source={{uri: this.props.url}}

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -39,6 +39,7 @@ const defaultProps = {
     iconType: 'icon',
     onPress: () => {},
     interactive: true,
+    fallbackIcon: Expensicons.FallbackAvatar,
 };
 
 const MenuItem = props => (
@@ -87,6 +88,7 @@ const MenuItem = props => (
                             <Avatar
                                 imageStyles={[styles.avatarNormal, styles.alignSelfCenter]}
                                 source={props.icon}
+                                fallbackIcon={props.fallbackIcon}
                             />
                         </View>
                     )}

diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
@@ -7,8 +7,8 @@ import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import themeColors from '../../styles/themes/default';
 import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './modalPropTypes';
-import getModalStyles from '../../styles/getModalStyles';
 import * as Modal from '../../libs/actions/Modal';
+import getModalStyles from '../../styles/getModalStyles';
 
 const propTypes = {
     ...modalPropTypes,

diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
@@ -111,7 +111,7 @@ class BaseOptionsList extends Component {
                 showSelectedState={this.props.canSelectMultipleOptions}
                 hideAdditionalOptionStates={this.props.hideAdditionalOptionStates}
                 forceTextUnreadStyle={this.props.forceTextUnreadStyle}
-                isDisabled={this.props.isDisabled}
+                isDisabled={this.props.isDisabled || section.isDisabled}
             />
         );
     }

diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
@@ -30,6 +30,9 @@ const propTypes = {
 
         /** Whether this section should show or not */
         shouldShow: PropTypes.bool,
+
+        /** Whether this section items disabled for selection */
+        isDisabled: PropTypes.bool,
     })).isRequired,
 
     /** Value in the search input field */

diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
@@ -10,6 +10,9 @@ import compose from '../libs/compose';
 import * as ReportUtils from '../libs/ReportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import ONYXKEYS from '../ONYXKEYS';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import Tooltip from './Tooltip';
 
 const personalDetailsPropTypes = PropTypes.shape({
     /** The login of the person (either email or phone number) */
@@ -85,7 +88,7 @@ const ReportWelcomeText = (props) => {
                     <Text style={styles.textAlignCenter}>
                         {roomWelcomeMessage.phrase1}
                     </Text>
-                    <Text style={[styles.textStrong]}>
+                    <Text style={[styles.textStrong]} onPress={() => Navigation.navigate(ROUTES.getReportDetailsRoute(props.report.reportID))}>
                         {props.report.reportName}
                     </Text>
                     <Text>
@@ -99,11 +102,15 @@ const ReportWelcomeText = (props) => {
                     <Text style={styles.textAlignCenter}>
                         {props.translate('reportActionsView.beginningOfChatHistory')}
                     </Text>
-                    {_.map(displayNamesWithTooltips, ({displayName, pronouns}, index) => (
+                    {_.map(displayNamesWithTooltips, ({
+                        displayName, pronouns, tooltip,
+                    }, index) => (
                         <Text key={displayName}>
-                            <Text style={[styles.textStrong]}>
-                                {displayName}
-                            </Text>
+                            <Tooltip text={tooltip}>
+                                <Text style={[styles.textStrong]} onPress={() => Navigation.navigate(ROUTES.getDetailsRoute(participants[index]))}>
+                                    {displayName}
+                                </Text>
+                            </Tooltip>
                             {!_.isEmpty(pronouns) && <Text>{` (${pronouns})`}</Text>}
                             {(index === displayNamesWithTooltips.length - 1) && <Text>.</Text>}
                             {(index === displayNamesWithTooltips.length - 2) && <Text>{` ${props.translate('common.and')} `}</Text>}