Add SearchRouter component and context to display it by Kicu · Pull Request #48785 · Expensify/App

Kicu · 2024-09-09T14:52:37Z

Details

this is the first PR for v2.4 that adds the base SearchRouter and unblocks all other work around SearchRouter and 2.4
details here: https://docs.google.com/document/d/1Uf7UwMYTmek2qWe37SqkQZnOZYrnrfPucOLzXMv-3WM/edit?pli=1

Done

Adds basic version of SearchRouter which uses a modal, and allows to submit search via ENTER key (the clickable list will come in a different PR) - it's responsible for managing the parsing of query and performing the actual search (via Navigation.navigate())
Adds SearchRouterInput which is responsible for displaying the input to the user (in future we plan to add autocomplete there)
introduces SearchContext that controls whether the router should be shown or hidden
Adds SearchButton to display the new router but ONLY in development (not staging or prod) - I understand that the TopBar looks weird with old and new search, but that is the easiest way to add it both for large and small screens; we don't want to display the new router to the users until it's fully done

Fixed Issues

$ #49118
$ #49119
PROPOSAL:

Tests

on dev use the new search button to open the Search Router
type in some search phrase and press ENTER
verify that you were navigated to search page with the typed query
hitting esc and clicking outside should hide Search Router

Offline tests

QA Steps

Nothing to test for QA at this point, we'll do tests once the feature is more complete

PR Author Checklist

Screenshots/Videos

Android: Native

rec-search-android.mp4

Android: mWeb Chrome

iOS: Native

rec-search-ios.mp4

iOS: mWeb Safari

rec-search-ios-web.mp4

MacOS: Chrome / Safari

rec-search-web.mp4

MacOS: Desktop

Kicu · 2024-09-09T14:53:31Z

@luacmartins here is a draft that I created when describing the doc, take a quick look.

CC @SzymczakJ @289Adam289

luacmartins · 2024-09-09T19:36:15Z

Nice! You guys make it look too easy 😄

src/CONST.ts

src/libs/SearchUtils.ts

Kicu · 2024-09-10T12:24:31Z

src/styles/index.ts

-            height: variables.componentSizeNormal,
-        },
-
-        searchContainer: {


I searched in all project files using IDE (webstorm) search and found no usages of this. I believe these are leftovers after some temporary old search feature which was removed.

289Adam289

Code looks good. Requested two small changes

src/components/Search/SearchRouter/SearchRouterInput.tsx

src/components/Search/SearchRouter/SearchRouter.tsx

Kicu · 2024-09-11T12:33:07Z

@289Adam289 I've fixed both suggestions, take a look

289Adam289

LGTM!

Kicu · 2024-09-17T11:27:55Z

Just these 2 questions for now, there will be more time for full reviews of the experience once its more complete I believe.
This PR allows more developers to work in parallel.

What about overlay behind modal on wider screens? Should the search modal have the same backdrop/overlay as for ex RHP?

VS

shawnborton · 2024-09-17T11:56:25Z

There's no overlay planned (yet) - but we did have some slight box shadow happening around it from our mockups.

luacmartins · 2024-09-17T23:06:14Z

@ikevin127 please prioritize reviewing this issue since it unblocks others.

ikevin127 · 2024-09-17T23:19:17Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

android.webm

Android: mWeb Chrome

android-mweb.webm

iOS: Native

ios.mp4

iOS: mWeb Safari

ios-mweb.mp4

MacOS: Chrome / Safari

web.mov

MacOS: Desktop

desktop.mov

ikevin127

LGTM 🚀

Observation: The Cancel button only shows-up on narrow layout devices, probably that's intended but I thought I should mention it anyway in case it's not.

luacmartins · 2024-09-18T01:53:18Z

Nice! Works well. I think people will report the duplicated magnifying glass as a bug. Maybe we should move that to the report header soon, so it doesn't trigger a bunch of bug reports

luacmartins

LGTM

luacmartins · 2024-09-18T01:41:27Z

src/components/Search/SearchRouter/SearchButton.tsx

+
+    return (
+        <PressableWithoutFeedback
+            accessibilityLabel=""


NAB we'll need to update this

melvin-bot · 2024-09-18T01:54:12Z

@luacmartins looks like this was merged without a test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

luacmartins · 2024-09-18T01:54:21Z

ESlint was failing on AuthScreens, it's unrelated to this PR.

OSBotify · 2024-09-18T02:05:22Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

Kicu · 2024-09-18T06:18:29Z

The failing Eslint was a new check, details: #48785 (comment)

OSBotify · 2024-09-18T22:53:07Z

🚀 Deployed to staging by https://github.com/luacmartins in version: 9.0.38-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2024-09-19T23:33:51Z

🚀 Deployed to production by https://github.com/grgia in version: 9.0.38-4 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

jayeshmangwani · 2024-10-26T04:59:21Z

src/components/Search/SearchRouter/SearchRouterInput.tsx

+            value={value}
+            onChangeText={onChangeText}
+            onSubmitEditing={onSubmit}
+            autoFocus


Coming from this Issue #51010, We are adding autoFocus here, but it doesn’t always work consistently on Android. To handle this, we’ve an existing prop (shouldDelayFocus) for TextInput that enables autoFocus with a delay specifically for Android #51010 (comment)

rayane-d · 2024-10-28T18:52:43Z

src/components/Search/SearchRouter/SearchButton.tsx

+    }
+
+    return (
+        <PressableWithoutFeedback


FYI this PR missed adding a tooltip for the search button and caused this issue: #50977

s77rt · 2024-11-24T13:47:09Z

src/components/Search/SearchRouter/SearchRouterInput.tsx

+            value={value}
+            onChangeText={onChangeText}
+            onSubmitEditing={onSubmit}
+            autoFocus


On mWeb Safari, the autoFocus does not work well while animation is still ongoing, the caret lags behind (#52382). Usually we use useAutoFocusInput hook instead. However since this input is not rendered in RHP (or LHP) but it's inside a modal (and the timing in modal vs RHP are diff) we had to go for another solution which is to just hide the caret while modal is still animating.

rojiphil · 2024-12-09T13:47:45Z

src/components/Search/SearchRouter/SearchButton.tsx

+        <PressableWithoutFeedback
+            accessibilityLabel=""
+            style={[styles.flexRow, styles.mr2, styles.touchableButtonImage]}
+            onPress={() => {


Not blurring the search button causes quite a unique edge case in mweb android platform that resulted in blue frame on the search button as mentioned in #52128

ahmedGaber93 · 2025-01-15T07:14:45Z

src/components/Search/SearchRouter/SearchRouterInput.tsx

+    const modalWidth = isFullWidth ? styles.w100 : {width: variables.popoverWidth};
+
+    return (
+        <BaseTextInput


Coming from #54151, we add maxLength to the input here to prevent freezing when searching with a long text

luacmartins reviewed Sep 9, 2024

View reviewed changes

src/CONST.ts Show resolved Hide resolved

src/libs/SearchUtils.ts Outdated Show resolved Hide resolved

Kicu force-pushed the kicu/search-router-initial branch from 53ec64f to f8803d3 Compare September 10, 2024 08:36

Kicu mentioned this pull request Sep 10, 2024

Add basic code skeleton for new Search Router PoC software-mansion-labs/expensify-app-fork#100

Closed

Kicu force-pushed the kicu/search-router-initial branch from 0966fad to aa224c6 Compare September 10, 2024 12:22

Kicu commented Sep 10, 2024

View reviewed changes

Kicu requested a review from luacmartins September 10, 2024 12:32

Kicu force-pushed the kicu/search-router-initial branch from aa224c6 to 2a2796b Compare September 11, 2024 11:06

289Adam289 suggested changes Sep 11, 2024

View reviewed changes

src/components/Search/SearchRouter/SearchRouterInput.tsx Show resolved Hide resolved

src/components/Search/SearchRouter/SearchRouter.tsx Outdated Show resolved Hide resolved

Kicu requested a review from 289Adam289 September 11, 2024 12:32

289Adam289 approved these changes Sep 11, 2024

View reviewed changes

Kicu force-pushed the kicu/search-router-initial branch 4 times, most recently from 8ed1946 to 08fd7e4 Compare September 16, 2024 07:15

Kicu added 4 commits September 16, 2024 15:11

Add initial SearchRouter component and context to display it

6d61200

move search router permission to Permissions.ts

1f7c608

Improve SearchRouter and SearchRouterContext

d7a8311

Add searching on ENTER key press

2772431

Kicu force-pushed the kicu/search-router-initial branch from 08fd7e4 to 2772431 Compare September 16, 2024 13:11

Kicu added 2 commits September 16, 2024 15:17

fix lint

b2547c4

Improve keyboard handling in SearchRouter

3e26bf1

Kicu changed the title ~~[WIP] Add initial SearchRouter component and context to display it~~ Add initial SearchRouter component and context to display it Sep 16, 2024

Improve redirecting from SearchRouter

d89f4d2

Kicu marked this pull request as ready for review September 17, 2024 10:42

Kicu requested review from a team as code owners September 17, 2024 10:42

Kicu changed the title ~~Add initial SearchRouter component and context to display it~~ Add SearchRouter component and context to display it Sep 17, 2024

ikevin127 approved these changes Sep 18, 2024

View reviewed changes

luacmartins approved these changes Sep 18, 2024

View reviewed changes

luacmartins merged commit 4af9a6c into Expensify:main Sep 18, 2024

melvin-bot bot added the Emergency label Sep 18, 2024

luacmartins removed the Emergency label Sep 18, 2024

twisterdotcom mentioned this pull request Sep 18, 2024

[HOLD for Payment 2024-10-04] [$250] [Search v2.4] [App] Introduce <SearchRouter> component #49118

Closed

github-actions bot mentioned this pull request Sep 18, 2024

Deploy Checklist: New Expensify 2024-09-18 #49427

Closed

43 tasks

luacmartins mentioned this pull request Sep 18, 2024

[$250] [Search v2.4] [App] Search Router Input #49119

Closed

Kicu mentioned this pull request Sep 20, 2024

Add new SearchButton to all pages and tweak SearchRouter #49379

Merged

48 tasks

luacmartins mentioned this pull request Sep 23, 2024

[Search v2.4] Update Search results page (Search bar only) #49462

Merged

50 tasks

bernhardoj mentioned this pull request Sep 28, 2024

Workspace - Nothing happens after pressing ESC key on workspace editor #49869

Closed

6 tasks

jayeshmangwani reviewed Oct 26, 2024

View reviewed changes

jayeshmangwani mentioned this pull request Oct 26, 2024

[HOLD for payment 2024-10-29] [HOLD for payment 2024-10-25] [$250] Android - Search - Keyboard does not auto open in Search modal #51010

Closed

8 tasks

rayane-d reviewed Oct 28, 2024

View reviewed changes

rayane-d mentioned this pull request Oct 28, 2024

[HOLD for payment 2024-10-29] [$250] Search - No tooltip when hovering over the search icon #50977

Closed

8 tasks

s77rt reviewed Nov 24, 2024

View reviewed changes

s77rt mentioned this pull request Nov 24, 2024

[HOLD for payment 2024-11-29] [$250] Search - The cursor is displayed on different sides in the search text box #52382

Closed

8 tasks

rojiphil reviewed Dec 9, 2024

View reviewed changes

ahmedGaber93 reviewed Jan 15, 2025

View reviewed changes

Conversation

Kicu commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Done

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

Kicu commented Sep 9, 2024

Uh oh!

luacmartins commented Sep 9, 2024

Uh oh!

Uh oh!

Uh oh!

Kicu Sep 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

289Adam289 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Kicu commented Sep 11, 2024

Uh oh!

289Adam289 left a comment

Choose a reason for hiding this comment

Uh oh!

Kicu commented Sep 17, 2024

Uh oh!

shawnborton commented Sep 17, 2024

Uh oh!

luacmartins commented Sep 17, 2024

Uh oh!

ikevin127 commented Sep 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

ikevin127 left a comment

Choose a reason for hiding this comment

Uh oh!

luacmartins commented Sep 18, 2024

Uh oh!

luacmartins left a comment

Choose a reason for hiding this comment

Uh oh!

luacmartins Sep 18, 2024

Choose a reason for hiding this comment

Uh oh!

melvin-bot bot commented Sep 18, 2024

Uh oh!

luacmartins commented Sep 18, 2024

Uh oh!

OSBotify commented Sep 18, 2024

Uh oh!

Kicu commented Sep 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

OSBotify commented Sep 18, 2024

Uh oh!

OSBotify commented Sep 19, 2024

Uh oh!

jayeshmangwani Oct 26, 2024

Choose a reason for hiding this comment

Uh oh!

rayane-d Oct 28, 2024

Choose a reason for hiding this comment

Uh oh!

s77rt Nov 24, 2024

Choose a reason for hiding this comment

Uh oh!

rojiphil Dec 9, 2024

Choose a reason for hiding this comment

Uh oh!

ahmedGaber93 Jan 15, 2025

Kicu commented Sep 9, 2024 •

edited

Loading

Kicu Sep 10, 2024 •

edited

Loading

ikevin127 commented Sep 17, 2024 •

edited

Loading

Kicu commented Sep 18, 2024 •

edited

Loading