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

[lanitochka17]

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 Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

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]

Reproduced.

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

[melvin-bot]

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

[melvin-bot]

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

[joekaufmanexpensify]

Seems like a pretty minor bug, so bumping down.

[melvin-bot]

Upwork job price has been updated to $125

[Shahidullah-Muffakir]

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]

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:

App/src/libs/Navigation/dismissModalWithReport.ts

Lines 24 to 29 in c75b1bc

	/**
	* 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

[melvin-bot]

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

[Shahidullah-Muffakir]

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:

App/src/libs/Navigation/dismissModalWithReport.ts

Lines 24 to 29 in c75b1bc

	/**
	* 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]

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

cc @grgia @joekaufmanexpensify for visibility.

[joekaufmanexpensify]

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

[ikevin127]

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

📣 @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

[melvin-bot]

📣 @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 📖

[joekaufmanexpensify]

PR in review

[ikevin127]

Awaiting final PR review from @grgia

[ikevin127]

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

[joekaufmanexpensify]

Sounds good. TY!

[melvin-bot]

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

[melvin-bot]

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:

• ensure consistent profile picture shape in shared QR code #52605

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

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

• @ikevin127 requires payment automatic offer (Reviewer)
• @Shahidullah-Muffakir requires payment (Needs manual offer from BZ)

[melvin-bot]

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

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]

Great. I will handle next steps!

[joekaufmanexpensify]

@Shahidullah-Muffakir offer sent for $125!

[joekaufmanexpensify]

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

[joekaufmanexpensify]

All set to pay:

• @Shahidullah-Muffakir $125 for PR via Upwork.
• @ikevin127 $125 for C+ via Upwork.

[joekaufmanexpensify]

@ikevin127 $125 sent and contract ended

[joekaufmanexpensify]

@Shahidullah-Muffakir $125 sent and contract ended

[joekaufmanexpensify]

Upwork job closed.

[joekaufmanexpensify]

All set, thanks everyone!