Improvement: Search Feature for help expensify #24299

studentofcoding · 2023-08-08T21:02:28Z

As per the last discussion with @marcochavezf here we are using XML Configuration to handle the Search Feature

Make related components & add gse script
Configure CSP for each inline script
Styling related components
Add relevant setup (Annotations, & Context)

Additional context:

The initial state of https://help.expensify.com/ is having errors on CSP. This PR handles that also.
There's an unrelated error from Google inline script that is related to ads async-ads.js. It's not affected the functionality & already hides the ads anyway.

Details

Fixed Issues

$ #23978
PROPOSAL: #23978 (comment)

Tests

Open https://help.expensify.com/
Click Search Icon to open the Search sidebar
On the Opened Search Sidebar Type the query you want to find & Press "Enter" or Click Magnifying glass icon
If there are results, They'll be shown on the list below it.
If there aren't, It'll show Upps no results found, Please try again....
To Clear the result click the X button on the search input.
To Close the Search sidebar, click the X button on the right side top of the Sidebar

Verify that no errors appear in the JS console

Offline tests

QA Steps

Open https://help.expensify.com/
Click Search Icon to open the Search sidebar
On the Opened Search Sidebar Type the query you want to find & Press "Enter" or Click Magnifying glass icon
If there are results, They'll be shown on the list below it.
If there aren't, It'll show Upps no results found, Please try again....
To Clear the result click the X button on the search input.
To Close the Search sidebar, click the X button on the right side top of the Sidebar

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Web

https://www.loom.com/share/892b56bba57f463a8c839a2b9a712ee5?sid=d2dfe9d4-35f8-4c67-935d-aaaccb6a4f51

Mobile Web - Chrome

mobile_chrome.mp4

Mobile Web - Safari

mobile_safari.mp4

Desktop

iOS

Android

- Make related components - Configure CSP for each inline script - Styling related components - Add relevant setup (Annotations, & Context)

melvin-bot · 2023-08-08T21:02:33Z

@eVoloshchak Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

github-actions · 2023-08-08T21:02:44Z

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

github-actions · 2023-08-08T21:02:44Z

CLA Assistant Lite bot:
Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.

I have read the CLA Document and I hereby sign the CLA

_{You can retrigger this bot by commenting recheck in this Pull Request}

studentofcoding · 2023-08-08T21:04:55Z

I have read the CLA Document and I hereby sign the CLA

studentofcoding · 2023-08-08T21:05:08Z

recheck

studentofcoding · 2023-08-08T21:07:52Z

I have read the CLA Document and I hereby sign the CLA

marcochavezf · 2023-08-08T22:30:26Z

@eVoloshchak, let me know if you have bandwidth to review it soon. I can jump into the review tomorrow

marcochavezf · 2023-08-08T22:33:21Z

@studentofcoding thank you for raising the PR! Just one more thing, can you upload videos (instead of screenshots) of the search functionality in the screenshots/videos section? It would be required for design review since it involves different UI changes

studentofcoding · 2023-08-09T04:04:03Z

@studentofcoding thank you for raising the PR! Just one more thing, can you upload videos (instead of screenshots) of the search functionality in the screenshots/videos section? It would be required for design review since it involves different UI changes

The videos are added @marcochavezf, thanks!

marcochavezf

Looks great! I just left a few comments to change a few minor things, but everything looks good so far 🚀

docs/_includes/search-toggle.html

docs/_includes/sidebar-search.html

docs/_includes/search-toggle.html

docs/_includes/sidebar-search.html

docs/annotations.xml

docs/assets/js/main.js

docs/context.xml

Co-authored-by: Marco Chávez <marcochavezf@gmail.com>

studentofcoding · 2023-08-09T18:08:46Z

All resolved @marcochavezf

shawnborton · 2023-08-09T18:14:07Z

A couple of comments:

It looks like all of the content is cut off at the bottom.

Can you double check that the correct font is being applied to the smaller text under the links?

For the search button, we should just use our standard green button styles here. Same for the text input, can we make sure this matches what we have on NewDot?

studentofcoding · 2023-08-09T19:10:14Z

It looks like all of the content is cut off at the bottom.

Can you double check that the correct font is being applied to the smaller text under the links?

For the search button, we should just use our standard green button styles here. Same for the text input, can we make sure this matches what we have on NewDot?

Done it all @shawnborton, here are the vercel staging for references https://xml-docs.vercel.app

cc : @marcochavezf

shawnborton · 2023-08-09T19:53:24Z

Are the screenshots updated?

marcochavezf · 2023-08-11T19:29:10Z

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 / Chrome
- iOS / native
- iOS / 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 approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- 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(themeColors.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 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

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

marcochavezf

LGTM, thank you @studentofcoding!

studentofcoding · 2023-08-11T19:45:09Z

LGTM, thank you @studentofcoding!

Can you approve it again? There is lint error before and it's fix now @marcochavezf Thanks!

studentofcoding · 2023-08-11T20:02:31Z

Hmm the Jest and perf checks already taking 15 mins ++ while I only running lint fix npm run prettier

Do I need to do anything @marcochavezf ?

marcochavezf · 2023-08-11T20:03:49Z

Hmm the Jest and perf checks already taking 15 mins ++ while I only running lint fix npm run prettier

Do I need to do anything @marcochavezf ?

We'd just need to wait for the checks to pass

studentofcoding · 2023-08-11T21:09:15Z

Finally the check is done.

If you still have time, Please kindly approve @marcochavezf 🙏🏻

Thanks

OSBotify · 2023-08-11T22:33:15Z

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

OSBotify · 2023-08-14T20:04:01Z

🚀 Deployed to staging by https://github.com/marcochavezf in version: 1.3.54-0 🚀

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

OSBotify · 2023-08-14T21:04:17Z

🚀 Deployed to staging by https://github.com/marcochavezf in version: 1.3.54-0 🚀

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

johncschuster · 2023-08-15T18:00:21Z

Hey folks! I've noticed a few things that might have missed QA (or didn't explicitly get considered as "wrong")

Body text color is dark, but it should be bright to match the body text of the rest of the help site

When you misspell a word and get a suggested replacement, the color of the text that says, "Did you mean:" is dark (almost black), but shouldn't be. It should match the text color of the light body text of the rest of the help site.

Keep in mind, we should make sure that the text color will change when we give users the option to switch between dark mode and light mode.

Background color of the pagination is bright. It does not match the background color of the rest of the helpsite.

Keep in mind, we should make sure that the background color of the pagination will change when we give users the option to switch between dark mode and light mode.

CC @shawnborton

marcochavezf · 2023-08-15T18:07:23Z

Hi @studentofcoding, while reviewing the new implementation, we noticed a few minor visual aspects (posted above by @johncschuster) that might need some attention. Can you create a follow-up PR to address those?

studentofcoding · 2023-08-15T18:34:14Z

Hi, @marcochavezf sure thing!, Where do I need to connect the branch from, as I checked it's not on main yet. Do I need to connect it based on this PR branch?

And just a follow-up on this requirement Keep in mind, we should make sure that the text color will change when we give users the option to switch between dark mode and light mode.. As this is not based on the issue request, Will it extend the scope, or it's just a note and we can use the same variable color for now?

Thanks

@johncschuster

marcochavezf · 2023-08-15T18:39:02Z

Thanks @studentofcoding

Where do I need to connect the branch from, as I checked it's not on main yet. Do I need to connect it based on this PR branch?

It should be on main, for example here is the new context file.

And just a follow-up on this requirement Keep in mind, we should make sure that the text color will change when we give users the option to switch between dark mode and light mode.. As this is not based on the issue request, Will it extend the scope, or it's just a note and we can use the same variable color for now?

Yup, we'd just need to keep the color values in variables as we did in the original PR. This will help us to switch the colors when the light mode is implemented.

studentofcoding · 2023-08-15T19:09:44Z

Noted @marcochavezf

Also, guys, I have a small suggestion on the Pagination color text, how if we use the same color of green or blue (link) to the active page, so it'll pop up and is recognized by the user

Default

Green

Blue

cc: @shawnborton

shawnborton · 2023-08-15T19:10:50Z

For pagination, can we use our standard button styles for these?

Also, it looks like the paragraph text below the blue link is not using the correct font - sorry for not catching that sooner!

studentofcoding · 2023-08-15T19:16:58Z

Noted @shawnborton, like this?

shawnborton · 2023-08-15T19:17:40Z

Yup, much better for the text.

studentofcoding · 2023-08-15T19:28:04Z

PR opened : #24598

@marcochavezf @johncschuster @shawnborton

OSBotify · 2023-08-17T02:54:53Z

🚀 Deployed to production by https://github.com/yuwenmemon in version: 1.3.54-13 🚀

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

ntdiary · 2023-10-05T05:46:28Z

docs/_sass/_search-bar.scss

+    background-color: $color-appBG;
+    border: $color-appBG;
+    font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
+    max-height: 80vh;


The fixed max-height may cause the content to not fully display on mobile devices. We replaced it to flex layout in PR #27619. : )

studentofcoding added 3 commits August 9, 2023 03:29

Setup Search Engine for help Expensify with XML Configuration

e480cc4

- Make related components - Configure CSP for each inline script - Styling related components - Add relevant setup (Annotations, & Context)

Make Sidebar full width up until table breakpoint

d933b0f

Add CSP for Captcha

afbfb68

studentofcoding requested a review from a team as a code owner August 8, 2023 21:02

melvin-bot bot requested review from eVoloshchak and removed request for a team August 8, 2023 21:02

Fix prettier error

4c52c3e

marcochavezf self-requested a review August 8, 2023 22:28

marcochavezf assigned studentofcoding Aug 8, 2023

marcochavezf requested changes Aug 9, 2023

View reviewed changes

marcochavezf added the Design label Aug 9, 2023

marcochavezf mentioned this pull request Aug 9, 2023

[HOLD for payment 2023-08-24] [$2000] [ExpensifyHelp] Implement a search functionality on https://help.expensify.com #23978

Closed

studentofcoding and others added 3 commits August 10, 2023 00:55

Update docs/context.xml

1ef9ca9

Co-authored-by: Marco Chávez <marcochavezf@gmail.com>

Update all

e7cb172

Update

4114982

studentofcoding requested a review from marcochavezf August 9, 2023 18:08

Use NewDot search button, font, & fix cut off content on search result

3495c0d

marcochavezf removed the request for review from eVoloshchak August 11, 2023 19:29

marcochavezf previously approved these changes Aug 11, 2023

View reviewed changes

Fix prettier error

55e2a3a

studentofcoding dismissed marcochavezf’s stale review via 55e2a3a August 11, 2023 19:43

studentofcoding requested a review from marcochavezf August 11, 2023 19:45

marcochavezf approved these changes Aug 11, 2023

View reviewed changes

marcochavezf merged commit 60c4d1d into Expensify:main Aug 11, 2023
13 checks passed

OSBotify mentioned this pull request Aug 14, 2023

Deploy Checklist: New Expensify 2023-08-14 #24550

Closed

49 tasks

alitoshmatov mentioned this pull request Aug 22, 2023

[HOLD for C+ newdot payment] [$1000] Burger menu overlaps with "Expensify" logo in top left corner of the page #25646

Closed

6 tasks

ginsuma mentioned this pull request Aug 29, 2023

[C+ Checklist Needs Completion] [$500] mWeb - Search icon is partially visible in help page on mobile #26164

Closed

6 tasks

ntdiary reviewed Oct 5, 2023

View reviewed changes

ntdiary mentioned this pull request Oct 5, 2023

[HOLD for payment 2023-10-02] [$500] Settings - Help -User can not scroll to to the bottom of the page. #27365

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improvement: Search Feature for help expensify #24299

Improvement: Search Feature for help expensify #24299

studentofcoding commented Aug 8, 2023 •

edited

Loading

melvin-bot bot commented Aug 8, 2023

github-actions bot commented Aug 8, 2023 •

edited

Loading

github-actions bot commented Aug 8, 2023

studentofcoding commented Aug 8, 2023

studentofcoding commented Aug 8, 2023

studentofcoding commented Aug 8, 2023

marcochavezf commented Aug 8, 2023

marcochavezf commented Aug 8, 2023

studentofcoding commented Aug 9, 2023

marcochavezf left a comment

studentofcoding commented Aug 9, 2023

shawnborton commented Aug 9, 2023

studentofcoding commented Aug 9, 2023

shawnborton commented Aug 9, 2023

marcochavezf commented Aug 11, 2023 •

edited

Loading

marcochavezf left a comment

studentofcoding commented Aug 11, 2023

studentofcoding commented Aug 11, 2023

marcochavezf commented Aug 11, 2023

studentofcoding commented Aug 11, 2023 •

edited

Loading

OSBotify commented Aug 11, 2023

OSBotify commented Aug 14, 2023

OSBotify commented Aug 14, 2023

johncschuster commented Aug 15, 2023

marcochavezf commented Aug 15, 2023

studentofcoding commented Aug 15, 2023

marcochavezf commented Aug 15, 2023

studentofcoding commented Aug 15, 2023

shawnborton commented Aug 15, 2023

studentofcoding commented Aug 15, 2023

shawnborton commented Aug 15, 2023

studentofcoding commented Aug 15, 2023

OSBotify commented Aug 17, 2023

ntdiary Oct 5, 2023

Improvement: Search Feature for help expensify #24299

Improvement: Search Feature for help expensify #24299

Conversation

studentofcoding commented Aug 8, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Aug 8, 2023

github-actions bot commented Aug 8, 2023 • edited Loading

github-actions bot commented Aug 8, 2023

studentofcoding commented Aug 8, 2023

studentofcoding commented Aug 8, 2023

studentofcoding commented Aug 8, 2023

marcochavezf commented Aug 8, 2023

marcochavezf commented Aug 8, 2023

studentofcoding commented Aug 9, 2023

marcochavezf left a comment

Choose a reason for hiding this comment

studentofcoding commented Aug 9, 2023

shawnborton commented Aug 9, 2023

studentofcoding commented Aug 9, 2023

shawnborton commented Aug 9, 2023

marcochavezf commented Aug 11, 2023 • edited Loading

Reviewer Checklist

Screenshots/Videos

marcochavezf left a comment

Choose a reason for hiding this comment

studentofcoding commented Aug 11, 2023

studentofcoding commented Aug 11, 2023

marcochavezf commented Aug 11, 2023

studentofcoding commented Aug 11, 2023 • edited Loading

OSBotify commented Aug 11, 2023

OSBotify commented Aug 14, 2023

OSBotify commented Aug 14, 2023

johncschuster commented Aug 15, 2023

Body text color is dark, but it should be bright to match the body text of the rest of the help site

Background color of the pagination is bright. It does not match the background color of the rest of the helpsite.

marcochavezf commented Aug 15, 2023

studentofcoding commented Aug 15, 2023

marcochavezf commented Aug 15, 2023

studentofcoding commented Aug 15, 2023

shawnborton commented Aug 15, 2023

studentofcoding commented Aug 15, 2023

shawnborton commented Aug 15, 2023

studentofcoding commented Aug 15, 2023

OSBotify commented Aug 17, 2023

ntdiary Oct 5, 2023

Choose a reason for hiding this comment

studentofcoding commented Aug 8, 2023 •

edited

Loading

github-actions bot commented Aug 8, 2023 •

edited

Loading

marcochavezf commented Aug 11, 2023 •

edited

Loading

studentofcoding commented Aug 11, 2023 •

edited

Loading