search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.3k stars 2.74k forks source link

[HOLD for payment 2023-11-21] [$500] Security - Status bar color does not match with header #27453

Closed kbecciv closed 9 months ago

kbecciv commented 11 months ago

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

  1. Go to settings > security

Expected Result:

Status bar color should be blue same as header

Actual Result:

Status bar color does not match with header

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.3.70.2 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

IMG_0437 (1)

IMG_6593

Expensify/Expensify Issue URL: Issue reported by:@gadhiyamanan Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694494708815589

View all open jobs on GitHub

melvin-bot[bot] commented 11 months ago

Job added to Upwork: https://www.upwork.com/jobs/~01217477790895e67d

melvin-bot[bot] commented 11 months ago

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

melvin-bot[bot] commented 11 months ago

Bug0 Triage Checklist (Main S/O)

melvin-bot[bot] commented 11 months ago

Triggered auto assignment to @sophiepintoraetz (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

melvin-bot[bot] commented 11 months ago

Triggered auto assignment to Contributor-plus team member for initial proposal review - @burczu (External)

ishpaul777 commented 11 months ago

Proposal

Problem

Security - Status bar color does not match with header.

Root Cause

We are using Route instead of route name for defining the color for Header. https://github.com/Expensify/App/blob/main/src/styles/themes/default.js#L90

Changes

Add and new variable SECURITY under SETTINGS as Settings_Security. https://github.com/Expensify/App/blob/8fcb69eed005554030734060e6e56dee218d043a/src/SCREENS.ts

use SCREENS.SETTINGS.SECURITY here instead of ROUTES.SETTINGS_SECURITY also replace all Settings_Security with variable.

Screenshot 2023-09-14 at 9 45 51 PM

also we need to do the same for I_KNOW_A_TEACHER route

trjExpensify commented 11 months ago

Commented on the issue that implemented this: https://github.com/Expensify/App/issues/26775#issuecomment-1719909988

roryabraham commented 11 months ago

Hey, this is a regression so we should not pay an additional bounty to fix it.

roryabraham commented 11 months ago

https://github.com/Expensify/App/pull/27482

trjExpensify commented 11 months ago

Yuppp, we'll just pay out the bug report to @gadhiyamanan!

melvin-bot[bot] commented 11 months ago

This issue has not been updated in over 15 days. @burczu, @trjExpensify, @roryabraham eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

trjExpensify commented 11 months ago

Putting this back on weekly. @roryabraham needs to fix conflicts in his PR and then we should be good to go!

melvin-bot[bot] commented 10 months ago

This issue has not been updated in over 15 days. @burczu, @trjExpensify, @roryabraham eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

trjExpensify commented 10 months ago

I'm moving this back to weekly, the PR is like 99% there, let's just finish it. 👍

melvin-bot[bot] commented 9 months ago

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot[bot] commented 9 months ago

The solution for this issue has been :rocket: deployed to production :rocket: in version 1.3.98-5 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2023-11-21. :confetti_ball:

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

For reference, here are some details about the assignees on this issue:

melvin-bot[bot] commented 9 months ago

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

trjExpensify commented 9 months ago

👋 @burczu checklist time please! I'm curious how this can be caught in the future in development.

As for payments, I think @gadhiyamanan is the only one due $50 for the bug report as per here. Correct?

trjExpensify commented 9 months ago

Bump on the above!

burczu commented 9 months ago

@trjExpensify Sorry for the delay - I'll get back to BZ Checklists soon, after I finish reviewing my PR's and proposals.

trjExpensify commented 9 months ago

Sounds good!

trjExpensify commented 9 months ago

Any luck? :)

burczu commented 9 months ago

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

I'm not sure how to treat this one because the issue was actually fixed somewhere else, I think here: https://github.com/Expensify/App/pull/27483, and this issue and related PR actually does not fix anything (it just switches from using withLocalize to useLocalize in few places, so it's unrelated).

But the issue itself was introduced by the new feature (link to PR).

https://github.com/Expensify/App/pull/26784#pullrequestreview-1618988152

Regression test proposal in a separate comment.

burczu commented 9 months ago

Regression Test Proposal

  1. Login to the App on mWeb or native Android/iOS
  2. Navigate to Settings -> Security
  3. Verify if the Status bar animates to light blue (should be the same as the header of the page)
  4. Click on back button
  5. Verify if the Status bar animates back to dark green (Should be the same as header of the page)
  6. Do we agree 👍 or 👎
roryabraham commented 9 months ago

LGTM 👍🏼

trjExpensify commented 9 months ago

Okay cool! I'm curious if there's something in the dev lifecycle, like in the PR checklist or something for ensuring the status bar colour matches when introducing a new animation?

As for the regression test, we have this one below. So I was thinking of adding a couple of items bolded to accommodate this:

image
  1. Navigate to Settings > Security > Two Factor Authentication (2FA)
  2. [On Android/iOS] Verify the status bar animates to light blue (should be the same as the header of the page)
  3. Verify the first step is to save the recovery codes
  4. Click on Next
  5. Verify there's an error indicating the user to copy/download the codes before continuing
  6. Click on "Copy" and save the codes somewhere (for next test case)
  7. Verify the "Next" button is enabled if the user clicks on "Copy"
  8. Click Next
  9. Verify the next step is to verify the authenticator app
  10. Verify a QR code is displayed to use for the authenticator app
  11. Note: We recommend Google Authenticator to execute these tests, can be downloaded from Google Play Store or the AppStore
  12. Enter a incorrect 6 digit code
  13. Verify an error is displayed and a incorrect 6-digit code is entered
  14. Open your authenticator app and scan the QR or paste the secret key to set up the authenticator
  15. Enter the 6 digit code provided by the authenticator app
  16. Click Next
  17. Verify a success screen is displayed and that it contains an animation
  18. Navigate back to the main settings page
  19. Verify the status bar animates back to dark green (should be the same as header of the page)

I'll float that with Applause here.

trjExpensify commented 9 months ago

In the meantime, @gadhiyamanan sent you an offer for the bug report.

gadhiyamanan commented 9 months ago

@trjExpensify offer accepted, thanks!

trjExpensify commented 9 months ago

@gadhiyamanan - paid!

burczu commented 9 months ago

@trjExpensify regarding this:

Okay cool! I'm curious if there's something in the dev lifecycle, like in the PR checklist or something for ensuring the status bar colour matches when introducing a new animation?

I don't think so, but I think it's quite rare when we change this particular part of the app. Maybe we should add something like I verified that the feature matches the design or something to the PR checklist, because I guess, this was on designs for this feature? But probably this won't be enough because this type of issue might be introduced by PR's fixing some other bugs that has no related designs...

trjExpensify commented 9 months ago

Maybe we should add something like I verified that the feature matches the design or something to the PR checklist

Hm yeah, I think it's pretty generic -- we'd want to offer some direction. We do also have a note somewhere to add the design label for design changes. Okay, maybe we leave it for now then 👍

Everyone is settled up here, closing!