[$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 contributors@expensify.com 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): biruknew45+2025@gmail.com 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
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/b05f5cab-6736-47f6-a86d-bf7deef46a28

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: @ikevin127

[melvin-bot[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.

https://github.com/user-attachments/assets/775d9473-5bed-41b6-984c-73cd68b3b07e

[melvin-bot[bot]]

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

[melvin-bot[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[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:

https://github.com/Expensify/App/blob/c75b1bcc4c2a23a3c1d5ed84c844f82ed3996293/src/libs/Navigation/dismissModalWithReport.ts#L24-L29

🎀👀🎀 C+ reviewed

[melvin-bot[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:

https://github.com/Expensify/App/blob/c75b1bcc4c2a23a3c1d5ed84c844f82ed3996293/src/libs/Navigation/dismissModalWithReport.ts#L24-L29

🎀👀🎀 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[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[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 📖