WIP: Add Protected Refs classes collection to share code between Protected Branches and Protected Tags feature

What does this MR do?

With addition of Protected Tags with !10356 (merged), there has been a lot of duplication of frontend code between Protected Branches and Protected Tag feature, this MR reduces duplication with following approach.

• Convert classes under protected_branches to pure ES6.
• Create bundle under app/assets/javascripts/protected_refs, combining common code between protected_branches and protected_tags.
• Create partials under app/views/shared/protected_refs, which can be used across protected_branches and protected_tags.
• Add tests for protected_refs bundle.
• Update tests for protected_branches JS bundle.
• Update tests for protected_tags JS bundle.
• Port changes to EE, create MR and cross-link.
• Verify specs for Protected Branches and Protected Tags feature.

Why was this MR needed?

This MR reduces lot of duplicate code and reduces ~"technical debt".

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

#18193 (closed)

#18471 (closed)

Closes #31031 (closed)