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

izarutskaya · 2023-09-12T19:53:08Z

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:

go settings -> workspaces -> new workspace
Now click the display avatar -> edit photo -> upload photo
Notice that the uploaded photo is displayed.
Now go to #announce or #admin or workspace chat of the same newly created workspace.
go to details page.
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?

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 · 2023-09-12T19:53:13Z

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

melvin-bot · 2023-09-12T19:53:14Z

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

melvin-bot · 2023-09-12T19:53:16Z

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 · 2023-09-12T19:53:17Z

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

melvin-bot · 2023-09-12T19:53:23Z

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

ZhenjaHorbach · 2023-09-12T20:14:07Z

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 · 2023-09-14T19:15:35Z

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

sobitneupane · 2023-09-18T08:37:54Z

@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 · 2023-09-18T10:57:57Z

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?

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} />
                    </>
                );
            }
        }

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}

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}

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 · 2023-09-18T14:25:53Z

Yes - the avatar should show
#20993

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

melvin-bot · 2023-09-19T16:00:18Z

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

abekkala · 2023-09-20T14:23:08Z

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

sobitneupane · 2023-09-22T09:28:05Z

@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 · 2023-09-22T09:29:27Z

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 · 2023-09-24T23:18:51Z

@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 · 2023-09-26T10:53:21Z

@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 · 2023-09-26T16:00:31Z

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

s-alves10 · 2023-09-27T07:13:32Z

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

Kicu · 2024-07-03T11:04:19Z

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 · 2024-07-17T07:20:10Z

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 · 2024-07-17T07:34:51Z

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 · 2024-07-21T20:27:43Z

⚠️ 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 · 2024-07-22T18:49:20Z

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 · 2024-07-23T06:44:48Z

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

sobitneupane · 2024-07-29T08:48:55Z

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

abekkala · 2024-07-30T16:45:59Z

PAYMENT SUMMARY FOR JULY 30

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

garrettmknight · 2024-09-02T17:36:42Z

$250 approved for @sobitneupane based on this summary.

ashimsharma10 · 2024-09-04T15:27:34Z

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

ashimsharma10 · 2024-09-17T17:51:37Z

Bump @garrettmknight . Thanks !

garrettmknight · 2024-09-19T19:40:13Z

@abekkala can you help @ashimsharma10 out?

abekkala · 2024-09-20T13:42:02Z

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 · 2024-09-22T03:19:19Z

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

melvin-bot · 2024-09-23T18:02:09Z

@Kicu, @abekkala, @luacmartins, @sobitneupane, @grgia Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

abekkala · 2024-09-23T20:34:59Z

@ashimsharma10 $50 Offer Sent

abekkala · 2024-09-23T20:52:05Z

@ashimsharma10 payment sent and contract ended - thank you! 🎉

izarutskaya added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 12, 2023

melvin-bot bot changed the title ~~Workspaces - Display picture/Avatar isn't shown in Workspace share Code page~~ [$500] Workspaces - Display picture/Avatar isn't shown in Workspace share Code page Sep 12, 2023

melvin-bot bot assigned abekkala Sep 12, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 12, 2023

melvin-bot bot assigned garrettmknight Sep 12, 2023

melvin-bot bot assigned sobitneupane Sep 12, 2023

abekkala unassigned garrettmknight Sep 14, 2023

melvin-bot bot added the Overdue label Sep 18, 2023

melvin-bot bot removed the Overdue label Sep 18, 2023

melvin-bot bot added the Overdue label Sep 27, 2023

luacmartins reopened this Jun 27, 2024

melvin-bot bot added Monthly KSv2 and removed Weekly KSv2 labels Jul 22, 2024

luacmartins changed the title ~~[Simplified Collect] Workspaces - Display picture/Avatar isn't shown in Workspace share Code page~~ [HOLD for payment 2024-07-30][Simplified Collect] Workspaces - Display picture/Avatar isn't shown in Workspace share Code page Jul 29, 2024

luacmartins added Awaiting Payment Auto-added when associated PR is deployed to production and removed Reviewing Has a PR in review labels Jul 29, 2024

abekkala closed this as completed Jul 30, 2024

garrettmknight reopened this Sep 19, 2024

garrettmknight added Daily KSv2 and removed Monthly KSv2 labels Sep 19, 2024

melvin-bot bot added the Overdue label Sep 23, 2024

melvin-bot bot removed the Overdue label Sep 23, 2024

abekkala closed this as completed Sep 23, 2024

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

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

Comments

izarutskaya commented Sep 12, 2023 • edited by luacmartins Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Sep 12, 2023

melvin-bot bot commented Sep 12, 2023

melvin-bot bot commented Sep 12, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot bot commented Sep 12, 2023

melvin-bot bot commented Sep 12, 2023

ZhenjaHorbach commented Sep 12, 2023 • edited Loading

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)

abekkala commented Sep 14, 2023

sobitneupane commented Sep 18, 2023

s-alves10 commented Sep 18, 2023 • edited Loading

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)

abekkala commented Sep 18, 2023

melvin-bot bot commented Sep 19, 2023

abekkala commented Sep 20, 2023

sobitneupane commented Sep 22, 2023

sobitneupane commented Sep 22, 2023

abekkala commented Sep 24, 2023

melvin-bot bot commented Sep 26, 2023

melvin-bot bot commented Sep 26, 2023

s-alves10 commented Sep 27, 2023

Kicu commented Jul 3, 2024 • edited Loading

roryabraham commented Jul 17, 2024

Kicu commented Jul 17, 2024

melvin-bot bot commented Jul 21, 2024

melvin-bot bot commented Jul 22, 2024

Kicu commented Jul 23, 2024

sobitneupane commented Jul 29, 2024 • edited Loading

abekkala commented Jul 30, 2024

PAYMENT SUMMARY FOR JULY 30

garrettmknight commented Sep 2, 2024

ashimsharma10 commented Sep 4, 2024 • edited Loading

ashimsharma10 commented Sep 17, 2024

garrettmknight commented Sep 19, 2024

abekkala commented Sep 20, 2024 • edited Loading

ashimsharma10 commented Sep 22, 2024

melvin-bot bot commented Sep 23, 2024

abekkala commented Sep 23, 2024

abekkala commented Sep 23, 2024

izarutskaya commented Sep 12, 2023 •

edited by luacmartins

Loading

ZhenjaHorbach commented Sep 12, 2023 •

edited

Loading

s-alves10 commented Sep 18, 2023 •

edited

Loading

Kicu commented Jul 3, 2024 •

edited

Loading

sobitneupane commented Jul 29, 2024 •

edited

Loading

ashimsharma10 commented Sep 4, 2024 •

edited

Loading

abekkala commented Sep 20, 2024 •

edited

Loading