Workspace - Member of a WS sees an edit icon that opens a blank space

[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.2.32-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/folder/13177080/test-cases/41237932
Email or phone of affected tester (no customers): gatatntm+96b@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to new expensify with an account that is a member of a WS (not admin)
2. Go to Workspaces
3. Open the WS you are a member only (invite your account if you are admin in all)
4. Click on the edit icon on the Avatar

Expected Result:

There's no edit icon as the member has no access to edit the WS avatar. Opening any link doesn't lead to empty pages

Actual Result:

There's an edit icon on the member of a Workspace. Clicking on it goes to an empty page

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6976537_1760615669835.Recording__1358.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

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

[etCoderDysto]

Proposal

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

Workspace - Member of a WS sees an edit icon that opens a blank space

What is the root cause of that problem?

We pass true to disabled prop of AvatarWithImagePicker when user is not admin.

App/src/pages/workspace/WorkspaceOverviewPage.tsx

Lines 156 to 157 in 00dfe7d

	const readOnly = !isPolicyAdminPolicyUtils(policy);
	const currencyReadOnly = readOnly || isBankAccountVerified;

App/src/pages/workspace/WorkspaceOverviewPage.tsx

Line 424 in 00dfe7d

disabled={readOnly}

But we are not passing down the disabled prop to disabled prop of AvatarButtonWithIcon

App/src/components/AvatarWithImagePicker.tsx

Lines 283 to 289 in 00dfe7d

	<AvatarButtonWithIcon
	text={translate('avatarWithImagePicker.editImage')}
	source={source}
	avatarID={avatarID}
	onPress={() => onPressAvatar(openPicker)}
	avatarStyle={avatarStyle}
	pendingAction={pendingAction}

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

1. We should pass disabled prop to AvatarButtonWithIcon

<AvatarButtonWithIcon 
     text={translate('avatarWithImagePicker.editImage')} 
     source={source} 
     avatarID={avatarID} 
     onPress={() => onPressAvatar(openPicker)} 
     avatarStyle={avatarStyle} 
     pendingAction={pendingAction} 
     disabled={disabled}

2. We should pass current user login as a second parameter to isPolicyAdminPolicyUtils to get the user role right if policy.role is not available
   

   App/src/pages/workspace/WorkspaceOverviewPage.tsx

   Lines 156 to 157 in 00dfe7d

   	const readOnly = !isPolicyAdminPolicyUtils(policy);
   	const currencyReadOnly = readOnly || isBankAccountVerified;

const readOnly = !isPolicyAdminPolicyUtils(policy, currentUserPersonalDetails?.login);

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nkdengineer]

Proposal

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

There's an edit icon on the member of a Workspace. Clicking on it goes to an empty page

What is the root cause of that problem?

We are using ?? here

App/src/pages/media/AttachmentModalScreen/routes/WorkspaceAvatarModalContent.tsx

Line 19 in 38db9e3

const avatarURL = policy?.avatarURL ?? getDefaultWorkspaceAvatar(policy?.name ?? fallbackLetter);

then when policy?.avatarURL = '' we'll return ''

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

We should use || instead like we did in other places here

   const avatarURL = policy?.avatarURL || getDefaultWorkspaceAvatar(policy?.name ?? fallbackLetter);

App/src/pages/media/AttachmentModalScreen/routes/WorkspaceAvatarModalContent.tsx

Line 19 in 38db9e3

const avatarURL = policy?.avatarURL ?? getDefaultWorkspaceAvatar(policy?.name ?? fallbackLetter);

App/src/pages/workspace/WorkspaceOverviewPage.tsx

Lines 189 to 195 in 38db9e3

	const DefaultAvatar = useCallback(
	() => (
	<Avatar
	containerStyles={styles.avatarXLarge}
	imageStyles={[styles.avatarXLarge, styles.alignSelfCenter]}
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing cannot be used if left side can be empty string
	source={policy?.avatarURL || getDefaultWorkspaceAvatar(policyName)}

Note: we should do the same with other places that have the same error

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ShridharGoel]

Proposal

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

Workspace members who are not admins can still see and click the workspace avatar edit affordance. The edit icon invites them to change the picture, and clicking it sends them to an empty workspace avatar screen. When the workspace only has a default avatar, the member can still click it even though no edit should happen.

What is the root cause of that problem?

The avatar picker shows the edit icon and hover tooltip to anyone who opens the page and clicking there opens the preview of the workspace image, even when it is a default avatar.

For read-only users, it correctly doesn't allow them to actually upload an image, but gives an impression that they have the edit access.

App/src/components/AvatarWithImagePicker.tsx

Lines 216 to 239 in 2299401

	const onPressAvatar = useCallback(
	(openPicker: OpenPicker) => {
	if (disabled && enablePreview && onViewPhotoPress) {
	onViewPhotoPress();
	return;
	}
	if (isUsingDefaultAvatar) {
	openPicker({
	onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
	});
	return;
	}
	setIsMenuVisible((prev) => !prev);
	},
	[disabled, enablePreview, isUsingDefaultAvatar, onViewPhotoPress, showAvatarCropModal],
	);
	useLayoutEffect(() => {
	if (!anchorRef.current || !isMenuVisible) {
	return;
	}
	calculatePopoverPosition(anchorRef, anchorAlignment).then(setPopoverPosition);
	}, [calculatePopoverPosition, isMenuVisible]);

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

1. Hide edit button and hover tooltip for read-only viewers when editing is restricted.
2. Adjust the avatar picker to treat disabled as a hard edit lock: read-only members can only preview uploaded avatars, and the default avatar is no longer clickable for them.
3. Avoid navigating to the edit route when the viewer cannot edit, so they stay on the overview page.
4. For admins, clicking on the default avatar should open the image selection. And clicking when there's an already uploaded image, it should keep showing the popover menu with the options to upload another image, view image and remove image.

Key updates:

// src/components/AvatarButtonWithIcon.tsx
function AvatarButtonWithIcon({
    ...
    shouldShowEditIcon = true,
    shouldRenderTooltip = true,
}: AvatarButtonWithIconProps) {
    ...
    return (
        <Tooltip
            shouldRender={!disabled && shouldRenderTooltip}
            text={text}
        >
            ...
                {!disabled && shouldShowEditIcon && (
                    <View style={StyleSheet.flatten([styles.smallEditIcon, styles.smallAvatarEditIcon, editIconStyle])}>
                        <Icon
                            testID="avatar-button-edit-icon"
                            src={editIcon}
                            width={variables.iconSizeSmall}
                            height={variables.iconSizeSmall}
                            fill={theme.icon}
                        />
                    </View>
                )}
            ...
    );
}

// src/components/AvatarWithImagePicker.tsx
const onPressAvatar = useCallback(
    (openPicker: OpenPicker, showAttachmentModal: () => void) => {
        if (disabled) {
            if (isUsingDefaultAvatar) {
                return;
            }
            if (!enablePreview) {
                return;
            }
            if (onViewPhotoPress) {
                onViewPhotoPress();
                return;
            }
            showAttachmentModal();
            return;
        }

        if (isUsingDefaultAvatar) {
            openPicker({
                onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
            });
            return;
        }

        setIsMenuVisible((prev) => !prev);
    },
    [disabled, enablePreview, isUsingDefaultAvatar, onViewPhotoPress, showAvatarCropModal],
);

const isEditRestricted = disabled;
const isAvatarPressDisabled = disabled && (!enablePreview || isUsingDefaultAvatar);
const buttonAccessibilityText = isEditRestricted ? translate('avatarWithImagePicker.viewPhoto') : translate('avatarWithImagePicker.editImage');
const shouldRenderTooltip = !isEditRestricted;
const shouldShowEditIcon = !isEditRestricted;

// src/pages/workspace/WorkspaceOverviewPage.tsx
<AvatarWithImagePicker
    onViewPhotoPress={
        readOnly
            ? undefined
            : () => {
                  if (!policy?.id) {
                      return;
                  }
                  Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(policy.id));
              }
    }
    ...
/>

We should also verify if this is working properly in other places like report details page, and update accordingly if needed.

[VictoriaExpensify]

This feels like such a minor issue that I'm really not sure we need to prioritise it at the moment. Let's revisit if a customer reports this as an issue

[ShridharGoel]

@VictoriaExpensify But isn't it a broken experience? Non-admin is seeing the option to edit, and clicking that option just opens a blank modal.

[nkdengineer]

This feels like such a minor issue that I'm really not sure we need to prioritise it at the moment. Let's revisit if a customer reports this as an issue

@VictoriaExpensify the steps in the OP are easy to reproduce and it shows a blank modal. So i think we should fix it