Merge pull request Expensify#8515 from Expensify/update-staging-from-…

…main

Update version to 1.1.52-0 on staging

android/app/build.gradle

@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001015100
-        versionName "1.1.51-0"
+        versionCode 1001015200
+        versionName "1.1.52-0"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.51</string>
+	<string>1.1.52</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.51.0</string>
+	<string>1.1.52.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.51</string>
+	<string>1.1.52</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.51.0</string>
+	<string>1.1.52.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.51-0",
+  "version": "1.1.52-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.",

src/CONST.js

@@ -305,6 +305,7 @@ const CONST = {
         COLD: 'cold',
         REPORT_ACTION_ITEM_LAYOUT_DEBOUNCE_TIME: 1500,
         TOOLTIP_SENSE: 1000,
+        SPINNER_TIMEOUT: 15 * 1000,
     },
     PRIORITY_MODE: {
         GSD: 'gsd',

src/components/ArchivedReportFooter.js

@@ -8,6 +8,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import personalDetailsPropType from '../pages/personalDetailsPropType';
 import ONYXKEYS from '../ONYXKEYS';
+import * as ReportUtils from '../libs/reportUtils';
 
 const propTypes = {
     /** The reason this report was archived */
@@ -53,7 +54,6 @@ const defaultProps = {
 
 const ArchivedReportFooter = (props) => {
     const archiveReason = lodashGet(props.reportClosedAction, 'originalMessage.reason', CONST.REPORT.ARCHIVE_REASON.DEFAULT);
-    const policyName = lodashGet(props.policies, `${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}.name`);
     let displayName = lodashGet(props.personalDetails, `${props.report.ownerEmail}.displayName`, props.report.ownerEmail);
 
     let oldDisplayName;
@@ -69,7 +69,7 @@ const ArchivedReportFooter = (props) => {
             text={props.translate(`reportArchiveReasons.${archiveReason}`, {
                 displayName: `<strong>${displayName}</strong>`,
                 oldDisplayName: `<strong>${oldDisplayName}</strong>`,
-                policyName: `<strong>${policyName}</strong>`,
+                policyName: `<strong>${ReportUtils.getPolicyName(props.report, props.policies)}</strong>`,
             })}
             shouldRenderHTML={archiveReason !== CONST.REPORT.ARCHIVE_REASON.DEFAULT}
         />

src/components/FullscreenLoadingIndicator.js

@@ -5,38 +5,68 @@ import {ActivityIndicator, StyleSheet, View} from 'react-native';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import stylePropTypes from '../styles/stylePropTypes';
+import Log from '../libs/Log';
+import CONST from '../CONST';
 
 const propTypes = {
-    /** Controls whether the loader is mounted and displayed */
-    visible: PropTypes.bool,
+    /**
+     * Context info printed in timing log.
+     * Providing this prop would capture logs for mounting/unmounting and staying visible for too long
+     */
+    logDetail: PropTypes.shape({
+        /** Name is used to distinct the loader in captured logs. */
+        name: PropTypes.string.isRequired,
+    }),
 
     /** Additional style props */
     style: stylePropTypes,
 };
 
 const defaultProps = {
-    visible: true,
     style: [],
+    logDetail: null,
 };
 
-/**
- * Loading indication component intended to cover the whole page, while the page prepares for initial render
- *
- * @param {Object} props
- * @returns {JSX.Element}
- */
-const FullScreenLoadingIndicator = (props) => {
-    if (!props.visible) {
-        return null;
+class FullScreenLoadingIndicator extends React.Component {
+    componentDidMount() {
+        if (!this.props.logDetail) {
+            return;
+        }
+
+        if (!this.props.logDetail.name) {
+            throw new Error('A name should be set to distinct logged messages. Please check the `logDetails` prop.');
+        }
+
+        Log.info('[LoadingIndicator] Became visible', false, this.props.logDetail);
+
+        this.timeoutID = setTimeout(
+            () => Log.alert(
+                `${CONST.ERROR.ENSURE_BUGBOT} [LoadingIndicator] Visible after timeout`,
+                {timeout: CONST.TIMING.SPINNER_TIMEOUT, ...this.props.logDetail},
+                false,
+            ),
+            CONST.TIMING.SPINNER_TIMEOUT,
+        );
     }
 
-    const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
-    return (
-        <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading, ...additionalStyles]}>
-            <ActivityIndicator color={themeColors.spinner} size="large" />
-        </View>
-    );
-};
+    componentWillUnmount() {
+        if (!this.timeoutID) {
+            return;
+        }
+
+        clearTimeout(this.timeoutID);
+        Log.info('[LoadingIndicator] Disappeared', false, this.props.logDetail);
+    }
+
+    render() {
+        const additionalStyles = _.isArray(this.props.style) ? this.props.style : [this.props.style];
+        return (
+            <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading, ...additionalStyles]}>
+                <ActivityIndicator color={themeColors.spinner} size="large" />
+            </View>
+        );
+    }
+}
 
 FullScreenLoadingIndicator.propTypes = propTypes;
 FullScreenLoadingIndicator.defaultProps = defaultProps;

src/components/ReportWelcomeText.js

@@ -10,7 +10,6 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import * as ReportUtils from '../libs/reportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
-import * as Localize from '../libs/Localize';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
 
@@ -91,7 +90,7 @@ const ReportWelcomeText = (props) => {
                         {props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartTwo')}
                     </Text>
                     <Text style={[styles.textStrong]}>
-                        {lodashGet(props.policies, [`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`, 'name'], Localize.translateLocal('workspace.common.unavailable'))}
+                        {ReportUtils.getPolicyName(props.report, props.policies)}
                     </Text>
                     <Text>
                         {props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartThree')}

src/components/WalletStatementModal/index.js

@@ -41,9 +41,7 @@ class WalletStatementModal extends React.Component {
         const authToken = lodashGet(this.props, 'session.authToken', null);
         return (
             <>
-                <FullScreenLoadingIndicator
-                    visible={this.state.isLoading}
-                />
+                {this.state.isLoading && <FullScreenLoadingIndicator />}
                 <View style={[styles.flex1]}>
                     <iframe
                         src={`${this.props.statementPageURL}&authToken=${authToken}`}

src/languages/en.js

@@ -37,6 +37,7 @@ export default {
         privacyPolicy: 'Privacy policy',
         delete: 'Delete',
         deleted: 'deleted',
+        archived: 'archived',
         contacts: 'Contacts',
         recents: 'Recents',
         close: 'Close',

src/languages/es.js

@@ -37,6 +37,7 @@ export default {
         privacyPolicy: 'Política de privacidad',
         delete: 'Eliminar',
         deleted: 'eliminado',
+        archived: 'archivado',
         contacts: 'Contactos',
         recents: 'Recientes',
         close: 'Cerrar',
@@ -854,7 +855,7 @@ export default {
             nameInputHelpText: 'Este es el nombre que verás en tu espacio de trabajo.',
             nameIsRequiredError: 'Debes definir un nombre para tu espacio de trabajo.',
             currencyInputLabel: 'Moneda por defecto',
-            currencyInputHelpText: 'Todas los gastos en este epecio de trabajo serán convertidos a esta moneda.',
+            currencyInputHelpText: 'Todas los gastos en este espacio de trabajo serán convertidos a esta moneda.',
             save: 'Guardar',
             genericFailureMessage: 'Se produjo un error al guardar el espacio de trabajo. Por favor, inténtalo de nuevo.',
             avatarUploadFailureMessage: 'No se pudo subir el avatar. Por favor, inténtalo de nuevo.',

src/libs/Navigation/AppNavigator/MainDrawerNavigator.js

@@ -49,7 +49,7 @@ const MainDrawerNavigator = (props) => {
 
     // Wait until reports are fetched and there is a reportID in initialParams
     if (!initialParams.reportID) {
-        return <FullScreenLoadingIndicator />;
+        return <FullScreenLoadingIndicator logDetail={{name: 'Main Drawer Loader', initialParams}} />;
     }
 
     // After the app initializes and reports are available the home navigation is mounted

src/libs/Navigation/Navigation.js

@@ -1,11 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import {Keyboard} from 'react-native';
-import {
-    StackActions,
-    DrawerActions,
-    getPathFromState,
-} from '@react-navigation/native';
+import {DrawerActions, getPathFromState, StackActions} from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import Onyx from 'react-native-onyx';
 import Log from '../Log';
@@ -168,6 +164,16 @@ function dismissModal(shouldOpenDrawer = false) {
     }
 }
 
+/**
+ * Returns the current active route
+ * @returns {String}
+ */
+function getActiveRoute() {
+    return navigationRef.current && navigationRef.current.getCurrentRoute().name
+        ? getPathFromState(navigationRef.current.getState(), linkingConfig.config)
+        : '';
+}
+
 /**
  * Check whether the passed route is currently Active or not.
  *
@@ -179,10 +185,7 @@ function dismissModal(shouldOpenDrawer = false) {
  */
 function isActiveRoute(routePath) {
     // We remove First forward slash from the URL before matching
-    const path = navigationRef.current && navigationRef.current.getCurrentRoute().name
-        ? getPathFromState(navigationRef.current.getState(), linkingConfig.config).substring(1)
-        : '';
-    return path === routePath;
+    return getActiveRoute().substring(1) === routePath;
 }
 
 /**
@@ -214,9 +217,11 @@ DismissModal.defaultProps = {
 };
 
 export default {
+    canNavigate,
     navigate,
     dismissModal,
     isActiveRoute,
+    getActiveRoute,
     goBack,
     DismissModal,
     closeDrawer,

src/libs/Navigation/NavigationRoot.js

@@ -57,7 +57,12 @@ class NavigationRoot extends Component {
     render() {
         return (
             <NavigationContainer
-                fallback={<FullScreenLoadingIndicator style={styles.navigatorFullScreenLoading} />}
+                fallback={(
+                    <FullScreenLoadingIndicator
+                        logDetail={{name: 'Navigation Fallback Loader', authenticated: this.props.authenticated}}
+                        style={styles.navigatorFullScreenLoading}
+                    />
+                )}
                 onStateChange={this.parseAndStoreRoute}
                 onReady={this.props.onReady}
                 theme={navigationTheme}

src/libs/Network/index.js

@@ -9,6 +9,7 @@ import * as NetworkStore from './NetworkStore';
 import * as NetworkEvents from './NetworkEvents';
 import * as PersistedRequestsQueue from './PersistedRequestsQueue';
 import processRequest from './processRequest';
+import {version} from '../../../package.json';
 
 // Queue for network requests so we don't lose actions done by the user while offline
 let networkRequestQueue = [];
@@ -181,6 +182,7 @@ function post(command, data = {}, type = CONST.NETWORK.METHOD.POST, shouldUseSec
             ...data,
             shouldRetry: lodashGet(data, 'shouldRetry', true),
             canCancel: lodashGet(data, 'canCancel', true),
+            appversion: version,
         };
 
         // Add the request to a queue of actions to perform

src/libs/OptionsListUtils.js

@@ -250,6 +250,7 @@ function createOption(personalDetailList, report, {
 }) {
     const isChatRoom = ReportUtils.isChatRoom(report);
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report);
+    const isArchivedRoom = ReportUtils.isArchivedRoom(report);
     const hasMultipleParticipants = personalDetailList.length > 1 || isChatRoom || isPolicyExpenseChat;
     const personalDetail = personalDetailList[0];
     const hasDraftComment = hasReportDraftComment(report);
@@ -262,7 +263,7 @@ function createOption(personalDetailList, report, {
     const lastMessageTextFromReport = ReportUtils.isReportMessageAttachment({text: lodashGet(report, 'lastMessageText', ''), html: lodashGet(report, 'lastMessageHtml', '')})
         ? `[${Localize.translateLocal('common.attachment')}]`
         : Str.htmlDecode(lodashGet(report, 'lastMessageText', ''));
-    let lastMessageText = report && hasMultipleParticipants && lastActorDetails
+    let lastMessageText = report && !isArchivedRoom && hasMultipleParticipants && lastActorDetails
         ? `${lastActorDetails.displayName}: `
         : '';
     lastMessageText += report ? lastMessageTextFromReport : '';
@@ -273,7 +274,7 @@ function createOption(personalDetailList, report, {
     let text;
     let alternateText;
     if (isChatRoom || isPolicyExpenseChat) {
-        text = lodashGet(report, ['reportName'], '');
+        text = (isArchivedRoom && report.isOwnPolicyExpenseChat) ? report.oldPolicyName : lodashGet(report, ['reportName'], '');
         alternateText = (showChatPreviewLine && !forcePolicyNamePreview && lastMessageText)
             ? lastMessageText
             : subtitle;
@@ -315,7 +316,7 @@ function createOption(personalDetailList, report, {
         isIOUReportOwner: lodashGet(iouReport, 'ownerEmail', '') === currentUserLogin,
         iouReportAmount: lodashGet(iouReport, 'total', 0),
         isChatRoom,
-        isArchivedRoom: ReportUtils.isArchivedRoom(report),
+        isArchivedRoom,
         shouldShowSubscript: isPolicyExpenseChat && !report.isOwnPolicyExpenseChat,
         isPolicyExpenseChat,
     };