Merge pull request Expensify#88448 from bernhardoj/feat/88044-add-displays-section-in-save-search-page

Add displays section in save search page

Author: JS00001

src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx

@@ -60,6 +60,7 @@ const SKIPPED_FILTERS = new Set<SearchAdvancedFiltersKey>([
     FILTER_KEYS.VIEW,
     FILTER_KEYS.PAYER,
     FILTER_KEYS.ACTION,
+    FILTER_KEYS.COLUMNS,
 ]);
 
 function getFilterSentryLabel(filterKey: SearchAdvancedFiltersKey | SearchFilterKey | ReportFieldKey) {

src/libs/SearchUIUtils.ts

@@ -4719,7 +4719,6 @@ const FILTER_LABEL_MAP: Partial<Record<SearchAdvancedFiltersKey, TranslationPath
     [FILTER_KEYS.EXPORTED_TO]: 'search.exportedTo',
     [FILTER_KEYS.FEED]: 'search.filters.feed',
     [FILTER_KEYS.FROM]: 'common.from',
-    [FILTER_KEYS.GROUP_CURRENCY]: 'common.groupCurrency',
     [FILTER_KEYS.HAS]: 'search.has',
     [FILTER_KEYS.IN]: 'common.in',
     [FILTER_KEYS.IS]: 'search.filters.is',

src/pages/Search/SearchSavePage.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import type {LocalizedTranslate} from '@components/LocaleContextProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useFilterCardValue from '@components/Search/hooks/useFilterCardValue';
 import useFilterFeedValue from '@components/Search/hooks/useFilterFeedValue';
@@ -11,6 +12,7 @@ import useFilterTaxRateValue from '@components/Search/hooks/useFilterTaxRateValu
 import useFilterUserValue from '@components/Search/hooks/useFilterUserValue';
 import useFilterWorkspaceValue from '@components/Search/hooks/useFilterWorkspaceValue';
 import {useSearchStateContext} from '@components/Search/SearchContext';
+import type {SearchQueryJSON} from '@components/Search/types';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
@@ -19,7 +21,7 @@ import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {saveSearch} from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
-import {mapFiltersFormToLabelValueList} from '@libs/SearchUIUtils';
+import {getSearchColumnTranslationKey, mapFiltersFormToLabelValueList} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -89,6 +91,39 @@ function FilterValue({filterKey, value}: FilterValueWithKeyProps) {
     return value;
 }
 
+function getAppliedDisplays(searchAdvancedFiltersForm: Partial<SearchAdvancedFiltersForm>, queryJSON: SearchQueryJSON | undefined, translate: LocalizedTranslate) {
+    const appliedDisplays = [];
+    if (searchAdvancedFiltersForm.groupBy) {
+        appliedDisplays.push({label: translate('search.display.groupBy'), value: translate(`search.filters.groupBy.${searchAdvancedFiltersForm.groupBy}`)});
+    }
+
+    if (searchAdvancedFiltersForm.groupCurrency) {
+        appliedDisplays.push({label: translate('common.groupCurrency'), value: searchAdvancedFiltersForm.groupCurrency});
+    }
+
+    if (searchAdvancedFiltersForm.limit) {
+        appliedDisplays.push({label: translate('search.filters.limit'), value: searchAdvancedFiltersForm.limit});
+    }
+
+    if (searchAdvancedFiltersForm.view) {
+        appliedDisplays.push({label: translate('search.view.label'), value: translate(`search.view.${searchAdvancedFiltersForm.view}`)});
+    }
+
+    if (queryJSON?.sortBy) {
+        appliedDisplays.push({label: translate('search.display.sortBy'), value: translate(getSearchColumnTranslationKey(queryJSON.sortBy))});
+    }
+
+    if (queryJSON?.sortOrder) {
+        appliedDisplays.push({label: translate('search.display.sortOrder'), value: translate(`search.filters.sortOrder.${queryJSON.sortOrder}`)});
+    }
+
+    if (searchAdvancedFiltersForm.columns?.length) {
+        appliedDisplays.push({label: translate('search.columns'), value: searchAdvancedFiltersForm.columns?.map((column) => translate(getSearchColumnTranslationKey(column))).join(', ')});
+    }
+
+    return appliedDisplays;
+}
+
 function SearchSavePage() {
     const styles = useThemeStyles();
     const {translate, localeCompare} = useLocalize();
@@ -109,6 +144,7 @@ function SearchSavePage() {
     };
 
     const appliedFilters = mapFiltersFormToLabelValueList(searchAdvancedFiltersForm, undefined, undefined, translate, localeCompare);
+    const appliedDisplays = getAppliedDisplays(searchAdvancedFiltersForm, currentSearchQueryJSON, translate);
 
     const {inputCallbackRef} = useAutoFocusInput();
 
@@ -157,6 +193,24 @@ function SearchSavePage() {
                 ) : (
                     <Text>{translate('common.none')}</Text>
                 )}
+
+                <Text style={[styles.textLabelSupporting, styles.mb2, styles.mt5]}>{translate('search.display.label')}:</Text>
+                {appliedDisplays.length > 0 ? (
+                    appliedDisplays.map((filter) => (
+                        <View
+                            style={[styles.flexRow]}
+                            key={filter.label}
+                        >
+                            <Text style={[styles.label, styles.ph2]}>{CONST.DOT_SEPARATOR}</Text>
+                            <Text style={[styles.label]}>
+                                <Text style={[styles.labelStrong]}>{filter.label}: </Text>
+                                {filter.value}
+                            </Text>
+                        </View>
+                    ))
+                ) : (
+                    <Text>{translate('common.none')}</Text>
+                )}
             </FormProvider>
         </ScreenWrapper>
     );