Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[No QA] Simplify and upgrade KeyboardShortcut library #8059

Merged
merged 14 commits into from
Mar 10, 2022
Merged

[No QA] Simplify and upgrade KeyboardShortcut library #8059

merged 14 commits into from
Mar 10, 2022

Conversation

roryabraham
Copy link
Contributor

@roryabraham roryabraham commented Mar 9, 2022 •
edited
Loading

Details

This PR branches off of #7702 to extract the group of changes that are related to the KeyboardShortcut library.

It also goes a bit further to simplify and clarify the KeyboardShortcut library API.

Fixed Issues

$ (partial) #7648

Tests (web/desktop)

  1. Press CMD+I to open the keyboard shortcut modal.
  2. Press Esc to close it.
  3. Press CMD+K to open the search page.
  4. Press Esc to close it.
  5. Press CMD+SHIFT+K to open the New Group page.
  6. Press Esc to close it.
  7. Press the avatar to open the settings page.
  8. Press Esc to close it.
  9. Highlight some text in a chat, then press CMD+C.
  10. Paste the text somewhere and verify that it was correctly copied to the clipboard.

Tests (native)

The KeyboardShortcut library is a noop on native. Regression tests only.

  • Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

  • I verified the PR has a small number of commits behind main
  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I clearly indicated the environment tests should be run in (Staging vs Production)
  • I wrote testing steps that cover success & fail scenarios (if applicable)
  • I included screenshots or videos for tests on all platforms
  • I ran the tests & verify they passed on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • MacOS / Desktop
  • I verified there are no console errors related to changes in this PR
  • I followed proper code patterns (see Reviewing the code)
    • I added comments when the code was not self explanatory
    • I put all copy / text shown in the product in all src/languages/* files (if applicable)
    • I followed proper naming convention for platform-specific files (if applicable)
    • I followed style guidelines (in Styling.md) for all style edits I made
    • I followed the JSDocs style guidelines (in STYLE.md)
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I corroborated the UI performance was not affected (the performance is the same than main branch)
  • If I created a new component I verified that a similar component doesn't exist in the codebase

PR Reviewer Checklist

  • I verified the PR has a small number of commits behind main
  • 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 testing environment is mentioned in the test steps
  • I verified testing steps cover success & fail scenarios (if applicable)
  • I checked that screenshots or videos are included for tests on all platforms
  • I verified tests pass on all platforms & I tested again on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • MacOS / Desktop
  • I verified there are no console errors related to changes in this PR
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified comments were added when the code was not self explanatory
    • I verified any copy / text shown in the product was added in all src/languages/* files (if applicable)
    • I verified proper naming convention for platform-specific files was followed (if applicable)
    • I verified style guidelines were followed
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified other components are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified the UI performance was not affected (the performance is the same than main branch)
  • If a new component is created I verified that a similar component doesn't exist in the codebase

QA Steps

Regression tests only.

  • Verify that no errors appear in the JS console

Screenshots

Web

KeyboardShortcutsWeb.mov

Desktop

KeyboardShortcutDesktop.mov

@roryabraham roryabraham self-assigned this Mar 9, 2022
@roryabraham roryabraham marked this pull request as ready for review March 9, 2022 21:06
@roryabraham roryabraham requested a review from a team as a code owner March 9, 2022 21:06
@MelvinBot MelvinBot requested review from thienlnam and removed request for a team March 9, 2022 21:06
@roryabraham
Copy link
Contributor Author

Tagging in @rushatgabhane for a review since you already reviewed most of these changes in #7702

@roryabraham roryabraham mentioned this pull request Mar 9, 2022
Merged
20 tasks
rushatgabhane
rushatgabhane suggested changes Mar 9, 2022
View reviewed changes
Copy link
Member

@rushatgabhane rushatgabhane left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for tagging me
@roryabraham could you please pull the changes to Button.js from #7702?

I'm guessing it'll be needed by #7920 (comment) and #7623

Otherwise, looks good. Liking the change to abstract away the modifiers

@roryabraham
Copy link
Contributor Author

Updated to include changes in Button.js

rushatgabhane
rushatgabhane reviewed Mar 9, 2022
View reviewed changes
src/components/Button.js Outdated
/** The priority to assign the enter key event listener. 0 is the highest priority. */
enterKeyEventListenerPriority: PropTypes.number,


Copy link
Member

@rushatgabhane rushatgabhane Mar 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@roryabraham extra line breaker. (We really need a eslint rule for this)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there somewhere where we've explicitly added this to the review guidelines?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because we can easily turn on https://eslint.org/docs/rules/no-multiple-empty-lines

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there somewhere where we've explicitly added this to the review guidelines

Nope.

Yeah, let's add that rule.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@roryabraham I'm gonna create a quick PR for eslint-config-expensify to turn it on.

rushatgabhane
rushatgabhane approved these changes Mar 10, 2022
View reviewed changes
Copy link
Member

@rushatgabhane rushatgabhane left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thienlnam LGTM! 🎉 and tests well. All yours!

@rushatgabhane
Copy link
Member

rushatgabhane commented Mar 10, 2022 •
edited
Loading

Commenting since I can't edit the PR

PR Reviewer Checklist

  • I verified the PR has a small number of commits behind main
  • 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 testing environment is mentioned in the test steps
  • I verified testing steps cover success & fail scenarios (if applicable)
  • I checked that screenshots or videos are included for tests on all platforms
  • I verified tests pass on all platforms & I tested again on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • MacOS / Desktop
  • I verified there are no console errors related to changes in this PR
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified comments were added when the code was not self explanatory
    • I verified any copy / text shown in the product was added in all src/languages/* files (if applicable)
    • I verified proper naming convention for platform-specific files was followed (if applicable)
    • I verified style guidelines were followed
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified other components are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified the UI performance was not affected (the performance is the same than main branch)
  • If a new component is created I verified that a similar component doesn't exist in the codebase

@rushatgabhane rushatgabhane mentioned this pull request Mar 10, 2022
Merged
@parasharrajat parasharrajat mentioned this pull request Mar 10, 2022
Merged
35 tasks
thienlnam
thienlnam approved these changes Mar 10, 2022
View reviewed changes
Copy link
Contributor

@thienlnam thienlnam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No complaints on the changes, it all looks good - just had one question

src/CONST.js
META: 'Cmd',
CONTROL: 'CTRL',
ESCAPE: 'ESC',
META: 'CMD',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small question: How come this is called the META key instead of COMMAND?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IDK

@thienlnam thienlnam merged commit 89f2844 into main Mar 10, 2022
@thienlnam thienlnam deleted the Rory-KeyboardShortcut branch March 10, 2022 20:49
@OSBotify
Copy link
Contributor

✋ 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 OSBotify mentioned this pull request Mar 10, 2022
Closed
@OSBotify
Copy link
Contributor

🚀 Deployed to staging by @thienlnam in version: 1.1.42-0 🚀

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

@marcaaron
Copy link
Contributor

Seeing some console errors on dev I think might be related to these changes...

2022-03-14_13-49-14

2022-03-14_13-49-04

@marcaaron
Copy link
Contributor

Oh sorry I was on staging not dev when this happened

@rushatgabhane
Copy link
Member

Interesting. Keydown event is fired on clicking chrome's auto complete too.

Screen.Recording.2022-03-15.at.3.01.59.AM.mov

@rushatgabhane
Copy link
Member

rushatgabhane commented Mar 15, 2022 •
edited
Loading

One differentiating factor: Key presses are an instanceof KeyboardEvent, while the autocomplete thing is NOT.

So a quick fix would be to return early if the event isn't an instance of KeyboardEvent
cc: @roryabraham

@roryabraham roryabraham mentioned this pull request Mar 15, 2022
Merged
50 tasks
@OSBotify
Copy link
Contributor

🚀 Deployed to production by @chiragsalian in version: 1.1.42-6 🚀

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

@mallenexpensify mallenexpensify mentioned this pull request Mar 15, 2022
Closed
@SumitDiyora SumitDiyora mentioned this pull request Apr 20, 2022
Closed
22 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rushatgabhane rushatgabhane rushatgabhane approved these changes

@thienlnam thienlnam thienlnam approved these changes

Assignees

@roryabraham roryabraham

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@roryabraham @rushatgabhane @OSBotify @marcaaron @thienlnam