Merge branch '8429-enforce-template-inclusion-in-pipelines-fe' into 'master'

Enforce template inclusion in pipelines (FE)

See merge request gitlab-org/gitlab-ee!13923

app/views/admin/application_settings/ci_cd.html.haml

@@ -13,6 +13,8 @@
   .settings-content
     = render 'ci_cd'
 
+= render_if_exists 'admin/application_settings/required_instance_ci_setting', expanded: expanded_by_default?
+
 - if Gitlab.config.registry.enabled
   %section.settings.as-registry.no-animate#js-registry-settings{ class: ('expanded' if expanded_by_default?) }
     .settings-header

ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/ci_template.js

+import $ from 'jquery';
+
+export default class CiTemplate {
+  constructor() {
+    this.$input = $('#required_instance_ci_template_name');
+    this.$dropdown = $('.js-ci-template-dropdown');
+    this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text');
+    this.initDropdown();
+  }
+
+  initDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.formatDropdownList(),
+      selectable: true,
+      filterable: true,
+      allowClear: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: clickEvent => this.updateInputValue(clickEvent),
+      text: item => item.name,
+    });
+
+    this.setDropdownToggle();
+  }
+
+  formatDropdownList() {
+    return {
+      Reset: [
+        {
+          name: 'No required pipeline',
+          id: null,
+        },
+        'divider',
+      ],
+      ...this.$dropdown.data('data'),
+    };
+  }
+
+  setDropdownToggle() {
+    const initialValue = this.$input.val();
+
+    if (initialValue) {
+      this.$dropdownToggle.text(initialValue);
+    }
+  }
+
+  updateInputValue({ selectedObj, e }) {
+    e.preventDefault();
+
+    this.$input.val(selectedObj.id);
+  }
+}

ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js

+import CiTemplate from './ci_template';
+
+document.addEventListener('DOMContentLoaded', () => new CiTemplate());

ee/app/views/admin/application_settings/_required_instance_ci_setting.html.haml

+- return unless License.feature_available?(:required_ci_templates)
+
+%section.settings.as-required-pipeline.no-animate#js-required-pipeline-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = s_('AdminSettings|Required pipeline configuration')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      - config_link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/yaml/README') }
+      = s_('AdminSettings|Set an instance-wide auto included %{link_start}pipeline configuration%{link_end}. This pipeline configuration will be run after the project\'s own configuration.').html_safe % { link_start: config_link_start, link_end: '</a>'.html_safe }
+  .settings-content
+    %p
+      - instance_link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('user/admin_area/settings/instance_template_repository') }
+      = s_('AdminSettings|The required pipeline configuration can be selected from the %{code_start}gitlab-ci%{code_end} directory inside of the configured %{link_start}instance template repository%{link_end} or from GitLab provided configurations.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe, link_start: instance_link_start, link_end: '</a>'.html_safe }
+    = form_for @application_setting, url: admin_application_settings_path(anchor: 'js-required-pipeline-settings'), html: { class: 'fieldset-form' } do |f|
+      = form_errors(@application_setting)
+
+      %fieldset
+        .form-group
+          = f.label :required_instance_ci_template, s_('AdminSettings|Select a pipeline configuration file'), class: 'text-muted'
+          = dropdown_tag(s_('AdminSettings|No required pipeline'), options: { toggle_class: 'js-ci-template-dropdown dropdown-select', title: s_('AdminSettings|Select a template'), filter: true, placeholder: _("Filter"), data: { data: gitlab_ci_ymls(nil) } } )
+          = f.text_field :required_instance_ci_template, value: @application_setting.required_instance_ci_template, id: 'required_instance_ci_template_name', class: 'hidden'
+
+      = f.submit _('Save changes'), class: "btn btn-success"

ee/changelogs/unreleased/8429-enforce-template-inclusion-in-pipelines-fe.yml

+---
+title: Add admin form to enforce a pipeline on an instance
+merge_request: 13923
+author:
+type: added

ee/spec/frontend/pages/admin/application_settings/ci_cd/ci_template_spec.js

+import GLDropdown from '~/gl_dropdown'; // eslint-disable-line no-unused-vars
+import CiTemplate from 'ee/pages/admin/application_settings/ci_cd/ci_template';
+import { setHTMLFixture } from 'helpers/fixtures';
+
+const DROPDOWN_DATA = {
+  Instance: [{ name: 'test', id: 'test' }],
+  General: [{ name: 'Android', id: 'Android' }],
+};
+const INITIAL_VALUE = 'Android';
+
+describe('CI Template Dropdown (ee/pages/admin/application_settings/ci_cd/ci_template.js', () => {
+  let CiTemplateInstance;
+
+  beforeEach(() => {
+    setHTMLFixture(`
+      <div>
+        <button class="js-ci-template-dropdown" data-data=${JSON.stringify(DROPDOWN_DATA)}>
+          <span class="dropdown-toggle-text"></span>
+        </button>
+        <input id="required_instance_ci_template_name" value="${INITIAL_VALUE}" />
+      </div>
+    `);
+    CiTemplateInstance = new CiTemplate();
+  });
+
+  describe('Init Dropdown', () => {
+    it('Instantiates dropdown objects', () => {
+      expect(CiTemplateInstance.$input.length).toBe(1);
+      expect(CiTemplateInstance.$dropdown.length).toBe(1);
+      expect(CiTemplateInstance.$dropdownToggle.length).toBe(1);
+    });
+
+    it('Sets the dropdown text value', () => {
+      expect(CiTemplateInstance.$dropdown.text().trim()).toBe(INITIAL_VALUE);
+    });
+  });
+
+  describe('Format dropdown list', () => {
+    it('Adds a reset option and divider', () => {
+      const expected = {
+        Reset: [{ name: 'No required pipeline', id: null }, 'divider'],
+        ...DROPDOWN_DATA,
+      };
+      const actual = CiTemplateInstance.formatDropdownList();
+
+      expect(JSON.stringify(actual)).toBe(JSON.stringify(expected));
+    });
+  });
+
+  describe('Update input value', () => {
+    it('changes the value of the input', () => {
+      const selectedObj = { name: 'update', id: 'update' };
+      const e = { preventDefault: () => {} };
+      CiTemplateInstance.updateInputValue({ selectedObj, e });
+
+      expect(CiTemplateInstance.$input.val()).toBe('update');
+    });
+  });
+});

locale/gitlab.pot

@@ -859,9 +859,27 @@ msgstr ""
 msgid "AdminSettings|Environment variables are protected by default"
 msgstr ""
 
+msgid "AdminSettings|No required pipeline"
+msgstr ""
+
+msgid "AdminSettings|Required pipeline configuration"
+msgstr ""
+
+msgid "AdminSettings|Select a pipeline configuration file"
+msgstr ""
+
+msgid "AdminSettings|Select a template"
+msgstr ""
+
+msgid "AdminSettings|Set an instance-wide auto included %{link_start}pipeline configuration%{link_end}. This pipeline configuration will be run after the project's own configuration."
+msgstr ""
+
 msgid "AdminSettings|Specify a domain to use by default for every project's Auto Review Apps and Auto Deploy stages."
 msgstr ""
 
+msgid "AdminSettings|The required pipeline configuration can be selected from the %{code_start}gitlab-ci%{code_end} directory inside of the configured %{link_start}instance template repository%{link_end} or from GitLab provided configurations."
+msgstr ""
+
 msgid "AdminSettings|When creating a new environment variable it will be protected by default."
 msgstr ""