Add latest changes from gitlab-org/gitlab@master

1 files changed, 24 insertions, 85 deletions

diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index af1d1f1b31a..16ecd5523d6 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -1,62 +1,41 @@
 import $ from 'jquery';
-import AccessDropdown from '~/projects/settings/access_dropdown';
-import axios from '~/lib/utils/axios_utils';
-import AccessorUtilities from '~/lib/utils/accessor';
-import Flash from '~/flash';
-import CreateItemDropdown from '~/create_item_dropdown';
-import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
+import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
+import CreateItemDropdown from '../create_item_dropdown';
+import AccessorUtilities from '../lib/utils/accessor';
 import { __ } from '~/locale';
 
 export default class ProtectedBranchCreate {
-  constructor(options) {
-    this.hasLicense = options.hasLicense;
-
+  constructor() {
     this.$form = $('.js-new-protected-branch');
     this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
     this.currentProjectUserDefaults = {};
     this.buildDropdowns();
-    this.$codeOwnerToggle = this.$form.find('.js-code-owner-toggle');
-    this.bindEvents();
-  }
-
-  bindEvents() {
-    if (this.hasLicense) {
-      this.$codeOwnerToggle.on('click', this.onCodeOwnerToggleClick.bind(this));
-    }
-    this.$form.on('submit', this.onFormSubmit.bind(this));
-  }
-
-  onCodeOwnerToggleClick() {
-    this.$codeOwnerToggle.toggleClass('is-checked');
   }
 
   buildDropdowns() {
     const $allowedToMergeDropdown = this.$form.find('.js-allowed-to-merge');
     const $allowedToPushDropdown = this.$form.find('.js-allowed-to-push');
+    const $protectedBranchDropdown = this.$form.find('.js-protected-branch-select');
 
     // Cache callback
     this.onSelectCallback = this.onSelect.bind(this);
 
     // Allowed to Merge dropdown
-    this[`${ACCESS_LEVELS.MERGE}_dropdown`] = new AccessDropdown({
+    this.protectedBranchMergeAccessDropdown = new ProtectedBranchAccessDropdown({
       $dropdown: $allowedToMergeDropdown,
-      accessLevelsData: gon.merge_access_levels,
+      data: gon.merge_access_levels,
       onSelect: this.onSelectCallback,
-      accessLevel: ACCESS_LEVELS.MERGE,
-      hasLicense: this.hasLicense,
     });
 
     // Allowed to Push dropdown
-    this[`${ACCESS_LEVELS.PUSH}_dropdown`] = new AccessDropdown({
+    this.protectedBranchPushAccessDropdown = new ProtectedBranchAccessDropdown({
       $dropdown: $allowedToPushDropdown,
-      accessLevelsData: gon.push_access_levels,
+      data: gon.push_access_levels,
       onSelect: this.onSelectCallback,
-      accessLevel: ACCESS_LEVELS.PUSH,
-      hasLicense: this.hasLicense,
     });
 
     this.createItemDropdown = new CreateItemDropdown({
-      $dropdown: this.$form.find('.js-protected-branch-select'),
+      $dropdown: $protectedBranchDropdown,
       defaultToggleLabel: __('Protected Branch'),
       fieldName: 'protected_branch[name]',
       onSelect: this.onSelectCallback,
@@ -64,66 +43,26 @@ export default class ProtectedBranchCreate {
     });
   }
 
-  // Enable submit button after selecting an option
+  // This will run after clicked callback
   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
+    // Enable submit button
+    const $branchInput = this.$form.find('input[name="protected_branch[name]"]');
+    const $allowedToMergeInput = this.$form.find(
+      'input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]',
+    );
+    const $allowedToPushInput = this.$form.find(
+      'input[name="protected_branch[push_access_levels_attributes][0][access_level]"]',
+    );
+    const completedForm = !(
+      $branchInput.val() &&
+      $allowedToMergeInput.length &&
+      $allowedToPushInput.length
     );
 
-    this.$form.find('input[type="submit"]').attr('disabled', toggle);
+    this.$form.find('input[type="submit"]').prop('disabled', completedForm);
   }
 
   static getProtectedBranches(term, callback) {
     callback(gon.open_branches);
   }
-
-  getFormData() {
-    const formData = {
-      authenticity_token: this.$form.find('input[name="authenticity_token"]').val(),
-      protected_branch: {
-        name: this.$form.find('input[name="protected_branch[name]"]').val(),
-        code_owner_approval_required: this.$codeOwnerToggle.hasClass('is-checked'),
-      },
-    };
-
-    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,
-          });
-        }
-      });
-
-      formData.protected_branch[`${accessLevel}_attributes`] = levelAttributes;
-    });
-
-    return formData;
-  }
-
-  onFormSubmit(e) {
-    e.preventDefault();
-
-    axios[this.$form.attr('method')](this.$form.attr('action'), this.getFormData())
-      .then(() => {
-        window.location.reload();
-      })
-      .catch(() => Flash(__('Failed to protect the branch')));
-  }
 }