Move in CE-js for protected branches.

And move the EE-specifics into a separate bundle

app/assets/javascripts/protected_branches/ee/protected_branch_create.js

+/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, guard-for-in, no-restricted-syntax, max-len */
+/* global ProtectedBranchDropdown */
+/* global Flash */
+
+(global => {
+  global.gl = global.gl || {};
+
+  const ACCESS_LEVELS = {
+    MERGE: 'merge_access_levels',
+    PUSH: 'push_access_levels',
+  };
+
+  const LEVEL_TYPES = {
+    ROLE: 'role',
+    USER: 'user',
+    GROUP: 'group'
+  };
+
+  gl.ProtectedBranchCreate = class {
+    constructor() {
+      this.$wrap = this.$form = $('#new_protected_branch');
+      this.buildDropdowns();
+      this.$branchInput = this.$wrap.find('input[name="protected_branch[name]"]');
+      this.bindEvents();
+    }
+
+    bindEvents() {
+      this.$form.on('submit', this.onFormSubmit.bind(this));
+    }
+
+    buildDropdowns() {
+      const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
+      const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+
+      // Cache callback
+      this.onSelectCallback = this.onSelect.bind(this);
+
+      // Allowed to Merge dropdown
+      this[`${ACCESS_LEVELS.MERGE}_dropdown`] = new gl.ProtectedBranchAccessDropdown({
+        $dropdown: $allowedToMergeDropdown,
+        accessLevelsData: gon.merge_access_levels,
+        onSelect: this.onSelectCallback,
+        accessLevel: ACCESS_LEVELS.MERGE
+      });
+
+      // Allowed to Push dropdown
+      this[`${ACCESS_LEVELS.PUSH}_dropdown`] = new gl.ProtectedBranchAccessDropdown({
+        $dropdown: $allowedToPushDropdown,
+        accessLevelsData: gon.push_access_levels,
+        onSelect: this.onSelectCallback,
+        accessLevel: ACCESS_LEVELS.PUSH
+      });
+
+      // Protected branch dropdown
+      new window.ProtectedBranchDropdown({
+        $dropdown: this.$wrap.find('.js-protected-branch-select'),
+        onSelect: this.onSelectCallback
+      });
+    }
+
+    // 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.$wrap.find('input[name="protected_branch[name]"]').val() && $allowedToMerge.length && $allowedToPush.length);
+
+      this.$form.find('input[type="submit"]').attr('disabled', toggle);
+    }
+
+    getFormData() {
+      const formData = {
+        authenticity_token: this.$form.find('input[name="authenticity_token"]').val(),
+        protected_branch: {
+          name: this.$wrap.find('input[name="protected_branch[name]"]').val(),
+        }
+      };
+
+      for (const ACCESS_LEVEL in ACCESS_LEVELS) {
+        const selectedItems = this[`${ACCESS_LEVELS[ACCESS_LEVEL]}_dropdown`].getSelectedItems();
+        const levelAttributes = [];
+
+        for (let i = 0; i < selectedItems.length; i += 1) {
+          const current = selectedItems[i];
+
+          if (current.type === LEVEL_TYPES.USER) {
+            levelAttributes.push({
+              user_id: selectedItems[i].user_id
+            });
+          } else if (current.type === LEVEL_TYPES.ROLE) {
+            levelAttributes.push({
+              access_level: selectedItems[i].access_level
+            });
+          } else if (current.type === LEVEL_TYPES.GROUP) {
+            levelAttributes.push({
+              group_id: selectedItems[i].group_id
+            });
+          }
+        }
+
+        formData.protected_branch[`${ACCESS_LEVELS[ACCESS_LEVEL]}_attributes`] = levelAttributes;
+      }
+
+      return formData;
+    }
+
+    onFormSubmit(e) {
+      e.preventDefault();
+
+      $.ajax({
+        url: this.$form.attr('action'),
+        method: this.$form.attr('method'),
+        data: this.getFormData()
+      })
+      .success(() => {
+        location.reload();
+      })
+      .fail(() => {
+        new Flash('Failed to protect the branch');
+      });
+    }
+  };
+})(window);

app/assets/javascripts/protected_branches/ee/protected_branch_dropdown.js

+/* eslint-disable comma-dangle, no-unused-vars */
+
+class ProtectedBranchDropdown {
+  constructor(options) {
+    this.onSelect = options.onSelect;
+    this.$dropdown = options.$dropdown;
+    this.$dropdownContainer = this.$dropdown.parent();
+    this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
+    this.$protectedBranch = this.$dropdownContainer.find('.js-create-new-protected-branch');
+
+    this.buildDropdown();
+    this.bindEvents();
+
+    // Hide footer
+    this.$dropdownFooter.addClass('hidden');
+  }
+
+  buildDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.getProtectedBranches.bind(this),
+      filterable: true,
+      remote: false,
+      search: {
+        fields: ['title']
+      },
+      selectable: true,
+      toggleLabel(selected) {
+        return (selected && 'id' in selected) ? selected.title : 'Protected Branch';
+      },
+      fieldName: 'protected_branch[name]',
+      text(protectedBranch) {
+        return _.escape(protectedBranch.title);
+      },
+      id(protectedBranch) {
+        return _.escape(protectedBranch.id);
+      },
+      onFilter: this.toggleCreateNewButton.bind(this),
+      clicked: (options) => {
+        const { $el, e } = options;
+        e.preventDefault();
+        this.onSelect();
+      }
+    });
+  }
+
+  bindEvents() {
+    this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
+  }
+
+  onClickCreateWildcard(e) {
+    e.preventDefault();
+
+    // Refresh the dropdown's data, which ends up calling `getProtectedBranches`
+    this.$dropdown.data('glDropdown').remote.execute();
+    this.$dropdown.data('glDropdown').selectRowAtIndex();
+  }
+
+  getProtectedBranches(term, callback) {
+    if (this.selectedBranch) {
+      callback(gon.open_branches.concat(this.selectedBranch));
+    } else {
+      callback(gon.open_branches);
+    }
+  }
+
+  toggleCreateNewButton(branchName) {
+    this.selectedBranch = {
+      title: branchName,
+      id: branchName,
+      text: branchName
+    };
+
+    if (branchName) {
+      this.$dropdownContainer
+        .find('.js-create-new-protected-branch code')
+        .text(branchName);
+    }
+
+    this.$dropdownFooter.toggleClass('hidden', !branchName);
+  }
+}
+
+window.ProtectedBranchDropdown = ProtectedBranchDropdown;

app/assets/javascripts/protected_branches/ee/protected_branch_edit.js

+/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, dot-notation, no-unused-vars, no-restricted-syntax, guard-for-in, max-len */
+/* global Flash */
+
+(global => {
+  global.gl = global.gl || {};
+
+  const ACCESS_LEVELS = {
+    MERGE: 'merge_access_levels',
+    PUSH: 'push_access_levels',
+  };
+
+  const LEVEL_TYPES = {
+    ROLE: 'role',
+    USER: 'user',
+    GROUP: 'group'
+  };
+
+  gl.ProtectedBranchEdit = class {
+    constructor(options) {
+      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.$wraps[ACCESS_LEVELS.MERGE] = this.$allowedToMergeDropdown.closest(`.${ACCESS_LEVELS.MERGE}-container`);
+      this.$wraps[ACCESS_LEVELS.PUSH] = this.$allowedToPushDropdown.closest(`.${ACCESS_LEVELS.PUSH}-container`);
+
+      this.buildDropdowns();
+    }
+
+    buildDropdowns() {
+      // Allowed to merge dropdown
+      this['merge_access_levels_dropdown'] = new gl.ProtectedBranchAccessDropdown({
+        accessLevel: ACCESS_LEVELS.MERGE,
+        accessLevelsData: gon.merge_access_levels,
+        $dropdown: this.$allowedToMergeDropdown,
+        onSelect: this.onSelectOption.bind(this),
+        onHide: this.onDropdownHide.bind(this)
+      });
+
+      // Allowed to push dropdown
+      this['push_access_levels_dropdown'] = new gl.ProtectedBranchAccessDropdown({
+        accessLevel: ACCESS_LEVELS.PUSH,
+        accessLevelsData: gon.push_access_levels,
+        $dropdown: this.$allowedToPushDropdown,
+        onSelect: this.onSelectOption.bind(this),
+        onHide: this.onDropdownHide.bind(this)
+      });
+    }
+
+    onSelectOption(item, $el, dropdownInstance) {
+      this.hasChanges = true;
+    }
+
+    onDropdownHide() {
+      if (!this.hasChanges) return;
+
+      this.hasChanges = true;
+
+      this.updatePermissions();
+    }
+
+    updatePermissions() {
+      const formData = {};
+
+      for (const ACCESS_LEVEL in ACCESS_LEVELS) {
+        const accessLevelName = ACCESS_LEVELS[ACCESS_LEVEL];
+
+        formData[`${accessLevelName}_attributes`] = this[`${accessLevelName}_dropdown`].getInputData(accessLevelName);
+      }
+
+      return $.ajax({
+        type: 'POST',
+        url: this.$wrap.data('url'),
+        dataType: 'json',
+        data: {
+          _method: 'PATCH',
+          protected_branch: formData
+        },
+        success: (response) => {
+          this.hasChanges = false;
+
+          for (const ACCESS_LEVEL in ACCESS_LEVELS) {
+            const accessLevelName = ACCESS_LEVELS[ACCESS_LEVEL];
+
+            // The data coming from server will be the new persisted *state* for each dropdown
+            this.setSelectedItemsToDropdown(response[accessLevelName], `${accessLevelName}_dropdown`);
+          }
+        },
+        error() {
+          $.scrollTo(0);
+          new Flash('Failed to update branch!');
+        }
+      }).always(() => {
+        this.$allowedToMergeDropdown.enable();
+        this.$allowedToPushDropdown.enable();
+      });
+    }
+
+    setSelectedItemsToDropdown(items = [], dropdownName) {
+      const itemsToAdd = [];
+
+      for (let i = 0; i < items.length; i += 1) {
+        let itemToAdd;
+        const currentItem = items[i];
+
+        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 = _.findWhere(selectedItems, { user_id: currentItem.user_id });
+
+          itemToAdd = {
+            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) {
+          itemToAdd = {
+            id: currentItem.id,
+            group_id: currentItem.group_id,
+            type: LEVEL_TYPES.GROUP,
+            persisted: true
+          };
+        } else {
+          itemToAdd = {
+            id: currentItem.id,
+            access_level: currentItem.access_level,
+            type: LEVEL_TYPES.ROLE,
+            persisted: true
+          };
+        }
+
+        itemsToAdd.push(itemToAdd);
+      }
+
+      this[dropdownName].setSelectedItems(itemsToAdd);
+    }
+  };
+})(window);

app/assets/javascripts/protected_branches/ee/protected_branch_edit_list.js

+/* eslint-disable arrow-parens, no-param-reassign, no-new, comma-dangle */
+
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchEditList = class {
+    constructor() {
+      this.$wrap = $('.protected-branches-list');
+
+      // Build edit forms
+      this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => {
+        new gl.ProtectedBranchEdit({
+          $wrap: $(el)
+        });
+      });
+    }
+  };
+})(window);

app/assets/javascripts/protected_branches/ee/protected_branches_bundle.js

+import './protected_branch_access_dropdown';
+import './protected_branch_create';
+import './protected_branch_dropdown';
+import './protected_branch_edit';
+import './protected_branch_edit_list';

app/assets/javascripts/protected_branches/protected_branch_create.js

-/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, guard-for-in, no-restricted-syntax, max-len */
+/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
 /* global ProtectedBranchDropdown */
-/* global Flash */
 
 (global => {
   global.gl = global.gl || {};
 
-  const ACCESS_LEVELS = {
-    MERGE: 'merge_access_levels',
-    PUSH: 'push_access_levels',
-  };
-
-  const LEVEL_TYPES = {
-    ROLE: 'role',
-    USER: 'user',
-    GROUP: 'group'
-  };
-
   gl.ProtectedBranchCreate = class {
     constructor() {
       this.$wrap = this.$form = $('#new_protected_branch');
       this.buildDropdowns();
-      this.$branchInput = this.$wrap.find('input[name="protected_branch[name]"]');
-      this.bindEvents();
-    }
-
-    bindEvents() {
-      this.$form.on('submit', this.onFormSubmit.bind(this));
     }
 
     buildDropdowns() {
@@ -36,87 +18,38 @@
       this.onSelectCallback = this.onSelect.bind(this);
 
       // Allowed to Merge dropdown
-      this[`${ACCESS_LEVELS.MERGE}_dropdown`] = new gl.ProtectedBranchAccessDropdown({
+      new gl.ProtectedBranchAccessDropdown({
         $dropdown: $allowedToMergeDropdown,
-        accessLevelsData: gon.merge_access_levels,
-        onSelect: this.onSelectCallback,
-        accessLevel: ACCESS_LEVELS.MERGE
+        data: gon.merge_access_levels,
+        onSelect: this.onSelectCallback
       });
 
       // Allowed to Push dropdown
-      this[`${ACCESS_LEVELS.PUSH}_dropdown`] = new gl.ProtectedBranchAccessDropdown({
+      new gl.ProtectedBranchAccessDropdown({
         $dropdown: $allowedToPushDropdown,
-        accessLevelsData: gon.push_access_levels,
-        onSelect: this.onSelectCallback,
-        accessLevel: ACCESS_LEVELS.PUSH
+        data: gon.push_access_levels,
+        onSelect: this.onSelectCallback
       });
 
+      // Select default
+      $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
+      $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
+
       // Protected branch dropdown
-      new window.ProtectedBranchDropdown({
+      new ProtectedBranchDropdown({
         $dropdown: this.$wrap.find('.js-protected-branch-select'),
         onSelect: this.onSelectCallback
       });
     }
 
-    // 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.$wrap.find('input[name="protected_branch[name]"]').val() && $allowedToMerge.length && $allowedToPush.length);
-
-      this.$form.find('input[type="submit"]').attr('disabled', toggle);
-    }
-
-    getFormData() {
-      const formData = {
-        authenticity_token: this.$form.find('input[name="authenticity_token"]').val(),
-        protected_branch: {
-          name: this.$wrap.find('input[name="protected_branch[name]"]').val(),
-        }
-      };
-
-      for (const ACCESS_LEVEL in ACCESS_LEVELS) {
-        const selectedItems = this[`${ACCESS_LEVELS[ACCESS_LEVEL]}_dropdown`].getSelectedItems();
-        const levelAttributes = [];
-
-        for (let i = 0; i < selectedItems.length; i += 1) {
-          const current = selectedItems[i];
-
-          if (current.type === LEVEL_TYPES.USER) {
-            levelAttributes.push({
-              user_id: selectedItems[i].user_id
-            });
-          } else if (current.type === LEVEL_TYPES.ROLE) {
-            levelAttributes.push({
-              access_level: selectedItems[i].access_level
-            });
-          } else if (current.type === LEVEL_TYPES.GROUP) {
-            levelAttributes.push({
-              group_id: selectedItems[i].group_id
-            });
-          }
-        }
+      // Enable submit button
+      const $branchInput = this.$wrap.find('input[name="protected_branch[name]"]');
+      const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
+      const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
 
-        formData.protected_branch[`${ACCESS_LEVELS[ACCESS_LEVEL]}_attributes`] = levelAttributes;
-      }
-
-      return formData;
-    }
-
-    onFormSubmit(e) {
-      e.preventDefault();
-
-      $.ajax({
-        url: this.$form.attr('action'),
-        method: this.$form.attr('method'),
-        data: this.getFormData()
-      })
-      .success(() => {
-        location.reload();
-      })
-      .fail(() => {
-        new Flash('Failed to protect the branch');
-      });
+      this.$form.find('input[type="submit"]').attr('disabled', !($branchInput.val() && $allowedToMergeInput.length && $allowedToPushInput.length));
     }
   };
 })(window);

app/assets/javascripts/protected_branches/protected_branch_edit.js

-/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, dot-notation, no-unused-vars, no-restricted-syntax, guard-for-in, max-len */
+/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
 /* global Flash */
 
 (global => {
   global.gl = global.gl || {};
 
-  const ACCESS_LEVELS = {
-    MERGE: 'merge_access_levels',
-    PUSH: 'push_access_levels',
-  };
-
-  const LEVEL_TYPES = {
-    ROLE: 'role',
-    USER: 'user',
-    GROUP: 'group'
-  };
-
   gl.ProtectedBranchEdit = class {
     constructor(options) {
-      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.$wraps[ACCESS_LEVELS.MERGE] = this.$allowedToMergeDropdown.closest(`.${ACCESS_LEVELS.MERGE}-container`);
-      this.$wraps[ACCESS_LEVELS.PUSH] = this.$allowedToPushDropdown.closest(`.${ACCESS_LEVELS.PUSH}-container`);
-
       this.buildDropdowns();
     }
 
     buildDropdowns() {
       // Allowed to merge dropdown
-      this['merge_access_levels_dropdown'] = new gl.ProtectedBranchAccessDropdown({
-        accessLevel: ACCESS_LEVELS.MERGE,
-        accessLevelsData: gon.merge_access_levels,
+      new gl.ProtectedBranchAccessDropdown({
         $dropdown: this.$allowedToMergeDropdown,
-        onSelect: this.onSelectOption.bind(this),
-        onHide: this.onDropdownHide.bind(this)
+        data: gon.merge_access_levels,
+        onSelect: this.onSelect.bind(this)
       });
 
       // Allowed to push dropdown
-      this['push_access_levels_dropdown'] = new gl.ProtectedBranchAccessDropdown({
-        accessLevel: ACCESS_LEVELS.PUSH,
-        accessLevelsData: gon.push_access_levels,
+      new gl.ProtectedBranchAccessDropdown({
         $dropdown: this.$allowedToPushDropdown,
-        onSelect: this.onSelectOption.bind(this),
-        onHide: this.onDropdownHide.bind(this)
+        data: gon.push_access_levels,
+        onSelect: this.onSelect.bind(this)
       });
     }
 
-    onSelectOption(item, $el, dropdownInstance) {
-      this.hasChanges = true;
-    }
-
-    onDropdownHide() {
-      if (!this.hasChanges) return;
-
-      this.hasChanges = true;
-
-      this.updatePermissions();
-    }
-
-    updatePermissions() {
-      const formData = {};
+    onSelect() {
+      const $allowedToMergeInput = this.$wrap.find(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
+      const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
 
-      for (const ACCESS_LEVEL in ACCESS_LEVELS) {
-        const accessLevelName = ACCESS_LEVELS[ACCESS_LEVEL];
+      // Do not update if one dropdown has not selected any option
+      if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return;
 
-        formData[`${accessLevelName}_attributes`] = this[`${accessLevelName}_dropdown`].getInputData(accessLevelName);
-      }
+      this.$allowedToMergeDropdown.disable();
+      this.$allowedToPushDropdown.disable();
 
-      return $.ajax({
+      $.ajax({
         type: 'POST',
         url: this.$wrap.data('url'),
         dataType: 'json',
         data: {
           _method: 'PATCH',
-          protected_branch: formData
-        },
-        success: (response) => {
-          this.hasChanges = false;
-
-          for (const ACCESS_LEVEL in ACCESS_LEVELS) {
-            const accessLevelName = ACCESS_LEVELS[ACCESS_LEVEL];
-
-            // The data coming from server will be the new persisted *state* for each dropdown
-            this.setSelectedItemsToDropdown(response[accessLevelName], `${accessLevelName}_dropdown`);
+          protected_branch: {
+            merge_access_levels_attributes: [{
+              id: this.$allowedToMergeDropdown.data('access-level-id'),
+              access_level: $allowedToMergeInput.val()
+            }],
+            push_access_levels_attributes: [{
+              id: this.$allowedToPushDropdown.data('access-level-id'),
+              access_level: $allowedToPushInput.val()
+            }]
           }
         },
         error() {
@@ -97,49 +65,5 @@
         this.$allowedToPushDropdown.enable();
       });
     }
-
-    setSelectedItemsToDropdown(items = [], dropdownName) {
-      const itemsToAdd = [];
-
-      for (let i = 0; i < items.length; i += 1) {
-        let itemToAdd;
-        const currentItem = items[i];
-
-        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 = _.findWhere(selectedItems, { user_id: currentItem.user_id });
-
-          itemToAdd = {
-            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) {
-          itemToAdd = {
-            id: currentItem.id,
-            group_id: currentItem.group_id,
-            type: LEVEL_TYPES.GROUP,
-            persisted: true
-          };
-        } else {
-          itemToAdd = {
-            id: currentItem.id,
-            access_level: currentItem.access_level,
-            type: LEVEL_TYPES.ROLE,
-            persisted: true
-          };
-        }
-
-        itemsToAdd.push(itemToAdd);
-      }
-
-      this[dropdownName].setSelectedItems(itemsToAdd);
-    }
   };
 })(window);

app/views/projects/protected_branches/_index.html.haml

 - expanded = Rails.env.test?
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('protected_branches')
+  - if @project.feature_available?(:ref_permissions_for_users, current_user)
+    = webpack_bundle_tag('ee_protected_branches')
+  - else
+    = webpack_bundle_tag('protected_branches')
 
 %section.settings
   .settings-header

config/webpack.config.js

@@ -60,6 +60,7 @@ var config = {
     profile:              './profile/profile_bundle.js',
     prometheus_metrics:   './prometheus_metrics',
     protected_branches:   './protected_branches/protected_branches_bundle.js',
+    ee_protected_branches: './protected_branches/ee/protected_branches_bundle.js',
     protected_tags:       './protected_tags',
     service_desk:         './projects/settings_service_desk/service_desk_bundle.js',
     sidebar:              './sidebar/sidebar_bundle.js',