1 files changed, 51 insertions, 50 deletions

diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index a11201627a4..49c55efca7b 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -4,16 +4,15 @@ import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import AccessorUtilities from '~/lib/utils/accessor';
 import axios from '~/lib/utils/axios_utils';
 import { __, s__ } from '~/locale';
-import AccessDropdown from '~/projects/settings/access_dropdown';
 import { initToggle } from '~/toggles';
 import { expandSection } from '~/settings_panels';
 import { scrollToElement } from '~/lib/utils/common_utils';
+import { initAccessDropdown } from '~/projects/settings/init_access_dropdown';
 import {
   BRANCH_RULES_ANCHOR,
   PROTECTED_BRANCHES_ANCHOR,
   IS_PROTECTED_BRANCH_CREATED,
   ACCESS_LEVELS,
-  LEVEL_TYPES,
 } from './constants';
 
 export default class ProtectedBranchCreate {
@@ -21,14 +20,17 @@ export default class ProtectedBranchCreate {
     this.hasLicense = options.hasLicense;
     this.$form = $('.js-new-protected-branch');
     this.isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
-    this.currentProjectUserDefaults = {};
-    this.buildDropdowns();
-
     this.forcePushToggle = initToggle(document.querySelector('.js-force-push-toggle'));
-
     if (this.hasLicense) {
       this.codeOwnerToggle = initToggle(document.querySelector('.js-code-owner-toggle'));
     }
+
+    this.selectedItems = {
+      [ACCESS_LEVELS.PUSH]: [],
+      [ACCESS_LEVELS.MERGE]: [],
+    };
+    this.initDropdowns();
+
     this.showSuccessAlertIfNeeded();
     this.bindEvents();
   }
@@ -37,29 +39,26 @@ export default class ProtectedBranchCreate {
     this.$form.on('submit', this.onFormSubmit.bind(this));
   }
 
-  buildDropdowns() {
-    const $allowedToMergeDropdown = this.$form.find('.js-allowed-to-merge');
-    const $allowedToPushDropdown = this.$form.find('.js-allowed-to-push');
-
+  initDropdowns() {
     // Cache callback
     this.onSelectCallback = this.onSelect.bind(this);
 
     // Allowed to Merge dropdown
-    this[`${ACCESS_LEVELS.MERGE}_dropdown`] = new AccessDropdown({
-      $dropdown: $allowedToMergeDropdown,
-      accessLevelsData: gon.merge_access_levels,
-      onSelect: this.onSelectCallback,
+    const allowedToMergeSelector = 'js-allowed-to-merge';
+    this[`${ACCESS_LEVELS.MERGE}_dropdown`] = this.buildDropdown({
+      selector: allowedToMergeSelector,
       accessLevel: ACCESS_LEVELS.MERGE,
-      hasLicense: this.hasLicense,
+      accessLevelsData: gon.merge_access_levels,
+      testId: 'allowed-to-merge-dropdown',
     });
 
     // Allowed to Push dropdown
-    this[`${ACCESS_LEVELS.PUSH}_dropdown`] = new AccessDropdown({
-      $dropdown: $allowedToPushDropdown,
-      accessLevelsData: gon.push_access_levels,
-      onSelect: this.onSelectCallback,
+    const allowedToPushSelector = 'js-allowed-to-push';
+    this[`${ACCESS_LEVELS.PUSH}_dropdown`] = this.buildDropdown({
+      selector: allowedToPushSelector,
       accessLevel: ACCESS_LEVELS.PUSH,
-      hasLicense: this.hasLicense,
+      accessLevelsData: gon.push_access_levels,
+      testId: 'allowed-to-push-dropdown',
     });
 
     this.createItemDropdown = new CreateItemDropdown({
@@ -71,14 +70,40 @@ export default class ProtectedBranchCreate {
     });
   }
 
+  buildDropdown({ selector, accessLevel, accessLevelsData, testId }) {
+    const [el] = this.$form.find(`.${selector}`);
+    if (!el) return undefined;
+
+    const projectId = gon.current_project_id;
+    const dropdown = initAccessDropdown(el, {
+      toggleClass: `${selector} gl-form-input-lg`,
+      hasLicense: this.hasLicense,
+      searchEnabled: el.dataset.filter !== undefined,
+      showUsers: projectId !== undefined,
+      block: true,
+      accessLevel,
+      accessLevelsData,
+      testId,
+    });
+
+    dropdown.$on('select', (selected) => {
+      this.selectedItems[accessLevel] = selected;
+      this.onSelectCallback();
+    });
+
+    dropdown.$on('shown', () => {
+      this.createItemDropdown.close();
+    });
+
+    return dropdown;
+  }
+
   // Enable submit button after selecting an option
   onSelect() {
-    const $allowedToMerge = this[`${ACCESS_LEVELS.MERGE}_dropdown`].getSelectedItems();
-    const $allowedToPush = this[`${ACCESS_LEVELS.PUSH}_dropdown`].getSelectedItems();
     const toggle = !(
       this.$form.find('input[name="protected_branch[name]"]').val() &&
-      $allowedToMerge.length &&
-      $allowedToPush.length
+      this.selectedItems[ACCESS_LEVELS.MERGE].length &&
+      this.selectedItems[ACCESS_LEVELS.PUSH].length
     );
 
     this.$form.find('button[type="submit"]').attr('disabled', toggle);
@@ -137,32 +162,8 @@ export default class ProtectedBranchCreate {
       },
     };
 
-    Object.keys(ACCESS_LEVELS).forEach((level) => {
-      const accessLevel = ACCESS_LEVELS[level];
-      const selectedItems = this[`${accessLevel}_dropdown`].getSelectedItems();
-      const levelAttributes = [];
-
-      selectedItems.forEach((item) => {
-        if (item.type === LEVEL_TYPES.USER) {
-          levelAttributes.push({
-            user_id: item.user_id,
-          });
-        } else if (item.type === LEVEL_TYPES.ROLE) {
-          levelAttributes.push({
-            access_level: item.access_level,
-          });
-        } else if (item.type === LEVEL_TYPES.GROUP) {
-          levelAttributes.push({
-            group_id: item.group_id,
-          });
-        } else if (item.type === LEVEL_TYPES.DEPLOY_KEY) {
-          levelAttributes.push({
-            deploy_key_id: item.deploy_key_id,
-          });
-        }
-      });
-
-      formData.protected_branch[`${accessLevel}_attributes`] = levelAttributes;
+    Object.values(ACCESS_LEVELS).forEach((level) => {
+      formData.protected_branch[`${level}_attributes`] = this.selectedItems[level];
     });
 
     return formData;