[HOLD for payment 2024-10-11] [$250] Saved search - Unable to delete saved search using Enter key #49492

IuliiaHerets · 2024-09-19T20:23:43Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

Version Number: 9.0.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to Search.
Click 3-dot menu next to the saved search (save a search if there is no any).
Click Delete.
Press keyboard Enter.

Expected Result:

User should be able to delete saved search using Enter key.

Actual Result:

User is not able to delete saved search using Enter key.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6608671_1726738796850.bandicam_2024-09-19_17-36-43-268.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021836866373768762286
Upwork Job ID: 1836866373768762286
Last Price Increase: 2024-09-26
Automatic offers:

akinwale | Reviewer | 104162508
FitseTLT | Contributor | 104162510

Issue Owner

Current Issue Owner: @OfstadC

melvin-bot · 2024-09-19T20:23:53Z

Triggered auto assignment to @OfstadC (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 · 2024-09-19T20:24:01Z

We think that this bug might be related to #wave-collect - Release 2

IuliiaHerets · 2024-09-19T20:24:19Z

@OfstadC 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

melvin-bot · 2024-09-19T20:34:07Z

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

melvin-bot · 2024-09-19T20:34:11Z

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

FitseTLT · 2024-09-19T22:57:05Z

Proposal

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

Saved search - Unable to delete saved search using Enter key

What is the root cause of that problem?

The yes button has pressOnEnter enabled in confirm content here

App/src/components/ConfirmContent.tsx

Line 202 in 25450d9

pressOnEnter

App/src/components/ConfirmContent.tsx

Line 230 in 25450d9

pressOnEnter

Which would activate listening of Enter key via KeyboardShortcutComponent

App/src/components/Button/index.tsx

Lines 324 to 326 in 25450d9

    
           {pressOnEnter && ( 
        
               <KeyboardShortcutComponent 
        
                   isDisabled={isDisabled}

But KeyboardShortcutComponent but key listening is active only if the current screen is focused

App/src/components/Button/index.tsx

Line 166 in 25450d9

isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused,

but in our case the screen that holds the confirm modal is not focused

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

To deal with this kind of exceptions we can allow pressOnEnter buttons inside ConfrimContent to have keyboard shortcut listening activated when the modal isVisible
we can add a new param isActive in KeyboardShortcutComponent and change the condition to

App/src/components/Button/index.tsx

Line 166 in 25450d9

isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused,

            isActive: pressOnEnter && !shouldDisableEnterShortcut && (isFocused || isActive),

and pass down isVisible prop from ConfirmModal here

App/src/components/ConfirmModal.tsx

Line 126 in 25450d9

isVisible,

to ConfirmContent > The two confirm buttons ( with pressOnEnter) inside Confrim Content > KeyboardShortcutComponent

What alternative solutions did you explore? (Optional)

BTW we can also pass the isVisible to be true for confirm buttons in ConfirmContent instead of isVisible because basically the buttons will only appear when the modal is visible on which case the enter keyboard event will be listened

truph01 · 2024-09-20T03:17:05Z

Edited by proposal-police: This proposal was edited at 2024-09-20 03:52:48 UTC.

Proposal

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

User is not able to delete saved search using Enter key.

What is the root cause of that problem?

The delete confirm modal is in SearchPageBottomTab:

App/src/pages/Search/SearchPageBottomTab.tsx

Line 57 in 25450d9

<SearchTypeMenu queryJSON={queryJSON} />

App/src/pages/Search/SearchTypeMenu.tsx

Line 253 in b0ce206

<DeleteConfirmModal />

and its "Delete" button just listen to the "ENTER" event if its parent screen is focused:

App/src/components/Button/index.tsx

Line 166 in 25450d9

isActive: pressOnEnter && !shouldDisableEnterShortcut && isFocused,

Meanwhile, SearchPageBottomTab is always "not focused" in case of large screen, so we never can delete saved search using ENTER key.

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

We should add the delete confirm modal to Search page instead of SearchPageBottomTab. So the isFocused from useIsFocused will be true. Details bellow:

Refactor useDeleteSavedSearch: Currently, that function return both {showDeleteModal, DeleteConfirmModal}. We need to refactor it so that we can use showDeleteModal in SearchPageBottomTab page to open DeleteConfirmModal in Search page.

function DeleteConfirmModal() {
    const {translate} = useLocalize();
    const [hashToDelete] = useOnyx(ONYXKEYS.HASH_TO_DELETE);
    const handleDelete = () => {
        SearchActions.deleteSavedSearch(hashToDelete);
        Onyx.set(ONYXKEYS.HASH_TO_DELETE, null);
        SearchActions.clearAdvancedFilters();
        Navigation.navigate(
            ROUTES.SEARCH_CENTRAL_PANE.getRoute({
                query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.ALL),
            }),
        );
    };
    return (
        <ConfirmModal
            title={translate('search.deleteSavedSearch')}
            onConfirm={handleDelete}
            onCancel={() => Onyx.set(ONYXKEYS.HASH_TO_DELETE, null)}
            isVisible={!!hashToDelete}
            prompt={translate('search.deleteSavedSearchConfirm')}
            confirmText={translate('common.delete')}
            cancelText={translate('common.cancel')}
            danger
        />
    );
}

function useDeleteSavedSearch() {
    const showDeleteModal = (hash: number) => {
        Onyx.set(ONYXKEYS.HASH_TO_DELETE, hash);
    };

    return {showDeleteModal};
}

export {useDeleteSavedSearch, DeleteConfirmModal};

Move DeleteConfirmModal to Search page:

We need to move this code:

App/src/pages/Search/SearchTypeMenu.tsx

Line 253 in b0ce206

to:

App/src/components/Search/index.tsx

Line 434 in 25450d9

/>

What alternative solutions did you explore? (Optional)

We can create a DeleteModalContext:

const ConfirmDeleteModalContext = createContext({
    showModal: ()=>{},
    isVisible: false
})

instead of using Onyxkey as main solution.

melvin-bot · 2024-09-23T18:36:24Z

@bondydaa, @akinwale, @OfstadC Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

OfstadC · 2024-09-23T20:50:33Z

@akinwale Could you please review the proposals by EOD tomorrow? Thank you!

OfstadC · 2024-09-25T13:24:07Z

Friendly bump @akinwale 😃

melvin-bot · 2024-09-25T18:16:01Z

@bondydaa, @akinwale, @OfstadC Eep! 4 days overdue now. Issues have feelings too...

melvin-bot · 2024-09-26T16:00:06Z

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

akinwale · 2024-09-27T02:41:35Z

@FitseTLT's proposal is the best approach here.

🎀👀🎀 C+ reviewed.

melvin-bot · 2024-09-27T02:41:45Z

Current assignee @bondydaa is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

melvin-bot · 2024-09-27T17:32:41Z

📣 @akinwale 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

melvin-bot · 2024-09-27T17:32:45Z

📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

OfstadC · 2024-10-04T14:31:14Z

Deployed yesterday so I believe payment should be issued 2024-10-09

melvin-bot · 2024-10-04T21:00:28Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2024-10-04T21:00:33Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.44-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix - Saved search - Unable to delete saved search using Enter key #49864

If no regressions arise, payment will be issued on 2024-10-11. 🎊

For reference, here are some details about the assignees on this issue:

@akinwale requires payment automatic offer (Reviewer)
@FitseTLT requires payment automatic offer (Contributor)

melvin-bot · 2024-10-04T21:00:34Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@akinwale] The PR that introduced the bug has been identified. Link to the PR:
[@akinwale] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@akinwale] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@akinwale] Determine if we should create a regression test for this bug.
[@akinwale] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@OfstadC] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

OfstadC · 2024-10-08T14:08:49Z

@akinwale could you please complete the BZ checklist above? Thank you!

OfstadC · 2024-10-10T18:23:38Z

@akinwale Please complete BZ checklist today so I can issue payment tomorrow. Thank you!

akinwale · 2024-10-11T07:24:22Z

[@akinwale] The PR that introduced the bug has been identified. Link to the PR:

[@akinwale] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

[@akinwale] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

Not a regression.

[@akinwale] Determine if we should create a regression test for this bug.

[@akinwale] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Steps

Launch Expensify
Navigate to the Search page
Click the 3-dot menu next to a saved search (create a saved search if there are none).
Select Delete.
Press Enter on the keyboard.
Verify that the saved search is deleted.

Do we agree 👍 or 👎?

akinwale · 2024-10-11T07:24:32Z

@OfstadC Done!

OfstadC · 2024-10-11T14:48:46Z

Payment Summary

@akinwale paid $250 via Upwork
@FitseTLT paid $2450 via Upwork

Thank youuu!

IuliiaHerets added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 19, 2024

melvin-bot bot assigned OfstadC Sep 19, 2024

bondydaa self-assigned this Sep 19, 2024

bondydaa added the External Added to denote the issue can be worked on by a contributor label Sep 19, 2024

melvin-bot bot changed the title ~~Saved search - Unable to delete saved search using Enter key~~ [$250] Saved search - Unable to delete saved search using Enter key Sep 19, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 19, 2024

melvin-bot bot assigned akinwale Sep 19, 2024

melvin-bot bot added the Overdue label Sep 23, 2024

melvin-bot bot removed the Overdue label Sep 27, 2024

bondydaa assigned FitseTLT Sep 27, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 27, 2024

FitseTLT mentioned this issue Sep 27, 2024

Fix - Saved search - Unable to delete saved search using Enter key #49864

Merged

50 tasks

melvin-bot bot added the Reviewing Has a PR in review label Sep 27, 2024

melvin-bot bot added Weekly KSv2 and removed Daily KSv2 labels Sep 27, 2024

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Oct 4, 2024

melvin-bot bot changed the title ~~[$250] Saved search - Unable to delete saved search using Enter key~~ [HOLD for payment 2024-10-11] [$250] Saved search - Unable to delete saved search using Enter key Oct 4, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Oct 4, 2024

OfstadC closed this as completed Oct 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2024-10-11] [$250] Saved search - Unable to delete saved search using Enter key #49492

[HOLD for payment 2024-10-11] [$250] Saved search - Unable to delete saved search using Enter key #49492

IuliiaHerets commented Sep 19, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Sep 19, 2024

IuliiaHerets commented Sep 19, 2024

IuliiaHerets commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

FitseTLT commented Sep 19, 2024 •

edited

Loading

truph01 commented Sep 20, 2024 •

edited by github-actions bot

Loading

melvin-bot bot commented Sep 23, 2024

OfstadC commented Sep 23, 2024

OfstadC commented Sep 25, 2024

melvin-bot bot commented Sep 25, 2024

melvin-bot bot commented Sep 26, 2024

akinwale commented Sep 27, 2024

melvin-bot bot commented Sep 27, 2024

melvin-bot bot commented Sep 27, 2024

melvin-bot bot commented Sep 27, 2024

OfstadC commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024 •

edited by OfstadC

Loading

OfstadC commented Oct 8, 2024

OfstadC commented Oct 10, 2024

akinwale commented Oct 11, 2024

akinwale commented Oct 11, 2024

OfstadC commented Oct 11, 2024

[HOLD for payment 2024-10-11] [$250] Saved search - Unable to delete saved search using Enter key #49492

[HOLD for payment 2024-10-11] [$250] Saved search - Unable to delete saved search using Enter key #49492

Comments

IuliiaHerets commented Sep 19, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Sep 19, 2024

IuliiaHerets commented Sep 19, 2024

IuliiaHerets commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

FitseTLT commented Sep 19, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

truph01 commented Sep 20, 2024 • edited by github-actions bot Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Sep 23, 2024

OfstadC commented Sep 23, 2024

OfstadC commented Sep 25, 2024

melvin-bot bot commented Sep 25, 2024

melvin-bot bot commented Sep 26, 2024

akinwale commented Sep 27, 2024

melvin-bot bot commented Sep 27, 2024

melvin-bot bot commented Sep 27, 2024

melvin-bot bot commented Sep 27, 2024

OfstadC commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024 • edited by OfstadC Loading

OfstadC commented Oct 8, 2024

OfstadC commented Oct 10, 2024

akinwale commented Oct 11, 2024

akinwale commented Oct 11, 2024

OfstadC commented Oct 11, 2024

Payment Summary

IuliiaHerets commented Sep 19, 2024 •

edited by melvin-bot bot

Loading

FitseTLT commented Sep 19, 2024 •

edited

Loading

truph01 commented Sep 20, 2024 •

edited by github-actions bot

Loading

melvin-bot bot commented Oct 4, 2024 •

edited by OfstadC

Loading