Converting jquery dropdown for ci_template

- Use GlDropdown

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

-import $ from 'jquery';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { __ } from '~/locale';
-
-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() {
-    initDeprecatedJQueryDropdown(this.$dropdown, {
-      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,
-        },
-        {
-          type: '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/ci_template_dropdown.vue

+<script>
+import { GlDropdown, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  name: 'CiTemplateDropdown',
+  components: { GlDropdown, GlSearchBoxByType, GlDropdownItem },
+  props: {
+    gitlabCiYmls: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedGitlabCiYml: {
+        id: s__('Android'),
+        name: s__('Android'),
+      },
+      searchTerm: '',
+    };
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    :text="selectedGitlabCiYml.name"
+    :header-text="s__('SelectTemplate|Select template')"
+  >
+    <template #header>
+      <gl-search-box-by-type v-model.trim="searchTerm" />
+    </template>
+    <gl-dropdown-item
+      v-for="gitlabCiYml in gitlabCiYmls.General"
+      :key="gitlabCiYml.id"
+      is-check-item
+      :is-checked="selectedGitlabCiYml.id === gitlabCiYml.id"
+    >
+      {{ gitlabCiYml.name }}
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>

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

-import CiTemplate from './ci_template';
+import Vue from 'vue';
+import CiTemplateDropdown from './ci_template_dropdown.vue';
+
+const el = document.querySelector('.js-ci-template-dropdown');
+const { gitlabCiYmls } = el.dataset;
+
 // eslint-disable-next-line no-new
-new CiTemplate();
+new Vue({
+  el,
+  render(createElement) {
+    return createElement(CiTemplateDropdown, {
+      props: {
+        gitlabCiYmls: JSON.parse(gitlabCiYmls),
+      },
+    });
+  },
+});

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

@@ -20,6 +20,8 @@
         .form-group
           = f.label :required_instance_ci_template, s_('AdminSettings|Select a CI/CD template'), class: 'text-muted'
           = dropdown_tag(s_('AdminSettings|No required pipeline'), options: { toggle_class: 'js-ci-template-dropdown dropdown-select', title: s_('AdminSettings|Select a CI/CD template'), filter: true, placeholder: _("Filter"), data: { data: gitlab_ci_ymls(nil) } } )
+          -# -# = 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) } } )
+          -# .js-ci-template-dropdown{ data: { gitlab_ci_ymls: gitlab_ci_ymls(nil).to_json } }
           = 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: "gl-button btn btn-confirm"

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

+import { GlDropdown } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import CiTemplateDropdown from 'ee/pages/admin/application_settings/ci_cd/ci_template_dropdown.vue';
+
+describe('CiTemplateDropdown', () => {
+  let wrapper;
+  const createComponent = () => {
+    wrapper = shallowMount(CiTemplateDropdown);
+  };
+
+  it('has a GlDropdown', () => {
+    createComponent();
+
+    const dropdown = wrapper.findComponent(GlDropdown);
+
+    expect(dropdown.exists()).toBe(true);
+  });
+});

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

-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).toHaveLength(1);
-      expect(CiTemplateInstance.$dropdown).toHaveLength(1);
-      expect(CiTemplateInstance.$dropdownToggle).toHaveLength(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 }, { type: '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');
-    });
-  });
-});