Adds UI elements for deprecated packages

Review changes
Download
Patches
Plain diff

Merged Adds UI elements for deprecated packages

474231-ui-display-a-badge-when-the-npm-package-is-deprecated into master

Overview 17
Commits 1
Pipelines 7
Changes 6

All threads resolved!

Merged Rahul Chanila requested to merge 474231-ui-display-a-badge-when-the-npm-package-is-deprecated into master 4 months ago

Overview 17
Commits 1
Pipelines 7
Changes -

All threads resolved!

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 a deprecated badge.
Click on the package with the deprecated badge & confirm that alert is visible on the package details page.

Related to #474231 (closed)

Edited 4 months ago by Rahul Chanila