Implements update UI for container tag protection rule

What does this MR do and why?

Implements update UI for container tag protection rule

  • Adds edit icon button next to the delete icon button for each rule row.
  • When clicked, trigger the drawer & render edit form.
  • Pass selected rule to edit form & render form fields with value set to passed in rule prop.
  • Modify submit button based on form state.
  • Calls update graphql mutation on form submit.
  • Show toast when mutation succeeds.

Fixes failing vue 3 tests

.setValue does not work on a select element, updated to use .setSelected instead as per https://v1.test-utils.vuejs.org/api/wrapper/setselected.html

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

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

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before With edit icon On clicking edit icon
Screenshot_2025-01-17_at_5.19.13_pm Screenshot_2025-01-24_at_12.00.18_am Screenshot_2025-01-24_at_12.00.37_am

How to set up and validate locally

  1. Setup container registry.

  2. Enable the metadata database https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/howto/registry.md#metadata-database

    • Alternatively, you can apply the patch:

       diff --git a/app/helpers/packages_helper.rb b/app/helpers/packages_helper.rb
       index c35ad19155f6..ccad3b0c195e 100644
       --- a/app/helpers/packages_helper.rb
       +++ b/app/helpers/packages_helper.rb
       @@ -143,10 +143,7 @@ def settings_data(project)
           cleanup_settings_data(project).merge(
             show_container_registry_settings: show_container_registry_settings(project).to_s,
             show_package_registry_settings: show_package_registry_settings(project).to_s,
       -      is_container_registry_metadata_database_enabled: (
       -        show_container_registry_settings(project) &&
       -          ContainerRegistry::GitlabApiClient.supports_gitlab_api?
       -      ).to_s,
       +      is_container_registry_metadata_database_enabled: true.to_s,
             cleanup_settings_path: cleanup_image_tags_project_settings_packages_and_registries_path(project)
           )
         end
  3. Enable feature flag

    Feature.enable(:container_registry_protected_tags)
  4. Visit Project > Settings > Packages and registries.

  5. Expand Container registry section

  6. Create container registry protection rules.

  7. Click the edit icon & confirm that rules can be edited.

  8. Confirm that validations & error messages are displayed.

  9. Upon updating, confirm that the rule is updated in the table.

Related to #499871

Edited by Rahul Chanila

Merge request reports

Loading