Add help icon in ServiceDeskSetting

Add question mark symbol with doc links next to emails
for explaining why we moved away from the previous
(legacy) email address

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

@@ -59,6 +59,16 @@ export default {
             :text="incomingEmail"
             css-class="btn btn-clipboard btn-transparent"
           />
+          <a
+            href="https://docs.gitlab.com/ee/development/emails.html#email-namespace"
+            target="_blank"
+            rel="noopener"
+          >
+            <i
+              class="fa fa-question-circle"
+              :aria-label="__('Learn more about incoming email addresses')"
+            ></i>
+          </a>
         </template>
         <template v-else>
           <i class="fa fa-spinner fa-spin" aria-hidden="true"> </i>

ee/changelogs/unreleased/29951-add-question-mark.yml

+---
+title: Add docs link to explain legacy and new email format
+merge_request: 9020
+author:
+type: changed

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

@@ -67,6 +67,18 @@ describe('ServiceDeskSetting', () => {
         expect(button).not.toBe(null);
         expect(button.dataset.clipboardText).toBe(incomingEmail);
       });
+
+      it('renders a help question icon which links to gitlab docs', () => {
+        const link = vm.$el.querySelector('.card-body a');
+
+        expect(link).not.toBeNull();
+
+        expect(link.href).toContain('docs.gitlab.com');
+
+        const icon = link.querySelector('i.fa-question-circle');
+
+        expect(icon).not.toBeNull();
+      });
     });
   });
 

locale/gitlab.pot

@@ -5103,6 +5103,9 @@ msgstr ""
 msgid "Learn more about group-level project templates"
 msgstr ""
 
+msgid "Learn more about incoming email addresses"
+msgstr ""
+
 msgid "Learn more about protected branches"
 msgstr ""