[PAY 3RD APRIL] [$250] Upload Workspace Avatar Error is impossible to dismiss

[grgia]

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

---

Screen.Recording.2024-03-06.at.12.53.40.PM.mov

Version Number:
Reproducible in staging?:
Reproducible in production?:
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
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

Action Performed:

Break down in numbered steps

Go to workspaces and click on one of your workspaces to open the workspace profile page.
Force an error in the upload process (I have dev settings that are borked, which caused this error)

Expected Result:

Describe what you think should've happened

Error should be dismissable/readable

Actual Result:

Describe what actually happened

Error overlaps the other info, error is not dismissible due to highlightable menu items

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Workspace uploading works well on staging/prod so this isn't seen much. But we should fix the UI here.

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0185f43e02fc3ad4e8
• Upwork Job ID: 1765394695917617152
• Last Price Increase: 2024-03-06

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[melvin-bot]

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

[grgia]

@shawnborton could you confirm what the error UI pattern should be on this page?

[grgia]

This will be external, but we need to hold on design confirmation.

[shawnborton]

I would think this would just sit cleanly as it's own full-width row below the avatar. Basically taking the same width as the title row below it.

cc @narefyev91 - given that you worked on this page, is this something you could fix quickly?

Hey @grgia! As mentioned in the comment. Can you please provide the dev setting that gave you that error ?

[grgia]

@godofoutcasts94 you can hard code an error in this block

App/src/pages/workspace/WorkspaceProfilePage.tsx

Lines 120 to 128 in a04481f

	errors={policy?.errorFields?.avatar}
	onErrorClose={() => Policy.clearAvatarErrors(policy?.id ?? '')}
	previewSource={UserUtils.getFullSizeAvatar(policy?.avatar ?? '')}
	headerTitle={translate('workspace.common.workspaceAvatar')}
	originalFileName={policy?.originalFileName}
	disabled={readOnly}
	disabledStyle={styles.cursorDefault}
	errorRowStyles={undefined}
	/>

@godofoutcasts94 you can hard code an error in this block

App/src/pages/workspace/WorkspaceProfilePage.tsx

Lines 120 to 128 in a04481f

	errors={policy?.errorFields?.avatar}
	onErrorClose={() => Policy.clearAvatarErrors(policy?.id ?? '')}
	previewSource={UserUtils.getFullSizeAvatar(policy?.avatar ?? '')}
	headerTitle={translate('workspace.common.workspaceAvatar')}
	originalFileName={policy?.originalFileName}
	disabled={readOnly}
	disabledStyle={styles.cursorDefault}
	errorRowStyles={undefined}
	/>

Thanks I will do it

[ShridharGoel]

Proposal

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

Upload Workspace Avatar Error is impossible to dismiss.

What is the root cause of that problem?

Error is being set here in WorkspaceProfilePage:
errors={policy?.errorFields?.avatar}

It is then being passed to

{shouldShowErrorMessages && hasErrorMessages && (
                <MessagesRow
                    messages={errorMessages}
                    type="error"
                    onClose={onClose}
                    containerStyles={errorRowStyles}
                    canDismiss={canDismissError}
                />
            )}

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