1 files changed, 115 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_template_dropdown.vue b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_template_dropdown.vue
new file mode 100644
index 00000000000..bdd9f940d79
--- /dev/null
+++ b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_template_dropdown.vue
@@ -0,0 +1,115 @@
+<script>
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownSectionHeader,
+    GlDropdownItem,
+    GlSearchBoxByType,
+  },
+  props: {
+    selectedTemplate: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    templates: {
+      type: Array,
+      required: true,
+    },
+    selectedFileTemplateProjectId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      searchTerm: '',
+    };
+  },
+  computed: {
+    templateOptions() {
+      if (this.searchTerm) {
+        const filteredTemplates = [];
+        for (let i = 0; i < this.templates.length; i += 2) {
+          const sectionName = this.templates[i];
+          const availableTemplates = this.templates[i + 1];
+
+          const matchedTemplates = fuzzaldrinPlus.filter(availableTemplates, this.searchTerm, {
+            key: 'name',
+          });
+
+          if (matchedTemplates.length > 0) {
+            filteredTemplates.push(sectionName, matchedTemplates);
+          }
+        }
+
+        return filteredTemplates;
+      }
+
+      return this.templates;
+    },
+  },
+  methods: {
+    templateClick(template) {
+      // Clicking on the same template should unselect it
+      if (
+        template.name === this.selectedTemplate &&
+        template.project_id === this.selectedFileTemplateProjectId
+      ) {
+        this.$emit('change', {
+          selectedFileTemplateProjectId: null,
+          selectedTemplate: null,
+        });
+        return;
+      }
+
+      this.$emit('change', {
+        selectedFileTemplateProjectId: template.project_id,
+        selectedTemplate: template.key,
+      });
+    },
+  },
+  i18n: {
+    defaultDropdownText: __('Choose a template'),
+  },
+};
+</script>
+<template>
+  <gl-dropdown
+    id="service-desk-template-select"
+    :text="selectedTemplate || $options.i18n.defaultDropdownText"
+    :header-text="$options.i18n.defaultDropdownText"
+    data-qa-selector="service_desk_template_dropdown"
+    :block="true"
+    class="service-desk-template-select"
+    toggle-class="gl-m-0"
+  >
+    <template #header>
+      <gl-search-box-by-type v-model.trim="searchTerm" />
+    </template>
+    <template v-for="item in templateOptions">
+      <gl-dropdown-section-header v-if="!Array.isArray(item)" :key="item">
+        {{ item }}
+      </gl-dropdown-section-header>
+      <template v-else>
+        <gl-dropdown-item
+          v-for="template in item"
+          :key="template.key"
+          :is-check-item="true"
+          :is-checked="
+            template.project_id === selectedFileTemplateProjectId &&
+            template.name === selectedTemplate
+          "
+          @click="() => templateClick(template)"
+        >
+          {{ template.name }}
+        </gl-dropdown-item>
+      </template>
+    </template>
+  </gl-dropdown>
+</template>