Skip to content

Update registry_list & list_item to use unordered list

Rahul Chanila requested to merge rchanila-registry-list-item-ul-li into master

What does this MR do and why?

The main changes are in the structure of the registry_list & list_item code.

The original code used divs to structure the elements, while the new code uses unordered lists (ul) and list items (li).

This change improves the accessibility of the code and makes it easier for screen readers to navigate the content.

Additionally, some of the CSS classes have been modified to improve the visual appearance of the components.

Closes #462956 (closed)

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

No change in UI.

How to set up and validate locally

component is reused in multiple places, so while there is no change in UI, it would be good to test their usages:

Package Registry

List & Details

  1. rails c - Open the rails console
  2. p = Project.find(1) - Find one of your GDK projects. Project id can be found on the project home page
  3. FactoryBot.create_list(:npm_package, 10, project: p, name: p.name) - Creates 10 npm packages
  4. Add this line if above fails during the creation
     def fixture_file_upload(*args, **kwargs)
       Rack::Test::UploadedFile.new(*args, **kwargs)
     end
  5. Visit groups & projects package list page.
  6. visit package registry detail page Other versions tab via groups & projects package list page

Container Registry

Images list

  1. Setup & enable Container Registry https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/howto/registry.md
  2. Follow steps in https://gitlab.com/gitlab-org/ci-cd/package-stage/package/-/wikis/Packages-Tips-&-Tricks#how-to-add-images-with-tags-quickly-to-the-registry
  3. To see pagination, run the following in the terminal
    $ ./publish.sh <project-path> 2 10 127.0.0.1:5000 # creates 10 images with 2 tags each
  4. Visit the container registry list page for the project

Tags list

  1. After following previous instructions, visit the container registry list page for the project
  2. Clicking one of the images should take you the tags list(details) page

Dependency proxy

  1. Enable dependency proxy on GDK.

  2. Visit Gitlab-org Group > Packages and registries > Dependency proxy

  3. Assuming 172.16.123.1:3000/gitlab-org/dependency_proxy/containers is the Dependency proxy image prefix on the page, run the following on the terminal:

    versions=("latest" "1.33.1" "1.33" "1.32.1"); proxy_url="172.16.123.1:3000/gitlab-org/dependency_proxy/containers"; for version in "${versions[@]}"; do docker pull "${proxy_url}/busybox:${version}"; done
Edited by Rahul Chanila

Merge request reports