Protected Tags Frontend

Protect tag partial
Apply styles to protected tag same as protected branch
Render protected tags within Project Settings > Repository
Protected Tags Classes
Re-export protected tag classes
Initialize Protected tags feature under Repository Settings page
Update property names for tags
Add protected tags to bundle config

app/assets/javascripts/dispatcher.js

@@ -336,6 +336,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new gl.ProtectedBranchCreate();
           new gl.ProtectedBranchEditList();
           new UsersSelect();
+          new gl.ProtectedTagCreate();
           break;
         case 'projects:ci_cd:show':
           new gl.ProjectVariables();

app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js

+/* eslint-disable arrow-parens, no-param-reassign, object-shorthand, no-else-return, comma-dangle, max-len */
+
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedTagAccessDropdown = 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(item, $el, e) {
+          e.preventDefault();
+          onSelect();
+        }
+      });
+    }
+  };
+})(window);

app/assets/javascripts/protected_tags/protected_tag_create.js

+/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
+/* global ProtectedTagDropdown */
+
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedTagCreate = class {
+    constructor() {
+      this.$wrap = this.$form = $('.new_protected_tag');
+      this.buildDropdowns();
+    }
+
+    buildDropdowns() {
+      const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+
+      // Cache callback
+      this.onSelectCallback = this.onSelect.bind(this);
+
+      // Allowed to Push dropdown
+      new gl.ProtectedTagAccessDropdown({
+        $dropdown: $allowedToPushDropdown,
+        data: gon.push_access_levels,
+        onSelect: this.onSelectCallback
+      });
+
+      // Select default
+      $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
+
+      // Protected tag dropdown
+      new ProtectedTagDropdown({
+        $dropdown: this.$wrap.find('.js-protected-tag-select'),
+        onSelect: this.onSelectCallback
+      });
+    }
+
+    // This will run after clicked callback
+    onSelect() {
+      // Enable submit button
+      const $tagInput = this.$wrap.find('input[name="protected_tag[name]"]');
+      const $allowedToPushInput = this.$wrap.find('input[name="protected_tag[push_access_levels_attributes][0][access_level]"]');
+
+      this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToPushInput.length));
+    }
+  };
+})(window);

app/assets/javascripts/protected_tags/protected_tag_dropdown.js

+/* eslint-disable comma-dangle, no-unused-vars */
+
+class ProtectedTagDropdown {
+  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('.create-new-protected-tag');
+
+    this.buildDropdown();
+    this.bindEvents();
+
+    // Hide footer
+    this.$dropdownFooter.addClass('hidden');
+  }
+
+  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: (item, $el, e) => {
+        e.preventDefault();
+        this.onSelect();
+      }
+    });
+  }
+
+  bindEvents() {
+    this.$protectedTag.on('click', this.onClickCreateWildcard.bind(this));
+  }
+
+  onClickCreateWildcard() {
+    this.$dropdown.data('glDropdown').remote.execute();
+    this.$dropdown.data('glDropdown').selectRowAtIndex();
+  }
+
+  getProtectedTags(term, callback) {
+    if (this.selectedTag) {
+      callback(gon.open_branches.concat(this.selectedTag));
+    } else {
+      callback(gon.open_branches);
+    }
+  }
+
+  toggleCreateNewButton(tagName) {
+    this.selectedTag = {
+      title: tagName,
+      id: tagName,
+      text: tagName
+    };
+
+    if (tagName) {
+      this.$dropdownContainer
+        .find('.create-new-protected-tag code')
+        .text(tagName);
+    }
+
+    this.$dropdownFooter.toggleClass('hidden', !tagName);
+  }
+}
+
+window.ProtectedTagDropdown = ProtectedTagDropdown;

app/assets/javascripts/protected_tags/protected_tags_bundle.js

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

app/assets/stylesheets/pages/projects.scss

@@ -764,7 +764,8 @@ a.allowed-to-push {
   text-align: left;
 }
 
-.protected-branches-list {
+.protected-branches-list,
+.protected-tags-list {
   margin-bottom: 30px;
 
   a {

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

+= form_for [@project.namespace.becomes(Namespace), @project, @protected_branch], html: { class: 'new_protected_tag' } do |f|
+  .panel.panel-default
+    .panel-heading
+      %h3.panel-title
+        Protect a tag
+    .panel-body
+      .form-horizontal
+        = form_errors(@protected_branch)
+        .form-group
+          = f.label :name, class: 'col-md-2 text-right' do
+            Tag:
+          .col-md-10
+            = render partial: "projects/protected_tags/dropdown", locals: { f: f }
+            .help-block
+              = link_to 'Wildcards', help_page_path('user/project/protected_branches', anchor: 'wildcard-protected-branches')
+              such as
+              %code *-stable
+              or
+              %code production/*
+              are supported
+        .form-group
+          %label.col-md-2.text-right{ for: 'push_access_levels_attributes' }
+            Allowed to push:
+          .col-md-10
+            .push_access_levels-container
+              = dropdown_tag('Select',
+                             options: { toggle_class: 'js-allowed-to-push wide',
+                             dropdown_class: 'dropdown-menu-selectable',
+                             data: { field_name: 'protected_tag[push_access_levels_attributes][0][access_level]', input_id: 'push_access_levels_attributes' }})
+
+    .panel-footer
+      = f.submit 'Protect', class: 'btn-create btn', disabled: true

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

+= f.hidden_field(:name)
+
+= dropdown_tag('Select tag or create wildcard',
+               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide',
+                          filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search protected tag",
+                          footer_content: true,
+                          data: { show_no: true, show_any: true, show_upcoming: true,
+                                  selected: params[:protected_tag_name],
+                                  project_id: @project.try(:id) } }) do
+
+  %ul.dropdown-footer-list
+    %li
+      = link_to '#', title: "New Protected Tag", class: "create-new-protected-tag" do
+        Create wildcard
+        %code

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

+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('protected_tags')
+
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    %h4.prepend-top-0
+      Protected tags
+    %p.prepend-top-20
+      By default, Protected branches are designed to:
+      %ul
+        %li Prevent tag pushes from everybody except Masters
+        %li Prevent <strong>anyone</strong> from force pushing to the tag
+        %li Prevent <strong>anyone</strong> from deleting the tag
+  .col-lg-9
+    - if can? current_user, :admin_project, @project
+      = render 'projects/protected_tags/create_protected_tag'
+
+    = render "projects/protected_tags/tags_list"

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

+.panel.panel-default.protected-tags-list
+  .panel-heading
+    %h3.panel-title
+      Protected tag (0)
+  %p.settings-message.text-center
+    There are currently no protected tags, protect a tag with the form above.

app/views/projects/settings/repository/show.html.haml

@@ -6,3 +6,4 @@
 = render "projects/mirrors/show"
 
 = render "projects/protected_branches/index"
+= render "projects/protected_tags/index"

config/webpack.config.js

@@ -42,6 +42,7 @@ var config = {
     notebook_viewer:      './blob/notebook_viewer.js',
     profile:              './profile/profile_bundle.js',
     protected_branches:   './protected_branches/protected_branches_bundle.js',
+    protected_tags:       './protected_tags/protected_tags_bundle.js',
     snippet:              './snippet/snippet_bundle.js',
     terminal:             './terminal/terminal_bundle.js',
     u2f:                  ['vendor/u2f'],