Merge branch 'main' into revert-27414-@kosmydel/handle-invisible-char…

…acters
Expensify · Nov 10, 2023 · 7c65b04 · 7c65b04
2 parents 2045847 + 9f9cb09
commit 7c65b04
Show file tree

Hide file tree

Showing 11 changed files with 290 additions and 197 deletions.
diff --git a/.github/actions/javascript/authorChecklist/action.yml b/.github/actions/javascript/authorChecklist/action.yml
@@ -5,5 +5,5 @@ inputs:
     description: Auth token for New Expensify Github
     required: true
 runs:
-  using: 'node16'
+  using: 'node20'
   main: './index.js'
diff --git a/.github/actions/javascript/authorChecklist/authorChecklist.ts b/.github/actions/javascript/authorChecklist/authorChecklist.ts
@@ -1,5 +1,5 @@
-import core from '@actions/core';
-import github from '@actions/github';
+import * as core from '@actions/core';
+import * as github from '@actions/github';
 import escapeRegExp from 'lodash/escapeRegExp';
 import CONST from '../../../libs/CONST';
 import GithubUtils from '../../../libs/GithubUtils';

diff --git a/.github/actions/javascript/authorChecklist/index.js b/.github/actions/javascript/authorChecklist/index.js
diff --git a/.github/tsconfig.json b/.github/tsconfig.json
@@ -1,6 +1,7 @@
 {
     "extends": "../tsconfig.json",
     "compilerOptions": {
-        "incremental": false
+        "incremental": false,
+        "esModuleInterop": true
     }
 }
diff --git a/.github/workflows/README.md b/.github/workflows/README.md
@@ -3,8 +3,6 @@
 ## Important tip for creating GitHub Workflows
 All inputs and outputs to GitHub Actions and any data passed between jobs or workflows is JSON-encoded (AKA, strings). Keep this in mind whenever writing GitHub workflows – you may need to JSON-decode variables to access them accurately. Here's an example of a common way to misuse GitHub Actions data:
 
-
-
 ```yaml
 name: CI
 on: pull_request

diff --git a/.github/workflows/authorChecklist.yml b/.github/workflows/authorChecklist.yml
@@ -11,7 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     if: github.actor != 'OSBotify' && github.actor != 'imgbot[bot]'
     steps:
+      - uses: actions/checkout@v3
+
       - name: authorChecklist.js
-        uses: Expensify/App/.github/actions/javascript/authorChecklist@main
+        uses: ./.github/actions/javascript/authorChecklist
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -5,6 +5,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import withNavigationFocus from '@components/withNavigationFocus';
+import compose from '@libs/compose';
 import getButtonState from '@libs/getButtonState';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -41,6 +43,9 @@ function EmojiPickerButton(props) {
                 style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]}
                 disabled={props.isDisabled}
                 onPress={() => {
+                    if (!props.isFocused) {
+                        return;
+                    }
                     if (!EmojiPickerAction.emojiPickerRef.current.isEmojiPickerVisible) {
                         EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor.current, undefined, () => {}, props.emojiPickerID);
                     } else {
@@ -64,4 +69,4 @@ function EmojiPickerButton(props) {
 EmojiPickerButton.propTypes = propTypes;
 EmojiPickerButton.defaultProps = defaultProps;
 EmojiPickerButton.displayName = 'EmojiPickerButton';
-export default withLocalize(EmojiPickerButton);
+export default compose(withLocalize, withNavigationFocus)(EmojiPickerButton);
diff --git a/src/components/SubscriptAvatar.js → src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.js → src/components/SubscriptAvatar.tsx
@@ -1,46 +1,59 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, {memo} from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
+import {ValueOf} from 'type-fest';
+import type {AvatarSource} from '@libs/UserUtils';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 import Avatar from './Avatar';
-import avatarPropTypes from './avatarPropTypes';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
-const propTypes = {
+type SubAvatar = {
+    /** Avatar source to display */
+    source?: AvatarSource;
+
+    /** Denotes whether it is an avatar or a workspace avatar */
+    type?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
+
+    /** Owner of the avatar. If user, displayName. If workspace, policy name */
+    name?: string;
+
+    /** Avatar id */
+    id?: number | string;
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon?: AvatarSource;
+};
+
+type SubscriptAvatarProps = {
     /** Avatar URL or icon */
-    mainAvatar: avatarPropTypes,
+    mainAvatar?: SubAvatar;
 
     /** Subscript avatar URL or icon */
-    secondaryAvatar: avatarPropTypes,
+    secondaryAvatar?: SubAvatar;
 
     /** Set the size of avatars */
-    size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+    size?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
     /** Background color used for subscript avatar border */
-    backgroundColor: PropTypes.string,
+    backgroundColor?: string;
 
     /** Removes margin from around the avatar, used for the chat view */
-    noMargin: PropTypes.bool,
+    noMargin?: boolean;
 
     /** Whether to show the tooltip */
-    showTooltip: PropTypes.bool,
-};
-
-const defaultProps = {
-    size: CONST.AVATAR_SIZE.DEFAULT,
-    backgroundColor: themeColors.componentBG,
-    mainAvatar: {},
-    secondaryAvatar: {},
-    noMargin: false,
-    showTooltip: true,
+    showTooltip?: boolean;
 };
 
-function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, noMargin, showTooltip}) {
+function SubscriptAvatar({
+    mainAvatar = {},
+    secondaryAvatar = {},
+    size = CONST.AVATAR_SIZE.DEFAULT,
+    backgroundColor = themeColors.componentBG,
+    noMargin = false,
+    showTooltip = true,
+}: SubscriptAvatarProps) {
     const isSmall = size === CONST.AVATAR_SIZE.SMALL;
     const subscriptStyle = size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.secondAvatarSubscriptSmallNormal : styles.secondAvatarSubscript;
     const containerStyle = StyleUtils.getContainerStyles(size);
@@ -49,14 +62,14 @@ function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, no
         <View style={[containerStyle, noMargin ? styles.mr0 : {}]}>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={lodashGet(mainAvatar, 'id', -1)}
+                accountID={mainAvatar.id ?? -1}
                 icon={mainAvatar}
             >
                 <View>
                     <Avatar
                         containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(size || CONST.AVATAR_SIZE.DEFAULT))}
                         source={mainAvatar.source}
-                        size={size || CONST.AVATAR_SIZE.DEFAULT}
+                        size={size}
                         name={mainAvatar.name}
                         type={mainAvatar.type}
                         fallbackIcon={mainAvatar.fallbackIcon}
@@ -65,7 +78,7 @@ function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, no
             </UserDetailsTooltip>
             <UserDetailsTooltip
                 shouldRender={showTooltip}
-                accountID={lodashGet(secondaryAvatar, 'id', -1)}
+                accountID={secondaryAvatar.id ?? -1}
                 icon={secondaryAvatar}
             >
                 <View
@@ -93,6 +106,5 @@ function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, no
 }
 
 SubscriptAvatar.displayName = 'SubscriptAvatar';
-SubscriptAvatar.propTypes = propTypes;
-SubscriptAvatar.defaultProps = defaultProps;
+
 export default memo(SubscriptAvatar);
diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts
@@ -8,6 +8,8 @@ import hashCode from './hashCode';
 
 type AvatarRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 
+type AvatarSource = React.FC<SvgProps> | string;
+
 type LoginListIndicator = ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | '';
 
 /**
@@ -202,3 +204,4 @@ export {
     getFullSizeAvatar,
     generateAccountID,
 };
+export type {AvatarSource};
diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -9,9 +9,12 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PopoverMenu from '@components/PopoverMenu';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
+import withNavigationFocus from '@components/withNavigationFocus';
 import useLocalize from '@hooks/useLocalize';
+import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
+import compose from '@libs/compose';
 import Permissions from '@libs/Permissions';
 import * as ReportUtils from '@libs/ReportUtils';
 import styles from '@styles/styles';
@@ -84,6 +87,9 @@ const propTypes = {
         // eslint-disable-next-line react/forbid-prop-types
         current: PropTypes.object,
     }).isRequired,
+
+    /** Whether navigation is focused */
+    isFocused: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
@@ -116,6 +122,7 @@ function AttachmentPickerWithMenuItems({
     onAddActionPressed,
     onItemSelected,
     actionButtonRef,
+    isFocused,
 }) {
     const {translate} = useLocalize();
     const {windowHeight} = useWindowDimensions();
@@ -164,10 +171,33 @@ function AttachmentPickerWithMenuItems({
         ];
     }, [betas, report, reportID, translate]);
 
-    const onPopoverMenuClose = () => {
+    const onPopoverMenuClose = useCallback(() => {
         setMenuVisibility(false);
         onMenuClosed();
-    };
+    }, [onMenuClosed, setMenuVisibility]);
+
+    const prevIsFocused = usePrevious(isFocused);
+
+    /**
+     * Check if current screen is inactive and previous screen is active.
+     * Used to close already opened popover menu when any other page is opened over current page.
+     *
+     * @return {Boolean}
+     */
+    const didScreenBecomeInactive = useCallback(
+        () =>
+            // When any other page is opened over LHN
+            !isFocused && prevIsFocused,
+        [isFocused, prevIsFocused],
+    );
+
+    // When the navigation is focused, we want to close the popover menu.
+    useEffect(() => {
+        if (!didScreenBecomeInactive()) {
+            return;
+        }
+        onPopoverMenuClose();
+    }, [didScreenBecomeInactive, onPopoverMenuClose]);
 
     return (
         <AttachmentPicker>
@@ -239,6 +269,10 @@ function AttachmentPickerWithMenuItems({
                                     ref={actionButtonRef}
                                     onPress={(e) => {
                                         e.preventDefault();
+                                        if (!isFocused) {
+                                            return;
+                                        }
+
                                         onAddActionPressed();
 
                                         // Drop focus to avoid blue focus ring.
@@ -256,7 +290,7 @@ function AttachmentPickerWithMenuItems({
                         </View>
                         <PopoverMenu
                             animationInTiming={CONST.ANIMATION_IN_TIMING}
-                            isVisible={isMenuVisible}
+                            isVisible={isMenuVisible && isFocused}
                             onClose={onPopoverMenuClose}
                             onItemSelected={(item, index) => {
                                 setMenuVisibility(false);
@@ -286,8 +320,11 @@ AttachmentPickerWithMenuItems.propTypes = propTypes;
 AttachmentPickerWithMenuItems.defaultProps = defaultProps;
 AttachmentPickerWithMenuItems.displayName = 'AttachmentPickerWithMenuItems';
 
-export default withOnyx({
-    betas: {
-        key: ONYXKEYS.BETAS,
-    },
-})(AttachmentPickerWithMenuItems);
+export default compose(
+    withNavigationFocus,
+    withOnyx({
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
+    }),
+)(AttachmentPickerWithMenuItems);
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
@@ -1292,8 +1292,8 @@ function getAmountFontSizeAndLineHeight(baseFontSize: number, baseLineHeight: nu
 /**
  * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar
  */
-function getContainerStyles(size: string, isInReportAction = false): Array<ViewStyle | CSSProperties> {
-    let containerStyles: Array<ViewStyle | CSSProperties>;
+function getContainerStyles(size: string, isInReportAction = false): ViewStyle[] {
+    let containerStyles: ViewStyle[];
 
     switch (size) {
         case CONST.AVATAR_SIZE.SMALL: