Skip to content

Migrate HAML project avatars to `Pajamas::AvatarComponent`

What does this MR do and why?

Related to #345020 (closed)

Migrate project avatars using project_icon helper to Pajamas::AvatarComponent. This also adds support for retina screens because Pajamas::AvatarComponent adds the srcset attribute behind the scenes.

Screenshots or screen recordings

Taken on a retina screen. Notice that the Intrinsic size is at 2x.

Project front page

Before After
Screenshot_2023-12-01_at_11.57.05_AM Screenshot_2023-12-01_at_11.42.27_AM

Project breadcrumbs

Before After
Screenshot_2023-12-01_at_11.57.39_AM Screenshot_2023-12-01_at_11.42.54_AM

Group -> Settings -> Projects

Before After
Screenshot_2023-12-01_at_11.58.42_AM Screenshot_2023-12-01_at_11.44.51_AM

Create project from user instance template

Before After
Screenshot_2023-12-01_at_11.59.18_AM Screenshot_2023-12-01_at_11.45.41_AM

Create project from group template

Before After
Screenshot_2023-12-01_at_11.59.37_AM Screenshot_2023-12-01_at_11.46.00_AM

How to set up and validate locally

On a retina screen...

Project front page and project breadcrumbs

  1. Upload an avatar to a project and visit the home page

Group -> Settings -> Projects

  1. Go to a project in a group and upload an avatar
  2. Go to the parent group -> Settings -> Projects

Create project from user instance template

  1. Follow instructions in https://docs.gitlab.com/ee/administration/custom_project_templates.html
  2. Go to /projects/new#create_from_template and choose the Instance tab

Create project from group template

  1. Follow instructions in https://docs.gitlab.com/ee/user/group/custom_project_templates.html
  2. Go to /projects/new#create_from_template and choose the Group tab

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Peter Hegman

Merge request reports