Merge branch 'main' into @OlGierd03/migrate-AddUnreportedExpense

Author: OlGierd03

.github/workflows/deploy.yml

@@ -554,6 +554,8 @@ jobs:
           else
             npm run build-staging
           fi
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
       - name: Build storybook docs
         continue-on-error: true

.github/workflows/testBuild.yml

@@ -260,6 +260,8 @@ jobs:
 
       - name: Build web for testing
         run: npm run build-adhoc
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
       - name: Deploy to S3 for internal testing
         run: aws s3 cp --recursive --acl public-read "$GITHUB_WORKSPACE"/dist s3://ad-hoc-expensify-cash/web/"$PULL_REQUEST_NUMBER"

__mocks__/reportData/transactions.ts

@@ -30,7 +30,7 @@ const transactionR14932: Transaction = {
     reimbursable: true,
     hasEReceipt: true,
     cardID: 0,
-    modifiedAmount: 0,
+    modifiedAmount: '',
     originalAmount: 0,
     comment: {},
     bank: '',
@@ -59,7 +59,7 @@ const transactionR98765: Transaction = {
     hasEReceipt: true,
     managedCard: false,
     billable: false,
-    modifiedAmount: 0,
+    modifiedAmount: '',
     cardID: 0,
     originalAmount: 0,
     comment: {},

package-lock.json

@@ -189,7 +189,7 @@
     "react-native-localize": "^3.5.4",
     "react-native-nitro-modules": "0.29.4",
     "react-native-nitro-sqlite": "9.2.0",
-    "react-native-onyx": "3.0.15",
+    "react-native-onyx": "3.0.19",
     "react-native-pager-view": "6.9.1",
     "react-native-pdf": "7.0.2",
     "react-native-performance": "^6.0.0",

package.json

@@ -710,6 +710,7 @@ const CONST = {
         NO_OPTIMISTIC_TRANSACTION_THREADS: 'noOptimisticTransactionThreads',
         UBER_FOR_BUSINESS: 'uberForBusiness',
         CUSTOM_REPORT_NAMES: 'newExpensifyCustomReportNames',
+        ZERO_EXPENSES: 'zeroExpenses',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',
@@ -1684,6 +1685,7 @@ const CONST = {
         SPAN_OPEN_SEARCH_ROUTER: 'ManualOpenSearchRouter',
         SPAN_OPEN_CREATE_EXPENSE: 'ManualOpenCreateExpense',
         SPAN_SEND_MESSAGE: 'ManualSendMessage',
+        SPAN_SKELETON: 'ManualSkeleton',
         SPAN_BOOTSPLASH: {
             ROOT: 'BootsplashVisible',
             NAVIGATION: 'BootsplashVisibleNavigation',
@@ -1699,6 +1701,11 @@ const CONST = {
         ATTRIBUTE_CANCELED: 'canceled',
         ATTRIBUTE_ROUTE_FROM: 'route_from',
         ATTRIBUTE_ROUTE_TO: 'route_to',
+        ATTRIBUTE_MIN_DURATION: 'min_duration',
+        ATTRIBUTE_FINISHED_MANUALLY: 'finished_manually',
+        CONFIG: {
+            SKELETON_MIN_DURATION: 10_000,
+        },
     },
     PRIORITY_MODE: {
         GSD: 'gsd',

src/CONST/index.ts

@@ -6,6 +6,7 @@ import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
 import CONST from '@src/CONST';
 
 type AccountSwitcherSkeletonViewProps = {
@@ -20,9 +21,11 @@ function AccountSwitcherSkeletonView({shouldAnimate = true, avatarSize = CONST.A
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    useSkeletonSpan('AccountSwitcherSkeletonView');
     const avatarPlaceholderSize = StyleUtils.getAvatarSize(avatarSize);
     const avatarPlaceholderRadius = avatarPlaceholderSize / 2;
     const startPositionX = avatarPlaceholderRadius;
+    const rectXTranslation = startPositionX + avatarPlaceholderRadius + styles.gap3.gap;
 
     return (
         <View style={styles.avatarSectionWrapperSkeleton}>
@@ -38,14 +41,12 @@ function AccountSwitcherSkeletonView({shouldAnimate = true, avatarSize = CONST.A
                     r={avatarPlaceholderRadius}
                 />
                 <Rect
-                    x={startPositionX + avatarPlaceholderRadius + styles.gap3.gap}
-                    y="6"
+                    transform={[{translateX: rectXTranslation}, {translateY: 6}]}
                     width="45%"
                     height="8"
                 />
                 <Rect
-                    x={startPositionX + avatarPlaceholderRadius + styles.gap3.gap}
-                    y="26"
+                    transform={[{translateX: rectXTranslation}, {translateY: 26}]}
                     width="55%"
                     height="8"
                 />

src/components/AccountSwitcherSkeletonView/index.tsx

@@ -1,5 +1,4 @@
 import React, {useMemo} from 'react';
-import type {SectionListData} from 'react-native';
 import useDebouncedState from '@hooks/useDebouncedState';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -13,15 +12,14 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Policy} from '@src/types/onyx';
-import type {Icon} from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import BlockingView from './BlockingViews/BlockingView';
 import FullPageNotFoundView from './BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import ScreenWrapper from './ScreenWrapper';
-import SelectionList from './SelectionListWithSections';
-import InviteMemberListItem from './SelectionListWithSections/InviteMemberListItem';
-import type {Section} from './SelectionListWithSections/types';
+import SelectionList from './SelectionList';
+import InviteMemberListItem from './SelectionList/ListItem/InviteMemberListItem';
+import type {ListItem} from './SelectionList/types';
 
 type ApproverSelectionListPageProps = {
     testID: string;
@@ -42,21 +40,13 @@ type ApproverSelectionListPageProps = {
     onSelectApprover?: (approvers: SelectionListApprover[]) => void;
     shouldShowLoadingPlaceholder?: boolean;
     shouldEnableHeaderMaxHeight?: boolean;
+    shouldUpdateFocusedIndex?: boolean;
 };
 
-type SelectionListApprover = {
-    text: string;
-    alternateText: string;
-    keyForList: string;
-    isSelected: boolean;
-    login: string;
-    rightElement?: React.ReactNode;
-    icons: Icon[];
+type SelectionListApprover = ListItem & {
     value?: number;
 };
 
-type ApproverSection = SectionListData<SelectionListApprover, Section<SelectionListApprover>>;
-
 function ApproverSelectionList({
     testID,
     headerTitle,
@@ -76,6 +66,7 @@ function ApproverSelectionList({
     onSelectApprover,
     shouldShowLoadingPlaceholder,
     shouldEnableHeaderMaxHeight,
+    shouldUpdateFocusedIndex = true,
 }: ApproverSelectionListPageProps) {
     const styles = useThemeStyles();
     const {translate, localeCompare} = useLocalize();
@@ -89,23 +80,16 @@ function ApproverSelectionList({
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundView = (isEmptyObject(policy) && !isLoadingReportData) || !isPolicyAdmin(policy) || isPendingDeletePolicy(policy) || shouldShowNotFoundViewProp;
 
-    const sections: ApproverSection[] = useMemo(() => {
+    const data = useMemo(() => {
         const filteredApprovers =
             debouncedSearchTerm !== ''
                 ? tokenizedSearch(allApprovers, getSearchValueForPhoneOrEmail(debouncedSearchTerm, countryCode), (option) => [option.text ?? '', option.login ?? ''])
                 : allApprovers;
 
-        const data = sortAlphabetically(filteredApprovers, 'text', localeCompare);
-        return [
-            {
-                title: undefined,
-                data,
-                shouldShow: true,
-            },
-        ];
+        return sortAlphabetically(filteredApprovers, 'text', localeCompare);
     }, [allApprovers, debouncedSearchTerm, countryCode, localeCompare]);
 
-    const shouldShowListEmptyContent = !debouncedSearchTerm && !sections.at(0)?.data.length && shouldShowListEmptyContentProp;
+    const shouldShowListEmptyContent = !debouncedSearchTerm && !data.length && shouldShowListEmptyContentProp;
 
     const toggleApprover = (member: SelectionListApprover) => {
         const isAlreadySelected = selectedMembers.some((selectedOption) => selectedOption.login === member.login);
@@ -122,8 +106,6 @@ function ApproverSelectionList({
         }
     };
 
-    const headerMessage = useMemo(() => (searchTerm && !sections.at(0)?.data?.length ? translate('common.noResultsFound') : ''), [searchTerm, sections, translate]);
-
     const listEmptyContent = useMemo(
         () => (
             <BlockingView
@@ -140,6 +122,16 @@ function ApproverSelectionList({
         [translate, listEmptyContentSubtitle, styles.textSupporting, styles.pb10, lazyIllustrations.TurtleInShell],
     );
 
+    const textInputOptions = useMemo(
+        () => ({
+            label: shouldShowListEmptyContent ? undefined : translate('selectionList.findMember'),
+            value: searchTerm,
+            onChangeText: setSearchTerm,
+            headerMessage: searchTerm && !data?.length ? translate('common.noResultsFound') : '',
+        }),
+        [shouldShowListEmptyContent, translate, searchTerm, setSearchTerm, data?.length],
+    );
+
     return (
         <ScreenWrapper
             testID={testID}
@@ -160,24 +152,21 @@ function ApproverSelectionList({
                 />
                 {subtitle}
                 <SelectionList
-                    canSelectMultiple={allowMultipleSelection}
-                    sections={sections}
-                    ListItem={InviteMemberListItem}
-                    textInputLabel={shouldShowListEmptyContent ? undefined : translate('selectionList.findMember')}
-                    textInputValue={searchTerm}
-                    onChangeText={setSearchTerm}
-                    headerMessage={headerMessage}
+                    data={data}
                     onSelectRow={toggleApprover}
-                    showScrollIndicator
+                    ListItem={InviteMemberListItem}
+                    textInputOptions={textInputOptions}
+                    canSelectMultiple={allowMultipleSelection}
                     shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
                     listEmptyContent={listEmptyContent}
-                    shouldShowListEmptyContent={shouldShowListEmptyContent}
-                    initiallyFocusedOptionKey={initiallyFocusedOptionKey}
-                    shouldUpdateFocusedIndex
+                    showListEmptyContent={shouldShowListEmptyContent}
+                    initiallyFocusedItemKey={initiallyFocusedOptionKey}
                     shouldShowTextInput={shouldShowTextInput}
-                    addBottomSafeAreaPadding
                     showLoadingPlaceholder={shouldShowLoadingPlaceholder}
                     footerContent={footerContent}
+                    addBottomSafeAreaPadding
+                    shouldUpdateFocusedIndex={shouldUpdateFocusedIndex}
+                    showScrollIndicator
                 />
             </FullPageNotFoundView>
         </ScreenWrapper>

src/components/ApproverSelectionList.tsx

@@ -29,6 +29,8 @@ type AvatarSelectorProps = {
     label?: string;
 };
 
+const SPACER_SIZE = 10;
+
 /**
  * AvatarSelector — renders a grid of selectable avatars.
  */
@@ -39,6 +41,8 @@ function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_
     const StyleUtils = useStyleUtils();
     const {avatarList} = useLetterAvatars(name, size);
 
+    const iconSize = StyleUtils.getAvatarSize(size);
+
     return (
         <>
             {!!label && avatarList?.length > 0 && (
@@ -89,6 +93,15 @@ function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_
                         </PressableWithFeedback>
                     );
                 })}
+                {/* We need to add several invisible items at the end of the avatar list to guarantee that the last row avatars are aligned properly */}
+                {[...Array(SPACER_SIZE).keys()].map((i) => (
+                    <View
+                        key={`spacer-${i}`}
+                        style={[styles.avatarSelectorWrapper]}
+                    >
+                        <View style={{width: iconSize, height: iconSize}} />
+                    </View>
+                ))}
             </View>
         </>
     );

src/components/AvatarSelector.tsx

@@ -3,12 +3,13 @@ import {Circle} from 'react-native-svg';
 import type {ValueOf} from 'type-fest';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
+import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
 import CONST from '@src/CONST';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
 function AvatarSkeleton({size = CONST.AVATAR_SIZE.SMALL}: {size?: ValueOf<typeof CONST.AVATAR_SIZE>}) {
     const theme = useTheme();
-
+    useSkeletonSpan('AvatarSkeleton');
     const StyleUtils = useStyleUtils();
     const avatarSize = StyleUtils.getAvatarSize(size);
     const skeletonCircleRadius = avatarSize / 2;