Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(frontend): Add fallback for image load error on Avatar #9501

Conversation

ingthorb
Copy link
Contributor

Description

This is a fix for when using the CorpUser Image URL and there is an error when fetching the image. Before the error was not handled and showed an empty space where the image should be but now with the onError function from Ant we have a fallback Avatar Style which is the default one.

Checklist

  • The PR conforms to DataHub's Contributing Guideline (particularly Commit Message Format)
  • Links to related issues (if applicable)
  • Tests for the changes have been added/updated (if applicable)
  • Docs related to the changes have been added/updated (if applicable). If a new feature has been added a Usage Guide has been added for the same.
  • For any breaking change/potential downtime/deprecation/big changes an entry has been made in Updating DataHub

@github-actions github-actions bot added the product PR or Issue related to the DataHub UI/UX label Dec 21, 2023
Copy link
Collaborator

@chriscollins3456 chriscollins3456 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! i have some minor code style suggestions otherwise this is good to go! thanks for this

const avatar =
photoUrl && photoUrl !== '' ? <AvatarStyled src={photoUrl} style={style} size={size} /> : avatarWithDefault;
photoUrl && photoUrl !== '' && !imageError ? <AvatarStyled src={photoUrl} style={style} size={size} onError={() => onErrorHandling()} /> : avatarWithDefault;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's unnecessary to have an arrow function here, you could just write onError={onErrorHandling}

I would also rename this from onErrorHandling to something like handleImageError to be a little more clear, verbose, and consistent with our function names

Copy link
Collaborator

@chriscollins3456 chriscollins3456 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

@hsheth2 hsheth2 added the merge-pending-ci A PR that has passed review and should be merged once CI is green. label Jan 18, 2024
@chriscollins3456 chriscollins3456 merged commit 0b66e5e into datahub-project:master Jan 19, 2024
35 of 36 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
merge-pending-ci A PR that has passed review and should be merged once CI is green. product PR or Issue related to the DataHub UI/UX
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants