[HOLD for payment 2024-07-30][Simplified Collect] Workspaces - Display picture/Avatar isn't shown in Workspace share Code page

[izarutskaya]

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

---

Action Performed:

1. go settings -> workspaces -> new workspace
2. Now click the display avatar -> edit photo -> upload photo
3. Notice that the uploaded photo is displayed.
4. Now go to #announce or #admin or workspace chat of the same newly created workspace.
5. go to details page.
6. Notice that there is 'expensify' symbol in QR code. i.e display picture of corresponding workspace isn't shown.

Expected Result:

display picture of corresponding workspace should be shown in share code page.

Actual Result:

display picture of corresponding workspace isn't shown in share code page for workspace.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.68-15

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

Screen.Recording.2023-09-09.at.5.06.41.PM.mov

Recording.1518.mp4

Expensify/Expensify Issue URL:

Issue reported by: @ashimsharma10

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694259150016599

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f242a32573a62742
• Upwork Job ID: 1701685406614237184
• Last Price Increase: 2023-10-03

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Display picture of corresponding workspace should be shown in share code page.

What is the root cause of that problem?

We do not pass the image for such cases.

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

Using ReportUtils.getIcons we can receive an image and then pass it to the code in ShareCodePage

https://github.com/Expensify/App/blob/3fe7ab1c7d860f40eeb9a52b911f8d7bc4781dd5/src/pages/ShareCodePage.js

        const reportIcon = ReportUtils.getIcons(this.props.report, this.props.personalDetails, this.props.policies);
        const reportLogo = typeof reportIcon[0].source === 'string' ? reportIcon[0].source : expensifyLogo;

And then pass in QRShareWithDownload

App/src/pages/ShareCodePage.js

Lines 65 to 73 in 3fe7ab1

	<QRShareWithDownload
	ref={this.qrCodeRef}
	url={url}
	title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
	subtitle={isReport ? subtitle : formattedEmail}
	logo={isReport ? expensifyLogo : UserUtils.getAvatarUrl(this.props.currentUserPersonalDetails.avatar, this.props.currentUserPersonalDetails.accountID)}
	logoRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
	logoMarginRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO : CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
	/>

like
logo={isReport ? reportLogo : UserUtils.getAvatarUrl(this.props.currentUserPersonalDetails.avatar, this.props.currentUserPersonalDetails.accountID)}

Screen.Recording.2023-09-12.at.22.21.45.mov

What alternative solutions did you explore? (Optional)

NA

[abekkala]

@sobitneupane what do you think of the proposal that has come in?

[sobitneupane]

@abekkala I'm uncertain whether not displaying avatars in QRCode for Workspace is a bug or an intentional design choice. Can you please confrim if showing avatars is the desired behavior?

[s-alves10]

Proposal

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

Workspace avatar isn't shown in share-code page of the workspace

What is the root cause of that problem?

App/src/pages/ShareCodePage.js

Line 70 in 2ea1c71

logo={isReport ? expensifyLogo : UserUtils.getAvatarUrl(this.props.currentUserPersonalDetails.avatar, this.props.currentUserPersonalDetails.accountID)}

In the above code, isReport is true for workspace rooms and chats.
This is the root cause

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

1. We need to pass component as logo if the report is workspace rooms or chat and

import { Rect } from 'react-native-svg';

...

        let logo = UserUtils.getAvatarUrl(this.props.currentUserPersonalDetails.avatar, this.props.currentUserPersonalDetails.accountID);
        if (isReport) {
            const isWorkspaceChat = ReportUtils.isPolicyExpenseChat(this.props.report) || ReportUtils.isChatRoom(this.props.report);
            logo = isWorkspaceChat ? ReportUtils.getWorkspaceAvatar(this.props.report) : expensifyLogo;
            if (typeof logo === 'function') {
                // For default avatar, we need to show the svg component instead of image
                const LogoComponent = logo;
                const workspaceName = ReportUtils.getPolicyName(this.props.report);
                const color = StyleUtils.getDefaultWorkspaceAvatarColor(workspaceName);
                logo = (props) => (
                    <>
                        <Rect {...props} fill={color.backgroundColor} clipPath='url(#clip-logo)' />
                        <LogoComponent {...props} fill={color.fill} />
                    </>
                );
            }
        }

2. Update
   

   App/src/pages/ShareCodePage.js

   Line 90 in 8dba113

   logo={isReport ? expensifyLogo : UserUtils.getAvatarUrl(this.props.currentUserPersonalDetails.avatar, this.props.currentUserPersonalDetails.accountID)}

   
   to

        logo={logo}

3. In QRCode component, pass logoComponent for component logo
   Update
   

   App/src/components/QRCode/index.js

   Line 60 in 20cd522

   logo={props.logo}

   
   to

            logo={typeof props.logo === 'string' ? props.logo : undefined}
            logoComponent={typeof props.logo === 'function' ? props.logo : undefined}

4. Apply the below patch to the react-native-qrcode-svg package to receive logoComponent as well as logo

diff --git a/node_modules/react-native-qrcode-svg/index.d.ts b/node_modules/react-native-qrcode-svg/index.d.ts
index f3700cd..0836d89 100644
--- a/node_modules/react-native-qrcode-svg/index.d.ts
+++ b/node_modules/react-native-qrcode-svg/index.d.ts
@@ -14,6 +14,8 @@ export interface QRCodeProps {
   backgroundColor?: string;
   /* an image source object. example {uri: 'base64string'} or {require('pathToImage')} */
   logo?: ImageSourcePropType;
+  /* logo component instead of image */
+  logoComponent?: React.Component;
   /* logo size in pixels */
   logoSize?: number;
   /* the logo gets a filled rectangular background with this color. Use 'transparent'
diff --git a/node_modules/react-native-qrcode-svg/src/index.js b/node_modules/react-native-qrcode-svg/src/index.js
index 99c2e68..8e8d7ce 100644
--- a/node_modules/react-native-qrcode-svg/src/index.js
+++ b/node_modules/react-native-qrcode-svg/src/index.js
@@ -15,6 +15,7 @@ import transformMatrixIntoPath from './transformMatrixIntoPath'
 const renderLogo = ({
   size,
   logo,
+  logoComponent,
   logoSize,
   logoBackgroundColor,
   logoMargin,
@@ -24,6 +25,7 @@ const renderLogo = ({
   const logoBackgroundSize = logoSize + logoMargin * 2
   const logoBackgroundBorderRadius =
     logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius
+  const LogoComponent = logoComponent;
 
   return (
     <G x={logoPosition} y={logoPosition}>
@@ -54,13 +56,20 @@ const renderLogo = ({
         />
       </G>
       <G x={logoMargin} y={logoMargin}>
-        <Image
-          width={logoSize}
-          height={logoSize}
-          preserveAspectRatio='xMidYMid slice'
-          href={logo}
-          clipPath='url(#clip-logo)'
-        />
+        {logo ? (
+          <Image
+            width={logoSize}
+            height={logoSize}
+            preserveAspectRatio='xMidYMid slice'
+            href={logo}
+            clipPath='url(#clip-logo)'
+          />
+        ) : (
+          <LogoComponent
+            width={logoSize}
+            height={logoSize}
+          />
+        )}
       </G>
     </G>
   )
@@ -72,6 +81,7 @@ const QRCode = ({
   color = 'black',
   backgroundColor = 'white',
   logo,
+  logoComponent,
   logoSize = size * 0.2,
   logoBackgroundColor = 'transparent',
   logoMargin = 2,
@@ -144,10 +154,11 @@ const QRCode = ({
           strokeWidth={cellSize}
         />
       </G>
-      {logo &&
+      {Boolean(logo || logoComponent) &&
         renderLogo({
           size,
           logo,
+          logoComponent,
           logoSize,
           logoBackgroundColor,
           logoMargin,

This works as expected

Result

bandicam.2023-10-20.03-34-57-708.mp4

What alternative solutions did you explore? (Optional)

[abekkala]

Yes - the avatar should show
#20993

@deetergp it looks like we used to show the avatar but not anymore.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[abekkala]

@sobitneupane is there a proposal here that you agree with to move forward with the fix?

[sobitneupane]

@abekkala Thank you for providing the update. Just to clarify, are we aiming to display the workspace avatar, which could be either user-uploaded or the default avatar, for every room(either default or user-created) on the Share Code Page.

[sobitneupane]

The proposals we have received so far displays workspace avatar on the Share Code Page only if it is user uploaded image. In case of default avatar, expensifyLogo is used.

[abekkala]

@abekkala Thank you for providing the update. Just to clarify, are we aiming to display the workspace avatar, which could be either user-uploaded or the default avatar, for every room(either default or user-created) on the Share Code Page.

Ah, good clarification. I believe the answer is yes. @deetergp just want to get a second opinion.

[melvin-bot]

@abekkala @sobitneupane this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[s-alves10]

In order to show default avatar of workspace rooms in share code page, I think we need to have URLs for these default avatars because the react-native-qrcode-svg library doesn't support component type logo.
Another option is to make some changes to the library to customize the logo

[luacmartins]

We still need this

[melvin-bot]

@Kicu, @abekkala, @luacmartins, @sobitneupane, @grgia, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

[Kicu]

Update:
Currently I'm waiting for 2 PRs to be merged in react-native-svg:

• fix: new arch invalidate on mount/unmount software-mansion/react-native-svg#2318
• Add correct invalidate calls to SvgView on ios with test software-mansion/react-native-svg#2327

After these both are merged we will have to update the version of react-native-svg in the project, and then I can move forward with original task, which hopefully is already working - as the rendering bug was only on ios.
Will update the PR soon

[roryabraham]

Both those PRs were published in react-native-svg v15.4.0, so we should be ready to move onto the next step of upgrading react-native-svg in E/App

[Kicu]

Correct. I've bumped it here in my PR for this issue: https://github.com/Expensify/App/pull/39072/files

There are no big breaking changes and I verified that all usages of svg in our App work. The only BC on v15 was bumping the version of supported ios. Otherwise smooth update, and is used in this feature.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

This issue has not been updated in over 15 days. @Kicu, @abekkala, @luacmartins, @sobitneupane, @grgia 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!

[Kicu]

The issue was solved by the PR merged and there and there was 1 follow up created for this here: #45876

[sobitneupane]

This was deployed to production last week. #39072 (comment) This is ready for payment. @abekkala Waiting for payment summary.

[abekkala]

PAYMENT SUMMARY FOR JULY 30

• Fix: @Kicu [swm - no upwork payment]
• PR Review: @sobitneupane [$250] payment via NewDot

[garrettmknight]

$250 approved for @sobitneupane based on this summary.

[ashimsharma10]

@abekkala @garrettmknight @sobitneupane , I'm the issue reporter . Haven't received payment. Its an old time bug. 😄

[ashimsharma10]

Bump @garrettmknight . Thanks !

[garrettmknight]

@abekkala can you help @ashimsharma10 out?

[abekkala]

Ah yes - this was reported in September 2023 before we stopped the bug bounty. (Oct 2023)

• $50 payout for @ashimsharma10
  (On August 30, 2024 bounty was reduced to $50)

@ashimsharma10 can you please link your Upwork profile, I was unable to find you!

[ashimsharma10]

@abekkala Thank you !
Find me here https://www.upwork.com/freelancers/~018a92cf13e1e88eed