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.

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

Onfido-UI-SDK Version Upgrade 10.3.0 #14353

Merged
merged 3 commits into from
Jan 19, 2023
Merged

Onfido-UI-SDK Version Upgrade 10.3.0 #14353

merged 3 commits into from
Jan 19, 2023

Conversation

syedsaroshfarrukhdot
Copy link
Contributor

@syedsaroshfarrukhdot syedsaroshfarrukhdot commented Jan 17, 2023

Details

Upgrading onfido-sdk-ui to 10.3.0 to fix country list dropdown background color in dark mode.

Fixed Issues

$ #13262
$ #14397
PROPOSAL: #13262 (comment)

Tests

  1. Open a workspace
  2. Navigate to the "Connect Bank Account" step
  3. Complete all necessary steps until you reach the personal information page
  4. Look for the "issuing country" dropdown menu
  5. Verify that the list of countries in the dropdown is visible.
  • Verify that no errors appear in the JS console

QA Steps

  1. Go to any workspace and attempt the Connect Bank Account step.
  2. Complete All Steps Until Onfido flow triggers in the personal information page.
  3. Click on the issuing country dropdown.
  4. Check country dropdown list is visible.
  • 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
Web-Full-Edited.mp4
Mobile Web - Chrome
mWeb-Chrome-Full.-.Compressed.with.FlexClip.mp4
Mobile Web - Safari
mWeb-Safari.-.Compressed.with.FlexClip-2.mp4
Desktop
Desktop-Full-Edited.mp4
iOS
IOS.mov
Android
WhatsApp.Video.2023-01-14.at.7.09.46.PM.mp4

@syedsaroshfarrukhdot syedsaroshfarrukhdot requested a review from a team as a code owner January 17, 2023 03:28
@melvin-bot melvin-bot bot requested review from parasharrajat and puneetlath and removed request for a team January 17, 2023 03:28
@melvin-bot
Copy link

melvin-bot bot commented Jan 17, 2023

@puneetlath @parasharrajat 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]

Copy link
Member

@parasharrajat parasharrajat left a comment

Choose a reason for hiding this comment

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

@syedsaroshfarrukhdot Update videos to show the whole Onfido flow.

@syedsaroshfarrukhdot
Copy link
Contributor Author

syedsaroshfarrukhdot commented Jan 17, 2023

@syedsaroshfarrukhdot Update videos to show the whole Onfido flow.

@parasharrajat I have updated videos for

  • Web
  • Desktop
  • mWeb-Safari
  • mWeb-Chrome

Didn't updated Android and IOS as onfido-sdk-ui is not being used in native platforms we are using @onfido/react-native-sdk.

Copy link
Contributor Author

@syedsaroshfarrukhdot syedsaroshfarrukhdot left a comment

Choose a reason for hiding this comment

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

Videos Updated

@syedsaroshfarrukhdot syedsaroshfarrukhdot requested review from parasharrajat and removed request for puneetlath and tylerkaraszewski January 18, 2023 04:06
@syedsaroshfarrukhdot
Copy link
Contributor Author

syedsaroshfarrukhdot commented Jan 18, 2023

@parasharrajat I re-requested you to review and some how @puneetlath and @tylerkaraszewski review request was removed could you add them so we can get it reviewed and merge it successfully.

@parasharrajat
Copy link
Member

parasharrajat commented Jan 18, 2023

@syedsaroshfarrukhdot Is there a way to change the border color of the selector?

@parasharrajat
Copy link
Member

parasharrajat commented Jan 18, 2023

Screenshots

🔲 iOS / native

screen-2023-01-18_20.04.28.mp4

🔲 iOS / Safari

screen-2023-01-18_20.05.11.mp4

🔲 MacOS / Desktop

screen-2023-01-18_19.45.17.mp4

🔲 MacOS / Chrome

screen-2023-01-18_17.50.33.mp4

🔲 Android / Chrome

screen-2023-01-18_18.30.30.mp4

🔲 Android / native

screen-2023-01-18_18.06.15.mp4

Copy link
Member

@parasharrajat parasharrajat left a comment

Choose a reason for hiding this comment

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

Question: #14353 (comment)

Please merge the main.

@syedsaroshfarrukhdot
Copy link
Contributor Author

syedsaroshfarrukhdot commented Jan 18, 2023

Question: #14353 (comment)

Please merge the main.

  1. @parasharrajat No there is no way to change 'Selector Border Color currently. They only added support for the background color change for the selector for now.

  2. Merging Main (Done)

@syedsaroshfarrukhdot syedsaroshfarrukhdot changed the title Onfido-UI-SDK Versiaon Upgrade 10.3.0 Onfido-UI-SDK Version Upgrade 10.3.0 Jan 18, 2023
Copy link
Member

@parasharrajat parasharrajat left a comment

Choose a reason for hiding this comment

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

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.

cc: @tylerkaraszewski

🎀 👀 🎀 C+ reviewed

@parasharrajat
Copy link
Member

@shawnborton Do we have to worry about the border color of the selector? That is not by default supported by the lib so we will have to request that as well.

image

@shawnborton
Copy link
Contributor

Are we able to change the border color? I don't think it's terrible FWIW

@parasharrajat
Copy link
Member

Not with the current package. We will have to request its support on the upstream repo.

@shawnborton
Copy link
Contributor

Cool, I don't feel too strongly. Can't hurt to ask I suppose, but I think what's there is also acceptable.

@parasharrajat
Copy link
Member

snyk test failed. Can't see the details.

@mountiny
Copy link
Contributor

Seems like the 10.3.1 version has introduced a vulnerability, 10.3.0 should be alright. Do we need that minor update?

@parasharrajat
Copy link
Member

Ok, let's downgrade then.

Copy link
Contributor

@tylerkaraszewski tylerkaraszewski left a comment

Choose a reason for hiding this comment

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

Tested and seems to work just fine.

@tylerkaraszewski tylerkaraszewski merged commit 9b432bd into Expensify:main Jan 19, 2023
@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.

@github-actions
Copy link
Contributor

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries
Name Duration
Open Search Page TTI 625.189 ms → 638.714 ms (+13.525 ms, +2.2%)
App start TTI 681.712 ms → 686.718 ms (+5.005 ms, +0.7%)
App start nativeLaunch 19.742 ms → 20.433 ms (+0.691 ms, +3.5%)
App start regularAppStart 0.016 ms → 0.015 ms (-0.001 ms, -6.6%)
App start runJsBundle 202.438 ms → 193.969 ms (-8.469 ms, -4.2%)
Show details
Name Duration
Open Search Page TTI Baseline
Mean: 625.189 ms
Stdev: 25.833 ms (4.1%)
Runs: 585.8923339992762 586.3455809997395 592.2720950003713 594.3420000001788 595.4308270001784 595.5020749997348 597.9406339991838 600.2878010002896 606.499715000391 608.2379970001057 608.3332529999316 612.7752689998597 616.4518229998648 617.3195390002802 617.8617759998888 621.4019369995221 623.462891000323 627.2653810000047 627.7663979995996 628.8010249994695 629.7978109996766 630.0423989994451 634.2412109998986 634.5950939999893 638.7093509994447 644.3428149996325 653.4700930006802 655.3170990003273 658.3500570002943 662.2514650002122 672.8014329997823 674.8202720005065 678.2955740001053

Current
Mean: 638.714 ms
Stdev: 36.111 ms (5.7%)
Runs: 576.135172999464 585.5437019998208 586.9485269999132 589.2143559996039 599.9080809997395 607.5822749994695 612.1949060000479 615.2862959997728 616.8175860000774 617.7850339999422 619.6894530002028 619.8607580000535 620.6574310008436 622.8247480001301 625.9540210003033 627.3651940003037 630.3138429997489 641.9884850000963 642.5152179999277 643.2448729993775 656.3520510001108 657.5609140004963 658.2215990005061 658.4439300000668 658.6317140003666 661.8264569994062 662.2953290008008 662.6960450001061 665.2286789994687 682.3835859997198 709.4350999994203 716.2362069999799 726.4087730003521
App start TTI Baseline
Mean: 681.712 ms
Stdev: 34.904 ms (5.1%)
Runs: 626.9173940001056 637.1806619996205 638.4900909997523 638.9882239997387 644.6110429996625 646.3074719998986 655.0622829999775 657.3855640003458 659.1758669996634 659.5373870003968 662.0626459997147 662.9271320002154 664.941131000407 665.7401059996337 668.3356560003012 677.7645410001278 678.2752539999783 679.5243450002745 686.4365929998457 690.8049219995737 698.4677389999852 700.2046990003437 702.934020999819 702.9364940002561 706.049796000123 715.6971810003743 719.6755379997194 721.8656329996884 747.2077860003337 752.9580650003627 764.6207969998941

Current
Mean: 686.718 ms
Stdev: 36.547 ms (5.3%)
Runs: 634.4833199996501 637.0450560003519 642.0070500001311 644.4655409995466 644.4972270000726 648.0528870001435 650.0281039997935 652.1811349997297 657.05063899979 661.7916620001197 663.2538240002468 669.7612150004134 672.3297499995679 675.9607659997419 677.1770599996671 678.2253170004115 679.9909330001101 680.6239560004324 685.4000920001417 685.4948249999434 700.40856300015 701.6776080001146 710.7738730004057 711.607669999823 717.3578700004146 717.5809920001775 736.0532120000571 737.8716449998319 739.0381939997897 751.0302010001615 751.1497729998082 760.5961009999737
App start nativeLaunch Baseline
Mean: 19.742 ms
Stdev: 1.866 ms (9.5%)
Runs: 17 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 19 20 20 20 20 20 20 20 21 22 22 22 24 24 24

Current
Mean: 20.433 ms
Stdev: 2.171 ms (10.6%)
Runs: 18 18 18 18 18 18 19 19 19 19 19 19 19 20 20 20 20 21 21 21 21 21 22 22 22 23 23 23 26 26
App start regularAppStart Baseline
Mean: 0.016 ms
Stdev: 0.001 ms (6.0%)
Runs: 0.01403799932450056 0.014322999864816666 0.01444500032812357 0.014485999941825867 0.014527000486850739 0.014566999860107899 0.014851999469101429 0.015176999382674694 0.015177999623119831 0.015217999927699566 0.015257999300956726 0.015258999541401863 0.015259000472724438 0.015421999618411064 0.01550300046801567 0.015544000081717968 0.015665999613702297 0.0157880000770092 0.015990999527275562 0.015991000458598137 0.01607200037688017 0.016114000231027603 0.016439000144600868 0.016479000449180603 0.01664300076663494 0.01672299951314926 0.016844999976456165 0.01700899936258793 0.017090000212192535 0.01806699950248003

Current
Mean: 0.015 ms
Stdev: 0.001 ms (7.1%)
Runs: 0.01269499957561493 0.013143000192940235 0.013143000192940235 0.013427999801933765 0.013712000101804733 0.0138349998742342 0.013915999792516232 0.013956999406218529 0.013956999406218529 0.014078999869525433 0.014078999869525433 0.014119000174105167 0.014240999706089497 0.014322999864816666 0.014322999864816666 0.014566999860107899 0.014566999860107899 0.014649000018835068 0.014689000323414803 0.014728999696671963 0.014771000482141972 0.0148930000141263 0.015013999305665493 0.015461999922990799 0.015665000304579735 0.015665999613702297 0.015950999222695827 0.016277000308036804 0.0163569999858737 0.016561000607907772 0.016885999590158463
App start runJsBundle Baseline
Mean: 202.438 ms
Stdev: 31.910 ms (15.8%)
Runs: 158 161 168 168 170 173 175 175 176 182 184 185 185 186 189 189 196 198 199 205 211 220 220 221 225 233 233 237 249 262 263 282

Current
Mean: 193.969 ms
Stdev: 27.570 ms (14.2%)
Runs: 157 164 165 166 166 169 170 171 173 174 174 175 176 178 185 186 189 195 196 196 197 197 197 202 220 224 228 235 236 239 244 263

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by https://github.com/tylerkaraszewski in version: 1.2.57-0 🚀

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

@OSBotify
Copy link
Contributor

🚀 Deployed to production by https://github.com/luacmartins in version: 1.2.57-3 🚀

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants