[$250] Saved search - Selected saved search is no longer highlighted after changing sorting

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.35-0
Reproducible in staging?: Y
Reproducible in production?: N/A - new feature, doesn't exist in prod
Email or phone of affected tester (no customers): applausetester+khcategory16@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Search.
3. Click Filters.
4. Add filters.
5. Click Save search.
6. Open the saved search.
7. Change the sorting.

Expected Result:

The selected saved search should remain highlighted after changing sorting because the filters remain unchanged.

Actual Result:

The selected saved search is no longer highlighted after changing sorting.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6604617_1726423204848.20240914_102752.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021835414058564092667
• Upwork Job ID: 1835414058564092667
• Last Price Increase: 2024-09-15

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @robertjchen (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021835414058564092667

[melvin-bot]

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

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-09-15 20:55:16 UTC.

Proposal


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

Saved search - Selected saved search is no longer highlighted after changing sorting

What is the root cause of that problem?

When sorting is applied, the hash is changed and isFocused becomes false.

App/src/pages/Search/SearchTypeMenu.tsx

Line 107 in 0c618ac

focused: Number(key) === hash,

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


We should compare the query instead of the hash.

focused: item.query === SearchUtils.getSearchHeaderTitle(queryJSON, personalDetails, cardList, reports, taxRates),

OPTIONAL: We can create or rename getSearchHeaderTitle if we want to.

What alternative solutions did you explore? (Optional)

1. We can move these variables on the top and then pass the result from SearchUtils.getSearchHeaderTitle to createSavedSearchMenuItem and use it for comparision.
   

   App/src/pages/Search/SearchTypeMenu.tsx

   Lines 182 to 186 in 0c618ac

   	const isCannedQuery = SearchUtils.isCannedSearchQuery(queryJSON);
   	const activeItemIndex = isCannedQuery ? typeMenuItems.findIndex((item) => item.type === type) : -1;
   	if (shouldUseNarrowLayout) {
   	const title = isCannedQuery ? undefined : SearchUtils.getSearchHeaderTitle(queryJSON, personalDetails, cardList, reports, taxRates);

    const isCannedQuery = SearchUtils.isCannedSearchQuery(queryJSON);
    const activeItemIndex = isCannedQuery ? typeMenuItems.findIndex((item) => item.type === type) : -1;
    const searchHeaderTitle = SearchUtils.getSearchHeaderTitle(queryJSON, personalDetails, cardList, reports, taxRates);

    const title = isCannedQuery ? undefined : searchHeaderTitle;

    const savedSearchesMenuItems = () => {
        if (!savedSearches) {
            return [];
        }
        return Object.entries(savedSearches).map(([key, item]) => createSavedSearchMenuItem(item as SaveSearchItem, key, shouldUseNarrowLayout, searchHeaderTitle));
    };
    
    // In createSavedSearchMenuItem
    focused: item.query === searchHeaderTitle,

What alternative solutions did you explore? (Optional 2)

• We can directly compare item.query === queryJSON.inputQuery but we need to remove sorting strings from queryJSON.inputQuery.

    const queryStringWithoutSorting = queryJSON.inputQuery
        .split(' ')
        .filter((e) => !e.startsWith('sort') && e)
        .join(' ');
        
    const createSavedSearchMenuItem = useCallback(
        (item: SaveSearchItem, key: string, isNarrow: boolean) => {
            const baseMenuItem: SavedSearchMenuItem = {
                key,
                title: item.name,
                hash: key,
                query: item.query,
                shouldShowRightComponent: true,
                focused: item.query === queryStringWithoutSorting,

Result

[Krishna2323]

Proposal updated

• Added alternative 2

[jaydamani]

Proposal

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

Selected saved search is no longer highlighted after changing sorting

What is the root cause of that problem?

when comparing the current filter with saved filter, we take hash of the search query in url which includes sort field.

App/src/pages/Search/SearchTypeMenu.tsx

Line 107 in 0c618ac

focused: Number(key) === hash,

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

Update here to use queryString obtained from current filter and compare it with saved query

    const [searchAdvancedFilters = {} as SearchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
    const queryString = useMemo(() => SearchUtils.buildQueryStringFromFilterValues(searchAdvancedFilters) || '', [searchAdvancedFilters]);

    focused: item.query === queryString,

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Krishna2323]

Proposal Updated

• Updated alternative 2

[luacmartins]

I think this behavior is expected for now. Once we change anything about the saved search, it is no longer the saved search you created, so I think it's expected that we don't highlight it anymore. Especially once we add the search bar and users can specify the column and order they want to search by.

[luacmartins]

Gonna close this for now.