Skip to content

GlPopover component not displaying in all rows of the Container Registry

Summary

After the work on #354494 (closed) the GlPopover component is not displaying when hovering on the rows of the container registry image list

Steps to reproduce

  1. On a project with container registry images and clean up policies enabled
  2. Hover on the information icon on any image with a number of tags that have been partially cleaned
  3. The popover component only shows for the first element of the list

Example Project

https://gitlab.com/gitlab-org/gitlab/container_registry

What is the current bug behavior?

The GlPopover component only shows for the first element of the image list.

Reason

This is happening because ids are not unique for gl-icon component & when gl-popover's target attribute always points to the first id

What is the expected correct behavior?

The GlPopover component should show up for all of the images

Relevant logs and/or screenshots

Screen_Shot_2022-05-17_at_11.27.21

Output of checks

This happens on GitLab.com

Implementation plan

Options:

  1. Pass an unique id from parent component to cleanup_status.vue which can be used as id and target
  2. Generate a unique id within cleanup_status.vue. Possible options: Date.toISOString, lodash.uniqueId
Edited by Rahul Chanila