Add latest changes from gitlab-org/gitlab@master

5 files changed, 94 insertions, 233 deletions

diff --git a/app/assets/javascripts/protected_branches/constants.js b/app/assets/javascripts/protected_branches/constants.js
deleted file mode 100644
index a17ae6811b7..00000000000
--- a/app/assets/javascripts/protected_branches/constants.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export const ACCESS_LEVELS = {
-  MERGE: 'merge_access_levels',
-  PUSH: 'push_access_levels',
-};
-
-export const LEVEL_TYPES = {
-  ROLE: 'role',
-  USER: 'user',
-  GROUP: 'group',
-};
-
-export const LEVEL_ID_PROP = {
-  ROLE: 'access_level',
-  USER: 'user_id',
-  GROUP: 'group_id',
-};
-
-export const ACCESS_LEVEL_NONE = 0;
diff --git a/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js
new file mode 100644
index 00000000000..41e295387ae
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js
@@ -0,0 +1,28 @@
+import { __ } from '~/locale';
+
+export default class ProtectedBranchAccessDropdown {
+  constructor(options) {
+    this.options = options;
+    this.initDropdown();
+  }
+
+  initDropdown() {
+    const { $dropdown, data, onSelect } = this.options;
+    $dropdown.glDropdown({
+      data,
+      selectable: true,
+      inputId: $dropdown.data('inputId'),
+      fieldName: $dropdown.data('fieldName'),
+      toggleLabel(item, $el) {
+        if ($el.is('.is-active')) {
+          return item.text;
+        }
+        return __('Select');
+      },
+      clicked(options) {
+        options.e.preventDefault();
+        onSelect();
+      },
+    });
+  }
+}
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')));
-  }
 }
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js b/app/assets/javascripts/protected_branches/protected_branch_edit.js
index 239bd8e543a..08d8c9919dd 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js
@@ -1,165 +1,78 @@
-import { find } from 'lodash';
-import AccessDropdown from '~/projects/settings/access_dropdown';
-import axios from '~/lib/utils/axios_utils';
-import Flash from '~/flash';
-import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
+import flash from '../flash';
+import axios from '../lib/utils/axios_utils';
+import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
 import { __ } from '~/locale';
 
 export default class ProtectedBranchEdit {
   constructor(options) {
-    this.hasLicense = options.hasLicense;
-
-    this.$wraps = {};
-    this.hasChanges = false;
     this.$wrap = options.$wrap;
     this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
     this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
-    this.$codeOwnerToggle = this.$wrap.find('.js-code-owner-toggle');
-
-    this.$wraps[ACCESS_LEVELS.MERGE] = this.$allowedToMergeDropdown.closest(
-      `.${ACCESS_LEVELS.MERGE}-container`,
-    );
-    this.$wraps[ACCESS_LEVELS.PUSH] = this.$allowedToPushDropdown.closest(
-      `.${ACCESS_LEVELS.PUSH}-container`,
-    );
+    this.onSelectCallback = this.onSelect.bind(this);
 
     this.buildDropdowns();
-    this.bindEvents();
-  }
-
-  bindEvents() {
-    if (this.hasLicense) {
-      this.$codeOwnerToggle.on('click', this.onCodeOwnerToggleClick.bind(this));
-    }
-  }
-
-  onCodeOwnerToggleClick() {
-    this.$codeOwnerToggle.toggleClass('is-checked');
-    this.$codeOwnerToggle.prop('disabled', true);
-
-    const formData = {
-      code_owner_approval_required: this.$codeOwnerToggle.hasClass('is-checked'),
-    };
-
-    this.updateCodeOwnerApproval(formData);
-  }
-
-  updateCodeOwnerApproval(formData) {
-    axios
-      .patch(this.$wrap.data('url'), {
-        protected_branch: formData,
-      })
-      .then(() => {
-        this.$codeOwnerToggle.prop('disabled', false);
-      })
-      .catch(() => {
-        Flash(__('Failed to update branch!'));
-      });
   }
 
   buildDropdowns() {
     // Allowed to merge dropdown
-    this[`${ACCESS_LEVELS.MERGE}_dropdown`] = new AccessDropdown({
-      accessLevel: ACCESS_LEVELS.MERGE,
-      accessLevelsData: gon.merge_access_levels,
+    this.protectedBranchAccessDropdown = new ProtectedBranchAccessDropdown({
       $dropdown: this.$allowedToMergeDropdown,
-      onSelect: this.onSelectOption.bind(this),
-      onHide: this.onDropdownHide.bind(this),
-      hasLicense: this.hasLicense,
+      data: gon.merge_access_levels,
+      onSelect: this.onSelectCallback,
     });
 
     // Allowed to push dropdown
-    this[`${ACCESS_LEVELS.PUSH}_dropdown`] = new AccessDropdown({
-      accessLevel: ACCESS_LEVELS.PUSH,
-      accessLevelsData: gon.push_access_levels,
+    this.protectedBranchAccessDropdown = new ProtectedBranchAccessDropdown({
       $dropdown: this.$allowedToPushDropdown,
-      onSelect: this.onSelectOption.bind(this),
-      onHide: this.onDropdownHide.bind(this),
-      hasLicense: this.hasLicense,
+      data: gon.push_access_levels,
+      onSelect: this.onSelectCallback,
     });
   }
 
-  onSelectOption() {
-    this.hasChanges = true;
-  }
-
-  onDropdownHide() {
-    if (!this.hasChanges) {
-      return;
-    }
-
-    this.hasChanges = true;
-    this.updatePermissions();
-  }
+  onSelect() {
+    const $allowedToMergeInput = this.$wrap.find(
+      `input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`,
+    );
+    const $allowedToPushInput = this.$wrap.find(
+      `input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`,
+    );
 
-  updatePermissions() {
-    const formData = Object.keys(ACCESS_LEVELS).reduce((acc, level) => {
-      const accessLevelName = ACCESS_LEVELS[level];
-      const inputData = this[`${accessLevelName}_dropdown`].getInputData(accessLevelName);
-      acc[`${accessLevelName}_attributes`] = inputData;
+    // Do not update if one dropdown has not selected any option
+    if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return;
 
-      return acc;
-    }, {});
+    this.$allowedToMergeDropdown.disable();
+    this.$allowedToPushDropdown.disable();
 
     axios
       .patch(this.$wrap.data('url'), {
-        protected_branch: formData,
+        protected_branch: {
+          merge_access_levels_attributes: [
+            {
+              id: this.$allowedToMergeDropdown.data('accessLevelId'),
+              access_level: $allowedToMergeInput.val(),
+            },
+          ],
+          push_access_levels_attributes: [
+            {
+              id: this.$allowedToPushDropdown.data('accessLevelId'),
+              access_level: $allowedToPushInput.val(),
+            },
+          ],
+        },
       })
-      .then(({ data }) => {
-        this.hasChanges = false;
-
-        Object.keys(ACCESS_LEVELS).forEach(level => {
-          const accessLevelName = ACCESS_LEVELS[level];
-
-          // The data coming from server will be the new persisted *state* for each dropdown
-          this.setSelectedItemsToDropdown(data[accessLevelName], `${accessLevelName}_dropdown`);
-        });
+      .then(() => {
         this.$allowedToMergeDropdown.enable();
         this.$allowedToPushDropdown.enable();
       })
       .catch(() => {
         this.$allowedToMergeDropdown.enable();
         this.$allowedToPushDropdown.enable();
-        Flash(__('Failed to update branch!'));
-      });
-  }
-
-  setSelectedItemsToDropdown(items = [], dropdownName) {
-    const itemsToAdd = items.map(currentItem => {
-      if (currentItem.user_id) {
-        // Do this only for users for now
-        // get the current data for selected items
-        const selectedItems = this[dropdownName].getSelectedItems();
-        const currentSelectedItem = find(selectedItems, {
-          user_id: currentItem.user_id,
-        });
 
-        return {
-          id: currentItem.id,
-          user_id: currentItem.user_id,
-          type: LEVEL_TYPES.USER,
-          persisted: true,
-          name: currentSelectedItem.name,
-          username: currentSelectedItem.username,
-          avatar_url: currentSelectedItem.avatar_url,
-        };
-      } else if (currentItem.group_id) {
-        return {
-          id: currentItem.id,
-          group_id: currentItem.group_id,
-          type: LEVEL_TYPES.GROUP,
-          persisted: true,
-        };
-      }
-
-      return {
-        id: currentItem.id,
-        access_level: currentItem.access_level,
-        type: LEVEL_TYPES.ROLE,
-        persisted: true,
-      };
-    });
-
-    this[dropdownName].setSelectedItems(itemsToAdd);
+        flash(
+          __('Failed to update branch!'),
+          'alert',
+          document.querySelector('.js-protected-branches-list'),
+        );
+      });
   }
 }
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit_list.js b/app/assets/javascripts/protected_branches/protected_branch_edit_list.js
index 6ab9a126e76..10253c0febc 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit_list.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit_list.js
@@ -13,7 +13,6 @@ export default class ProtectedBranchEditList {
     this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => {
       new ProtectedBranchEdit({
         $wrap: $(el),
-        hasLicense: false,
       });
     });
   }