Container Registry cleanup preview MVC: show list of items to be deleted

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Refinement

There are questions as comments on this issue, please review the comments below and leave your thoughts

Context

This issue is part of an epic for the MVC solution for Container Registry cleanup policies. The epic has more details about the customer problem and scope of this MVC.

Problem to solve

When setting cleanup policies for the container registry, it's not possible preview how the policies you have set will be executed. The user should be able to test and verify the expiration policy settings without waiting for another tag expiration loop.

Designs

• Figma file for epic, including responsive designs
• Impression in design management

Scope of this issue

Description	Image
Underneath cleanup policy UI, the user can select an image repository from a dropdown of image repositories. Note I'm not sure if a combobox component is available in the GitLab UI yet, but we could consider using a listbox with a search, similar to when you assign someone to an issue. Also, we could simplify the implementation by removing the search functionality if it adds complexity, because we know 99% of users have less than 20 image repositories per project (source)
When the user selects a different image repository from the dropdown, the preview reloads automatically	n/a
When the user edits the cleanup form, the table is hidden with an option to reload the table (link to gif, Figma prototype)
When the list is loading, we show a skeleton loader.
🚨 not final 🚨 We rate limit the requests to compute the preview result as a preventative measure against malicious users or scripts. A request can only be made every 3 seconds. If too many requests happen, the UI stays in a loading state until the time limit has passed, then the request is made.
Backend returns max of 100 results of tags that will be deleted by the cleanup policy. The UI shows only 20 until we add pagination in a follow-up issue. (Limit of 20 is following of Pajamas guidelines)	n/a
If there are more tags that will be deleted than what we show in the UI, we display an alert informing the user of this
If we show all tags that will be deleted on the UI, the alert is not shown	n/a
The results include the name of the tag, the published date and time, and the size
If the image repository has more than 100 tags, but the cleanup preview indicates that no tags will be deleted by the rules, we inform the user that no tags will be deleted, but also warn that the preview is incomplete.
If the image repository has less than 100 tags and the cleanup preview indicates that no tags will be deleted by the rules, we inform the user
If the user navigates away without saving the form, they are warned with an alert. We could use the browser alert for this similar to pipeline editor (see gif)