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.

Sign up for GitHub

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

Jump to bottom

[No QA] Upgrade electron builder package to latest version #10159

Merged
merged 3 commits into from
Aug 5, 2022
Merged

[No QA] Upgrade electron builder package to latest version #10159

merged 3 commits into from
Aug 5, 2022

Conversation

dennismunene
Copy link
Contributor

@dennismunene dennismunene commented Jul 30, 2022 •
edited
Loading

Details

Bump electron builder package version to 23.3.1

Fixed Issues

$ #10119

Tests

  1. Verify you can install app dependencies and that no errors appear. (npm install)
  2. Verify you can still run the Desktop App locally and use the app normaly with no issues. (npm run desktop)
  3. Verify you can still build a signed Desktop App (npm run desktop-build).
  4. Verify that you can launch and use Expensify app from the generated binary file in 'desktop-build/mac'
  5. Verify that Auto Update still works. Follow this guide to run tests Testing Electron Auto-Update
  • Verify that no errors appear in the JS console

PR Review Checklist

Contributor (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 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 included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • 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 was added in all src/languages/* files
    • I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team 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
  • 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 */
    • Any functional components have the displayName property
    • 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 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.
  • I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

PR Reviewer Checklist

The Contributor+ will copy/paste it into a new comment and complete it after the author checklist is completed
  • 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 verified tests pass on all platforms & I tested again on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • 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 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 was added in all src/languages/* files
    • I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team 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 */
    • Any functional components have the displayName property
    • 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 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.
  • I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

QA Steps

  1. Verify you can install app dependencies and that no errors appear. (npm install)
  2. Verify you can still run the Desktop App locally and use the app normaly with no issues. (npm run desktop)
  3. Verify you can still build a signed Desktop App (npm run desktop-build).
  4. Verify that you can launch and use Expensify app from the generated binary file in 'desktop-build/mac'
  5. Verify that Auto Update still works. Follow this guide to run tests Testing Electron Auto-Update
  • Verify that no errors appear in the JS console

Screenshots

Web

Mobile Web

Desktop

Installing dependencies and running desktop app

install_dep_run_desktop.mp4

Building Signed app

build_signed_app.mp4

iOS

Android

@dennismunene
Copy link
Contributor Author

dennismunene commented Jul 31, 2022 •
edited
Loading

Change Log

New Features & Bug Fixes

Dependecy updates

  • update amannn/action-semantic-pull-request action to v3.6.0
  • update tj-actions/changed-files action to v15
  • update typescript-eslint monorepo to v4.33.0
  • update electron-osx-sign from 0.5.0 to 0.6.0
  • update @electron/universal to 1.2.1
  • update @types/archiver to v5.3.1
  • update dependency @types/node to v16.11.43

Breaking changes:

  • Removing Bintray support since it was sunset. Ref: https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/
  • Fail-fast for windows signature verification failures. Adding -LiteralPath to update file path to disregard injected wildcards
  • Force strip path separators for backslashes on Windows during update process
  • Authentication for local mac squirrel update server
  • Disabled advertised shortcuts, since MSIs with advertised Start Menu shortcuts that have a Shortcut Property fails to install when deployed machine-wide via GPO but works fine in all other contexts. Admins using advertisement must apply an MST to re-enable it. See #6508.
  • Removing optional NSIS icon ID from config and generating it automatically to synchronize IDs with Advertised Shortcuts and future features

@dennismunene dennismunene marked this pull request as ready for review July 31, 2022 15:07
@dennismunene dennismunene requested a review from a team as a code owner July 31, 2022 15:07
@melvin-bot melvin-bot bot requested review from Beamanator and parasharrajat and removed request for a team July 31, 2022 15:07
@Beamanator
Copy link
Contributor

@dennismunene mind fixing the Github link in your OP?

@dennismunene
Copy link
Contributor Author

@Beamanator All links in the PR seem ok , which one are you referring to ?

@dennismunene dennismunene mentioned this pull request Aug 1, 2022
Closed
@Beamanator
Copy link
Contributor

@dennismunene Yeah so in the PR Template comments we have this text:

Make sure this section looks similar to this (you can link multiple issues using the same formatting, just add a new line):

$ https://github.com/Expensify/App/issues/<number-of-the-issue>

So basically don't add your own link, just put the issue URL after the $ please :D

@parasharrajat
Copy link
Member

I will test this PR asap. I don't have a clear test plan but I am planning the following:

  1. Build the prod app.
  2. There should be no runtime errors.
  3. Build a dev app.
  4. Check if we use any settings related to changelog.
  5. I won't be able to test the PROD build correctly as I don't have an apple developer account to sign the app and test auto-update. Will see how this can be done later when the above steps are done.

@dennismunene
Copy link
Contributor Author

I will test this PR asap. I don't have a clear test plan but I am planning the following:

  1. Build the prod app.
  2. There should be no runtime errors.
  3. Build a dev app.
  4. Check if we use any settings related to changelog.
  5. I won't be able to test the PROD build correctly as I don't have an apple developer account to sign the app and test auto-update. Will see how this can be done later when the above steps are done.

@parasharrajat Looks like a good plan 👍 .

@dennismunene
Copy link
Contributor Author

dennismunene commented Aug 1, 2022 •
edited
Loading

@dennismunene Yeah so in the PR Template comments we have this text:

Make sure this section looks similar to this (you can link multiple issues using the same formatting, just add a new line):

$ https://github.com/Expensify/App/issues/<number-of-the-issue>

So basically don't add your own link, just put the issue URL after the $ please :D

@Beamanator Updated 🙂 . Thank you

@Beamanator
Copy link
Contributor

@Expensify/mobile-deployers Do y'all think there's many extra tests we need to do for this, apart from what @parasharrajat outlined above (here)?

We're not sure if / how we need to test the production build or if we just test in dev, hope it works, and roll it back if it doesn't?

@roryabraham
Copy link
Contributor

The main things we should test are:

  1. npm run desktop
  2. npm run desktop-build-staging (and install the built app, make sure it runs okay and you can sign in)
  3. npm run desktop-build (and install the built app, make sure it runs okay and you can sign in)

Also for each of these we should check the console logs and network tab (we've seen lots of CORS errors pop up with Electron changes in the past).

You should also be aware that the CD that builds the desktop app runs on macos-11, i.e: Big Sur not Monterey. We might not have anyone who can easily test on an old OS, so as long as the documentation doesn't show any issues with electron-builder on Big Sur, we should be okay. We also might be able to upgrade the CD to macOS 12, but I don't remember all the context for why we downgraded it to 11: #4339

Also those GitHub Actions runners are x86_64, not arm64/M1s: actions/runner-images#2187, so ideally someone without an M1 mac would test this locally.

@roryabraham
Copy link
Contributor

Overall though I would honestly give this the 🟢 if 1, 2, and 3 all worked without issues.

@Beamanator
Copy link
Contributor

Awesome! Thanks @roryabraham !

@parasharrajat are you comfortable checking as many of those as possible and letting me know if you need any help?

parasharrajat
parasharrajat suggested changes Aug 4, 2022
View reviewed changes
Copy link
Member

@parasharrajat parasharrajat left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Ok, I tested as much as I can. Everything is looking good. but auto-update needs to be tested before we approve.

@dennismunene

  1. Update the Title and prepend [No QA].
  2. merge main into your branch. Be careful with package-lock.json conflicts.

@Beamanator I will need help with Auto_update testing. I can't sign the build.

🎀 👀 🎀 C+ reviewed

@dennismunene dennismunene changed the title upgrade electron builder package to latest version upgrade electron builder package to latest version [No QA] Aug 4, 2022
@dennismunene
Copy link
Contributor Author

@parasharrajat Updated the title and merged with main

@parasharrajat
Copy link
Member

Update the Title and prepend [No QA].

You appended it. Please move it before the title. I don't have permission to update.

@dennismunene dennismunene changed the title upgrade electron builder package to latest version [No QA] [No QA]upgrade electron builder package to latest version Aug 4, 2022
@Beamanator Beamanator changed the title [No QA]upgrade electron builder package to latest version [No QA] Upgrade electron builder package to latest version Aug 4, 2022
@Beamanator
Copy link
Contributor

@roryabraham I tried running the npm run desktop-build-staging command but seems my cert is expired - any tips for how to renew it? https://stackoverflow.com/c/expensify/questions/13734

@Beamanator Beamanator merged commit 9855ad8 into Expensify:main Aug 5, 2022
@Beamanator
Copy link
Contributor

Tested the staging build and everything looked fine, wasn't able to test auto-update but chatted with Rory and we can just see how that goes in the live build

@OSBotify
Copy link
Contributor

OSBotify commented Aug 5, 2022

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

@roryabraham
Copy link
Contributor

Thanks @Beamanator! Testing auto-update is a huge PITA and to my knowledge the only people who have successfully done it are no longer at Expensify.

So I'd be happy to help live-test this. We're taking a gamble that the risk of us breaking auto-update (and the time it would take to roll this back) is worth the time we'll save trying to test locally. It's not the most ideal and in general shouldn't be the model for how we test things, but I'm 👍 to make an exception in this case.

@parasharrajat
Copy link
Member

My best guess is that it will just work as there are no such breaking changes.

@Beamanator
Copy link
Contributor

Hoping so 🙏 Thanks for the context & thoughts @roryabraham

@OSBotify OSBotify mentioned this pull request Aug 15, 2022
Closed
@dennismunene
Copy link
Contributor Author

dennismunene commented Aug 30, 2022 •
edited
Loading

@parasharrajat @Beamanator This is now in production.
https://github.com/Expensify/App/releases/tag/1.1.88-15
@roryabraham can you help test auto-update ?

@roryabraham
Copy link
Contributor

I'm currently on 1.1.94-4 and we're deploying 1.1.95-1 currently. So I'll check for an auto-update when it's done

@roryabraham
Copy link
Contributor

Nice, I validated that this is working as expected

@dennismunene
Copy link
Contributor Author

Great , thank you @roryabraham
I believe we can now close on this
@Beamanator @parasharrajat

@Beamanator
Copy link
Contributor

Beamanator commented Aug 31, 2022 •
edited
Loading

Huh I wonder why we didn't get the auto-comments saying this PR was deployed to Prod 🤔 but ya since this is working I think we can pay and close it out!

@roryabraham
Copy link
Contributor

Agree with @Beamanator. Deploy comments were broken for one release for very convoluted Git reasons. Growing pains I guess 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@parasharrajat parasharrajat parasharrajat requested changes

@Beamanator Beamanator Beamanator approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@dennismunene @Beamanator @parasharrajat @roryabraham @OSBotify