Merge branch '31031-convert-protected-branches-es6' into 'master'

Convert Protected Branches feature JS code to ES6

See merge request !12970

app/assets/javascripts/dispatcher.js

@@ -41,7 +41,6 @@ import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
 import Landing from './landing';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
-import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 import ShortcutsWiki from './shortcuts_wiki';
 import Pipelines from './pipelines';
 import BlobViewer from './blob/viewer/index';
@@ -396,12 +395,6 @@ import PerformanceBar from './performance_bar';
           new Search();
           break;
         case 'projects:settings:repository:show':
-          // Initialize Protected Branch Settings
-          new gl.ProtectedBranchCreate();
-          new gl.ProtectedBranchEditList();
-          // Initialize Protected Tag Settings
-          new ProtectedTagCreate();
-          new ProtectedTagEditList();
           // Initialize expandable settings panels
           initSettingsPanels();
           break;

app/assets/javascripts/protected_branches/index.js

@@ -0,0 +1,9 @@
+/* eslint-disable no-unused-vars */
+
+import ProtectedBranchCreate from './protected_branch_create';
+import ProtectedBranchEditList from './protected_branch_edit_list';
+
+$(() => {
+  const protectedBranchCreate = new ProtectedBranchCreate();
+  const protectedBranchEditList = new ProtectedBranchEditList();
+});

app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js

@@ -1,31 +1,26 @@
-/* eslint-disable arrow-parens, no-param-reassign, object-shorthand, no-else-return, comma-dangle, max-len */
+export default class ProtectedBranchAccessDropdown {
+  constructor(options) {
+    this.options = options;
+    this.initDropdown();
+  }
 
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedBranchAccessDropdown = class {
-    constructor(options) {
-      const { $dropdown, data, onSelect } = options;
-
-      $dropdown.glDropdown({
-        data: data,
-        selectable: true,
-        inputId: $dropdown.data('input-id'),
-        fieldName: $dropdown.data('field-name'),
-        toggleLabel(item, el) {
-          if (el.is('.is-active')) {
-            return item.text;
-          } else {
-            return 'Select';
-          }
-        },
-        clicked(opts) {
-          const { e } = opts;
-
-          e.preventDefault();
-          onSelect();
+  initDropdown() {
+    const { $dropdown, data, onSelect } = this.options;
+    $dropdown.glDropdown({
+      data,
+      selectable: true,
+      inputId: $dropdown.data('input-id'),
+      fieldName: $dropdown.data('field-name'),
+      toggleLabel(item, $el) {
+        if ($el.is('.is-active')) {
+          return item.text;
         }
-      });
-    }
-  };
-})(window);
+        return 'Select';
+      },
+      clicked(options) {
+        options.e.preventDefault();
+        onSelect();
+      },
+    });
+  }
+}

app/assets/javascripts/protected_branches/protected_branch_create.js

@@ -1,55 +1,51 @@
-/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
-/* global ProtectedBranchDropdown */
+import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
+import ProtectedBranchDropdown from './protected_branch_dropdown';
 
-(global => {
-  global.gl = global.gl || {};
+export default class ProtectedBranchCreate {
+  constructor() {
+    this.$form = $('.js-new-protected-branch');
+    this.buildDropdowns();
+  }
 
-  gl.ProtectedBranchCreate = class {
-    constructor() {
-      this.$wrap = this.$form = $('#new_protected_branch');
-      this.buildDropdowns();
-    }
+  buildDropdowns() {
+    const $allowedToMergeDropdown = this.$form.find('.js-allowed-to-merge');
+    const $allowedToPushDropdown = this.$form.find('.js-allowed-to-push');
 
-    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);
 
-      // Cache callback
-      this.onSelectCallback = this.onSelect.bind(this);
+    // Allowed to Merge dropdown
+    this.protectedBranchMergeAccessDropdown = new ProtectedBranchAccessDropdown({
+      $dropdown: $allowedToMergeDropdown,
+      data: gon.merge_access_levels,
+      onSelect: this.onSelectCallback,
+    });
 
-      // Allowed to Merge dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: $allowedToMergeDropdown,
-        data: gon.merge_access_levels,
-        onSelect: this.onSelectCallback
-      });
+    // Allowed to Push dropdown
+    this.protectedBranchPushAccessDropdown = new ProtectedBranchAccessDropdown({
+      $dropdown: $allowedToPushDropdown,
+      data: gon.push_access_levels,
+      onSelect: this.onSelectCallback,
+    });
 
-      // Allowed to Push dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: $allowedToPushDropdown,
-        data: gon.push_access_levels,
-        onSelect: this.onSelectCallback
-      });
+    // Select default
+    $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
+    $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
 
-      // Select default
-      $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
-      $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
+    // Protected branch dropdown
+    this.protectedBranchDropdown = new ProtectedBranchDropdown({
+      $dropdown: this.$form.find('.js-protected-branch-select'),
+      onSelect: this.onSelectCallback,
+    });
+  }
 
-      // Protected branch dropdown
-      new ProtectedBranchDropdown({
-        $dropdown: this.$wrap.find('.js-protected-branch-select'),
-        onSelect: this.onSelectCallback
-      });
-    }
+  // This will run after clicked callback
+  onSelect() {
+    // 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]"]');
 
-    // This will run after clicked callback
-    onSelect() {
-      // 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]"]');
-
-      this.$form.find('input[type="submit"]').attr('disabled', !($branchInput.val() && $allowedToMergeInput.length && $allowedToPushInput.length));
-    }
-  };
-})(window);
+    this.$form.find('input[type="submit"]').attr('disabled', !($branchInput.val() && $allowedToMergeInput.length && $allowedToPushInput.length));
+  }
+}

app/assets/javascripts/protected_branches/protected_branch_dropdown.js

@@ -1,6 +1,10 @@
-/* eslint-disable comma-dangle, no-unused-vars */
-
-class ProtectedBranchDropdown {
+export default class ProtectedBranchDropdown {
+  /**
+   * @param {Object} options containing
+   *                         `$dropdown` target element
+   *                          `onSelect` event callback
+   * $dropdown must be an element created using `dropdown_branch()` rails helper
+   */
   constructor(options) {
     this.onSelect = options.onSelect;
     this.$dropdown = options.$dropdown;
@@ -12,7 +16,7 @@ class ProtectedBranchDropdown {
     this.bindEvents();
 
     // Hide footer
-    this.$dropdownFooter.addClass('hidden');
+    this.toggleFooter(true);
   }
 
   buildDropdown() {
@@ -21,7 +25,7 @@ class ProtectedBranchDropdown {
       filterable: true,
       remote: false,
       search: {
-        fields: ['title']
+        fields: ['title'],
       },
       selectable: true,
       toggleLabel(selected) {
@@ -36,10 +40,9 @@ class ProtectedBranchDropdown {
       },
       onFilter: this.toggleCreateNewButton.bind(this),
       clicked: (options) => {
-        const { $el, e } = options;
-        e.preventDefault();
+        options.e.preventDefault();
         this.onSelect();
-      }
+      },
     });
   }
 
@@ -64,20 +67,22 @@ class ProtectedBranchDropdown {
   }
 
   toggleCreateNewButton(branchName) {
-    this.selectedBranch = {
-      title: branchName,
-      id: branchName,
-      text: branchName
-    };
-
     if (branchName) {
+      this.selectedBranch = {
+        title: branchName,
+        id: branchName,
+        text: branchName,
+      };
+
       this.$dropdownContainer
         .find('.js-create-new-protected-branch code')
         .text(branchName);
     }
 
-    this.$dropdownFooter.toggleClass('hidden', !branchName);
+    this.toggleFooter(!branchName);
+  }
+
+  toggleFooter(toggleState) {
+    this.$dropdownFooter.toggleClass('hidden', toggleState);
   }
 }
-
-window.ProtectedBranchDropdown = ProtectedBranchDropdown;

app/assets/javascripts/protected_branches/protected_branch_edit.js

@@ -1,69 +1,67 @@
-/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
+/* eslint-disable no-new */
 /* global Flash */
 
-(global => {
-  global.gl = global.gl || {};
+import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
 
-  gl.ProtectedBranchEdit = class {
-    constructor(options) {
-      this.$wrap = options.$wrap;
-      this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
-      this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+export default class ProtectedBranchEdit {
+  constructor(options) {
+    this.$wrap = options.$wrap;
+    this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
+    this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+    this.onSelectCallback = this.onSelect.bind(this);
 
-      this.buildDropdowns();
-    }
+    this.buildDropdowns();
+  }
 
-    buildDropdowns() {
-      // Allowed to merge dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: this.$allowedToMergeDropdown,
-        data: gon.merge_access_levels,
-        onSelect: this.onSelect.bind(this)
-      });
+  buildDropdowns() {
+    // Allowed to merge dropdown
+    this.protectedBranchAccessDropdown = new ProtectedBranchAccessDropdown({
+      $dropdown: this.$allowedToMergeDropdown,
+      data: gon.merge_access_levels,
+      onSelect: this.onSelectCallback,
+    });
 
-      // Allowed to push dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: this.$allowedToPushDropdown,
-        data: gon.push_access_levels,
-        onSelect: this.onSelect.bind(this)
-      });
-    }
+    // Allowed to push dropdown
+    this.protectedBranchAccessDropdown = new ProtectedBranchAccessDropdown({
+      $dropdown: this.$allowedToPushDropdown,
+      data: gon.push_access_levels,
+      onSelect: this.onSelectCallback,
+    });
+  }
 
-    onSelect() {
-      const $allowedToMergeInput = this.$wrap.find(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
-      const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
+  onSelect() {
+    const $allowedToMergeInput = this.$wrap.find(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
+    const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
 
-      // Do not update if one dropdown has not selected any option
-      if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return;
+    // Do not update if one dropdown has not selected any option
+    if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return;
 
-      this.$allowedToMergeDropdown.disable();
-      this.$allowedToPushDropdown.disable();
+    this.$allowedToMergeDropdown.disable();
+    this.$allowedToPushDropdown.disable();
 
-      $.ajax({
-        type: 'POST',
-        url: this.$wrap.data('url'),
-        dataType: 'json',
-        data: {
-          _method: 'PATCH',
-          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()
-            }]
-          }
+    $.ajax({
+      type: 'POST',
+      url: this.$wrap.data('url'),
+      dataType: 'json',
+      data: {
+        _method: 'PATCH',
+        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() {
-          $.scrollTo(0);
-          new Flash('Failed to update branch!');
-        }
-      }).always(() => {
-        this.$allowedToMergeDropdown.enable();
-        this.$allowedToPushDropdown.enable();
-      });
-    }
-  };
-})(window);
+      },
+      error() {
+        new Flash('Failed to update branch!', null, $('.js-protected-branches-list'));
+      },
+    }).always(() => {
+      this.$allowedToMergeDropdown.enable();
+      this.$allowedToPushDropdown.enable();
+    });
+  }
+}

app/assets/javascripts/protected_branches/protected_branch_edit_list.js

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

app/assets/javascripts/protected_branches/protected_branches_bundle.js

@@ -1,5 +0,0 @@
-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_tags/index.js

@@ -1,2 +1,9 @@
-export { default as ProtectedTagCreate } from './protected_tag_create';
-export { default as ProtectedTagEditList } from './protected_tag_edit_list';
+/* eslint-disable no-unused-vars */
+
+import ProtectedTagCreate from './protected_tag_create';
+import ProtectedTagEditList from './protected_tag_edit_list';
+
+$(() => {
+  const protectedtTagCreate = new ProtectedTagCreate();
+  const protectedtTagEditList = new ProtectedTagEditList();
+});

app/assets/stylesheets/pages/projects.scss

@@ -742,7 +742,8 @@ pre.light-well {
   }
 }
 
-.protected-tags-list {
+.protected-tags-list,
+.protected-branches-list {
   .dropdown-menu-toggle {
     width: 100%;
     max-width: 300px;

app/views/projects/protected_branches/shared/_branches_list.html.haml

@@ -1,4 +1,4 @@
-.panel.panel-default.protected-branches-list
+.panel.panel-default.protected-branches-list.js-protected-branches-list
   - if @protected_branches.empty?
     .panel-heading
       %h3.panel-title
@@ -23,6 +23,8 @@
           - if can_admin_project
             %th
       %tbody
+        %tr
+          %td.flash-container{ colspan: 5 }
         = yield
 
     = paginate @protected_branches, theme: 'gitlab'

app/views/projects/protected_branches/shared/_create_protected_branch.html.haml

@@ -1,4 +1,4 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @protected_branch] do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @protected_branch], html: { class: 'new-protected-branch js-new-protected-branch' } do |f|
   .panel.panel-default
     .panel-heading
       %h3.panel-title

app/views/projects/protected_tags/shared/_tags_list.html.haml

@@ -1,4 +1,4 @@
-.panel.panel-default.protected-tags-list
+.panel.panel-default.protected-tags-list.js-protected-tags-list
   - if @protected_tags.empty?
     .panel-heading
       %h3.panel-title

config/webpack.config.js

@@ -56,7 +56,7 @@ var config = {
     pipelines_details:     './pipelines/pipeline_details_bundle.js',
     profile:              './profile/profile_bundle.js',
     prometheus_metrics:   './prometheus_metrics',
-    protected_branches:   './protected_branches/protected_branches_bundle.js',
+    protected_branches:   './protected_branches',
     protected_tags:       './protected_tags',
     sidebar:              './sidebar/sidebar_bundle.js',
     schedule_form:        './pipeline_schedules/pipeline_schedule_form_bundle.js',

spec/support/shared_examples/features/protected_branches_access_control_ce.rb

@@ -5,7 +5,7 @@ shared_examples "protected branches > access control > CE" do
 
       set_protected_branch_name('master')
 
-      within('.new_protected_branch') do
+      within('.js-new-protected-branch') do
         allowed_to_push_button = find(".js-allowed-to-push")
 
         unless allowed_to_push_button.text == access_type_name
@@ -50,7 +50,7 @@ shared_examples "protected branches > access control > CE" do
 
       set_protected_branch_name('master')
 
-      within('.new_protected_branch') do
+      within('.js-new-protected-branch') do
         allowed_to_merge_button = find(".js-allowed-to-merge")
 
         unless allowed_to_merge_button.text == access_type_name