[Expensify Help] Sync LHN scroll with article scroll

[roryabraham]

Details

This syncs scroll between the table of contents and the article.

Before

NoSyncScroll.mov

After

SyncScroll.mov

Fixed Issues

$ #15198

Tests

1. Go to http://127.0.0.1:4000/articles/playbooks/Expensify-Playbook-for-US-based-VC-Backed-Startups
2. Scroll down the article. Verify that the LHN scrolls as needed as well and that you can scroll all the way to the bottom such that the bottom item in the LHN is highlighted.
3. With the article scrolled all the way to the bottom, scroll the LHN up to the top, then attempt to scroll the LHN further. Verify that the article remains where it was before and is not affected by the scrolling over the LHN.
4. Scroll the article back all the way to the top.
5. With the article scrolled all the way to the top, scroll the LHN to the bottom, then attempt to scroll the LHN further. Verify that the article remains where it was before and is not affected by over-scrolling the LHN.

• Verify that no errors appear in the JS console

Offline tests

None for the help site.

QA Steps

Same as tests. Marked as internal QA because we don't have a production QA checklist and I don't want to distract applause while this will take only a few seconds to verify in production.

• 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 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

SyncScroll.mov

Mobile Web - Chrome

n/a – no LHN on narrow screens

Mobile Web - Safari

n/a – no LHN on narrow screens.

Desktop

n/a

iOS

n/a

Android

n/a

[MelvinBot]

@mollfpr @Luke9389 One of you needs to 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]

[roryabraham]

Removing C+ for this helpsite PR

[marcochavezf]

Nice!

[marcochavezf]

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.
• 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

Screen.Recording.2023-02-21.at.15.31.33.mov

[marcochavezf]

I think we don't need the internalQA label for this one, since Applause can test it by navigating to https://help.expensify.com/articles/playbooks/Expensify-Playbook-for-US-based-VC-Backed-Startups

[Luke9389]

Love it. Thanks!

[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	724.148 ms → 731.464 ms (+7.316 ms, +1.0%)
App start runJsBundle	202.906 ms → 203.438 ms (+0.531 ms, ±0.0%)
App start nativeLaunch	19.500 ms → 19.645 ms (+0.145 ms, +0.7%)
App start regularAppStart	0.014 ms → 0.015 ms (+0.001 ms, +4.6%)
Open Search Page TTI	612.115 ms → 604.594 ms (-7.521 ms, -1.2%)

Show details

Name	Duration
App start TTI	Baseline Mean: 724.148 ms Stdev: 35.814 ms (4.9%) Runs: 665.811013000086 671.0471739992499 672.5419720001519 673.5799880009145 687.4053320009261 688.6861320007592 688.9844569992274 693.6482999995351 696.4125319998711 698.8531059995294 701.6616479996592 704.6564429998398 707.2560690008104 713.1171230003238 720.9929530005902 728.6127480007708 729.1900299992412 731.4952939990908 732.249115999788 734.5598789993674 737.4818750005215 742.2285350002348 747.0855529997498 747.161771999672 752.9187819994986 753.4923119992018 757.7609550002962 757.8423609994352 763.7471309993416 774.7022339999676 775.7324340008199 821.8305900003761 Current Mean: 731.464 ms Stdev: 31.937 ms (4.4%) Runs: 657.7547810003161 685.1828010007739 689.9149489998817 692.0514589995146 694.9498870000243 709.2913070004433 711.3873929996043 711.4337159991264 711.5038409996778 712.5747669991106 714.7150049991906 715.8116059992462 720.6098599992692 723.7073470000178 726.275272000581 727.5283870007843 729.0650510005653 729.3158299997449 729.9311389997602 740.1991830002517 743.3768089991063 746.8320150002837 750.2309000007808 752.5305320005864 754.805530000478 755.5905939992517 755.753860000521 763.5894060004503 770.9579799994826 776.2460650000721 792.7928689997643 810.9349450003356
App start runJsBundle	Baseline Mean: 202.906 ms Stdev: 22.484 ms (11.1%) Runs: 167 168 169 176 177 177 178 178 178 181 185 200 201 201 203 204 205 207 207 210 210 219 220 223 224 225 225 230 231 233 239 242 Current Mean: 203.438 ms Stdev: 21.156 ms (10.4%) Runs: 168 169 175 179 180 184 186 187 189 191 191 192 194 194 201 201 203 203 206 209 210 213 213 216 218 221 222 223 234 242 242 254
App start nativeLaunch	Baseline Mean: 19.500 ms Stdev: 1.668 ms (8.6%) Runs: 17 17 18 18 18 18 18 18 18 18 18 19 19 19 20 20 20 20 20 20 20 20 20 21 21 21 21 21 22 25 Current Mean: 19.645 ms Stdev: 1.617 ms (8.2%) Runs: 17 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 19 20 20 20 20 20 20 21 21 22 22 22 22 23 23
App start regularAppStart	Baseline Mean: 0.014 ms Stdev: 0.001 ms (5.3%) Runs: 0.012938998639583588 0.012940000742673874 0.012980999425053596 0.013101998716592789 0.013224000111222267 0.013508999720215797 0.013508999720215797 0.013508999720215797 0.013591000810265541 0.01371300034224987 0.013916000723838806 0.013956999406218529 0.013957001268863678 0.013996999710798264 0.014241000637412071 0.014403998851776123 0.01440499909222126 0.014444999396800995 0.014485999941825867 0.014607999473810196 0.01464800164103508 0.014649000018835068 0.01469000056385994 0.014730000868439674 0.014730000868439674 0.014811001718044281 0.014812000095844269 0.014852000400424004 0.014973999932408333 0.015257999300956726 0.01534000039100647 0.01603199914097786 Current Mean: 0.015 ms Stdev: 0.001 ms (6.5%) Runs: 0.01355000026524067 0.01355000026524067 0.013631001114845276 0.013631001114845276 0.013711998239159584 0.01371300034224987 0.01371300034224987 0.014120001345872879 0.014201000332832336 0.014201000332832336 0.014241000637412071 0.014242000877857208 0.014364000409841537 0.014485999941825867 0.014649000018835068 0.014852000400424004 0.014972999691963196 0.014973999932408333 0.014973999932408333 0.015135999768972397 0.015137000009417534 0.015217998996376991 0.015543999150395393 0.015625 0.015666000545024872 0.015666000545024872 0.015747999772429466 0.015869000926613808 0.01603199914097786 0.016519999131560326 0.01655999943614006 0.01717199943959713
Open Search Page TTI	Baseline Mean: 612.115 ms Stdev: 21.415 ms (3.5%) Runs: 574.8676350004971 581.5725920014083 583.9049490001053 585.0033780001104 588.5415449999273 590.5362550001591 593.683227000758 594.6684980001301 594.7536619994789 595.1885989997536 605.058755999431 606.7905680015683 606.8365080002695 607.3048499990255 607.7927250005305 611.074706999585 613.9310310017318 615.8570150006562 616.1822510007769 616.4172779992223 618.359496999532 620.3026539999992 621.5383710004389 623.2446300014853 623.453083999455 624.9894619993865 630.1250810008496 631.0432539992034 631.9993089996278 647.0530200004578 650.1247969996184 675.469402000308 Current Mean: 604.594 ms Stdev: 17.850 ms (3.0%) Runs: 576.2736420016736 581.9077150002122 582.8693850003183 583.7010099999607 587.5114339999855 587.7590740006417 588.0108239986002 588.0762540008873 591.1448160000145 592.6027840003371 593.9272869993001 594.3686929997057 595.1793219987303 595.7171630002558 597.4084070008248 597.5404870007187 600.6227620001882 601.0262860003859 601.300130000338 605.3563240002841 608.4181320015341 612.5053719989955 614.3515630010515 615.6868079993874 615.7265630010515 619.6147059984505 622.1641440000385 625.9394119996578 628.9923100005835 630.2910160012543 632.4098719991744 633.3234459999949 649.8754070010036

[roryabraham]

Weird, this does not seem to have been deployed.

[roryabraham]

Seems the helpsite deploy is broken. Will create a separate issue to address this.

[OSBotify]

🚀 Deployed to staging by https://github.com/Luke9389 in version: 1.2.76-0 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/yuwenmemon in version: 1.2.76-7 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/yuwenmemon in version: 1.2.76-7 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/yuwenmemon in version: 1.2.76-7 🚀

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