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

1. 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
2. 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;

3. Visit Group > Deploy > Package registry & Project > Deploy > Package registry This should show the list page & it should show a deprecated badge.
4. Click on the package with the deprecated badge & confirm that alert is visible on the package details page.

Related to #474231 (closed)

app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue

@@ -282,7 +282,7 @@ export default {
     :svg-height="null"
   />
   <div v-else-if="projectName" class="packages-app">
-    <gl-alert v-if="showDeprecationAlert" :dismissible="false" :sticky="true" variant="warning">
+    <gl-alert v-if="showDeprecationAlert" :dismissible="false" variant="warning">
       {{ s__('PackageRegistry|This package version has been deprecated.') }}
     </gl-alert>
     <package-title :package-entity="packageEntity">