[Wiring the UI] Revamp search page actions bar

src/CONST/index.ts

@@ -8829,22 +8829,11 @@ const CONST = {
             SELECT_ALL_BUTTON: 'Search-SelectAllButton',
             TYPE_MENU_BUTTON: 'Search-TypeMenuButton',
             FILTER_DISPLAY: 'Search-FilterDisplay',
-            FILTER_TYPE: 'Search-FilterType',
-            FILTER_STATUS: 'Search-FilterStatus',
-            FILTER_DATE: 'Search-FilterDate',
-            FILTER_FROM: 'Search-FilterFrom',
-            FILTER_WORKSPACE: 'Search-FilterWorkspace',
             FILTER_GROUP_BY: 'Search-FilterGroupBy',
             FILTER_SORT_BY: 'Search-FilterSortBy',
             FILTER_GROUP_CURRENCY: 'Search-FilterGroupCurrency',
             FILTER_VIEW: 'Search-FilterView',
             FILTER_LIMIT: 'Search-FilterLimit',
-            FILTER_FEED: 'Search-FilterFeed',
-            FILTER_POSTED: 'Search-FilterPosted',
-            FILTER_WITHDRAWN: 'Search-FilterWithdrawn',
-            FILTER_WITHDRAWAL_TYPE: 'Search-FilterWithdrawalType',
-            FILTER_HAS: 'Search-FilterHas',
-            FILTER_IS: 'Search-FilterIs',
             ADVANCED_FILTERS_BUTTON: 'Search-AdvancedFiltersButton',
             COLUMNS_BUTTON: 'Search-ColumnsButton',
             SELECT_ALL_MATCHING_BUTTON: 'Search-SelectAllMatchingButton',

src/SCREENS.ts

@@ -53,8 +53,6 @@ const SCREENS = {
         REPORT_VERIFY_ACCOUNT: 'Search_Report_Verify_Account',
         ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP',
         ADVANCED_FILTERS_TYPE_RHP: 'Search_Advanced_Filters_Type_RHP',
-        ADVANCED_FILTERS_GROUP_BY_RHP: 'Search_Advanced_Filters_GroupBy_RHP',
-        ADVANCED_FILTERS_VIEW_RHP: 'Search_Advanced_Filters_View_RHP',
         ADVANCED_FILTERS_STATUS_RHP: 'Search_Advanced_Filters_Status_RHP',
         ADVANCED_FILTERS_DATE_RHP: 'Search_Advanced_Filters_Date_RHP',
         ADVANCED_FILTERS_SUBMITTED_RHP: 'Search_Advanced_Filters_Submitted_RHP',
@@ -65,7 +63,6 @@ const SCREENS = {
         ADVANCED_FILTERS_POSTED_RHP: 'Search_Advanced_Filters_Posted_RHP',
         ADVANCED_FILTERS_WITHDRAWN_RHP: 'Search_Advanced_Filters_Withdrawn_RHP',
         ADVANCED_FILTERS_CURRENCY_RHP: 'Search_Advanced_Filters_Currency_RHP',
-        ADVANCED_FILTERS_GROUP_CURRENCY_RHP: 'Search_Advanced_Filters_Group_Currency_RHP',
         ADVANCED_FILTERS_DESCRIPTION_RHP: 'Search_Advanced_Filters_Description_RHP',
         ADVANCED_FILTERS_MERCHANT_RHP: 'Search_Advanced_Filters_Merchant_RHP',
         ADVANCED_FILTERS_REPORT_ID_RHP: 'Search_Advanced_Filters_ReportID_RHP',
@@ -81,7 +78,6 @@ const SCREENS = {
         ADVANCED_FILTERS_WITHDRAWAL_ID_RHP: 'Search_Advanced_Filters_Withdrawal_ID_RHP',
         ADVANCED_FILTERS_TAG_RHP: 'Search_Advanced_Filters_Tag_RHP',
         ADVANCED_FILTERS_HAS_RHP: 'Search_Advanced_Filters_Has_RHP',
-        ADVANCED_FILTERS_LIMIT_RHP: 'Search_Advanced_Filters_Limit_RHP',
         ADVANCED_FILTERS_FROM_RHP: 'Search_Advanced_Filters_From_RHP',
         ADVANCED_FILTERS_TO_RHP: 'Search_Advanced_Filters_To_RHP',
         ADVANCED_FILTERS_TITLE_RHP: 'Search_Advanced_Filters_Title_RHP',

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -495,7 +495,7 @@ function MoneyRequestReportTransactionList({
 
     const groupByPopoverComponent = useCallback(
         (props: {closeOverlay: () => void}) => (
-            <View style={[styles.pt4, styles.pb1]}>
+            <View style={[!isSmallScreenWidth && styles.pv4]}>
                 <View style={styles.getSelectionListPopoverHeight(groupByOptions.length || 1, windowHeight, false, isInLandscapeMode, false)}>
                     <SelectionList
                         data={groupByOptions}
@@ -508,11 +508,12 @@ function MoneyRequestReportTransactionList({
                             setReportLayoutGroupBy(item.keyForList, reportLayoutGroupBy);
                             props.closeOverlay();
                         }}
+                        style={{contentContainerStyle: [styles.pb0]}}
                     />
                 </View>
             </View>
         ),
-        [groupByOptions, reportLayoutGroupBy, styles, windowHeight, isInLandscapeMode],
+        [groupByOptions, reportLayoutGroupBy, styles, windowHeight, isSmallScreenWidth, isInLandscapeMode],
     );
 
     const transactionListContent = (

src/components/Search/FilterDropdowns/DisplayPopup.tsx

@@ -21,8 +21,10 @@ import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {SearchResults} from '@src/types/onyx';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
 import GroupByPopup from './GroupByPopup';
+import GroupCurrencyPopup from './GroupCurrencyPopup';
 import SingleSelectPopup from './SingleSelectPopup';
 import SortByPopup from './SortByPopup';
+import SortOrderPopup from './SortOrderPopup';
 import TextInputPopup from './TextInputPopup';
 
 type DisplayPopupProps = {
@@ -41,8 +43,10 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
     const [selectedDisplayFilter, setSelectedDisplayFilter] = useState<
         | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT
         | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY
+        | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY
         | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW
         | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY
+        | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER
         | null
     >(null);
 
@@ -52,9 +56,6 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
     const view = viewOptions.find((option) => option.value === queryJSON.view) ?? viewOptions.at(0) ?? null;
     const shouldShowColumnsButton = isLargeScreenWidth && (queryJSON.type === CONST.SEARCH.DATA_TYPES.EXPENSE || queryJSON.type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT);
 
-    const sortByValue = queryJSON.sortBy;
-    const groupByValue = searchAdvancedFilters[CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY];
-    const viewValue = searchAdvancedFilters[CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW];
     const limitValue = searchAdvancedFilters[CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT];
 
     if (!selectedDisplayFilter) {
@@ -64,12 +65,18 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
 
         const isExpenseType = queryJSON.type === CONST.SEARCH.DATA_TYPES.EXPENSE;
         const isTripType = queryJSON.type === CONST.SEARCH.DATA_TYPES.TRIP;
+        const sortByValue = queryJSON.sortBy;
+        const sortOrderValue = queryJSON.sortOrder;
+        const groupByValue = searchAdvancedFilters[CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY];
+        const groupCurrencyValue = searchAdvancedFilters[CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY];
+        const viewValue = searchAdvancedFilters[CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW];
+
         return (
             <View style={[!shouldUseNarrowLayout && styles.pv4]}>
                 <MenuItemWithTopDescription
                     shouldShowRightIcon
                     description={translate('search.display.sortBy')}
-                    title={translate(getSearchColumnTranslationKey(sortByValue))}
+                    title={`${translate(getSearchColumnTranslationKey(sortByValue))} ${CONST.DOT_SEPARATOR} ${translate(`search.filters.sortOrder.${sortOrderValue}`)}`}
                     onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY)}
                     sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_SORT_BY}
                 />
@@ -82,6 +89,15 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
                         sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_GROUP_BY}
                     />
                 )}
+                {!!groupBy && (
+                    <MenuItemWithTopDescription
+                        shouldShowRightIcon
+                        description={translate('common.groupCurrency')}
+                        title={groupCurrencyValue}
+                        onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY)}
+                        sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_GROUP_CURRENCY}
+                    />
+                )}
                 {isExpenseType && !!groupByValue && (
                     <MenuItemWithTopDescription
                         shouldShowRightIcon
@@ -138,70 +154,108 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
         close(() => Navigation.setParams({q: queryString, rawQuery: undefined}));
     };
 
+    const goBack = () => {
+        if (selectedDisplayFilter === CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER) {
+            setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY);
+            return;
+        }
+        setSelectedDisplayFilter(null);
+    };
+
     const subtitle = {
         [CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY]: translate('search.display.sortBy'),
+        [CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER]: translate('search.display.sortOrder'),
         [CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY]: translate('search.display.groupBy'),
+        [CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY]: translate('common.groupCurrency'),
         [CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW]: translate('search.view.label'),
         [CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT]: translate('search.display.limitResults'),
     };
 
-    const subPopup = {
-        [CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY]: (
-            <SortByPopup
-                searchResults={searchResults}
-                queryJSON={queryJSON}
-                groupBy={groupBy}
-                onSort={onSort}
-                closeOverlay={() => setSelectedDisplayFilter(null)}
-            />
-        ),
-        [CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY]: (
-            <GroupByPopup
-                style={styles.p0}
-                label={shouldUseNarrowLayout ? undefined : translate('search.display.groupBy')}
-                sections={groupBySections}
-                value={groupBy}
-                closeOverlay={() => setSelectedDisplayFilter(null)}
-                onChange={(item) => {
-                    const newValue = item?.value;
-                    if (!newValue) {
-                        updateFilterForm({groupBy: undefined, groupCurrency: undefined});
-                    } else {
-                        updateFilterForm({groupBy: newValue});
-                    }
-                }}
-            />
-        ),
-        [CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW]: (
-            <SingleSelectPopup
-                style={styles.p0}
-                label={shouldUseNarrowLayout ? undefined : translate('search.view.label')}
-                items={viewOptions}
-                value={view}
-                closeOverlay={() => setSelectedDisplayFilter(null)}
-                onChange={(item) => updateFilterForm({view: item?.value ?? CONST.SEARCH.VIEW.TABLE})}
-            />
-        ),
-        [CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT]: (
-            <TextInputPopup
-                style={styles.pv0}
-                placeholder={translate('search.filters.limit')}
-                defaultValue={limitValue}
-                closeOverlay={() => setSelectedDisplayFilter(null)}
-                onChange={(value) => updateFilterForm({limit: value})}
-            />
-        ),
-    };
+    let subPopup: React.JSX.Element | null = null;
+
+    switch (selectedDisplayFilter) {
+        case CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY:
+            subPopup = (
+                <SortByPopup
+                    searchResults={searchResults}
+                    queryJSON={queryJSON}
+                    groupBy={groupBy}
+                    onSort={onSort}
+                    onSortOrderPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER)}
+                    closeOverlay={closeOverlay}
+                />
+            );
+            break;
+        case CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER:
+            subPopup = (
+                <SortOrderPopup
+                    queryJSON={queryJSON}
+                    onSort={onSort}
+                    closeOverlay={closeOverlay}
+                />
+            );
+            break;
+        case CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY:
+            subPopup = (
+                <GroupByPopup
+                    style={styles.p0}
+                    sections={groupBySections}
+                    value={groupBy}
+                    closeOverlay={closeOverlay}
+                    onChange={(item) => {
+                        const newValue = item?.value;
+                        if (!newValue) {
+                            updateFilterForm({groupBy: undefined, groupCurrency: undefined});
+                        } else {
+                            updateFilterForm({groupBy: newValue});
+                        }
+                    }}
+                />
+            );
+            break;
+        case CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY:
+            subPopup = (
+                <GroupCurrencyPopup
+                    onChange={(item) => updateFilterForm({groupCurrency: item?.value})}
+                    closeOverlay={closeOverlay}
+                />
+            );
+            break;
+        case CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW:
+            subPopup = (
+                <SingleSelectPopup
+                    style={styles.p0}
+                    items={viewOptions}
+                    value={view}
+                    closeOverlay={closeOverlay}
+                    onChange={(item) => updateFilterForm({view: item?.value ?? CONST.SEARCH.VIEW.TABLE})}
+                />
+            );
+            break;
+        case CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT:
+            subPopup = (
+                <TextInputPopup
+                    style={styles.pv0}
+                    placeholder={translate('search.filters.limit')}
+                    defaultValue={limitValue}
+                    closeOverlay={closeOverlay}
+                    onChange={(value) => updateFilterForm({limit: value})}
+                />
+            );
+            break;
+        default:
+            break;
+    }
 
     return (
         <View style={[!shouldUseNarrowLayout && styles.pv4]}>
             <HeaderWithBackButton
                 shouldDisplayHelpButton={false}
                 style={[styles.h10, styles.pv1, styles.mb2]}
                 subtitle={subtitle[selectedDisplayFilter]}
-                onBackButtonPress={() => setSelectedDisplayFilter(null)}
+                onBackButtonPress={goBack}
             />
-            {subPopup[selectedDisplayFilter]}
+            {subPopup}
         </View>
     );
 }