Protected packages: Show protection info in package detail page

What does this MR do and why?

• Add badge protected in the details page of a certain package similar to !141134 (merged)
• This feature is behind the feature flag :packages_protected_packages that enable / disable the protected label

🛠 with ❤ at Siemens

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.

MR Checklist (@gerardo-navarro)

• Changelog entry added, if necessary
• Documentation created/updated via this MR
• Documentation reviewed by technical writer or follow-up review issue created
• Tests added for this feature/bug
• Tested in all supported browsers
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides
• Conforms to the javascript style guides
• Conforms to the database guides

Screenshots or screen recordings

As explained in the description, this MR adds two badges to the package detail page, see screenshots below.

Before	After

How to set up and validate locally

1. Go to the package registry setting of a project: http://gdk.test:3000/flightjs/Flight/-/settings/packages_and_registries
2. Create a new package protection rule with package name pattern @flightjs/npm_package_4d4b* (<= this will match seeded packages that are already in the package registry for this project)
3. Go to the package registry of the project: http://gdk.test:3000/flightjs/Flight/-/packages
4. Go the package detail page of the package npm_package_4d4b1a18af8779a6212365b36e11af50: http://gdk.test:3000/flightjs/Flight/-/packages/25
5. You should see the badge protected

Related to #437928