Adds UI elements for deprecated packages
What does this MR do and why?
We added support for npm deprecate, so it'd be good to reflect that on the UI.
Although support exists only for npm
package format atm, the frontend implementation ignores that since the backend plans to return this value via the existing status
field, see decision.
Based on ux input,
- Adds badge on package list page
- Adds warning alert on package detail page
Changelog: added
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.
After deprecation:
List page | Details page |
---|---|
How to set up and validate locally
- Create an npm package, follow steps in https://gitlab.com/gitlab-org/ci-cd/package-stage/package/-/wikis/Packages-Tips-&-Tricks#how-to-create-a-new-package-artificially
- Apply patch since backend is still being worked on in #474231 (closed):
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
index c5af8d304d10..3ce9f82cd0ba 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
@@ -92,7 +92,7 @@ export default {
return this.packageEntity.protectionRuleExists;
},
showDeprecatedBadge() {
- return this.packageEntity.status === PACKAGE_DEPRECATED_STATUS;
+ return this.packageEntity.status !== PACKAGE_DEPRECATED_STATUS;
},
nonDefaultRow() {
return this.packageEntity.status && this.packageEntity.status !== PACKAGE_DEFAULT_STATUS;
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
index 1d775728f353..d406999535af 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
@@ -194,7 +194,7 @@ export default {
return this.packageType === PACKAGE_TYPE_NUGET;
},
showDeprecationAlert() {
- return this.packageEntity.status === PACKAGE_DEPRECATED_STATUS;
+ return this.packageEntity.status !== PACKAGE_DEPRECATED_STATUS;
},
showFiles() {
return this.packageType !== PACKAGE_TYPE_COMPOSER;
- Visit
Group > Deploy > Package registry
&Project > Deploy > Package registry
This should show the list page & it should show adeprecated
badge. - Click on the package with the
deprecated
badge & confirm that alert is visible on the package details page.
Related to #474231 (closed)
Edited by Rahul Chanila