Protected packages + containers: Badge "protected" as reusable component
-
Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA
What does this MR do and why?
- Extracting the protected badge into a reusable component.
- These changes are based on a comment from
@seggenbreger, see !158600 (comment 2032445258)
To identify which existing vue components (or pages) could benefit from the new resuable component "ProtectedBadge", we looked for occurrences of the string literal "protected". We found the following cases:
-
https://gitlab.com/gitlab-org/gitlab/-/blob/533ed762d66e602e8f2ef32755bfcaca8be2bbbb/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/details_header.vue => Replaced with resuable component "ProtectedBadge" 👍 , see !161917 (diffs) -
https://gitlab.com/gitlab-org/gitlab/-/blob/533ed762d66e602e8f2ef32755bfcaca8be2bbbb/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue => Replaced with resuable component "ProtectedBadge" 👍 , see !161917 (diffs) -
https://gitlab.com/gitlab-org/gitlab/-/blob/533ed762d66e602e8f2ef32755bfcaca8be2bbbb/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue => Replaced with resuable component "ProtectedBadge" 👍 , see !161917 (diffs) -
https://gitlab.com/gitlab-org/gitlab/-/blob/533ed762d66e602e8f2ef32755bfcaca8be2bbbb/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue => Replaced with resuable component "ProtectedBadge" 👍 , see !161917 (diffs) -
https://gitlab.com/gitlab-org/gitlab/-/blob/533ed762d66e602e8f2ef32755bfcaca8be2bbbb/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue => Replaced with resuable component "ProtectedBadge" 👍 , see !161917 (diffs) -
https://gitlab.com/gitlab-community/gitlab/-/blob/e8898003691c267a562a868b00a9276aa3938bbf/app/assets/javascripts/ci/runner/components/runner_form_fields.vue#L156 => the element "Protected" is not a badge -
https://gitlab.com/gitlab-community/gitlab/-/blob/448783deded76710ea5190c3d869541a190a310a/app/assets/javascripts/ci/runner/components/runner_details.vue#L53 => the element "Protected" is not a badge -
https://gitlab.com/gitlab-community/gitlab/-/blob/d1e092fb6967cc82d5e8734790598fc723b3b27d/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue#L190 => the "Protected" badge in this component has other props than the reusable component (blue background, instead of grey), see screenshot => This change could be done in a separate MR as this requires also UX discussion -
https://gitlab.com/gitlab-community/gitlab/-/blob/c34af890dc11ffb54fb1257ae2c50306f40b6bf1/app/assets/javascripts/environments/components/environment_item.vue#L623 => the "Protected" badge in this component has other props than the reusable component ( variant="success"instead ofvariant="neutral") => This change could be done in a separate MR as this requires also UX discussion
Note: In order to determine the other potential When looking for other occurrences of the protected https://gitlab.com/gitlab-community/gitlab/-/blob/d1e092fb6967cc82d5e8734790598fc723b3b27d/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue#L190
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
Luckily (or by intention) there are no frontend changes because we just replaced an existing component. However, feel free to check if this is the case.
How to set up and validate locally
Related to #467718 (closed)