Merge branch 'main' into tgolen-cleanup-routes

Expensify · Sep 24, 2023 · 1509199 · 1509199
2 parents 5d3fffc + 4ea4a55
commit 1509199
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 122 deletions.
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
@@ -31,21 +31,36 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
         ];
     }, [selectedCategory]);
 
+    const sections = useMemo(() => {
+        const {categoryOptions} = OptionsListUtils.getFilteredOptions(
+            {},
+            {},
+            [],
+            searchValue,
+            selectedOptions,
+            [],
+            false,
+            false,
+            true,
+            policyCategories,
+            policyRecentlyUsedCategories,
+            false,
+        );
+
+        return categoryOptions;
+    }, [policyCategories, policyRecentlyUsedCategories, searchValue, selectedOptions]);
+
     const initialFocusedIndex = useMemo(() => {
-        if (isCategoriesCountBelowThreshold && selectedOptions.length > 0) {
-            return _.chain(policyCategories)
-                .values()
-                .findIndex((category) => category.name === selectedOptions[0].name, true)
-                .value();
-        }
+        let categoryInitialFocusedIndex = 0;
 
-        return 0;
-    }, [policyCategories, selectedOptions, isCategoriesCountBelowThreshold]);
+        if (!_.isEmpty(searchValue) || isCategoriesCountBelowThreshold) {
+            const index = _.findIndex(lodashGet(sections, '[0].data', []), (category) => category.searchText === iou.category);
 
-    const sections = useMemo(
-        () => OptionsListUtils.getFilteredOptions({}, {}, [], searchValue, selectedOptions, [], false, false, true, policyCategories, policyRecentlyUsedCategories, false).categoryOptions,
-        [policyCategories, policyRecentlyUsedCategories, searchValue, selectedOptions],
-    );
+            categoryInitialFocusedIndex = index === -1 ? 0 : index;
+        }
+
+        return categoryInitialFocusedIndex;
+    }, [iou.category, searchValue, isCategoriesCountBelowThreshold, sections]);
 
     const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, searchValue);
     const shouldShowTextInput = !isCategoriesCountBelowThreshold;

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import _ from 'underscore';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
+import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import Text from '../../Text';
@@ -10,53 +12,67 @@ import withCurrentUserPersonalDetails from '../../withCurrentUserPersonalDetails
 import personalDetailsPropType from '../../../pages/personalDetailsPropType';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import * as PersonalDetailsUtils from '../../../libs/PersonalDetailsUtils';
+import compose from '../../../libs/compose';
 import TextLink from '../../TextLink';
+import ONYXKEYS from '../../../ONYXKEYS';
+import useLocalize from '../../../hooks/useLocalize';
 import CONST from '../../../CONST';
 
 const propTypes = {
     ...htmlRendererPropTypes,
 
-    /**
-     * Current user personal details
-     */
+    /** Current user personal details */
     currentUserPersonalDetails: personalDetailsPropType.isRequired,
-};
 
-/**
- * Navigates to user details screen based on email
- * @param {String} email
- * @returns {void}
- * */
-const showUserDetails = (email) => Navigation.navigate(ROUTES.DETAILS.getRoute(email));
+    /** Personal details of all users */
+    personalDetails: personalDetailsPropType.isRequired,
+};
 
 function MentionUserRenderer(props) {
+    const {translate} = useLocalize();
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
+    const htmlAttribAccountID = lodashGet(props.tnode.attributes, 'accountid');
+
+    let accountID;
+    let displayNameOrLogin;
+    let navigationRoute;
 
-    // We need to remove the LTR unicode and leading @ from data as it is not part of the login
-    const loginWithoutLeadingAt = props.tnode.data ? props.tnode.data.replace(CONST.UNICODE.LTR, '').slice(1) : '';
+    if (!_.isEmpty(htmlAttribAccountID)) {
+        const user = lodashGet(props.personalDetails, htmlAttribAccountID);
+        accountID = parseInt(htmlAttribAccountID, 10);
+        displayNameOrLogin = lodashGet(user, 'login', '') || lodashGet(user, 'displayName', '') || translate('common.hidden');
+        navigationRoute = ROUTES.PROFILE.getRoute(htmlAttribAccountID);
+    } else if (!_.isEmpty(props.tnode.data)) {
+        // We need to remove the LTR unicode and leading @ from data as it is not part of the login
+        displayNameOrLogin = props.tnode.data.replace(CONST.UNICODE.LTR, '').slice(1);
 
-    const accountID = _.first(PersonalDetailsUtils.getAccountIDsByLogins([loginWithoutLeadingAt]));
+        accountID = _.first(PersonalDetailsUtils.getAccountIDsByLogins([displayNameOrLogin]));
+        navigationRoute = ROUTES.DETAILS.getRoute(displayNameOrLogin);
+    } else {
+        // If neither an account ID or email is provided, don't render anything
+        return null;
+    }
 
-    const isOurMention = loginWithoutLeadingAt === props.currentUserPersonalDetails.login;
+    const isOurMention = accountID === props.currentUserPersonalDetails.accountID;
 
     return (
         <Text>
             <UserDetailsTooltip
                 accountID={accountID}
                 fallbackUserDetails={{
-                    displayName: loginWithoutLeadingAt,
+                    displayName: displayNameOrLogin,
                 }}
             >
                 <TextLink
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...defaultRendererProps}
-                    href={ROUTES.DETAILS.getRoute(loginWithoutLeadingAt)}
+                    href={`/${navigationRoute}`}
                     style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}]}
-                    onPress={() => showUserDetails(loginWithoutLeadingAt)}
+                    onPress={() => Navigation.navigate(navigationRoute)}
                     // Add testID so it is NOT selected as an anchor tag by SelectionScraper
                     testID="span"
                 >
-                    <TNodeChildrenRenderer tnode={props.tnode} />
+                    {!_.isEmpty(htmlAttribAccountID) ? `@${displayNameOrLogin}` : <TNodeChildrenRenderer tnode={props.tnode} />}
                 </TextLink>
             </UserDetailsTooltip>
         </Text>
@@ -66,4 +82,11 @@ function MentionUserRenderer(props) {
 MentionUserRenderer.propTypes = propTypes;
 MentionUserRenderer.displayName = 'MentionUserRenderer';
 
-export default withCurrentUserPersonalDetails(MentionUserRenderer);
+export default compose(
+    withCurrentUserPersonalDetails,
+    withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+    }),
+)(MentionUserRenderer);
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
@@ -68,7 +68,7 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
                         titleColor={titleColor}
                         iconFill={iconFill}
                     />
-                    <View style={[styles.flex1, appBGColor, !isOffline ? safeAreaPaddingBottomStyle : {}]}>
+                    <View style={[styles.flex1, appBGColor, !isOffline && !_.isNull(footer) ? safeAreaPaddingBottomStyle : {}]}>
                         {/** Safari on ios/mac has a bug where overscrolling the page scrollview shows green background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
                         {Browser.isSafari() && (
                             <View style={styles.dualColorOverscrollSpacer}>

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -107,13 +107,13 @@ class BaseOptionsSelector extends Component {
             });
             return;
         }
-        const newFocusedIndex = this.props.selectedOptions.length;
 
+        const newFocusedIndex = this.props.selectedOptions.length;
         // eslint-disable-next-line react/no-did-update-set-state
         this.setState(
             {
                 allOptions: newOptions,
-                focusedIndex: newFocusedIndex,
+                focusedIndex: _.isNumber(this.props.initialFocusedIndex) ? this.props.initialFocusedIndex : newFocusedIndex,
             },
             () => {
                 // If we just toggled an option on a multi-selection page or cleared the search input, scroll to top

diff --git a/src/libs/migrateOnyx.js b/src/libs/migrateOnyx.js
@@ -1,6 +1,5 @@
 import _ from 'underscore';
 import Log from './Log';
-import AddEncryptedAuthToken from './migrations/AddEncryptedAuthToken';
 import RenamePriorityModeKey from './migrations/RenamePriorityModeKey';
 import RenameExpensifyNewsStatus from './migrations/RenameExpensifyNewsStatus';
 import AddLastVisibleActionCreated from './migrations/AddLastVisibleActionCreated';
@@ -13,7 +12,7 @@ export default function () {
 
     return new Promise((resolve) => {
         // Add all migrations to an array so they are executed in order
-        const migrationPromises = [RenamePriorityModeKey, AddEncryptedAuthToken, RenameExpensifyNewsStatus, AddLastVisibleActionCreated, PersonalDetailsByAccountID, RenameReceiptFilename];
+        const migrationPromises = [RenamePriorityModeKey, RenameExpensifyNewsStatus, AddLastVisibleActionCreated, PersonalDetailsByAccountID, RenameReceiptFilename];
 
         // Reduce all promises down to a single promise. All promises run in a linear fashion, waiting for the
         // previous promise to finish before moving onto the next one.

diff --git a/src/libs/migrations/AddEncryptedAuthToken.js b/src/libs/migrations/AddEncryptedAuthToken.js
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -119,7 +119,7 @@ function ContactMethodsPage(props) {
                 title={props.translate('contacts.contactMethods')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
-            <ScrollView>
+            <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <View style={[styles.ph5, styles.mv3, styles.flexRow, styles.flexWrap]}>
                     <Text>
                         {props.translate('contacts.helpTextBeforeEmail')}
@@ -131,15 +131,15 @@ function ContactMethodsPage(props) {
                     </Text>
                 </View>
                 {loginMenuItems}
+                <FixedFooter style={[styles.mtAuto, styles.pt5]}>
+                    <Button
+                        success
+                        text={props.translate('contacts.newContactMethod')}
+                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
+                        pressOnEnter
+                    />
+                </FixedFooter>
             </ScrollView>
-            <FixedFooter style={[styles.flexGrow0, styles.pt5]}>
-                <Button
-                    success
-                    text={props.translate('contacts.newContactMethod')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
-                    pressOnEnter
-                />
-            </FixedFooter>
         </ScreenWrapper>
     );
 }

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -49,7 +49,7 @@ function CodesStep({account = defaultAccount}) {
                 total: 3,
             }}
         >
-            <ScrollView>
+            <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <Section
                     title={translate('twoFactorAuth.keepCodesSafe')}
                     icon={Illustrations.ShieldYellow}
@@ -108,27 +108,27 @@ function CodesStep({account = defaultAccount}) {
                         )}
                     </View>
                 </Section>
-            </ScrollView>
-            <FixedFooter style={[styles.mtAuto, styles.pt2]}>
-                {!_.isEmpty(error) && (
-                    <FormHelpMessage
-                        isError
-                        message={translate(error)}
-                        style={[styles.mb3]}
+                <FixedFooter style={[styles.mtAuto, styles.pt5]}>
+                    {!_.isEmpty(error) && (
+                        <FormHelpMessage
+                            isError
+                            message={translate(error)}
+                            style={[styles.mb3]}
+                        />
+                    )}
+                    <Button
+                        success
+                        text={translate('common.next')}
+                        onPress={() => {
+                            if (!account.codesAreCopied) {
+                                setError('twoFactorAuth.errorStepCodes');
+                                return;
+                            }
+                            setStep(CONST.TWO_FACTOR_AUTH_STEPS.VERIFY);
+                        }}
                     />
-                )}
-                <Button
-                    success
-                    text={translate('common.next')}
-                    onPress={() => {
-                        if (!account.codesAreCopied) {
-                            setError('twoFactorAuth.errorStepCodes');
-                            return;
-                        }
-                        setStep(CONST.TWO_FACTOR_AUTH_STEPS.VERIFY);
-                    }}
-                />
-            </FixedFooter>
+                </FixedFooter>
+            </ScrollView>
         </StepWrapper>
     );
 }

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -76,8 +76,8 @@ function VerifyStep({account = defaultAccount}) {
             onEntryTransitionEnd={() => formRef.current && formRef.current.focus()}
         >
             <ScrollView
-                style={styles.mb5}
                 keyboardShouldPersistTaps="handled"
+                contentContainerStyle={styles.flexGrow1}
             >
                 <View style={[styles.ph5, styles.mt3]}>
                     <Text>
@@ -110,20 +110,20 @@ function VerifyStep({account = defaultAccount}) {
                 <View style={[styles.mt3, styles.mh5]}>
                     <TwoFactorAuthForm innerRef={formRef} />
                 </View>
+                <FixedFooter style={[styles.mtAuto, styles.pt5]}>
+                    <Button
+                        success
+                        text={translate('common.next')}
+                        isLoading={account.isLoading}
+                        onPress={() => {
+                            if (!formRef.current) {
+                                return;
+                            }
+                            formRef.current.validateAndSubmitForm();
+                        }}
+                    />
+                </FixedFooter>
             </ScrollView>
-            <FixedFooter style={[styles.mtAuto, styles.pt2]}>
-                <Button
-                    success
-                    text={translate('common.next')}
-                    isLoading={account.isLoading}
-                    onPress={() => {
-                        if (!formRef.current) {
-                            return;
-                        }
-                        formRef.current.validateAndSubmitForm();
-                    }}
-                />
-            </FixedFooter>
         </StepWrapper>
     );
 }