Protected packages: Show protection rules in project setting ui

What does this MR do and why?

• This frontend -related MR uses the GraphQL API to interact with the backend
• This MR is part of the epic "protected packages", see Identify packages as protected to prevent accid... (&5574)
• This MR just focusses on:
  • a) listing the existing package protection rules of this project
• Form for creating, updating and deleting protection rules will be part of follow-up MRs

🛠 with ❤ at Siemens

Screenshots or screen recordings

This MR just adds the table showing the current package protection rules for this project, see the screenshot below.

How to set up and validate locally

1. In rails console enable the experiment fully

Feature.enable(:packages_protected_packages)

2. Go to http://gdk.test:3000/flightjs/Flight/-/settings/packages_and_registries
3. See the list of protection rules

Todos

• Configure vite with gdk to enable faster build process and development, see https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/configuration.md#vite-settings
• Add tests for the new vue app
• Extracts the external strings from constants.js to inside the component
• Adjust the description before final review
• Add pagination for 10 items (so that we can keep the content of this setting on one page)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.
  • 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

Related to #413641