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

[HOLD for payment 2024-12-03] [$125] Share Code - Inconsistent profile pic shape in admin room when accessed via #Admin hyperlink #52258

Closed
1 of 8 tasks
lanitochka17 opened this issue Nov 8, 2024 · 31 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@lanitochka17
Copy link

lanitochka17 commented Nov 8, 2024

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!


Version Number: 9.0.59-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: NA
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

  1. Go to https://staging.new.expensify.com/
  2. Create workspace
  3. Go to the #admin room (if you couldn't find it in LHN go to account setting> workspace > click on the three dots then click on #admin room)
  4. Click on the header > share code then see the shape of the profile picture
  5. Go to workspace editor > profile > share code > click on #admins hyper link
  6. click on the header > share code and see the shape of the profile picture.

Expected Result:

The profile picture should consistently appear as a circle

Actual Result:

When navigating to the admin room share code through the #admin hyperlink, the profile picture appears as a rectangle

Workaround:

Unknown

Platforms:

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

  • Android: Standalone
  • Android: HybridApp
  • Android: mWeb Chrome
  • iOS: Standalone
  • iOS: HybridApp
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence
Bug6658801_1731068758423.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021854973788673857466
  • Upwork Job ID: 1854973788673857466
  • Last Price Increase: 2024-11-08
  • Automatic offers:
    • ikevin127 | Reviewer | 104896217
Issue OwnerCurrent Issue Owner: @joekaufmanexpensify
@lanitochka17 lanitochka17 added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Nov 8, 2024
Copy link

melvin-bot bot commented Nov 8, 2024

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

@joekaufmanexpensify
Copy link
Contributor

Reproduced.

2024-11-08_14-45-28.mp4

@joekaufmanexpensify joekaufmanexpensify added the External Added to denote the issue can be worked on by a contributor label Nov 8, 2024
@melvin-bot melvin-bot bot changed the title Share Code - Inconsistent profile pic shape in admin room when accessed via #Admin hyperlink [$250] Share Code - Inconsistent profile pic shape in admin room when accessed via #Admin hyperlink Nov 8, 2024
Copy link

melvin-bot bot commented Nov 8, 2024

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

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Nov 8, 2024
Copy link

melvin-bot bot commented Nov 8, 2024

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

@joekaufmanexpensify
Copy link
Contributor

Seems like a pretty minor bug, so bumping down.

@joekaufmanexpensify joekaufmanexpensify changed the title [$250] Share Code - Inconsistent profile pic shape in admin room when accessed via #Admin hyperlink [$125] Share Code - Inconsistent profile pic shape in admin room when accessed via #Admin hyperlink Nov 8, 2024
Copy link

melvin-bot bot commented Nov 8, 2024

Upwork job price has been updated to $125

@Shahidullah-Muffakir
Copy link
Contributor

Proposal

Please re-state the problem that we are trying to solve in this issue.

When users view shared QR codes in the Expensify app, the profile picture shape is inconsistent depending on the navigation path taken. Specifically:

  1. When accessing the share code through the normal admin room path, the profile picture appears as a circle (correct)
  2. When accessing the share code through the "#admin" hyperlink in the workspace editor, the profile picture appears as a rectangle (incorrect)

What is the root cause of that problem?

The issue occurs because when the user clicks on the hyperlink here:
WorkspaceProfileSharePage.tsx#L89,
the current QR code displayed in WorkspaceProfileSharePage is not being properly closed. As a result, when navigating to the new page where the QR code is shown again, two QRShare components are mounted simultaneously. You can verify this by checking the React dev tools for the two QRShare components. This is causing the SVG inside the QR code to lose the border-radius styling, making the profile picture appear as a rectangle.

What changes do you think we should make in order to solve the problem?

When the user clicks on the hyperlink, close the current modal before navigating to the new page. This can be done using the Navigation.dismissModal() method.

Navigation.dismissModal();
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(adminRoom.reportID ?? ''));

@ikevin127
Copy link
Contributor

Thanks @Shahidullah-Muffakir for the proposal, the RCA checks out and the proposed solution fixes the issue in accordance with the Expected result.

Suggestion

In order to DRY the code down to one line you might as well write it like this:

Navigation.dismissModal(adminRoom.reportID);

since dismissModal has support for reportID which if passed calls:

/**
* Dismisses the last modal stack if there is any
*
* @param targetReportID - The reportID to navigate to after dismissing the modal
*/
function dismissModalWithReport(targetReport: OnyxEntry<Report>, navigationRef: NavigationContainerRef<RootStackParamList>) {

🎀👀🎀 C+ reviewed

Copy link

melvin-bot bot commented Nov 9, 2024

Triggered auto assignment to @grgia, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

@Shahidullah-Muffakir
Copy link
Contributor

Suggestion

In order to DRY the code down to one line you might as well write it like this:

Navigation.dismissModal(adminRoom.reportID);

since dismissModal has support for reportID which if passed calls:

/**
* Dismisses the last modal stack if there is any
*
* @param targetReportID - The reportID to navigate to after dismissing the modal
*/
function dismissModalWithReport(targetReport: OnyxEntry<Report>, navigationRef: NavigationContainerRef<RootStackParamList>) {

🎀👀🎀 C+ reviewed

@ikevin127, Thank you for pointing that out! We’ll use that.

@ikevin127
Copy link
Contributor

CME doesn't seem to be OOO, not sure what's the hold up here.

cc @grgia @joekaufmanexpensify for visibility.

@joekaufmanexpensify
Copy link
Contributor

@grgia mind signing off on this one when you have a sec?

@ikevin127
Copy link
Contributor

@joekaufmanexpensify Do you think it's possible to re-assign CME for this issue ? Must be caught-up with some higher priority tasks and we wouldn't want deter from that. There's another issue reported on Slack with the same situation here.

@melvin-bot melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Nov 14, 2024
Copy link

melvin-bot bot commented Nov 14, 2024

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

Copy link

melvin-bot bot commented Nov 14, 2024

📣 @Shahidullah-Muffakir You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

@melvin-bot melvin-bot bot added the Weekly KSv2 label Nov 15, 2024
@joekaufmanexpensify
Copy link
Contributor

PR in review

@ikevin127
Copy link
Contributor

Awaiting final PR review from @grgia

@ikevin127
Copy link
Contributor

♻️ Status updaate: PR was merged & deployed to staging and is now awaiting production deploy.

@joekaufmanexpensify
Copy link
Contributor

Sounds good. TY!

@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Nov 26, 2024
@melvin-bot melvin-bot bot changed the title [$125] Share Code - Inconsistent profile pic shape in admin room when accessed via #Admin hyperlink [HOLD for payment 2024-12-03] [$125] Share Code - Inconsistent profile pic shape in admin room when accessed via #Admin hyperlink Nov 26, 2024
@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Nov 26, 2024
Copy link

melvin-bot bot commented Nov 26, 2024

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

Copy link

melvin-bot bot commented Nov 26, 2024

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

If no regressions arise, payment will be issued on 2024-12-03. 🎊

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

Copy link

melvin-bot bot commented Nov 26, 2024

@ikevin127 @joekaufmanexpensify @ikevin127 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

@ikevin127
Copy link
Contributor

ikevin127 commented Nov 26, 2024

BugZero Checklist:

  • [Contributor] Classify the bug:
Bug classification

Source of bug:

  • 1a. Result of the original design (eg. a case wasn't considered)
  • 1b. Mistake during implementation
  • 1c. Backend bug
  • 1z. Other:

Where bug was reported:

  • 2a. Reported on production
  • 2b. Reported on staging (deploy blocker)
  • 2c. Reported on both staging and production
  • 2d. Reported on a PR
  • 2z. Other:

Who reported the bug:

  • 3a. Expensify user
  • 3b. Expensify employee
  • 3c. Contributor
  • 3d. QA
  • 3z. Other:
  • [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

    Link to comment: https://github.com/Expensify/App/pull/45374/files#r1859324788.

  • [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

    Link to discussion: N/A.

  • [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

  • [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

    Link to issue:

Regression Test Proposal

  1. Navigate to Settings > Workspaces, open a workspace profile, and click the Share button.
  2. Click on the #admin hyperlink, then click the Header of the opened report and select the Share button.
  3. Verify that the profile picture QR Code appears in a circular shape.

Do we agree 👍 or 👎.

@joekaufmanexpensify
Copy link
Contributor

Great. I will handle next steps!

@joekaufmanexpensify
Copy link
Contributor

@Shahidullah-Muffakir offer sent for $125!

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Dec 3, 2024
@garrettmknight garrettmknight moved this from Bugs and Follow Up Issues to Hold for Payment in [#whatsnext] #expense Dec 3, 2024
@joekaufmanexpensify
Copy link
Contributor

This is a pretty niche bug, I don't think we need a regression test everytime here.

@joekaufmanexpensify
Copy link
Contributor

All set to pay:

@joekaufmanexpensify
Copy link
Contributor

@ikevin127 $125 sent and contract ended

@joekaufmanexpensify
Copy link
Contributor

@Shahidullah-Muffakir $125 sent and contract ended

@joekaufmanexpensify
Copy link
Contributor

Upwork job closed.

@joekaufmanexpensify
Copy link
Contributor

All set, thanks everyone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
Status: Done
Development

No branches or pull requests

5 participants