[Due for payment 2025-06-27] [Due for payment 2025-06-25] [Suggested Search V1] Add `Status` and `Type` filters to `Filters` list.

[JmillsExpensify]

Background

We're on the cusp of adding dedicated "exposed filters for Type and Status as part of the broader "Suggested Search" project.

Problem

These same filters don't appear in Filters, which is confusing given that Filters is designed to be a full list of all possible filters.

Solution

For consistency, let's add both Type and Status to Filters. In fact, this was previously considered in #61235, though it was deemed out of scope since our "exposed filter" patterns were still in planning.

Some additional notes on design spec:

• If a user selects Type > Trip in the exposed filters and then clicks on Filters, the Trip filter should show the same selection.
• The same is true in reverse. If a user selects Type > TripinFiltersand tapsView results, then the exposed filter for Type` above the search table should show the same.
• Type always appears at the top of the General section in Filters, as the type dictates what filters are visible.
• The rest of the existing General filters are alphabetical, and it's fine to keep showing them in that order (e.g. Status appears below Has keywords and above To.
• Type is a single-select filter. The patterns are the same as an exposed filter and in Filters.

• Status is a multi-select filter.T he patterns are the same as an exposed filter and in Filters, though in Filters the Unreported option is always shown.

Please add anything else I missed cc @JS00001 @luacmartins

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the Bug assigner, not assigning anyone new.

[sofi-a]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add Status and Type filters to Filters list

What is the root cause of that problem?

New feature request

What changes do you think we should make in order to solve the problem?

1. Add two new routes in ROUTES.ts

SEARCH_ADVANCED_FILTERS_TYPE: 'search/filters/type',
SEARCH_ADVANCED_FILTERS_STATUS: 'search/filters/status',

2. Add two new screens in SCREENS.ts

ADVANCED_FILTERS_TYPE_RHP: 'Search_Advanced_Filters_Type_RHP',
ADVANCED_FILTERS_STATUS_RHP: 'Search_Advanced_Filters_Status_RHP',

3. Link the routes and screens in linkingConfig/config.ts

[SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_TYPE,
[SCREENS.SEARCH.ADVANCED_FILTERS_STATUS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_STATUS,

4. Create a new component SearchFiltersTypePage inside src/pages/Search/SearchAdvancedFiltersPage.

function SearchFiltersTypePage() {
    ...
    return (
        <ScreenWrapper
            testID={SearchFiltersTypePage.displayName}
            shouldShowOfflineIndicatorInWideScreen
            offlineIndicatorStyle={styles.mtAuto}
            includeSafeAreaPaddingBottom={false}
            shouldEnableMaxHeight
        >
            <HeaderWithBackButton
                title={translate('common.type')}
                onBackButtonPress={() => {
                    Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
                }}
            />
            <View>
                <SelectionList
                    shouldSingleExecuteRowSelect
                    sections={[{data: listData}]}
                    ListItem={SingleSelectListItem}
                    onSelectRow={updateSelectedItem}
                />
            </View>
            <FixedFooter style={styles.mtAuto}>
                <Button
                    large
                    style={[styles.mt4]}
                    text={translate('common.reset')}
                    onPress={resetChanges}
                />
                <Button
                    large
                    success
                    pressOnEnter
                    style={[styles.mt4]}
                    text={translate('common.save')}
                    onPress={applyChanges}
                />
            </FixedFooter>
        </ScreenWrapper>
    );
}

Where listData, updateSelectedItem, resetChanges, and applyChanges are defined as follows:

const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
const [selectedItem, setSelectedItem] = useState<string>(searchAdvancedFiltersForm?.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE);

const listData: ListItem[] = useMemo(() => {
    return [CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.DATA_TYPES.CHAT, CONST.SEARCH.DATA_TYPES.INVOICE, CONST.SEARCH.DATA_TYPES.TRIP, CONST.SEARCH.DATA_TYPES.TASK].map((type) => ({
        text: translate(`common.${type}`),
        keyForList: type,
        isSelected: selectedItem === type,
    }));
}, [selectedItem, translate]);

const updateSelectedItem = useCallback((type: ListItem) => {
    setSelectedItem(type?.keyForList ?? CONST.SEARCH.DATA_TYPES.EXPENSE);
}, []);

const resetChanges = useCallback(() => {
    setSelectedItem(CONST.SEARCH.DATA_TYPES.EXPENSE);
}, []);

const applyChanges = useCallback(() => {
    updateAdvancedFilters({
        type: selectedItem,
    });
    Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
}, [selectedItem]);

5. Create a new component SearchFiltersStatusPage inside src/pages/Search/SearchAdvancedFiltersPage.
   The main difference from SearchFiltersTypePage is that SearchFiltersStatusPage uses MultipSelectListItem.

function SearchFiltersStatusPage() {
    ...
    return (
        ...
            <View>
                <SelectionList
                    shouldSingleExecuteRowSelect
                    sections={[{data: listData}]}
                    ListItem={MultiSelectListItem}
                    onSelectRow={updateSelectedItems}
                />
            </View>
        ...
    );
}

The list of statuses to be displayed depends on the selected Type in the filter. Hence, listData is defined as follows

const currentType = (searchAdvancedFiltersForm?.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE).toUpperCase() as keyof typeof CONST.SEARCH.DATA_TYPES;
const [selectedItems, setSelectedItems] = useState<string[]>(() => {
    if (!searchAdvancedFiltersForm?.status) {
        return [CONST.SEARCH.STATUS.EXPENSE.ALL];
    }

    if (typeof searchAdvancedFiltersForm.status === 'string') {
        return searchAdvancedFiltersForm.status.split(',');
    }

    return searchAdvancedFiltersForm.status;
});

const listData: ListItem[] = useMemo(() => {
    return Object.values(CONST.SEARCH.STATUS[currentType]).map((status) => ({
        text: translate(`search.filters.${status}`),
        keyForList: status,
        isSelected: selectedItems.includes(status),
    }));
}, [currentType, selectedItems, translate]);

updateSelectedItems, resetChanges, and applyChanges are defined as follows:

const updateSelectedItems = useCallback(
    (item: ListItem) => {
        if (item.isSelected) {
            setSelectedItems(selectedItems.filter((i) => i !== item.keyForList));
            return;
        }

        // If the user selects "All", reset selected items
        if (item.keyForList === CONST.SEARCH.STATUS.EXPENSE.ALL) {
            setSelectedItems([CONST.SEARCH.STATUS.EXPENSE.ALL]);
            return;
        }

        const items = Object.values(CONST.SEARCH.STATUS[currentType]);
        const newItem = items.find((i) => i === item.keyForList);

        if (newItem) {
            // If the user selects a specific status, ensure "All" is not selected
            setSelectedItems([...selectedItems.filter((i) => i !== CONST.SEARCH.STATUS.EXPENSE.ALL), newItem]);
        }
    },
    [currentType, selectedItems],
);

const resetChanges = useCallback(() => {
    setSelectedItems([]); // Also possible to default to CONST.SEARCH.STATUS.EXPENSE.ALL
}, []);

const applyChanges = useCallback(() => {
    updateAdvancedFilters({
        status: selectedItems,
    });
    Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
}, [selectedItems]);

6. Register the new screens in ModalStackNavigators

[SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersTypePage').default,
[SCREENS.SEARCH.ADVANCED_FILTERS_STATUS_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersStatusPage').default,

7. Add Type and Status to baseFilterConfig in AdvancedSearchFilters.

const baseFilterConfig = {
...
    type: {
        getTitle: getFilterDisplayTitle,
        description: 'common.type' as const,
        route: ROUTES.SEARCH_ADVANCED_FILTERS_TYPE,
    },
    status: {
        getTitle: getFilterDisplayTitle,
        description: 'common.status' as const,
        route: ROUTES.SEARCH_ADVANCED_FILTERS_STATUS,
    },
...
}

8. Add new constants in CONST.ts under SEARCH.SYNTAX_FILTER_KEYS.

SYNTAX_FILTER_KEYS: {
...
    TYPE: 'type',
    STATUS: 'status',
...
},

9. Update typeFiltersKeys in AdvancedSearchFilters.

const typeFiltersKeys: Record<string, Array<Array<ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>>>> = {
    [CONST.SEARCH.DATA_TYPES.EXPENSE]: [
        [
            ...
            CONST.SEARCH.SYNTAX_FILTER_KEYS.TYPE,
            CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS,
            ...
        ]
    ],
    [CONST.SEARCH.DATA_TYPES.INVOICE]: [
        [
            ...
            CONST.SEARCH.SYNTAX_FILTER_KEYS.TYPE,
            CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS,
            ...
        ]
    ],
    [CONST.SEARCH.DATA_TYPES.TRIP]: [
        [
            ...
            CONST.SEARCH.SYNTAX_FILTER_KEYS.TYPE,
            CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS,
            ...
        ]
    ],
    [CONST.SEARCH.DATA_TYPES.CHAT]: [
        [
            ...
            CONST.SEARCH.SYNTAX_FILTER_KEYS.TYPE,
            CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS,
            ...
        ]
    ],
    [CONST.SEARCH.DATA_TYPES.TASK]: [
        [
            ...
            CONST.SEARCH.SYNTAX_FILTER_KEYS.TYPE,
            CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS,
            ...
        ]
    ],

10. Update the getFilterDisplayTitle function to correctly displayfilter values.

function getFilterDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, filterKey: SearchFilterKey, translate: LocaleContextProps['translate']) {
...
    if (nonDateFilterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.TYPE) {
        const filterValue = filters[nonDateFilterKey];
        return filterValue ? translate(`common.${filterValue as ValueOf<typeof CONST.SEARCH.DATA_TYPES>}`) : undefined;
    }

    if (nonDateFilterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS) {
        let filterValue = filters[nonDateFilterKey];

        if (!filterValue?.length) {
            return undefined;
        }

        if (typeof filterValue === 'string') {
            filterValue = filterValue.split(',');
        }

        return filterValue.map((value) => translate(`search.filters.${value as SingularSearchStatus}`)).join(', ');
    }
...
}

12. Update filters to correctly display filter labels.

const filters = typeFiltersKeys[currentType]
    .map((section) => {
        return section
            .map((key) => {
                ...
                } else if (
                    key === CONST.SEARCH.SYNTAX_FILTER_KEYS.REIMBURSABLE ||
                    key === CONST.SEARCH.SYNTAX_FILTER_KEYS.BILLABLE ||
                    key === CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS ||
                    key === CONST.SEARCH.SYNTAX_FILTER_KEYS.TYPE
                ) {
                    filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, key, translate);
                }
                ...
            })
            .filter((filter): filter is NonNullable<typeof filter> => !!filter);
    })
    .filter((section) => !!section.length);

13. Adjust the sorting of section items so that the Type filter appears at the top of the General section.

    sections.forEach((section) => {
        section.items.sort((a, b) => (a.key === 'type' || b.key === 'type' ? 1 : localeCompare(a.description, b.description)));
    });

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

N/A

[JS00001]

@sofi-a The big change for this involves a new UI pattern for type and status. Lets wait for #62851 to merge, You can then reuse SingleSelectListItem and MultiSelectListItem, which were created there. However, the new patterns are probably the biggest change of this. We want to make components that can be implemented overtime for all of the other advanced filters, so we need to create a reusable advanced search filter pattern.

Could you focus more on this in the proposal?

[sofi-a]

@JS00001 Sure, I can base my proposal on the changes introduced in #62851.

[sofi-a]

Updated proposal