Add `Email display name` within Service Desk settings

Adds support for providing custom "Email display name" within
Service Desk settings under Project Settings.

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

@@ -30,6 +30,11 @@ export default {
       required: false,
       default: '',
     },
+    outgoingName: {
+      type: String,
+      required: false,
+      default: '',
+    },
     templates: {
       type: Array,
       required: false,
@@ -104,10 +109,10 @@ export default {
         });
     },
 
-    onSaveTemplate(template) {
+    onSaveTemplate({ selectedTemplate, outgoingName }) {
       this.isTemplateSaving = true;
       this.service
-        .updateTemplate(template, this.isEnabled)
+        .updateTemplate({ selectedTemplate, outgoingName }, this.isEnabled)
         .then(() => this.showAlert(__('Template was successfully saved.'), 'success'))
         .catch(() =>
           this.showAlert(
@@ -134,13 +139,14 @@ 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"
       :templates="templates"
       :is-template-saving="isTemplateSaving"
     />

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

 <script>
 import { GlButton, GlFormSelect, GlToggle } from '@gitlab/ui';
+import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import eventHub from '../event_hub';
@@ -30,6 +31,11 @@ export default {
       required: false,
       default: '',
     },
+    initialOutgoingName: {
+      type: String,
+      required: false,
+      default: '',
+    },
     templates: {
       type: Array,
       required: false,
@@ -44,6 +50,7 @@ export default {
   data() {
     return {
       selectedTemplate: this.initialSelectedTemplate,
+      outgoingName: this.initialOutgoingName || __('GitLab Support Bot'),
     };
   },
   computed: {
@@ -56,7 +63,10 @@ export default {
       eventHub.$emit('serviceDeskEnabledCheckboxToggled', isChecked);
     },
     onSaveTemplate() {
-      eventHub.$emit('serviceDeskTemplateSave', this.selectedTemplate);
+      eventHub.$emit('serviceDeskTemplateSave', {
+        selectedTemplate: this.selectedTemplate,
+        outgoingName: this.outgoingName,
+      });
     },
   },
 };
@@ -72,14 +82,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
@@ -102,22 +112,28 @@ export default {
           </div>
         </template>
         <template v-else>
-          <i class="fa fa-spinner fa-spin" aria-hidden="true"> </i>
+          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
           <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"
-          class="mb-3"
           :options="templateOptions"
         />
-        <gl-button variant="success" :disabled="isTemplateSaving" @click="onSaveTemplate">
-          {{ __('Save template') }}
-        </gl-button>
+        <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>
+        <gl-button variant="success" :disabled="isTemplateSaving" @click="onSaveTemplate">{{
+          __('Save template')
+        }}</gl-button>
       </div>
     </div>
   </div>

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

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

ee/app/views/projects/_service_desk_settings.html.haml

@@ -13,6 +13,7 @@
           enabled: "#{@project.service_desk_enabled}",
           incoming_email: (@project.service_desk_address if @project.service_desk_enabled),
           selected_template: "#{@project.service_desk_setting&.issue_template_key}",
+          outgoing_name: "#{@project.service_desk_setting&.outgoing_name}",
           templates: issuable_templates_names(Issue.new) } }
       - elsif show_promotions? && show_callout?('promote_service_desk_dismissed')
         = render 'shared/promotions/promote_servicedesk'

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

@@ -158,6 +158,7 @@ describe('ServiceDeskRoot', () => {
         endpoint,
         initialIncomingEmail,
         selectedTemplate: 'Bug',
+        outgoingName: 'GitLab Support Bot',
         templates: ['Bug', 'Documentation'],
       },
     });
@@ -167,6 +168,7 @@ describe('ServiceDeskRoot', () => {
     return wrapper.vm.$nextTick(() => {
       expect(spy).toHaveBeenCalledWith(endpoint, {
         issue_template_key: 'Bug',
+        outgoing_name: 'GitLab Support Bot',
         service_desk_enabled: true,
       });
     });

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

@@ -173,12 +173,16 @@ describe('ServiceDeskSetting', () => {
         propsData: {
           isEnabled: true,
           initialSelectedTemplate: 'Bug',
+          initialOutgoingName: 'GitLab Support Bot',
         },
       });
 
       wrapper.find('button.btn-success').trigger('click');
 
-      expect(eventSpy).toHaveBeenCalledWith('Bug');
+      expect(eventSpy).toHaveBeenCalledWith({
+        selectedTemplate: 'Bug',
+        outgoingName: 'GitLab Support Bot',
+      });
 
       eventHub.$off('serviceDeskTemplateSave', eventSpy);
       eventSpy.mockRestore();

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

@@ -73,17 +73,33 @@ describe('ServiceDeskService', () => {
     it('makes a request to update template', () => {
       axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse);
 
-      return service.updateTemplate('Bug', true).then(response => {
-        expect(response.data).toEqual(dummyResponse);
-      });
+      return service
+        .updateTemplate(
+          {
+            selectedTemplate: 'Bug',
+            outgoingName: 'GitLab Support Bot',
+          },
+          true,
+        )
+        .then(response => {
+          expect(response.data).toEqual(dummyResponse);
+        });
     });
 
     it('fails on error response', () => {
       axiosMock.onPut(endpoint).networkError();
 
-      return service.updateTemplate('Bug', true).catch(error => {
-        expect(error.message).toBe(errorMessage);
-      });
+      return service
+        .updateTemplate(
+          {
+            selectedTemplate: 'Bug',
+            outgoingName: 'GitLab Support Bot',
+          },
+          true,
+        )
+        .catch(error => {
+          expect(error.message).toBe(errorMessage);
+        });
     });
 
     it('makes a request with the expected body', () => {
@@ -91,10 +107,17 @@ describe('ServiceDeskService', () => {
 
       const spy = jest.spyOn(axios, 'put');
 
-      service.updateTemplate('Bug', true);
+      service.updateTemplate(
+        {
+          selectedTemplate: 'Bug',
+          outgoingName: 'GitLab Support Bot',
+        },
+        true,
+      );
 
       expect(spy).toHaveBeenCalledWith(endpoint, {
         issue_template_key: 'Bug',
+        outgoing_name: 'GitLab Support Bot',
         service_desk_enabled: true,
       });
 

locale/gitlab.pot

@@ -6798,6 +6798,9 @@ msgstr ""
 msgid "Email address"
 msgstr ""
 
+msgid "Email display name"
+msgstr ""
+
 msgid "Email domain is not editable in subgroups. Value inherited from top-level parent group."
 msgstr ""
 
@@ -6843,6 +6846,9 @@ msgstr ""
 msgid "Emails"
 msgstr ""
 
+msgid "Emails sent from Service Desk will have this name"
+msgstr ""
+
 msgid "Emails separated by comma"
 msgstr ""
 
@@ -8915,6 +8921,9 @@ msgstr ""
 msgid "GitLab Shared Runners execute code of different projects on the same Runner unless you configure GitLab Runner Autoscale with MaxBuilds 1 (which it is on GitLab.com)."
 msgstr ""
 
+msgid "GitLab Support Bot"
+msgstr ""
+
 msgid "GitLab User"
 msgstr ""