Converted SidebarLinks to fn component and improve use of window props #27855

shubham1206agra · 2023-09-20T11:26:57Z

Details

Fixed Issues

$ #16271
PROPOSAL: #16271 (comment)

Tests / QA Steps

Login to App and test FAB, and sidebar

Verify that no errors appear in the JS console

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 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
  - 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 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 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
- If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
- 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 author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Screen.Recording.2023-09-20.at.4.49.09.PM.mov

Mobile Web - Chrome

Screen.Recording.2023-09-20.at.4.54.49.PM.mov

Mobile Web - Safari

Screen.Recording.2023-09-20.at.5.00.00.PM.mov

Desktop

Screen.Recording.2023-09-20.at.5.04.24.PM.mov

iOS

Screen.Recording.2023-09-20.at.4.40.38.PM.mov

Android

melvin-bot · 2023-09-20T11:27:02Z

@allroundexperts 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]

shubham1206agra · 2023-09-20T12:17:40Z

Unable to test on Android emulator due to this weird problem

shubham1206agra · 2023-09-22T05:00:24Z

@allroundexperts Can you do the review?

src/pages/home/sidebar/SidebarLinks.js

allroundexperts · 2023-09-25T00:26:24Z

src/pages/home/sidebar/SidebarLinks.js

+                if (_.isNull(modalArg)) {
+                    return;
+                }


Why is this needed?

To prevent

if (modal.current.willAlertModalBecomeVisible) { return; }

from erroring out when the modal is null in onyx initially (Safeguarding the modal ref)

src/pages/home/sidebar/SidebarLinks.js

allroundexperts

Minor changes needed.

shubham1206agra · 2023-09-25T11:18:05Z

@allroundexperts Waiting for your comments

src/pages/home/sidebar/SidebarLinks.js

shubham1206agra · 2023-09-27T03:01:54Z

@allroundexperts You can now continue

shubham1206agra · 2023-09-28T15:21:06Z

@allroundexperts Can you do the review today?

allroundexperts · 2023-09-28T15:21:59Z

Yes @shubham1206agra!

allroundexperts · 2023-09-29T00:03:19Z

src/pages/home/sidebar/SidebarLinks.js

-    constructor(props) {
-        super(props);
+function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priorityMode = CONST.PRIORITY_MODE.DEFAULT, isActiveReport, isCreateMenuOpen}) {
+    const modal = useRef({});


We usually pass a null as the initialiser.

It actually depends on the case to case basis.

shubham1206agra · 2023-09-29T17:34:01Z

@allroundexperts Please check my comment

shubham1206agra · 2023-10-02T05:14:07Z

@allroundexperts Can you please review?

allroundexperts · 2023-10-02T05:15:09Z

On it.

allroundexperts · 2023-10-02T08:12:36Z

@shubham1206agra Can you please resolve the conflicts?

allroundexperts · 2023-10-02T08:41:20Z

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

shubham1206agra · 2023-10-02T08:41:31Z

@allroundexperts You can continue with your review

allroundexperts

Looks good!

shubham1206agra · 2023-10-03T15:05:24Z

@thienlnam Can you merge this?

OSBotify · 2023-10-04T05:16:31Z

✋ 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 · 2023-10-04T05:56:15Z

Performance Comparison Report 📊

Significant Changes To Duration

Name	Duration
App start TTI	1192.443 ms → 1259.254 ms (+66.811 ms, +5.6%) 🔴
App start runJsBundle	821.094 ms → 878.156 ms (+57.063 ms, +6.9%) 🔴

Show details

Name	Duration
App start TTI	Baseline Mean: 1192.443 ms Stdev: 43.711 ms (3.7%) Runs: 1125.168227000162 1127.1047779992223 1135.2500100005418 1137.8032179996371 1146.4097520001233 1153.9515799991786 1155.4752650000155 1155.769977999851 1156.581148000434 1159.38995099999 1167.5618650000542 1175.462167000398 1178.3123339992017 1178.6077750008553 1180.007378000766 1185.6103169992566 1187.7843110002577 1189.1183260008693 1193.2004439998418 1195.2915240004659 1198.6202230006456 1208.4275240004063 1211.5508849993348 1211.6318309996277 1226.0947239995003 1234.6838409993798 1243.406623000279 1250.697658000514 1262.959544999525 1266.4773869998753 1270.4347070008516 1289.3270970005542 Current Mean: 1259.254 ms Stdev: 36.868 ms (2.9%) Runs: 1184.0724119991064 1208.0411109998822 1212.042950000614 1214.7576979994774 1215.1784220002592 1224.8551349993795 1226.4441429991275 1228.5049639996141 1231.4748940002173 1232.7613099999726 1239.3357519991696 1242.7881160005927 1246.6452270001173 1248.1880610007793 1249.9925190005451 1253.8129999991506 1264.6378600001335 1264.8099339995533 1271.044666999951 1271.8943620007485 1273.1184650007635 1275.3048739992082 1276.073045000434 1283.3058630004525 1286.0917990002781 1290.7914509996772 1293.3822280000895 1293.4433939997107 1299.9850869998336 1318.9618769995868 1326.3886569999158 1348.0008829999715
App start runJsBundle	Baseline Mean: 821.094 ms Stdev: 32.263 ms (3.9%) Runs: 765 767 776 784 787 789 789 792 794 795 803 804 805 807 812 819 821 822 830 840 841 841 844 851 851 851 855 856 862 865 869 888 Current Mean: 878.156 ms Stdev: 29.136 ms (3.3%) Runs: 828 844 845 847 848 850 854 855 857 857 859 862 863 865 869 871 874 876 883 885 888 888 896 897 898 899 902 904 915 929 936 957

Meaningless Changes To Duration

Show entries

Name	Duration
Open Search Page TTI	618.349 ms → 630.140 ms (+11.791 ms, +1.9%)
App start regularAppStart	0.018 ms → 0.015 ms (-0.002 ms, -13.9%)
App start nativeLaunch	22.000 ms → 21.536 ms (-0.464 ms, -2.1%)

Show details

Name	Duration
Open Search Page TTI	Baseline Mean: 618.349 ms Stdev: 21.869 ms (3.5%) Runs: 587.4746909998357 588.5146079994738 588.7676590010524 597.2087399996817 598.5306810010225 599.015705998987 603.0053719989955 603.9643149990588 604.8109130002558 605.0284829996526 605.3838299997151 606.5447180010378 608.0749520007521 608.2456060014665 611.0614010002464 613.0950119998306 614.300862999633 614.5037040002644 614.8922530002892 615.5358079988509 623.116537000984 624.9070640001446 624.9188640005887 641.0542810000479 641.3926599994302 642.8023680001497 645.094156999141 650.1079510003328 654.644938999787 662.5428880006075 670.2752689998597 Current Mean: 630.140 ms Stdev: 21.391 ms (3.4%) Runs: 597.5999750010669 607.7235109992325 610.0872809998691 611.3125 611.6813150011003 611.9371350016445 614.746175000444 615.2865810003132 615.6270749997348 616.1220709998161 618.2832440007478 619.5133059993386 619.9641120005399 621.7685139998794 622.0404460001737 622.250447999686 623.4897870011628 624.3199060000479 628.3754480015486 628.5547690000385 630.3344730008394 630.819662000984 631.0489910002798 631.1697589997202 631.2803960014135 644.4761149995029 648.0960689987987 648.2142740003765 654.8050129991025 657.1079110000283 671.6713870000094 679.7625730000436 695.1393229998648
App start regularAppStart	Baseline Mean: 0.018 ms Stdev: 0.001 ms (6.4%) Runs: 0.015217998996376991 0.01623600162565708 0.016356999054551125 0.01643799990415573 0.01648000068962574 0.016519999131560326 0.01660200022161007 0.0167239997535944 0.016885999590158463 0.0172520000487566 0.017292998731136322 0.017333999276161194 0.01737399958074093 0.017374999821186066 0.0174150001257658 0.017495999112725258 0.01769999973475933 0.01782199926674366 0.017862999811768532 0.018066000193357468 0.01810700073838234 0.018147001042962074 0.018147999420762062 0.018188999965786934 0.01839200034737587 0.018473999574780464 0.018595000728964806 0.0186769999563694 0.019816000014543533 0.020222999155521393 0.020304000005126 Current Mean: 0.015 ms Stdev: 0.001 ms (5.5%) Runs: 0.014159999787807465 0.014242000877857208 0.014282001182436943 0.014322999864816666 0.014404000714421272 0.014444999396800995 0.014567000791430473 0.01464799977838993 0.014689000323414803 0.014729999005794525 0.014810999855399132 0.014810999855399132 0.014810999855399132 0.014812000095844269 0.014852000400424004 0.014932999387383461 0.014933999627828598 0.015217998996376991 0.015217998996376991 0.015258999541401863 0.015379998832941055 0.015420999377965927 0.015666000545024872 0.015828000381588936 0.015951000154018402 0.01607299968600273 0.016764000058174133 0.016764000058174133 0.016885999590158463 0.017211999744176865
App start nativeLaunch	Baseline Mean: 22.000 ms Stdev: 3.250 ms (14.8%) Runs: 18 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 21 21 21 22 22 22 22 24 25 25 26 26 27 27 29 31 Current Mean: 21.536 ms Stdev: 1.401 ms (6.5%) Runs: 20 20 20 20 20 20 20 20 21 21 21 21 21 21 21 22 22 22 22 22 22 22 23 23 23 23 25 25

github-actions · 2023-10-04T05:56:16Z

@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker.

OSBotify · 2023-10-05T00:39:33Z

🚀 Deployed to staging by https://github.com/thienlnam in version: 1.3.78-0 🚀

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

OSBotify · 2023-10-06T07:54:30Z

🚀 Deployed to production by https://github.com/Beamanator in version: 1.3.78-4 🚀

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

OSBotify · 2023-10-06T08:26:45Z

🚀 Deployed to staging by https://github.com/thienlnam in version: 1.3.79-0 🚀

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

OSBotify · 2023-10-09T22:35:19Z

🚀 Deployed to production by https://github.com/jasperhuangg in version: 1.3.79-5 🚀

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

OSBotify · 2023-10-09T22:44:12Z

🚀 Deployed to production by https://github.com/jasperhuangg in version: 1.3.79-5 🚀

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

OSBotify · 2023-10-09T23:20:06Z

🚀 Deployed to production by https://github.com/jasperhuangg in version: 1.3.79-5 🚀

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

converted SidebarLinks to fn component and improve use of windowprops

1276606

shubham1206agra requested a review from a team as a code owner September 20, 2023 11:26

melvin-bot bot requested review from allroundexperts and removed request for a team September 20, 2023 11:27

Merge branch 'Expensify:main' into fn-sidebarlinks

70d4a9d