[waiting for payment][$250] Share code- QR code expands to full size after opening for WS rooms, tasks and threads

@adelekennedy

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.2-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4675372
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Open the app and log in
Navigate to any task, thread or a workspace room
Tap the header and select Share

Expected Result:

The QR code is displayed fully

Actual Result:

The QR code is displayed small briefly and expands to the full size

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6524801_1719378147729.video_2024-06-26_00-59-25.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01e0a4dbc404a8ab34
Upwork Job ID: 1805949354249394574
Last Price Increase: 2024-07-10
Automatic offers:

alitoshmatov | Reviewer | 103091801
huult | Contributor | 103091804

Issue Owner

Current Issue Owner: @adelekennedy

@adelekennedy

Triggered auto assignment to @adelekennedy (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.

@danieldoglas

Triggered auto assignment to @danieldoglas (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

@adelekennedy

@adelekennedy I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

We think this issue might be related to the #vip-vsb

Proposal

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

QRCode change size after layout change

What is the root cause of that problem?

Default QR code size is 120px, after layout change the QR code recalculate size at this line

App/src/components/QRShare/index.tsx

Line 32 in 224f09e

setQrCodeSize(Math.max(1, containerWidth));

so the UI QRCode will update width and height

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

We have to set the default initial height for qrcode size at this line base on platform

App/src/components/QRShare/index.tsx

Line 19 in 224f09e

const [qrCodeSize, setQrCodeSize] = useState<number | undefined>();

ST like that

+    const isMobilePlatform = Platform.OS === 'android' || Platform.OS === 'ios';
+    const isMobileBrowser = Browser.isMobile();
+    const isMobile = isMobilePlatform || isMobileBrowser;
+    const { windowWidth } = useWindowDimensions();
+.   const qrShareContainerWidth = isMobile ? windowWidth : variables.sideBarWidth;


-     const [qrCodeSize, setQrCodeSize] = useState<number | undefined>();
+    // styles.ph5.paddingHorizontal * 2: This is the padding outside of the QR code.
+    // variables.qrShareHorizontalPadding * 2: This is the padding inside of the QR code.
+    // default size is remaining width after minus padding from parent container
+    const [qrCodeSize, setQrCodeSize] = useState<number>(
+        qrShareContainerWidth - (styles.ph5.paddingHorizontal * 2) - (variables.qrShareHorizontalPadding * 2)
+    );

Details

POC

Screen_Recording_20240706_090235_New.Expensify.Dev.mp4

What alternative solutions did you explore? (Optional)

@danieldoglas

ty @danieldoglas let me handle payment now:

Payouts due:

Contributor: $250 @huult
Contributor+: $250 @alitoshmatov

Upwork job is here.

@alitoshmatov

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

The PR that introduced the bug has been identified. Link to the PR:
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:
A discussion in #expensify-bugs 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:
A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here:

@alitoshmatov

@alitoshmatov checklist above when you get a chance!

@adelekennedy

The PR that introduced the bug has been identified. Link to the PR: Migrate QRShare to function component #32690
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/32690/files#r1712561692
A discussion in #expensify-bugs 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: No need
Determine if we should create a regression test for this bug.

Regression Test Proposal

Open the app and log in.
Navigate to any task, thread, or workspace room.
Tap the header to open the details and select "Share".
Verify that the QR code is displayed in full size and not changing its size while page is opening.

Do we agree 👍 or 👎

cc: @adelekennedy

Navigation Menu

Repository navigation

[waiting for payment][$250] Share code- QR code expands to full size after opening for WS rooms, tasks and threads #44436

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

60 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[waiting for payment][$250] Share code- QR code expands to full size after opening for WS rooms, tasks and threads #44436

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jun 26, 2024

melvin-bot commented on Jun 26, 2024

github-actions commented on Jun 26, 2024

izarutskaya commented on Jun 26, 2024

izarutskaya commented on Jun 26, 2024

huult commented on Jun 26, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

60 remaining items

adelekennedy commented on Aug 1, 2024

adelekennedy commented on Aug 1, 2024

adelekennedy commented on Aug 7, 2024

alitoshmatov commented on Aug 10, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions