Add CE-protected-tag JS

And move the EE files into `EE` folder.

app/assets/javascripts/protected_tags/ee/index.js

+export { default as ProtectedTagCreate } from './protected_tag_create';
+export { default as ProtectedTagEditList } from './protected_tag_edit_list';

app/assets/javascripts/protected_tags/ee/protected_tag_create.js

+/* global Flash */
+
+import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
+import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
+import ProtectedTagDropdown from './protected_tag_dropdown';
+
+export default class ProtectedTagCreate {
+  constructor() {
+    this.$form = $('.js-new-protected-tag');
+    this.buildDropdowns();
+    this.$branchTag = this.$form.find('input[name="protected_tag[name]"]');
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    this.$form.on('submit', this.onFormSubmit.bind(this));
+  }
+
+  buildDropdowns() {
+    const $allowedToCreateDropdown = this.$form.find('.js-allowed-to-create');
+
+    // Cache callback
+    this.onSelectCallback = this.onSelect.bind(this);
+
+    // Allowed to Create dropdown
+    this[`${ACCESS_LEVELS.CREATE}_dropdown`] = new ProtectedTagAccessDropdown({
+      $dropdown: $allowedToCreateDropdown,
+      accessLevelsData: gon.create_access_levels,
+      onSelect: this.onSelectCallback,
+      accessLevel: ACCESS_LEVELS.CREATE,
+    });
+
+    // Protected tag dropdown
+    this.protectedTagDropdown = new ProtectedTagDropdown({
+      $dropdown: this.$form.find('.js-protected-tag-select'),
+      onSelect: this.onSelectCallback,
+    });
+  }
+
+  // Enable submit button after selecting an option
+  onSelect() {
+    const $allowedToCreate = this[`${ACCESS_LEVELS.CREATE}_dropdown`].getSelectedItems();
+    const toggle = !(this.$form.find('input[name="protected_tag[name]"]').val() && $allowedToCreate.length);
+
+    this.$form.find('input[type="submit"]').attr('disabled', toggle);
+  }
+
+  getFormData() {
+    const formData = {
+      authenticity_token: this.$form.find('input[name="authenticity_token"]').val(),
+      protected_tag: {
+        name: this.$form.find('input[name="protected_tag[name]"]').val(),
+      },
+    };
+
+    Object.keys(ACCESS_LEVELS).forEach((level) => {
+      const accessLevel = ACCESS_LEVELS[level];
+      const selectedItems = this[`${ACCESS_LEVELS.CREATE}_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_tag[`${accessLevel}_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 tag'));
+  }
+}

app/assets/javascripts/protected_tags/ee/protected_tag_dropdown.js

+export default class ProtectedTagDropdown {
+  /**
+   * @param {Object} options containing
+   *                         `$dropdown` target element
+   *                          `onSelect` event callback
+   * $dropdown must be an element created using `dropdown_tag()` rails helper
+   */
+  constructor(options) {
+    this.onSelect = options.onSelect;
+    this.$dropdown = options.$dropdown;
+    this.$dropdownContainer = this.$dropdown.parent();
+    this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
+    this.$protectedTag = this.$dropdownContainer.find('.js-create-new-protected-tag');
+
+    this.buildDropdown();
+    this.bindEvents();
+
+    // Hide footer
+    this.toggleFooter(true);
+  }
+
+  buildDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.getProtectedTags.bind(this),
+      filterable: true,
+      remote: false,
+      search: {
+        fields: ['title'],
+      },
+      selectable: true,
+      toggleLabel(selected) {
+        return (selected && 'id' in selected) ? selected.title : 'Protected Tag';
+      },
+      fieldName: 'protected_tag[name]',
+      text(protectedTag) {
+        return _.escape(protectedTag.title);
+      },
+      id(protectedTag) {
+        return _.escape(protectedTag.id);
+      },
+      onFilter: this.toggleCreateNewButton.bind(this),
+      clicked: (options) => {
+        options.e.preventDefault();
+        this.onSelect();
+      },
+    });
+  }
+
+  bindEvents() {
+    this.$protectedTag.on('click', this.onClickCreateWildcard.bind(this));
+  }
+
+  onClickCreateWildcard(e) {
+    this.$dropdown.data('glDropdown').remote.execute();
+    this.$dropdown.data('glDropdown').selectRowAtIndex();
+    e.preventDefault();
+  }
+
+  getProtectedTags(term, callback) {
+    if (this.selectedTag) {
+      callback(gon.open_tags.concat(this.selectedTag));
+    } else {
+      callback(gon.open_tags);
+    }
+  }
+
+  toggleCreateNewButton(tagName) {
+    if (tagName) {
+      this.selectedTag = {
+        title: tagName,
+        id: tagName,
+        text: tagName,
+      };
+
+      this.$dropdownContainer
+        .find('.js-create-new-protected-tag code')
+        .text(tagName);
+    }
+
+    this.toggleFooter(!tagName);
+  }
+
+  toggleFooter(toggleState) {
+    this.$dropdownFooter.toggleClass('hidden', toggleState);
+  }
+}

app/assets/javascripts/protected_tags/ee/protected_tag_edit.js

+/* eslint-disable no-new */
+/* global Flash */
+
+import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
+import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
+
+export default class ProtectedTagEdit {
+  constructor(options) {
+    this.hasChanges = false;
+    this.$wrap = options.$wrap;
+    this.$allowedToCreateDropdownButton = this.$wrap.find('.js-allowed-to-create');
+
+    this.$allowedToCreateDropdownContainer = this.$allowedToCreateDropdownButton.closest('.create_access_levels-container');
+
+    this.buildDropdowns();
+  }
+
+  buildDropdowns() {
+    // Allowed to create dropdown
+    this[`${ACCESS_LEVELS.CREATE}_dropdown`] = new ProtectedTagAccessDropdown({
+      accessLevel: ACCESS_LEVELS.CREATE,
+      accessLevelsData: gon.create_access_levels,
+      $dropdown: this.$allowedToCreateDropdownButton,
+      onSelect: this.onSelectOption.bind(this),
+      onHide: this.onDropdownHide.bind(this),
+    });
+  }
+
+  onSelectOption() {
+    this.hasChanges = true;
+  }
+
+  onDropdownHide() {
+    if (!this.hasChanges) {
+      return;
+    }
+
+    this.hasChanges = true;
+    this.updatePermissions();
+  }
+
+  updatePermissions() {
+    const formData = Object.keys(ACCESS_LEVELS).reduce((acc, level) => {
+      /* eslint-disable no-param-reassign */
+      const accessLevelName = ACCESS_LEVELS[level];
+      const inputData = this[`${accessLevelName}_dropdown`].getInputData(accessLevelName);
+      acc[`${accessLevelName}_attributes`] = inputData;
+
+      return acc;
+    }, {});
+
+    return $.ajax({
+      type: 'POST',
+      url: this.$wrap.data('url'),
+      dataType: 'json',
+      data: {
+        _method: 'PATCH',
+        protected_tag: formData,
+      },
+      success: (response) => {
+        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(response[accessLevelName], `${accessLevelName}_dropdown`);
+        });
+      },
+      error() {
+        $.scrollTo(0);
+        new Flash('Failed to update tag!');
+      },
+    }).always(() => {
+      this.$allowedToCreateDropdownButton.enable();
+    });
+  }
+
+  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 = _.findWhere(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);
+  }
+}

app/assets/javascripts/protected_tags/ee/protected_tag_edit_list.js

+/* eslint-disable no-new */
+
+import ProtectedTagEdit from './protected_tag_edit';
+
+export default class ProtectedTagEditList {
+  constructor() {
+    this.$wrap = $('.protected-tags-list');
+    this.initEditForm();
+  }
+
+  initEditForm() {
+    this.$wrap.find('.js-protected-tag-edit-form').each((i, el) => {
+      new ProtectedTagEdit({
+        $wrap: $(el),
+      });
+    });
+  }
+}

app/assets/javascripts/protected_tags/protected_tag_create.js

-/* global Flash */
-
-import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
 import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
 import ProtectedTagDropdown from './protected_tag_dropdown';
 
@@ -8,12 +5,6 @@ export default class ProtectedTagCreate {
   constructor() {
     this.$form = $('.js-new-protected-tag');
     this.buildDropdowns();
-    this.$branchTag = this.$form.find('input[name="protected_tag[name]"]');
-    this.bindEvents();
-  }
-
-  bindEvents() {
-    this.$form.on('submit', this.onFormSubmit.bind(this));
   }
 
   buildDropdowns() {
@@ -23,13 +14,15 @@ export default class ProtectedTagCreate {
     this.onSelectCallback = this.onSelect.bind(this);
 
     // Allowed to Create dropdown
-    this[`${ACCESS_LEVELS.CREATE}_dropdown`] = new ProtectedTagAccessDropdown({
+    this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({
       $dropdown: $allowedToCreateDropdown,
-      accessLevelsData: gon.create_access_levels,
+      data: gon.create_access_levels,
       onSelect: this.onSelectCallback,
-      accessLevel: ACCESS_LEVELS.CREATE,
     });
 
+    // Select default
+    $allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0);
+
     // Protected tag dropdown
     this.protectedTagDropdown = new ProtectedTagDropdown({
       $dropdown: this.$form.find('.js-protected-tag-select'),
@@ -37,60 +30,12 @@ export default class ProtectedTagCreate {
     });
   }
 
-  // Enable submit button after selecting an option
+  // This will run after clicked callback
   onSelect() {
-    const $allowedToCreate = this[`${ACCESS_LEVELS.CREATE}_dropdown`].getSelectedItems();
-    const toggle = !(this.$form.find('input[name="protected_tag[name]"]').val() && $allowedToCreate.length);
-
-    this.$form.find('input[type="submit"]').attr('disabled', toggle);
-  }
-
-  getFormData() {
-    const formData = {
-      authenticity_token: this.$form.find('input[name="authenticity_token"]').val(),
-      protected_tag: {
-        name: this.$form.find('input[name="protected_tag[name]"]').val(),
-      },
-    };
-
-    Object.keys(ACCESS_LEVELS).forEach((level) => {
-      const accessLevel = ACCESS_LEVELS[level];
-      const selectedItems = this[`${ACCESS_LEVELS.CREATE}_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_tag[`${accessLevel}_attributes`] = levelAttributes;
-    });
-
-    return formData;
-  }
-
-  onFormSubmit(e) {
-    e.preventDefault();
+    // Enable submit button
+    const $tagInput = this.$form.find('input[name="protected_tag[name]"]');
+    const $allowedToCreateInput = this.$form.find('#create_access_levels_attributes');
 
-    $.ajax({
-      url: this.$form.attr('action'),
-      method: this.$form.attr('method'),
-      data: this.getFormData(),
-    })
-    .success(() => {
-      location.reload();
-    })
-    .fail(() => new Flash('Failed to protect the tag'));
+    this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length));
   }
 }

app/assets/javascripts/protected_tags/protected_tag_edit.js

 /* eslint-disable no-new */
 /* global Flash */
 
-import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
 import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
 
 export default class ProtectedTagEdit {
   constructor(options) {
-    this.hasChanges = false;
     this.$wrap = options.$wrap;
     this.$allowedToCreateDropdownButton = this.$wrap.find('.js-allowed-to-create');
-
-    this.$allowedToCreateDropdownContainer = this.$allowedToCreateDropdownButton.closest('.create_access_levels-container');
+    this.onSelectCallback = this.onSelect.bind(this);
 
     this.buildDropdowns();
   }
 
   buildDropdowns() {
     // Allowed to create dropdown
-    this[`${ACCESS_LEVELS.CREATE}_dropdown`] = new ProtectedTagAccessDropdown({
-      accessLevel: ACCESS_LEVELS.CREATE,
-      accessLevelsData: gon.create_access_levels,
+    this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({
       $dropdown: this.$allowedToCreateDropdownButton,
-      onSelect: this.onSelectOption.bind(this),
-      onHide: this.onDropdownHide.bind(this),
+      data: gon.create_access_levels,
+      onSelect: this.onSelectCallback,
     });
   }
 
-  onSelectOption() {
-    this.hasChanges = true;
-  }
-
-  onDropdownHide() {
-    if (!this.hasChanges) {
-      return;
-    }
+  onSelect() {
+    const $allowedToCreateInput = this.$wrap.find(`input[name="${this.$allowedToCreateDropdownButton.data('fieldName')}"]`);
 
-    this.hasChanges = true;
-    this.updatePermissions();
-  }
+    // Do not update if one dropdown has not selected any option
+    if (!$allowedToCreateInput.length) return;
 
-  updatePermissions() {
-    const formData = Object.keys(ACCESS_LEVELS).reduce((acc, level) => {
-      /* eslint-disable no-param-reassign */
-      const accessLevelName = ACCESS_LEVELS[level];
-      const inputData = this[`${accessLevelName}_dropdown`].getInputData(accessLevelName);
-      acc[`${accessLevelName}_attributes`] = inputData;
+    this.$allowedToCreateDropdownButton.disable();
 
-      return acc;
-    }, {});
-
-    return $.ajax({
+    $.ajax({
       type: 'POST',
       url: this.$wrap.data('url'),
       dataType: 'json',
       data: {
         _method: 'PATCH',
-        protected_tag: formData,
-      },
-      success: (response) => {
-        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(response[accessLevelName], `${accessLevelName}_dropdown`);
-        });
+        protected_tag: {
+          create_access_levels_attributes: [{
+            id: this.$allowedToCreateDropdownButton.data('access-level-id'),
+            access_level: $allowedToCreateInput.val(),
+          }],
+        },
       },
       error() {
-        $.scrollTo(0);
-        new Flash('Failed to update tag!');
+        new Flash('Failed to update tag!', null, $('.js-protected-tags-list'));
       },
     }).always(() => {
       this.$allowedToCreateDropdownButton.enable();
     });
   }
-
-  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 = _.findWhere(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);
-  }
 }

config/webpack.config.js

@@ -62,6 +62,7 @@ var config = {
     protected_branches:   './protected_branches/protected_branches_bundle.js',
     ee_protected_branches: './protected_branches/ee/protected_branches_bundle.js',
     protected_tags:       './protected_tags',
+    ee_protected_tags:    './protected_tags/ee',
     service_desk:         './projects/settings_service_desk/service_desk_bundle.js',
     sidebar:              './sidebar/sidebar_bundle.js',
     schedule_form:        './pipeline_schedules/pipeline_schedule_form_bundle.js',