Update Preferences page with push-to-page design

[cristipaval]

Details

Aligns Preferences page with the push-to-page design cc @Beamanator

Fixed Issues

$ #14432

Tests and QA Steps

1. Go to Settings -> Preferences
2. Verify that Preferences page looks according to Figma
3. Go to Priority Mode and verify the new design
4. Go to Languages and verify the new page

5. Change Priority mode and verify that the LHN displays the chats accordingly
6. Change the language and verify that the App labels are translated

• Verify that no errors appear in the JS console

Offline tests

1. Open 2 App clients (clientA and clientB)
2. Go to Preferences on both clients
3. Turn off the internet on clientA
4. Change the Priority mode and the Language on clientA
5. Verify that nothing changed on clientB
6. Turn on the internet on clientA
7. Go back to clientB and verify that Priority Mode and Language are the same as in clientA
   https://user-images.githubusercontent.com/18078393/215102142-5c57a469-4336-45db-b2e9-fe909ed77293.mov

PR Author Checklist

• 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 added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover 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 tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (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 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
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • 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 correct English and 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 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 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
• I verified that if a function's arguments changed that all usages have also been updated correctly
• 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 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 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.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

web.mov

Mobile Web - Chrome

android.chrome.mov

Mobile Web - Safari

ios.safari.mov

Desktop

desktop.mov

iOS

ios.native.mov

Android

android.native.mov

[rushatgabhane]

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 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 correct English and 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 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 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.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Screen.Recording.2023-02-04.at.12.13.22.AM.mov

Mobile Web - Chrome

Screen.Recording.2023-02-04.at.12.21.53.AM.mov

Mobile Web - Safari

Screen.Recording.2023-02-04.at.12.16.23.AM.mov

Desktop

Screen.Recording.2023-02-04.at.12.23.14.AM.mov

iOS

Screen.Recording.2023-02-04.at.12.20.57.AM.mov

Android

WhatsApp.Video.2023-01-31.at.19.29.44.1.mp4

[Beamanator]

Thanks for all the changes @cristipaval ! Just a few tiny ones left!

[cristipaval]

All feedback is addressed. Another round of review please?

[rushatgabhane]

Tests well! Another small comment

[rushatgabhane]

@cristipaval we should put all this inside ScrollView, right?
To make it scrollable when new items are adding to this page.

[cristipaval]

Should we? Isn't OptionList handling the scroll if needed?

[rushatgabhane]

@cristipaval i was thinking we'll need ScrollView when items other than OptionList are added. (Images, Text etc).

[Beamanator]

We definitely might need ScrollView eventually, but we can add that later when / if we add those other components

[rushatgabhane]

ScrollView

[cristipaval]

OptionList

[Beamanator]

Yeah agreed I don't think scrollview is needed here yet

[rushatgabhane]

question: should we add arrow key navigation support?

[Beamanator]

Only 1 change I'd "Like" to see (about navigating in the action file) but I don't think it's big enough to block (you could take care of this in your follow-up PR)

Nice work on all of this by the way @cristipaval 💪

[Beamanator]

@cristipaval I know you want to get this out soon, we really should move this to an action, maybe called setLocaleAndNavigate (since we have functions with similar names). Then that function can call App.setLocale and then navigate. I think we really try to avoid inlining functions like this, too

[Beamanator]

NAB since this line is kinda long and makes the conditional render a bit ugly, we "could" store this in a variable (like shouldShowTestToolMenu) and then just do something like:

    {shouldShowTestToolMenu && (
        <...jsx stuff>
    )}

[Beamanator]

Yeah agreed I don't think scrollview is needed here yet

[rushatgabhane]

looks good 👍

#14591 (comment)

[Beamanator]

I say let's merge since it will be nice to have this refreshed page UI, @cristipaval do you mind addressing my previous tiny comments in your follow-up PR? 🙏

[OSBotify]

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

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	681.098 ms → 691.019 ms (+9.921 ms, +1.5%)
Open Search Page TTI	607.301 ms → 614.812 ms (+7.510 ms, +1.2%)
App start nativeLaunch	18.667 ms → 20.233 ms (+1.567 ms, +8.4%)
App start regularAppStart	0.014 ms → 0.015 ms (+0.001 ms, +5.7%)
App start runJsBundle	189.688 ms → 186.161 ms (-3.526 ms, -1.9%)

Show details

Name	Duration
App start TTI	Baseline Mean: 681.098 ms Stdev: 31.502 ms (4.6%) Runs: 626.5385839999653 631.8482619998977 637.889545999933 643.6435990000609 645.5530600000639 647.6596490000375 650.387524999911 654.0934299998917 656.7815600000322 657.921982999891 662.357388000004 666.9426420000382 668.8713630000129 671.3714070001151 671.5049940000754 674.4920560000464 677.7713760000188 679.9392480000388 686.4434299999848 687.6502559999935 695.3678909998853 696.008342999965 706.2250749999657 709.6941529999021 713.6280269999988 714.1449460000731 717.2348050000146 718.6080259999726 724.4875300000422 727.5104429998901 733.2136460000183 739.3587209999096 Current Mean: 691.019 ms Stdev: 24.407 ms (3.5%) Runs: 639.796401000116 649.3120170000475 649.7335409999359 650.1376239999663 667.5878870000597 668.6850779999513 670.41917499993 678.0010089999996 678.1784079999197 679.2840090000536 685.629952999996 686.5308709999081 688.6639060000889 689.4699250000995 691.4209930000361 695.6309670000337 695.6402410001028 695.9027410000563 696.0903890000191 697.8840669998899 700.6403989999089 709.532513000071 710.7201169999316 711.752358000027 714.6051330000628 717.4970410000533 725.3458090000786 726.4106040000916 728.3992999999318 731.6710479999892
Open Search Page TTI	Baseline Mean: 607.301 ms Stdev: 17.786 ms (2.9%) Runs: 579.0619309998583 582.7095139999874 583.8287760000676 583.8996180000249 585.2973229999188 585.6529139999766 587.3704429999925 587.3821620000526 601.0143230000976 603.7786459999625 603.90429700003 604.1944169998169 605.4301760001108 605.8984789999668 606.3792729999404 607.3983160001226 607.7707119998522 608.9241949999705 609.3535970000084 611.2620039999019 611.3192960000597 612.303915000055 613.3861899999902 614.5134689998813 618.2781990000512 621.0502529998776 628.0814219999593 630.4043790001888 633.348226999864 634.5521240001544 658.5935470000841 Current Mean: 614.812 ms Stdev: 28.785 ms (4.7%) Runs: 564.7875570000615 573.064576000208 582.6930750000756 584.506876999978 588.7476399999578 589.4076740001328 591.378703000024 594.8897299999371 601.3408199998084 601.6349699997809 602.2314049999695 602.5918379998766 602.7818199999165 603.757324000122 605.8261319999583 606.1660160000902 607.1997069998179 607.9529629999306 611.1244719999377 612.0106200000737 613.995075999992 616.7809250000864 619.9667569999583 622.6223550001159 623.1036380000878 627.6672780001536 637.9318849998526 640.5373130000662 659.239135999931 659.6967779998668 665.4492600001395 678.4425049999263 689.258790000109
App start nativeLaunch	Baseline Mean: 18.667 ms Stdev: 1.054 ms (5.6%) Runs: 17 17 18 18 18 18 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 19 20 20 20 20 22 Current Mean: 20.233 ms Stdev: 1.874 ms (9.3%) Runs: 18 18 18 18 18 18 18 18 19 19 19 19 20 20 20 21 21 21 21 21 21 21 21 21 22 22 22 23 24 25
App start regularAppStart	Baseline Mean: 0.014 ms Stdev: 0.001 ms (6.1%) Runs: 0.012370000127702951 0.012451000045984983 0.0125730000436306 0.012859000125899911 0.01310200011357665 0.013305999804288149 0.013386999955400825 0.013428000034764409 0.013630999950692058 0.013671999797224998 0.013793999794870615 0.0139979999512434 0.013998000184074044 0.014078999869525433 0.014160000020638108 0.014201000100001693 0.01424099993892014 0.014404000015929341 0.014445000095292926 0.014526000013574958 0.014526000013574958 0.014567000092938542 0.014648000011220574 0.014649000018835068 0.014689000090584159 0.014851999934762716 0.014851999934762716 0.014933000085875392 0.014974000165238976 0.015015000011771917 0.015503000002354383 0.016112999990582466 Current Mean: 0.015 ms Stdev: 0.001 ms (7.4%) Runs: 0.013386999955400825 0.013550000032410026 0.01359100011177361 0.013630999950692058 0.013712000101804733 0.01387499994598329 0.014079000102356076 0.014119999948889017 0.014160000020638108 0.014241000171750784 0.014444999862462282 0.014445000095292926 0.014485999941825867 0.014527000021189451 0.014566999860107899 0.014770000008866191 0.014810999855399132 0.014851999934762716 0.01485200016759336 0.014973999932408333 0.015055000083521008 0.01525900000706315 0.015462000155821443 0.015625 0.015706000151112676 0.01595099992118776 0.016072999918833375 0.016235999995842576 0.016804999904707074 0.017537000123411417 0.017780999885872006
App start runJsBundle	Baseline Mean: 189.688 ms Stdev: 24.692 ms (13.0%) Runs: 162 165 165 167 167 169 170 170 171 172 173 175 176 178 179 181 183 186 186 187 188 189 191 203 205 206 223 226 226 228 250 253 Current Mean: 186.161 ms Stdev: 19.833 ms (10.7%) Runs: 161 163 167 168 169 169 170 170 171 172 174 174 178 178 179 180 182 184 184 186 187 188 191 204 204 209 210 212 217 228 242

[OSBotify]

🚀 Deployed to staging by https://github.com/Beamanator in version: 1.2.66-0 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/mountiny in version: 1.2.66-0 🚀

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