Additional Protected Tags Frontend updates

ProtectedTagEdit class for edit protected tags

Protected Tags List initializer

Export Protected Tags Editing classes

Initialize Protected Tags Edit functionality

Render Push levels dropdown

Increase dropdown width within Tags list

Update column widths

app/assets/javascripts/dispatcher.js

@@ -333,10 +333,13 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new AdminEmailSelect();
           break;
         case 'projects:repository:show':
+          // Initialize Protected Branch Settings
           new gl.ProtectedBranchCreate();
           new gl.ProtectedBranchEditList();
           new UsersSelect();
+          // Initialize Protected Tag Settings
           new gl.ProtectedTagCreate();
+          new gl.ProtectedTagEditList();
           break;
         case 'projects:ci_cd:show':
           new gl.ProjectVariables();

app/assets/javascripts/protected_tags/protected_tag_edit.js

+/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
+/* global Flash */
+
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedTagEdit = class {
+    constructor(options) {
+      this.$wrap = options.$wrap;
+      this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+
+      this.buildDropdowns();
+    }
+
+    buildDropdowns() {
+      // Allowed to push dropdown
+      new gl.ProtectedTagAccessDropdown({
+        $dropdown: this.$allowedToPushDropdown,
+        data: gon.push_access_levels,
+        onSelect: this.onSelect.bind(this)
+      });
+    }
+
+    onSelect() {
+      const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
+
+      // Do not update if one dropdown has not selected any option
+      if (!$allowedToPushInput.length) return;
+
+      this.$allowedToPushDropdown.disable();
+
+      $.ajax({
+        type: 'POST',
+        url: this.$wrap.data('url'),
+        dataType: 'json',
+        data: {
+          _method: 'PATCH',
+          protected_tag: {
+            push_access_levels_attributes: [{
+              id: this.$allowedToPushDropdown.data('access-level-id'),
+              access_level: $allowedToPushInput.val()
+            }]
+          }
+        },
+        error() {
+          $.scrollTo(0);
+          new Flash('Failed to update tag!');
+        }
+      }).always(() => {
+        this.$allowedToPushDropdown.enable();
+      });
+    }
+  };
+})(window);

app/assets/javascripts/protected_tags/protected_tag_edit_list.js

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

app/assets/javascripts/protected_tags/protected_tags_bundle.js

 require('./protected_tag_access_dropdown');
 require('./protected_tag_create');
 require('./protected_tag_dropdown');
+require('./protected_tag_edit');
+require('./protected_tag_edit_list');

app/assets/stylesheets/pages/projects.scss

@@ -801,6 +801,12 @@ a.allowed-to-push {
   @extend .btn.disabled;
 }
 
+.protected-tags-list {
+  .dropdown-menu-toggle {
+    width: 300px;
+  }
+}
+
 .custom-notifications-form {
   .is-loading {
     .custom-notification-event-loading {

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

@@ -11,8 +11,8 @@
     %table.table.table-bordered
       %colgroup
         %col{ width: "25%" }
-        %col{ width: "55%" }
-        %col{ width: "20%" }
+        %col{ width: "25%" }
+        %col{ width: "50%" }
       %thead
         %tr
           %th Protected tag (#{@protected_tags.size})

app/views/projects/protected_tags/_update_protected_tag.haml

 %td
   = hidden_field_tag "allowed_to_push_#{protected_tag.id}", protected_tag.push_access_levels.first.access_level
-  / = dropdown_tag( (protected_tag.push_access_levels.first.humanize || 'Select') ,
-  /                options: { toggle_class: 'js-allowed-to-push', dropdown_class: 'dropdown-menu-selectable js-allowed-to-push-container',
-  /                data: { field_name: "allowed_to_push_#{protected_tag.id}", access_level_id: protected_tag.push_access_levels.first.id }})
+  = dropdown_tag( (protected_tag.push_access_levels.first.humanize || 'Select') ,
+                 options: { toggle_class: 'js-allowed-to-push', dropdown_class: 'dropdown-menu-selectable js-allowed-to-push-container',
+                 data: { field_name: "allowed_to_push_#{protected_tag.id}", access_level_id: protected_tag.push_access_levels.first.id }})