Add managing protected branches as custom permission

What does this MR do and why?

It adds managing protected branches as a custom ability.

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

Screen_Recording_2024-08-12_at_18.09.50

How to set up and validate locally

1. Create a new member group, that enables "manage protected branch" ability, for self-managed on admin - Roles and permissions page, eg. http://gdk.test:3000/admin/application_settings/roles_and_permissions
2. Visit any group or project member pages such as http://gdk.test:3000/groups/flightjs/-/group_members and assign this custom role to a user
3. Impersonate this user and go to the project settings - repository page, eg. http://gdk.test:3000/flightjs/Flight/-/settings/repository
4. Make sure you see Branch rules and Protected branches section
5. Play around with protected branches

Related to #448823 (closed)

app/assets/javascripts/projects/settings/components/access_dropdown.vue

@@ -9,6 +9,7 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import { debounce, intersectionWith, groupBy, differenceBy, intersectionBy } from 'lodash';
+import glAbilitiesMixin from '~/vue_shared/mixins/gl_abilities_mixin';
 import { createAlert } from '~/alert';
 import { __, s__, n__ } from '~/locale';
 import { getUsers, getGroups, getDeployKeys } from '../api/access_dropdown_api';
@@ -35,6 +36,7 @@ export default {
     GlAvatar,
     GlSprintf,
   },
+  mixins: [glAbilitiesMixin()],
   props: {
     accessLevelsData: {
       type: Array,
@@ -187,6 +189,9 @@ export default {
         ...this.getDataForSave(LEVEL_TYPES.DEPLOY_KEY, 'deploy_key_id'),
       ];
     },
+    canAdminContainer() {
+      return this.glAbilities.adminProject || this.glAbilities.adminGroup;
+    },
   },
   watch: {
     query: debounce(function debouncedSearch() {
@@ -226,29 +231,45 @@ export default {
     focusInput() {
       this.$refs.search?.focusInput();
     },
+    getGroups() {
+      return this.groups.length
+        ? Promise.resolve({ data: this.groups })
+        : getGroups({ withProjectAccess: this.groupsWithProjectAccess });
+    },
     getData({ initial = false } = {}) {
       this.initialLoading = initial;
       this.loading = true;
 
       if (this.hasLicense) {
-        Promise.all([
-          getDeployKeys(this.query),
-          getUsers(this.query),
-          this.groups.length
-            ? Promise.resolve({ data: this.groups })
-            : getGroups({ withProjectAccess: this.groupsWithProjectAccess }),
-        ])
-          .then(([deployKeysResponse, usersResponse, groupsResponse]) => {
-            this.consolidateData(deployKeysResponse.data, usersResponse.data, groupsResponse.data);
-            this.setSelected({ initial });
-          })
-          .catch(() =>
-            createAlert({ message: __('Failed to load groups, users and deploy keys.') }),
-          )
-          .finally(() => {
-            this.initialLoading = false;
-            this.loading = false;
-          });
+        if (this.canAdminContainer) {
+          Promise.all([getDeployKeys(this.query), getUsers(this.query), this.getGroups()])
+            .then(([deployKeysResponse, usersResponse, groupsResponse]) => {
+              this.consolidateData(
+                deployKeysResponse.data,
+                usersResponse.data,
+                groupsResponse.data,
+              );
+              this.setSelected({ initial });
+            })
+            .catch(() =>
+              createAlert({ message: __('Failed to load groups, users and deploy keys.') }),
+            )
+            .finally(() => {
+              this.initialLoading = false;
+              this.loading = false;
+            });
+        } else if (this.glAbilities.adminProtectedBranch) {
+          Promise.all([getUsers(this.query), this.getGroups()])
+            .then(([usersResponse, groupsResponse]) => {
+              this.consolidateData(null, usersResponse.data, groupsResponse.data);
+              this.setSelected({ initial });
+            })
+            .catch(() => createAlert({ message: __('Failed to load groups and users.') }))
+            .finally(() => {
+              this.initialLoading = false;
+              this.loading = false;
+            });
+        }
       } else {
         getDeployKeys(this.query)
           .then((deployKeysResponse) => {
@@ -284,27 +305,31 @@ export default {
         }
       }
 
-      this.deployKeys = deployKeysResponse.map((response) => {
-        const {
-          id,
-          fingerprint,
-          fingerprint_sha256: fingerprintSha256,
-          title,
-          owner: { avatar_url, name, username },
-        } = response;
+      if (this.canAdminContainer) {
+        this.deployKeys = deployKeysResponse.map((response) => {
+          const {
+            id,
+            fingerprint,
+            fingerprint_sha256: fingerprintSha256,
+            title,
+            owner: { avatar_url, name, username },
+          } = response;
 
-        const availableFingerprint = fingerprintSha256 || fingerprint;
-        const shortFingerprint = `(${availableFingerprint.substring(0, 14)}...)`;
+          const availableFingerprint = fingerprintSha256 || fingerprint;
+          const shortFingerprint = `(${availableFingerprint.substring(0, 14)}...)`;
 
-        return {
-          id,
-          title: title.concat(' ', shortFingerprint),
-          avatar_url,
-          fullname: name,
-          username,
-          type: LEVEL_TYPES.DEPLOY_KEY,
-        };
-      });
+          return {
+            id,
+            title: title.concat(' ', shortFingerprint),
+            avatar_url,
+            fullname: name,
+            username,
+            type: LEVEL_TYPES.DEPLOY_KEY,
+          };
+        });
+      } else {
+        this.deployKeys = [];
+      }
     },
     setSelected({ initial } = {}) {
       if (initial) {