[HOLD for payment 2023-09-29] [Image] Feature Request: Introduce an ability to view workspace picture with a single tap - reported by @chauchausoup

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Problem:

We cannot see a workspace avatar picture in tap and view manner. Once a user uploads a workspace avatar image then there is no way for them to view it by any means.

Solution:

As in profile picture, avatar can be viewed by tapping on it while being on chat. We should implement similar feature with workspace avatar image too. We can make view ability if a user taps in Avatar under general settings. Only if they taps in camera icon then the usual Upload / Remove option should be shown.

##Context:
https://expensify.slack.com/files/U040F2ZTA3G/F040ZBKE2CB/rpreplay_final1662273851.mp4

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

RPReplay_Final1662273851.MP4

Expensify/Expensify Issue URL:
Issue reported by: @chauchausoup
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1662273908091079

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @kadiealexander (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Puneet-here]

Proposal

I think instead we should show an option to view the image like this

To implement this we have to add a new item here

App/src/components/AvatarWithImagePicker.js

Lines 212 to 217 in 1b4721e

	const menuItems = [
	{
	icon: Expensicons.Upload,
	text: this.props.translate('avatarWithImagePicker.uploadPhoto'),
	onSelected: () => {
	openPicker({

 if (!this.props.isUsingDefaultAvatar) {
            menuItems.unshift({
                icon: Expensicons.Eye,
                text: this.props.translate('avatarWithImagePicker.viewPhoto'),
                onSelected: () => show(),
            });
        }

If we wanna show this all the time even for default avatar then we can just add this without any condition and if we wanna keep this option at bottom then we just need to push it.

We can reuse AttachmentModal. Wrap the Pressable below with AttachmentModal

App/src/components/AvatarWithImagePicker.js

Line 243 in 1b4721e

<Pressable

App/src/components/AvatarWithImagePicker.js

Line 284 in 1b4721e

</Pressable>

We have to wrap it so that we can pass so that we can pass show function in the

App/src/components/AvatarWithImagePicker.js

Line 277 in 1b4721e

menuItems={this.createMenuItems(openPicker)}

like we pass here in the Pressable's onPress

App/src/pages/DetailsPage.js

Lines 119 to 127 in 1b4721e

	<AttachmentModal
	headerTitle={isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
	sourceURL={details.avatar}
	isAuthTokenRequired
	>
	{({show}) => (
	<PressableWithoutFocus
	style={styles.noOutline}
	onPress={show}

we can also make some changes in the AttachmentModal so that it shows when we pass a prop.

In the end we just need to pass needed props to AttachmentModal
Questions:-

1. What should be the headerTitle? Should we just say "Avatar"
2. Do we need to pass isAuthTokenRequired?
3. Should we allow downloading image?

[melvin-bot]

Triggered auto assignment to @Gonals (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

@Gonals Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!