[Form Provider Refactor] StatusSetPage

[cdOut]

Details

Changed the Form component into the new FormProvider component in StatusSetPage

Fixed Issues

$ #28875
PROPOSAL:

Tests

1. Log in and click on your profile image to go into settings
2. In settings go into Profile > Status and click on the Status input
3. Enter a new status message and pick a status emoji
4. Press save and confirm that the status has updated in the Status page

• Verify that no errors appear in the JS console

Offline tests

QA Steps

• 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: mWeb Chrome
  • iOS: Native
  • iOS: mWeb 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

Android: Native

ANDROID-NATIVE.mov

Android: mWeb Chrome

ANDROID-CHROME.mov

iOS: Native

IOS-NATIVE.mov

iOS: mWeb Safari

IOS-SAFARI.mov

MacOS: Chrome / Safari

SAFARI.mov

MacOS: Desktop

DESKTOP.mov

[melvin-bot]

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

[kowczarz]

@luacmartins this is ready for review as well

[abdulrahuman5196]

I will be taking a look today

[abdulrahuman5196]

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: mWeb Chrome
  • iOS: Native
  • iOS: mWeb 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

Android: Native

Screen.Recording.2023-10-26.at.10.18.15.PM.mp4

Android: mWeb Chrome

Screen.Recording.2023-10-26.at.10.15.19.PM.mp4

iOS: Native

Screen.Recording.2023-10-26.at.10.16.34.PM.mp4

iOS: mWeb Safari

Screen.Recording.2023-10-26.at.10.14.24.PM.mp4

MacOS: Chrome / Safari

Screen.Recording.2023-10-26.at.10.10.26.PM.mp4

MacOS: Desktop

Screen.Recording.2023-10-26.at.10.19.27.PM.mp4

[abdulrahuman5196]

Changes looks good and works well. Reviewers checklist is also complete.

All yours. @luacmartins

🎀 👀 🎀
C+ Reviewed

[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

Name	Duration
App start runJsBundle	808.224 ms → 858.475 ms (+50.250 ms, +6.2%) 🔴

Show details

Name

Duration

App start runJsBundle

Baseline Mean: 808.224 ms Stdev: 23.390 ms (2.9%) Runs: 755 764 770 771 776 779 780 784 785 786 787 788 789 789 792 792 793 795 796 797 799 800 800 800 801 802 804 807 807 808 808 809 810 812 812 815 816 816 816 817 820 821 822 822 825 828 834 834 835 836 838 839 845 845 847 850 854 855 Current Mean: 858.475 ms Stdev: 31.546 ms (3.7%) Runs: 782 786 802 813 821 823 829 829 830 830 831 833 833 834 841 842 843 844 844 845 848 848 850 850 852 852 852 853 853 854 857 857 858 858 860 861 861 861 861 862 864 864 870 874 882 883 894 895 895 898 900 901 902 903 904 912 914 923 929

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	1174.213 ms → 1223.106 ms (+48.893 ms, +4.2%)
Open Search Page TTI	708.313 ms → 724.583 ms (+16.270 ms, +2.3%)
App start regularAppStart	0.013 ms → 0.015 ms (+0.001 ms, +9.7%)
App start nativeLaunch	22.684 ms → 21.931 ms (-0.753 ms, -3.3%)

Show details

Name	Duration
App start TTI	Baseline Mean: 1174.213 ms Stdev: 35.036 ms (3.0%) Runs: 1097.588941000402 1115.991275999695 1123.2411589995027 1124.7717160005122 1127.0028000008315 1129.447874000296 1129.634130999446 1133.3565710000694 1133.6757619995624 1135.9609900005162 1139.5376120004803 1141.0619820002466 1145.3383150007576 1146.0977890007198 1147.5052700005472 1148.4224810004234 1148.6143740005791 1150.581935999915 1151.4914050009102 1152.9317680001259 1155.4380109999329 1155.5987519994378 1157.767296999693 1159.081311000511 1160.6860949993134 1163.443913999945 1167.4138270001858 1172.6969990003854 1172.7213000003248 1175.3755389992148 1177.879736000672 1177.9220829997212 1181.2054800000042 1181.6639639995992 1182.0338080003858 1185.1080380007625 1186.5189619995654 1190.369862999767 1190.524576999247 1190.8060320001096 1196.1071840003133 1196.536829000339 1197.9526470005512 1199.8073420003057 1200.033526999876 1201.7738840002567 1202.0263219997287 1202.7696199994534 1203.0325169991702 1203.036746000871 1203.635653000325 1209.9416579995304 1222.6201310008764 1226.7209970001131 1231.1633230000734 1235.8696299996227 1242.0205039996654 1244.8508720006794 1252.1614980008453 Current Mean: 1223.106 ms Stdev: 24.276 ms (2.0%) Runs: 1147.8364459997974 1182.849611000158 1182.8550370000303 1184.8329619998112 1186.41271100007 1190.7890229998156 1191.994504999835 1195.4380359998904 1196.7092400002293 1200.1164680002257 1203.8293630001135 1204.068024000153 1206.3181619998068 1211.5234960000962 1211.6449899999425 1212.843816000037 1212.9252760000527 1215.7284160000272 1217.944908999838 1218.393346999772 1218.6014339998364 1219.4882669998333 1219.5518939998 1220.2330209999345 1220.8560469998047 1223.3258099998347 1226.0877840002067 1230.5194470002316 1230.885087999981 1232.850318999961 1233.5579340001568 1234.4363830001093 1235.0321599999443 1235.1640090001747 1236.765135999769 1238.0653670001775 1238.327630000189 1242.0827979999594 1243.9102050000802 1244.4420050000772 1244.7606339999475 1244.7934790002182 1247.518438000232 1247.6771849999204 1250.1368649997748 1250.7397449999116 1253.9034620001912 1254.2576999999583 1260.0523600000888 1262.044704 1263.2729489998892
Open Search Page TTI	Baseline Mean: 708.313 ms Stdev: 41.767 ms (5.9%) Runs: 637.3472089990973 638.555337999016 648.841023998335 651.3576669991016 651.5801600012928 652.5087899994105 653.9356699995697 654.5642499998212 657.9436450004578 669.5714929997921 669.7581389993429 671.9684660006315 674.0689300000668 674.8759770002216 677.8742680009454 678.9613850004971 679.7571210004389 679.875610999763 685.7519129998982 686.2374280001968 687.1110429987311 688.4608149994165 688.4751789998263 690.1545820012689 690.6973880007863 691.3301999997348 692.2345789987594 694.6405849996954 694.8767090011388 696.2393399998546 700.3891599997878 705.2959390003234 707.3988450001925 708.9496670011431 710.5060229990631 714.0493170004338 716.9049890004098 717.2885739989579 718.8100589998066 719.9050710014999 724.9971520006657 725.3557949997485 725.9084879998118 726.1360280010849 728.4738359991461 734.3479820005596 739.519328000024 743.9944669995457 745.769206000492 754.281534999609 755.0816249996424 758.6446949988604 759.4546310007572 766.2247309982777 767.3192150015384 770.9087729994208 772.9960939995944 784.1102699991316 787.3122969996184 796.675741000101 810.5273850001395 Current Mean: 724.583 ms Stdev: 46.565 ms (6.4%) Runs: 658.4484459999949 663.6561280000024 664.5561939999461 665.0792239997536 666.2331949998625 668.2806400000118 669.3461099998094 669.7378739998676 670.1978760003112 672.6164549998939 674.2627769997343 675.362548999954 675.7124430001713 678.4802249995992 681.6883950000629 682.4121499997564 682.7446299996227 683.503092000261 688.9042150001042 689.1171880001202 690.0819100001827 698.9213870000094 702.9191899998114 703.2087809997611 703.5674650003202 703.8475750000216 706.8828130001202 710.3500580000691 714.9073489997536 719.7653409997001 722.4685060000047 723.2976889996789 727.512369999662 730.2588710002601 730.8876550002024 732.7552900002338 732.8535969997756 738.5955409999005 741.7458500005305 745.1553140003234 747.2194829997607 749.100953000132 749.6171880001202 750.1114909998141 752.6359459999949 752.7922360002995 756.8886310001835 761.5281170001253 762.8865969995968 767.0214030002244 772.5637209997512 779.21952399984 782.2562259999104 785.1385910003446 788.9284680001438 794.6905119996518 806.4247229998 814.6709799999371 815.6449380000122 820.6358640003018 829.2408450003713
App start regularAppStart	Baseline Mean: 0.013 ms Stdev: 0.001 ms (6.2%) Runs: 0.01228800043463707 0.012329000979661942 0.012369999662041664 0.01245100051164627 0.012491999194025993 0.012492001056671143 0.012531999498605728 0.0125730000436306 0.012614000588655472 0.01269499957561493 0.01269499957561493 0.01269499957561493 0.012695001438260078 0.012736000120639801 0.012776000425219536 0.012777000665664673 0.012777000665664673 0.012899000197649002 0.012939000502228737 0.012940000742673874 0.01297999918460846 0.012980001047253609 0.013019999489188194 0.013102000579237938 0.01314300112426281 0.013224000111222267 0.013225000351667404 0.013265000656247139 0.013346999883651733 0.013387000188231468 0.013468999415636063 0.013468999415636063 0.013468999415636063 0.013508999720215797 0.013509999960660934 0.013549000024795532 0.013590998947620392 0.013712000101804733 0.013712000101804733 0.013956999406218529 0.013956999406218529 0.014037998393177986 0.014038000255823135 0.014118999242782593 0.014161000028252602 0.014201000332832336 0.014322999864816666 0.014322999864816666 0.0143630001693964 0.01440499909222126 0.014444999396800995 0.014525998383760452 0.014567000791430473 0.014770999550819397 0.014771001413464546 0.01489199884235859 0.014932999387383461 0.015340998768806458 0.015869000926613808 Current Mean: 0.015 ms Stdev: 0.001 ms (6.7%) Runs: 0.013021000195294619 0.013183000031858683 0.013346999883651733 0.013630999717861414 0.013712000101804733 0.013712999876588583 0.01375299971550703 0.01375299971550703 0.013793999794870615 0.0138349998742342 0.013875000178813934 0.013916000258177519 0.013956999871879816 0.01399700017645955 0.0139979999512434 0.014038000255823135 0.014039000030606985 0.014119000174105167 0.014159999787807465 0.014282000251114368 0.014282000251114368 0.014322999864816666 0.014322999864816666 0.014322999864816666 0.014444999862462282 0.014485000167042017 0.014525999780744314 0.014527000021189451 0.014606999699026346 0.014607999939471483 0.0147299999371171 0.0147299999371171 0.014851999934762716 0.014851999934762716 0.014934000093489885 0.014973999932408333 0.014973999932408333 0.015055000316351652 0.015055999625474215 0.01509599993005395 0.01509599993005395 0.015176999848335981 0.015177999623119831 0.015217999927699566 0.01525900000706315 0.015381000004708767 0.015544000081717968 0.015544000081717968 0.015584000386297703 0.015585000161081553 0.015625 0.01570699969306588 0.015746999997645617 0.01607300015166402 0.016276000067591667 0.016478999983519316 0.01688600005581975 0.017008999828249216 0.01741599990054965 0.017577999737113714
App start nativeLaunch	Baseline Mean: 22.684 ms Stdev: 2.885 ms (12.7%) Runs: 18 19 19 19 19 19 20 20 20 20 20 20 20 20 21 21 21 21 21 21 21 22 22 22 22 22 22 22 22 22 22 22 23 23 23 23 23 23 23 23 24 24 24 24 24 25 25 26 26 26 26 27 27 29 30 30 30 Current Mean: 21.931 ms Stdev: 2.741 ms (12.5%) Runs: 18 19 19 19 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 21 21 21 21 21 21 21 21 21 22 22 22 22 23 23 23 23 23 24 24 24 24 24 24 25 25 25 25 25 26 27 28 30 30

[github-actions]

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

[OSBotify]

🚀 Deployed to staging by https://github.com/luacmartins in version: 1.3.92-0 🚀

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

[OSBotify]

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

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

[OSBotify]

🚀 Deployed to staging by https://github.com/luacmartins in version: 1.3.93-0 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/Beamanator in version: 1.3.93-1 🚀

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