[Waiting on checklist] [$250] Saved search - Saved search name is blank in the list after clearing name field and saving it

[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.44-7
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+pso@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Search.
3. Click 3-dot menu next to saved search.
4. Click Rename.
5. Clear the name field and save it.

Expected Result:

The saved search in the list will have the default name instead of blank name after saving empty name.

Actual Result:

The saved search in the list shows empty name.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6624129_1728030229123.20241004_162025.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021842161451688398163
• Upwork Job ID: 1842161451688398163
• Last Price Increase: 2024-10-04
• Automatic offers:
• adeel0202 | Contributor | 104543798

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot]

Triggered auto assignment to @twisterdotcom (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.

[IuliiaHerets]

We think that this bug might be related to #wave-control

[IuliiaHerets]

@twisterdotcom FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-10-04 11:46:32 UTC.

Proposal

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

The saved search name appears as blank in the list after the name field is cleared and saved.

What is the root cause of that problem?

We currently allow saving a search with an empty name.

App/src/pages/Search/SavedSearchRenamePage.tsx

Lines 35 to 43 in f04c1e9

	const onSaveSearch = () => {
	const queryJSON = SearchUtils.buildSearchQueryJSON(q || SearchUtils.buildCannedSearchQuery()) ?? ({} as SearchQueryJSON);
	SearchActions.saveSearch({
	queryJSON,
	newName,
	});
	applyFiltersAndNavigate();

.

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

we have two solutions:

1. Either to validate input : We can add a validate function to the FormProvider used in SavedSearchRenamePage to ensure the name field is not empty before submitting. This will prevent saving an empty search name.

2. Or to handle empty input gracefully : If the input is empty, we can skip saving and simply close the modal. This can be implemented by modifying the onSaveSearch function as follows:

const onSaveSearch = () => {
    if (!newName) {
        return Navigation.dismissModal();
    }
    const queryJSON = SearchUtils.buildSearchQueryJSON(q || SearchUtils.buildCannedSearchQuery()) ?? ({} as SearchQueryJSON);

    SearchActions.saveSearch({
        queryJSON,
        newName
    });

    applyFiltersAndNavigate();
};

POC

Screen.Recording.2024-10-04.at.13.32.32.mov

optional: Additionally, we can dismiss the modal if the value has not been changed.

What alternative solutions did you explore? (Optional)

• instead of dismissing the modal and going back the prev page, we can navigate the filter url as we do usually however we need to change this to name: newName || name, this will use the default name if the new name is empty.
• then in the onSaveSearch we should call the saveSearch only if the newName is not empty:

    const onSaveSearch = () => {
        if (newName){
        const queryJSON = SearchUtils.buildSearchQueryJSON(q || SearchUtils.buildCannedSearchQuery()) ?? ({} as SearchQueryJSON);
        SearchActions.saveSearch({
            queryJSON,
            newName
        });
       }
        applyFiltersAndNavigate();
    };

POC

Screen.Recording.2024-10-04.at.13.50.09.mov

[melvin-bot]

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

[melvin-bot]

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

[Nodebrute]

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

Proposal

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

Saved search name is blank in the list after clearing name field and saving it

What is the root cause of that problem?

We currently don't have any implementation in our code to prevent users from saving an empty name.

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

We can return early if !newName

App/src/libs/actions/Search.ts

Line 54 in b0ef513

function saveSearch({queryJSON, newName}: {queryJSON: SearchQueryJSON; newName?: string}) {

  if(!newName){
        return;
    }

What alternative solutions did you explore? (Optional)

We can use isRequiredFulfilled utility function here to validate the new name.
Here we can add the validate function

App/src/pages/Search/SavedSearchRenamePage.tsx

Line 55 in 0c4b2d1

<FormProvider

And in validate function we can use ValidationUtils.isRequiredFulfilled(savedSearchNewName). We can do something like this (pseudo-code)

 const validate = useCallback(
        (values) => {
            const errors = {};
            const savedSearchNewName = values.savedSearchNewName.trim();

            if (!ValidationUtils.isRequiredFulfilled(savedSearchNewName)) {
                errors.savedSearchNewName = 'Required field' // here we can add any existing error from en.ts file or create a new variable
            } 


            return errors;
        },
        [translate],
    );

Optional: I have noticed we don't have any charchter limit on this field either we can add another check in Validate function

else if ([...savedSearchNewName].length > CONST.TITLE_CHARACTER_LIMIT) {
                // Uses the spread syntax to count the number of Unicode code points instead of the number of UTF-16
                // code units.
                ErrorUtils.addErrorMessage(errors, 'savedSearchNewName', translate('common.error.characterLimitExceedCounter', {length: [...savedSearchNewName].length, limit: CONST.TITLE_CHARACTER_LIMIT}));
            }

This is the standard character limit that we use in other pages too. We can use the limit of our choice. Alternatively we can also use maxlength prop to set the limit.