[ci skip] Add project name suffix support

Adds project name suffix support in service desk mail
settings.

ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue

@@ -35,6 +35,11 @@ export default {
       required: false,
       default: '',
     },
+    projectKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
     templates: {
       type: Array,
       required: false,
@@ -109,10 +114,10 @@ export default {
         });
     },
 
-    onSaveTemplate({ selectedTemplate, outgoingName }) {
+    onSaveTemplate({ selectedTemplate, outgoingName, projectKey }) {
       this.isTemplateSaving = true;
       this.service
-        .updateTemplate({ selectedTemplate, outgoingName }, this.isEnabled)
+        .updateTemplate({ selectedTemplate, outgoingName, projectKey }, this.isEnabled)
         .then(() => this.showAlert(__('Template was successfully saved.'), 'success'))
         .catch(() =>
           this.showAlert(
@@ -139,14 +144,15 @@ export default {
 
 <template>
   <div>
-    <gl-alert v-if="isAlertShowing" class="mb-3" :variant="alertVariant" @dismiss="onDismiss">{{
-      alertMessage
-    }}</gl-alert>
+    <gl-alert v-if="isAlertShowing" class="mb-3" :variant="alertVariant" @dismiss="onDismiss">
+      {{ alertMessage }}
+    </gl-alert>
     <service-desk-setting
       :is-enabled="isEnabled"
       :incoming-email="incomingEmail"
       :initial-selected-template="selectedTemplate"
       :initial-outgoing-name="outgoingName"
+      :initial-project-key="projectKey"
       :templates="templates"
       :is-template-saving="isTemplateSaving"
     />

ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue

@@ -2,6 +2,7 @@
 import { GlDeprecatedButton, GlFormSelect, GlToggle, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import eventHub from '../event_hub';
 
@@ -17,6 +18,7 @@ export default {
     GlToggle,
     GlLoadingIcon,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     isEnabled: {
       type: Boolean,
@@ -37,6 +39,11 @@ export default {
       required: false,
       default: '',
     },
+    initialProjectKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
     templates: {
       type: Array,
       required: false,
@@ -52,12 +59,16 @@ export default {
     return {
       selectedTemplate: this.initialSelectedTemplate,
       outgoingName: this.initialOutgoingName || __('GitLab Support Bot'),
+      projectKey: this.initialProjectKey,
     };
   },
   computed: {
     templateOptions() {
       return [''].concat(this.templates);
     },
+    hasProjectKeySupport() {
+      return Boolean(this.glFeatures.serviceDeskCustomAddress);
+    },
   },
   methods: {
     onCheckboxToggle(isChecked) {
@@ -67,6 +78,7 @@ export default {
       eventHub.$emit('serviceDeskTemplateSave', {
         selectedTemplate: this.selectedTemplate,
         outgoingName: this.outgoingName,
+        projectKey: this.projectKey,
       });
     },
   },
@@ -83,14 +95,14 @@ export default {
       :label-off="__('Service Desk is off')"
       @change="onCheckboxToggle"
     />
-    <label class="align-middle" for="service-desk-checkbox">{{
-      __('Activate Service Desk')
-    }}</label>
+    <label class="align-middle" for="service-desk-checkbox">
+      {{ __('Activate Service Desk') }}
+    </label>
     <div v-if="isEnabled" class="row mt-3">
       <div class="col-md-9 mb-0">
-        <strong id="incoming-email-describer" class="d-block mb-1">{{
-          __('Forward external support email address to')
-        }}</strong>
+        <strong id="incoming-email-describer" class="d-block mb-1">
+          {{ __('Forward external support email address to') }}
+        </strong>
         <template v-if="incomingEmail">
           <div class="input-group">
             <input
@@ -117,21 +129,34 @@ export default {
           <span class="sr-only">{{ __('Fetching incoming email') }}</span>
         </template>
 
-        <label for="service-desk-template-select" class="mt-3">{{
-          __('Template to append to all Service Desk issues')
-        }}</label>
+        <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"
           :options="templateOptions"
         />
-        <label for="service-desk-email-from-name" class="mt-3">{{
-          __('Email display name')
-        }}</label>
+        <label for="service-desk-email-from-name" class="mt-3">
+          {{ __('Email display name') }}
+        </label>
         <input id="service-desk-email-from-name" v-model.trim="outgoingName" class="form-control" />
-        <span class="form-text text-muted mb-3">{{
-          __('Emails sent from Service Desk will have this name')
-        }}</span>
+        <span class="form-text text-muted">
+          {{ __('Emails sent from Service Desk will have this name') }}
+        </span>
+        <template v-if="hasProjectKeySupport">
+          <label for="service-desk-project-suffix" class="mt-3">
+            {{ __('Project name suffix') }}
+          </label>
+          <input id="service-desk-project-suffix" v-model.trim="projectKey" class="form-control" />
+          <span class="form-text text-muted mb-3">
+            {{
+              __(
+                'Project name suffix is a user-defined string which will be appended to the project path, and will form the Service Desk email address.',
+              )
+            }}
+          </span>
+        </template>
         <gl-deprecated-button
           variant="success"
           :disabled="isTemplateSaving"

ee/app/assets/javascripts/projects/settings_service_desk/index.js

@@ -19,6 +19,7 @@ export default () => {
           incomingEmail: dataset.incomingEmail,
           selectedTemplate: dataset.selectedTemplate,
           outgoingName: dataset.outgoingName,
+          projectKey: dataset.projectKey,
           templates: JSON.parse(dataset.templates),
         };
       },
@@ -30,6 +31,7 @@ export default () => {
             initialIncomingEmail: this.incomingEmail,
             selectedTemplate: this.selectedTemplate,
             outgoingName: this.outgoingName,
+            projectKey: this.projectKey,
             templates: this.templates,
           },
         });

ee/app/assets/javascripts/projects/settings_service_desk/services/service_desk_service.js

@@ -13,10 +13,11 @@ class ServiceDeskService {
     return axios.put(this.endpoint, { service_desk_enabled: enable });
   }
 
-  updateTemplate({ selectedTemplate, outgoingName }, isEnabled) {
+  updateTemplate({ selectedTemplate, outgoingName, projectKey = '' }, isEnabled) {
     const body = {
       issue_template_key: selectedTemplate,
       outgoing_name: outgoingName,
+      project_key: projectKey,
       service_desk_enabled: isEnabled,
     };
     return axios.put(this.endpoint, body);

ee/app/controllers/ee/projects_controller.rb

@@ -9,6 +9,10 @@ module EE
       before_action :log_download_export_audit_event, only: [:download_export]
       before_action :log_archive_audit_event, only: [:archive]
       before_action :log_unarchive_audit_event, only: [:unarchive]
+
+      before_action do
+        push_frontend_feature_flag(:service_desk_custom_address)
+      end
     end
 
     def restore

ee/changelogs/unreleased/2201-fe-service-desk-incoming-mail-address.yml

+---
+title: Added setting to use a custom service desk email
+merge_request: 25240
+author:
+type: added

ee/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js

@@ -160,6 +160,7 @@ describe('ServiceDeskRoot', () => {
         selectedTemplate: 'Bug',
         outgoingName: 'GitLab Support Bot',
         templates: ['Bug', 'Documentation'],
+        projectKey: 'key',
       },
     });
 
@@ -169,6 +170,7 @@ describe('ServiceDeskRoot', () => {
       expect(spy).toHaveBeenCalledWith(endpoint, {
         issue_template_key: 'Bug',
         outgoing_name: 'GitLab Support Bot',
+        project_key: 'key',
         service_desk_enabled: true,
       });
     });

ee/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js

@@ -175,6 +175,7 @@ describe('ServiceDeskSetting', () => {
           isEnabled: true,
           initialSelectedTemplate: 'Bug',
           initialOutgoingName: 'GitLab Support Bot',
+          initialProjectKey: 'key',
         },
       });
 
@@ -183,6 +184,7 @@ describe('ServiceDeskSetting', () => {
       expect(eventSpy).toHaveBeenCalledWith({
         selectedTemplate: 'Bug',
         outgoingName: 'GitLab Support Bot',
+        projectKey: 'key',
       });
 
       eventHub.$off('serviceDeskTemplateSave', eventSpy);

ee/spec/frontend/projects/settings_service_desk/services/service_desk_service_spec.js

@@ -111,6 +111,7 @@ describe('ServiceDeskService', () => {
         {
           selectedTemplate: 'Bug',
           outgoingName: 'GitLab Support Bot',
+          projectKey: 'key',
         },
         true,
       );
@@ -118,6 +119,7 @@ describe('ServiceDeskService', () => {
       expect(spy).toHaveBeenCalledWith(endpoint, {
         issue_template_key: 'Bug',
         outgoing_name: 'GitLab Support Bot',
+        project_key: 'key',
         service_desk_enabled: true,
       });
 

locale/gitlab.pot

@@ -15617,6 +15617,12 @@ msgstr ""
 msgid "Project name"
 msgstr ""
 
+msgid "Project name suffix"
+msgstr ""
+
+msgid "Project name suffix is a user-defined string which will be appended to the project path, and will form the Service Desk email address."
+msgstr ""
+
 msgid "Project order will not be saved as local storage is not available."
 msgstr ""