Skip to content

Different colors for project identicons

Dannyel Cardoso da Fonseca requested to merge dannyelcf/gitlab:369555-dcf-Provide-project-id-to-ProjectAvatar into master

What does this MR do and why?

Provide project-id to ProjectAvatar in all uses of this component that lack them. (Related to !94025 (merged)).

image

Side changes

  1. It was necessary to touch on the backend to expose the project-id in the integration overrides endpoint;
  2. It was refactored ProjectAvatar component to support gid (GraphQL ID) format in projectId props. It catched this scenario in the Security Dashboard.

Screenshots or screen recordings

Without project-id, the avatar is rendered in red.

Vue File Screen Before After
app /assets /javascripts /ide /components /ide_project_header.vue Project -> WebIDE image image
app /assets /javascripts /integrations /overrides /components /integration_overrides.vue Admin -> Integrations -> Projects using custom settings image image
app/assets/javascripts /vue_shared /components /project_selector /project_list_item.vue Environments Dashboard (EE Feature) image image
app/assets/javascripts /vue_shared /components /project_selector /project_list_item.vue Operations Dashboard (EE Feature) image image
ee /app /assets /javascripts /environments_dashboard /components /dashboard /project_header.vue Environments Dashboard (EE Feature) image image
ee /app /assets /javascripts /operations /components /dashboard /project_header.vue Operations Dashboard (EE Feature) image image
ee /app /assets /javascripts /related_items_tree /components /create_issue_form.vue Epics -> &Epic -> Child Issues and Epics (EE Feature) image image
ee /app /assets /javascripts /security_dashboard /components /instance /project_list.vue Security Dashboard (EE Feature) image image
ee /app /assets /javascripts /usage_quotas /pipelines /components /project_list.vue Group -> Usage Quotes -> Pipeline (EE Feature) image image
ee /app /assets /javascripts /usage_quotas /storage /components /collapsible_project_storage_detail.vue Usage Quotes Storage (EE Feature) image image

How to set up and validate locally

  1. Run gdk start.
  2. Access http://localhost:3000/.
  3. Go to the screens mentioned above.

MR acceptance checklist

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

Related to #369555 (closed)

Edited by Olena Horal-Koretska

Merge request reports