Merge pull request Expensify#88102 from bernhardoj/fix/revamp-actions-bar-filters-chip-regression

[CP Staging] Fix revamp actions bar filters chip regression

Author: JS00001

src/components/Search/FilterDropdowns/CardSelectPopup.tsx

@@ -4,6 +4,7 @@ import ActivityIndicator from '@components/ActivityIndicator';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import CardListItem from '@components/SelectionList/ListItem/CardListItem';
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
+import type {Section} from '@components/SelectionList/SelectionListWithSections/types';
 import {useCompanyCardFeedIcons} from '@hooks/useCompanyCardIcons';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
@@ -38,8 +39,7 @@ function CardSelectPopup({isExpanded, updateFilterForm, closeOverlay}: CardSelec
     const illustrations = useThemeIllustrations();
     const companyCardFeedIcons = useCompanyCardFeedIcons();
     const {windowHeight} = useWindowDimensions();
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth, isInLandscapeMode} = useResponsiveLayout();
+    const {shouldUseNarrowLayout, isInLandscapeMode} = useResponsiveLayout();
 
     const [areCardsLoaded] = useOnyx(ONYXKEYS.IS_SEARCH_FILTERS_CARD_DATA_LOADED);
     const [userCardList, userCardListMetadata] = useOnyx(ONYXKEYS.CARD_LIST);
@@ -100,31 +100,42 @@ function CardSelectPopup({isExpanded, updateFilterForm, closeOverlay}: CardSelec
         !!item.cardName?.toLocaleLowerCase().includes(debouncedSearchTerm.toLocaleLowerCase()) ||
         (item.isVirtual && translate('workspace.expensifyCard.virtual').toLocaleLowerCase().includes(debouncedSearchTerm.toLocaleLowerCase()));
 
-    const sections =
-        searchAdvancedFiltersForm === undefined
-            ? []
-            : [
-                  {
-                      title: undefined,
-                      data: [...cardFeedsSectionData.selected, ...individualCardsSectionData.selected, ...closedCardsSectionData.selected].filter(searchFunction),
-                      sectionIndex: 0,
-                  },
-                  {
-                      title: translate('search.filters.card.cardFeeds'),
-                      data: cardFeedsSectionData.unselected.filter(searchFunction),
-                      sectionIndex: 1,
-                  },
-                  {
-                      title: translate('search.filters.card.individualCards'),
-                      data: individualCardsSectionData.unselected.filter(searchFunction),
-                      sectionIndex: 2,
-                  },
-                  {
-                      title: translate('search.filters.card.closedCards'),
-                      data: closedCardsSectionData.unselected.filter(searchFunction),
-                      sectionIndex: 3,
-                  },
-              ];
+    let sections: Array<Section<CardFilterItem>> = [];
+    let itemCount;
+    let sectionHeaderCount = 0;
+
+    if (searchAdvancedFiltersForm) {
+        const selectedData = [...cardFeedsSectionData.selected, ...individualCardsSectionData.selected, ...closedCardsSectionData.selected].filter(searchFunction);
+        const unselectedCardFeedsData = cardFeedsSectionData.unselected.filter(searchFunction);
+        const unselectedIndividualCardsData = individualCardsSectionData.unselected.filter(searchFunction);
+        const unselectedClosedCardsData = closedCardsSectionData.unselected.filter(searchFunction);
+
+        itemCount = selectedData.length + unselectedCardFeedsData.length + unselectedIndividualCardsData.length + unselectedClosedCardsData.length;
+        sectionHeaderCount = [unselectedCardFeedsData.length, unselectedIndividualCardsData.length, unselectedClosedCardsData.length].filter(Boolean).length;
+
+        sections = [
+            {
+                title: undefined,
+                data: selectedData,
+                sectionIndex: 0,
+            },
+            {
+                title: translate('search.filters.card.cardFeeds'),
+                data: unselectedCardFeedsData,
+                sectionIndex: 1,
+            },
+            {
+                title: translate('search.filters.card.individualCards'),
+                data: unselectedIndividualCardsData,
+                sectionIndex: 2,
+            },
+            {
+                title: translate('search.filters.card.closedCards'),
+                data: unselectedClosedCardsData,
+                sectionIndex: 3,
+            },
+        ];
+    }
 
     const applyChanges = () => {
         const feeds = cardFeedsSectionData.selected.map((feed) => feed.cardFeedKey);
@@ -174,6 +185,8 @@ function CardSelectPopup({isExpanded, updateFilterForm, closeOverlay}: CardSelec
             onApply={applyChanges}
             resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_CARD}
             applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_CARD}
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we want to fallback to 1 when it's 0
+            style={styles.getCardSelectionListPopoverHeight(itemCount || 1, sectionHeaderCount, windowHeight, shouldUseNarrowLayout, isInLandscapeMode, shouldShowSearchInput)}
         >
             {!!shouldShowLoadingState && (
                 <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsCenter]}>
@@ -186,28 +199,16 @@ function CardSelectPopup({isExpanded, updateFilterForm, closeOverlay}: CardSelec
                 </View>
             )}
             {!shouldShowLoadingState && (
-                <View
-                    style={[
-                        styles.getSelectionListPopoverHeight(
-                            sections.flatMap((section) => section.data).length || 1,
-                            windowHeight,
-                            shouldShowSearchInput,
-                            isInLandscapeMode,
-                            isSmallScreenWidth,
-                        ),
-                    ]}
-                >
-                    <SelectionListWithSections<CardFilterItem>
-                        sections={sections}
-                        ListItem={CardListItem}
-                        onSelectRow={updateNewCards}
-                        shouldPreventDefaultFocusOnSelectRow={false}
-                        shouldShowTextInput={shouldShowSearchInput}
-                        textInputOptions={textInputOptions}
-                        shouldStopPropagation
-                        canSelectMultiple
-                    />
-                </View>
+                <SelectionListWithSections<CardFilterItem>
+                    sections={sections}
+                    ListItem={CardListItem}
+                    onSelectRow={updateNewCards}
+                    shouldPreventDefaultFocusOnSelectRow={false}
+                    shouldShowTextInput={shouldShowSearchInput}
+                    textInputOptions={textInputOptions}
+                    shouldStopPropagation
+                    canSelectMultiple
+                />
             )}
         </BasePopup>
     );

src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx

@@ -301,10 +301,14 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
             case FILTER_KEYS.IS:
             case FILTER_KEYS.EXPENSE_TYPE:
             case FILTER_KEYS.STATUS: {
-                const formValues = searchAdvancedFiltersForm[filterKey];
-                const formValuesAsArray = Array.isArray(formValues) ? formValues : [formValues];
+                let formValues = searchAdvancedFiltersForm[filterKey] ?? [];
+
+                if (filterKey === FILTER_KEYS.STATUS) {
+                    formValues = Array.isArray(formValues) ? formValues : formValues.split(',');
+                }
+
                 const items = getMultiSelectFilterOptions(filterKey, type, translate);
-                const value = items.filter((item) => formValuesAsArray.includes(item.value));
+                const value = items.filter((item) => formValues.includes(item.value));
 
                 const multiSelectComponent = ({closeOverlay}: PopoverComponentProps) => (
                     <MultiSelectFilterPopup

src/libs/SearchUIUtils.ts

@@ -4806,6 +4806,7 @@ const FILTER_LABEL_MAP: Partial<Record<SearchAdvancedFiltersKey, TranslationPath
     [FILTER_KEYS.STATUS]: 'common.status',
     [FILTER_KEYS.TAG]: 'common.tag',
     [FILTER_KEYS.TAX_RATE]: 'workspace.taxes.taxRate',
+    [FILTER_KEYS.TYPE]: 'common.type',
     [FILTER_KEYS.TO]: 'common.to',
     [FILTER_KEYS.TITLE]: 'common.title',
     [FILTER_KEYS.WITHDRAWAL_ID]: 'common.withdrawalID',
@@ -4915,6 +4916,14 @@ function getDisplayValue(
     translate: LocalizedTranslate,
     localeCompare: LocaleContextProps['localeCompare'],
 ) {
+    if (key === FILTER_KEYS.TYPE) {
+        const filterValue = form[key];
+        if (filterValue === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT) {
+            return translate('common.expenseReport');
+        }
+        return filterValue ? translate(`common.${filterValue}`) : undefined;
+    }
+
     if (key === FILTER_KEYS.TAG || key === FILTER_KEYS.CATEGORY) {
         const mapFn =
             key === FILTER_KEYS.TAG

src/styles/index.ts

@@ -6319,6 +6319,31 @@ const dynamicStyles = (theme: ThemeColors) =>
             return {height, ...width};
         },
 
+        getCardSelectionListPopoverHeight: (
+            itemCount: number,
+            sectionHeaderCount: number,
+            windowHeight: number,
+            shouldUseNarrowLayout: boolean,
+            isInLandscapeMode: boolean,
+            isSearchable = true,
+        ) => {
+            const MODAL_PADDING = 32;
+            const BUTTON_HEIGHT = 48;
+            const SEARCHBAR_HEIGHT = isSearchable ? 64 : 0;
+            const TITLE_HEIGHT = shouldUseNarrowLayout ? 34 : 0;
+            const PADDING = shouldUseNarrowLayout ? 0 : MODAL_PADDING;
+            const ESTIMATED_LIST_HEIGHT = itemCount * variables.optionRowHeight + sectionHeaderCount * 28 + SEARCHBAR_HEIGHT + BUTTON_HEIGHT + TITLE_HEIGHT + PADDING;
+
+            const popoverHeight = isInLandscapeMode ? CONST.MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO_LANDSCAPE_MODE * windowHeight - MODAL_PADDING : CONST.POPOVER_DROPDOWN_MAX_HEIGHT;
+
+            // Native platforms don't support maxHeight in the way thats expected, so lets manually set the height to either
+            // the listHeight, the max height of the popover, or 90% of the window height, such that we never overflow the screen
+            // and never expand over the max height
+            const height = Math.min(ESTIMATED_LIST_HEIGHT, popoverHeight, windowHeight * 0.9);
+
+            return {height};
+        },
+
         testDriveModalContainer: (shouldUseNarrowLayout: boolean) => ({
             // On small/medium screens, we need to remove the top padding
             paddingTop: 0,