[Preparing the UI] [No QA] Revamp search page actions bar

src/CONST/index.ts

@@ -8597,6 +8597,7 @@ const CONST = {
             REPORT_EXPAND_COLLAPSE: 'Search-ReportExpandCollapse',
             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',
@@ -8625,6 +8626,8 @@ const CONST = {
             FILTER_POPUP_APPLY_SINGLE_SELECT: 'Search-FilterPopupApplySingleSelect',
             FILTER_POPUP_RESET_MULTI_SELECT: 'Search-FilterPopupResetMultiSelect',
             FILTER_POPUP_APPLY_MULTI_SELECT: 'Search-FilterPopupApplyMultiSelect',
+            FILTER_POPUP_RESET_TEXT_INPUT: 'Search-FilterPopupResetTextInput',
+            FILTER_POPUP_APPLY_TEXT_INPUT: 'Search-FilterPopupApplyTextInput',
             FILTER_POPUP_RESET_DATE: 'Search-FilterPopupResetDate',
             FILTER_POPUP_APPLY_DATE: 'Search-FilterPopupApplyDate',
             FILTER_POPUP_RESET_USER: 'Search-FilterPopupResetUser',

src/ONYXKEYS.ts

@@ -998,6 +998,8 @@ const ONYXKEYS = {
         SAGE_INTACCT_DIMENSION_TYPE_FORM_DRAFT: 'sageIntacctDimensionTypeFormDraft',
         SEARCH_ADVANCED_FILTERS_FORM: 'searchAdvancedFiltersForm',
         SEARCH_ADVANCED_FILTERS_FORM_DRAFT: 'searchAdvancedFiltersFormDraft',
+        SEARCH_SAVE_FORM: 'searchSaveForm',
+        SEARCH_SAVE_FORM_DRAFT: 'searchSaveFormDraft',
         SEARCH_SAVED_SEARCH_RENAME_FORM: 'searchSavedSearchRenameForm',
         SEARCH_SAVED_SEARCH_RENAME_FORM_DRAFT: 'searchSavedSearchRenameFormDraft',
         TEXT_PICKER_MODAL_FORM: 'textPickerModalForm',
@@ -1163,6 +1165,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.RULES_MAX_EXPENSE_AGE_FORM]: FormTypes.RulesMaxExpenseAgeForm;
     [ONYXKEYS.FORMS.RULES_CUSTOM_FORM]: FormTypes.RulesCustomForm;
     [ONYXKEYS.FORMS.SEARCH_SAVED_SEARCH_RENAME_FORM]: FormTypes.SearchSavedSearchRenameForm;
+    [ONYXKEYS.FORMS.SEARCH_SAVE_FORM]: FormTypes.SearchSaveForm;
     [ONYXKEYS.FORMS.DEBUG_DETAILS_FORM]: FormTypes.DebugReportForm | FormTypes.DebugReportActionForm | FormTypes.DebugTransactionForm | FormTypes.DebugTransactionViolationForm;
     [ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM]: FormTypes.OnboardingWorkEmailForm;
     [ONYXKEYS.FORMS.MERGE_ACCOUNT_DETAILS_FORM]: FormTypes.MergeAccountDetailsForm;

src/ROUTES.ts

@@ -139,6 +139,7 @@ const ROUTES = {
         },
     },
     SEARCH_ROOT_VERIFY_ACCOUNT: `search/${VERIFY_ACCOUNT}`,
+    SEARCH_SAVE: 'search/save',
     SEARCH_SAVED_SEARCH_RENAME: {
         route: 'search/saved-search/rename',
         getRoute: ({name, jsonQuery}: {name: string; jsonQuery: SearchQueryString}) => `search/saved-search/rename?name=${name}&q=${jsonQuery}` as const,

src/SCREENS.ts

@@ -300,6 +300,7 @@ const SCREENS = {
 
         SEARCH_COLUMNS: 'SearchColumns',
         SEARCH_ADVANCED_FILTERS: 'SearchAdvancedFilters',
+        SEARCH_SAVE: 'SearchSave',
         SEARCH_SAVED_SEARCH: 'SearchSavedSearch',
         SETTINGS_CATEGORIES: 'SettingsCategories',
         SETTINGS_TAGS: 'SettingsTags',

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -670,7 +670,7 @@ function MoneyRequestReportTransactionList({
             <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.ph5, styles.pb2]}>
                 {shouldShowGroupedTransactions && (
                     <DropdownButton
-                        label={translate('search.groupBy')}
+                        label={translate('search.display.groupBy')}
                         value={selectedGroupByItem?.text ?? ''}
                         PopoverComponent={groupByPopoverComponent}
                     />

src/components/Navigation/SearchSidebar.tsx

@@ -8,7 +8,7 @@ import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {PlatformStackNavigationState} from '@libs/Navigation/PlatformStackNavigation/types';
-import SearchTypeMenu from '@pages/Search/SearchTypeMenu';
+import SearchTypeMenuWide from '@pages/Search/SearchTypeMenuWide';
 import SCREENS from '@src/SCREENS';
 import NavigationTabBar from './NavigationTabBar';
 import NAVIGATION_TABS from './NavigationTabBar/NAVIGATION_TABS';
@@ -55,7 +55,7 @@ function SearchSidebar({state}: SearchSidebarProps) {
                     shouldDisplaySearch={false}
                     shouldDisplayHelpButton={false}
                 />
-                <SearchTypeMenu queryJSON={currentSearchQueryJSON} />
+                <SearchTypeMenuWide queryJSON={currentSearchQueryJSON} />
             </View>
             <NavigationTabBar selectedTab={NAVIGATION_TABS.SEARCH} />
         </View>

src/components/Search/FilterDropdowns/DisplayPopup.tsx

@@ -0,0 +1,205 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItem from '@components/MenuItem';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import type {SearchQueryJSON} from '@components/Search/types';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {close} from '@libs/actions/Modal';
+import Navigation from '@libs/Navigation/Navigation';
+import {buildFilterQueryWithSortDefaults} from '@libs/SearchQueryUtils';
+import {getGroupBySections, getSearchColumnTranslationKey, getViewOptions} from '@libs/SearchUIUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+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 SingleSelectPopup from './SingleSelectPopup';
+import SortByPopup from './SortByPopup';
+import TextInputPopup from './TextInputPopup';
+
+type DisplayPopupProps = {
+    queryJSON: SearchQueryJSON;
+    searchResults: OnyxEntry<SearchResults>;
+    closeOverlay: () => void;
+    onSort: () => void;
+};
+
+function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayPopupProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Columns']);
+    const [searchAdvancedFilters = getEmptyObject<SearchAdvancedFiltersForm>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const [selectedDisplayFilter, setSelectedDisplayFilter] = useState<
+        | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT
+        | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY
+        | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW
+        | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY
+        | null
+    >(null);
+
+    const groupBySections = getGroupBySections(translate);
+    const groupBy = groupBySections.flatMap((section) => section.options).find((option) => option.value === queryJSON.groupBy) ?? null;
+    const viewOptions = getViewOptions(translate);
+    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) {
+        const openSearchColumns = () => {
+            Navigation.navigate(ROUTES.SEARCH_COLUMNS);
+        };
+
+        const isExpenseType = queryJSON.type === CONST.SEARCH.DATA_TYPES.EXPENSE;
+        const isTripType = queryJSON.type === CONST.SEARCH.DATA_TYPES.TRIP;
+        return (
+            <View style={[!shouldUseNarrowLayout && styles.pv4]}>
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon
+                    description={translate('search.display.sortBy')}
+                    title={translate(getSearchColumnTranslationKey(sortByValue))}
+                    onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY)}
+                />
+                {(isExpenseType || isTripType) && (
+                    <MenuItemWithTopDescription
+                        shouldShowRightIcon
+                        description={translate('search.display.groupBy')}
+                        title={groupByValue ? translate(`search.filters.groupBy.${groupByValue}`) : undefined}
+                        onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY)}
+                    />
+                )}
+                {isExpenseType && !!groupByValue && (
+                    <MenuItemWithTopDescription
+                        shouldShowRightIcon
+                        description={translate('search.view.label')}
+                        title={viewValue ? translate(`search.view.${viewValue}`) : undefined}
+                        onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW)}
+                    />
+                )}
+                {isExpenseType && (
+                    <MenuItemWithTopDescription
+                        shouldShowRightIcon
+                        description={translate('search.display.limitResults')}
+                        title={limitValue}
+                        onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT)}
+                    />
+                )}
+                {shouldShowColumnsButton && (
+                    <MenuItem
+                        icon={expensifyIcons.Columns}
+                        title={translate('search.editColumns')}
+                        onPress={() => {
+                            closeOverlay();
+                            openSearchColumns();
+                        }}
+                        sentryLabel={CONST.SENTRY_LABEL.SEARCH.COLUMNS_BUTTON}
+                    />
+                )}
+            </View>
+        );
+    }
+
+    const updateFilterForm = (values: Partial<SearchAdvancedFiltersForm>) => {
+        const updatedFilterFormValues: Partial<SearchAdvancedFiltersForm> = {
+            ...searchAdvancedFilters,
+            ...values,
+        };
+
+        if (updatedFilterFormValues.groupBy !== searchAdvancedFilters.groupBy) {
+            updatedFilterFormValues.columns = [];
+        }
+
+        const queryString =
+            buildFilterQueryWithSortDefaults(
+                updatedFilterFormValues,
+                {view: searchAdvancedFilters.view, groupBy: searchAdvancedFilters.groupBy},
+                {sortBy: queryJSON.sortBy, sortOrder: queryJSON.sortOrder, limit: queryJSON.limit},
+            ) ?? '';
+        if (!queryString) {
+            return;
+        }
+
+        close(() => Navigation.setParams({q: queryString, rawQuery: undefined}));
+    };
+
+    const subtitle = {
+        [CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY]: translate('search.display.sortBy'),
+        [CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY]: translate('search.display.groupBy'),
+        [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})}
+            />
+        ),
+    };
+
+    return (
+        <View style={[!shouldUseNarrowLayout && styles.pv4]}>
+            <HeaderWithBackButton
+                shouldDisplayHelpButton={false}
+                style={[styles.h10]}
+                subtitle={subtitle[selectedDisplayFilter]}
+                onBackButtonPress={() => setSelectedDisplayFilter(null)}
+            />
+            {subPopup[selectedDisplayFilter]}
+        </View>
+    );
+}
+
+export default DisplayPopup;

src/components/Search/FilterDropdowns/DropdownButton.tsx

@@ -183,5 +183,5 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
     );
 }
 
-export type {PopoverComponentProps};
+export type {PopoverComponentProps, DropdownButtonProps};
 export default withViewportOffsetTop(DropdownButton);

src/components/Search/FilterDropdowns/GroupByPopup.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import Button from '@components/Button';
 import type {SearchGroupBy} from '@components/Search/types';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
@@ -28,14 +29,16 @@ type GroupByPopupProps = {
     /** The currently selected item */
     value: GroupByPopupItem | null;
 
+    style?: StyleProp<ViewStyle>;
+
     /** Function to call to close the overlay when changes are applied */
     closeOverlay: () => void;
 
     /** Function to call when changes are applied */
     onChange: (item: GroupByPopupItem | null) => void;
 };
 
-function GroupByPopup({label, value, sections, closeOverlay, onChange}: GroupByPopupProps) {
+function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: GroupByPopupProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
@@ -83,7 +86,7 @@ function GroupByPopup({label, value, sections, closeOverlay, onChange}: GroupByP
     }, [closeOverlay, onChange]);
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
+        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2, style]}>
             {isSmallScreenWidth && !!label && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
 
             <View style={[styles.getSelectionListPopoverHeight(optionsCount, windowHeight, false)]}>

src/components/Search/FilterDropdowns/SingleSelectPopup.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import Button from '@components/Button';
 import SelectionList from '@components/SelectionList';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
@@ -42,11 +43,24 @@ type SingleSelectPopupProps<T> = {
     /** The default value to set when reset is clicked */
     defaultValue?: string;
 
+    style?: StyleProp<ViewStyle>;
+
     /** Custom styles for the SelectionList */
     selectionListStyle?: SelectionListStyle;
 };
 
-function SingleSelectPopup<T extends string>({label, value, items, closeOverlay, onChange, isSearchable, searchPlaceholder, defaultValue, selectionListStyle}: SingleSelectPopupProps<T>) {
+function SingleSelectPopup<T extends string>({
+    label,
+    value,
+    items,
+    closeOverlay,
+    onChange,
+    isSearchable,
+    searchPlaceholder,
+    defaultValue,
+    style,
+    selectionListStyle,
+}: SingleSelectPopupProps<T>) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
@@ -117,7 +131,7 @@ function SingleSelectPopup<T extends string>({label, value, items, closeOverlay,
     const shouldShowLabel = isSmallScreenWidth && !!label;
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
+        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2, style]}>
             {shouldShowLabel && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
 
             <View style={[styles.getSelectionListPopoverHeight(options.length || 1, windowHeight, isSearchable ?? false)]}>