Bulk delete packages from the UI

Context

You can use the GitLab Package Registry to publish and share packages in a variety of formats. You can use the user interface to find, verify, and validate those packages. But what about when you have to delete them? Currently, the only way to do so is one at a time, which can be painfully inefficient.

Problem to solve

When I'm using the GitLab Package Registry, I need a way to delete many packages quickly, so that I can remove those pesky, unwanted packages and make it easier for myself and my teammates to find the correct package/version quickly and efficiently.

Screenshots

Package list page:

Intended users

• Delaney (Development Team Lead)
• Sasha (Software Developer)
• Devon (DevOps Engineer)

User experience goal

• Cleaning up the registry should be just as easy as clearing your email inbox.

Proposal

For Admin+, add the ability to quickly mark packages for deletion and delete them.

• User should be able to delete multiple packages in the list/table view.
• Add a header to the list/table and include a select all checkbox.
• Clicking one or more checkboxes displays the Delete all button at the top of the table/list view.
  • component:button type secondary, danger
  • Deselecting all checkboxes hides the button.
  • Clicking Delete all triggers the existing flow for deleting multiple packages.
  • Clicking anywhere outside the dropdown closes it.
• If the user filters the list by package format or name and clicks select all and delete, it should only select and delete the items on the filtered list.

Question

• Do we need a safety check when bulk deleting packages? For the container registry, we require confirmation.
• Can this be applied to both the project and group level view? Or do we need separate issues?

Permissions and Security

• Deleting a package requires Admin+ permissions

Documentation

• Create a speed run demonstrating the behavior for the release post (PM)
• Update https://docs.gitlab.com/ee/user/packages/package_registry/#delete-a-package to include how to delete several packages at once

Data

• Measure the number of clicks of select all, delete, and confirm delete using Snowplow.

Implementation guide

• Use left-action slot of list-row component within https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue#L93 to render GlCheckbox
• Use deletePackages mutation to handle deletion
• Add select all functionality which is applicable only for a single page. max 20 items
• Show modal for confirmation
• Track clicks as per data section above

Links / references

• Similar issue for the container registry: Improved UX for bulk deleting container image tags (#336934 - closed)
• Similar implementation for package assets: Bulk delete package files (!93169 - merged)