Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

1 files changed, 41 insertions, 19 deletions

diff --git a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
index fe2d376f1da..b8053bf9ab5 100644
--- a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
+++ b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
@@ -1,15 +1,8 @@
 <script>
-import {
-  GlButton,
-  GlFormSelect,
-  GlToggle,
-  GlLoadingIcon,
-  GlSprintf,
-  GlFormInput,
-  GlLink,
-} from '@gitlab/ui';
+import { GlButton, GlToggle, GlLoadingIcon, GlSprintf, GlFormInput, GlLink } from '@gitlab/ui';
 import { __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ServiceDeskTemplateDropdown from './service_desk_template_dropdown.vue';
 
 export default {
   i18n: {
@@ -18,12 +11,12 @@ export default {
   components: {
     ClipboardButton,
     GlButton,
-    GlFormSelect,
     GlToggle,
     GlLoadingIcon,
     GlSprintf,
     GlFormInput,
     GlLink,
+    ServiceDeskTemplateDropdown,
   },
   props: {
     isEnabled: {
@@ -49,6 +42,11 @@ export default {
       required: false,
       default: '',
     },
+    initialSelectedFileTemplateProjectId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
     initialOutgoingName: {
       type: String,
       required: false,
@@ -73,14 +71,14 @@ export default {
   data() {
     return {
       selectedTemplate: this.initialSelectedTemplate,
+      selectedFileTemplateProjectId: this.initialSelectedFileTemplateProjectId,
       outgoingName: this.initialOutgoingName || __('GitLab Support Bot'),
       projectKey: this.initialProjectKey,
+      searchTerm: '',
+      projectKeyError: null,
     };
   },
   computed: {
-    templateOptions() {
-      return [''].concat(this.templates);
-    },
     hasProjectKeySupport() {
       return Boolean(this.customEmailEnabled);
     },
@@ -100,8 +98,21 @@ export default {
         selectedTemplate: this.selectedTemplate,
         outgoingName: this.outgoingName,
         projectKey: this.projectKey,
+        fileTemplateProjectId: this.selectedFileTemplateProjectId,
       });
     },
+    templateChange({ selectedFileTemplateProjectId, selectedTemplate }) {
+      this.selectedFileTemplateProjectId = selectedFileTemplateProjectId;
+      this.selectedTemplate = selectedTemplate;
+    },
+    validateProjectKey() {
+      if (this.projectKey && !new RegExp(/^[a-z0-9_]+$/).test(this.projectKey)) {
+        this.projectKeyError = __('Only use lowercase letters, numbers, and underscores.');
+        return;
+      }
+
+      this.projectKeyError = null;
+    },
   },
 };
 </script>
@@ -167,8 +178,17 @@ export default {
           v-model.trim="projectKey"
           data-testid="project-suffix"
           class="form-control"
+          :state="!projectKeyError"
+          @blur="validateProjectKey"
         />
-        <span v-if="hasProjectKeySupport" class="form-text text-muted">
+        <span v-if="hasProjectKeySupport && projectKeyError" class="form-text text-danger">
+          {{ projectKeyError }}
+        </span>
+        <span
+          v-if="hasProjectKeySupport"
+          class="form-text text-muted"
+          :class="{ 'gl-mt-2!': hasProjectKeySupport && projectKeyError }"
+        >
           {{ __('A string appended to the project path to form the Service Desk email address.') }}
         </span>
         <span v-else class="form-text text-muted">
@@ -193,12 +213,13 @@ export default {
         <label for="service-desk-template-select" class="mt-3">
           {{ __('Template to append to all Service Desk issues') }}
         </label>
-        <gl-form-select
-          id="service-desk-template-select"
-          v-model="selectedTemplate"
-          data-qa-selector="service_desk_template_dropdown"
-          :options="templateOptions"
+        <service-desk-template-dropdown
+          :selected-template="selectedTemplate"
+          :selected-file-template-project-id="selectedFileTemplateProjectId"
+          :templates="templates"
+          @change="templateChange"
         />
+
         <label for="service-desk-email-from-name" class="mt-3">
           {{ __('Email display name') }}
         </label>
@@ -210,6 +231,7 @@ export default {
           <gl-button
             variant="success"
             class="gl-mt-5"
+            data-testid="save_service_desk_settings_button"
             data-qa-selector="save_service_desk_settings_button"
             :disabled="isTemplateSaving"
             @click="onSaveTemplate"