Improve service desk service settings input tips

Improve service desk suffix input tooltip and
add link to documentation.

Changelog: other

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

 <script>
 import { GlButton, GlToggle, GlLoadingIcon, GlSprintf, GlFormInput, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import ServiceDeskTemplateDropdown from './service_desk_template_dropdown.vue';
@@ -88,6 +89,16 @@ export default {
     hasCustomEmail() {
       return this.customEmail && this.customEmail !== this.incomingEmail;
     },
+    emailSuffixHelpUrl() {
+      return helpPagePath('user/project/service_desk.html', {
+        anchor: 'configuring-a-custom-email-address-suffix',
+      });
+    },
+    customEmailAddressHelpUrl() {
+      return helpPagePath('user/project/service_desk.html', {
+        anchor: 'using-a-custom-email-address',
+      });
+    },
   },
   methods: {
     onCheckboxToggle(isChecked) {
@@ -170,7 +181,7 @@ export default {
         </template>
 
         <label for="service-desk-project-suffix" class="mt-3">
-          {{ __('Project name suffix') }}
+          {{ __('Email address suffix') }}
         </label>
         <gl-form-input
           v-if="hasProjectKeySupport"
@@ -189,7 +200,20 @@ export default {
           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.') }}
+          <gl-sprintf
+            :message="
+              __('Add a suffix to Service Desk email address. %{linkStart}Learn more.%{linkEnd}')
+            "
+          >
+            <template #link="{ content }">
+              <gl-link
+                :href="emailSuffixHelpUrl"
+                target="_blank"
+                class="gl-text-blue-600 font-size-inherit"
+                >{{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
         </span>
         <span v-else class="form-text text-muted">
           <gl-sprintf
@@ -201,7 +225,7 @@ export default {
           >
             <template #link="{ content }">
               <gl-link
-                href="https://docs.gitlab.com/ee/user/project/service_desk.html#using-a-custom-email-address"
+                :href="customEmailAddressHelpUrl"
                 target="_blank"
                 class="gl-text-blue-600 font-size-inherit"
                 >{{ content }}

doc/user/project/service_desk.md

@@ -274,7 +274,7 @@ When configured, the custom suffix creates a new Service Desk email address, con
 
 For example, suppose the `mygroup/myproject` project Service Desk settings has the following configured:
 
-- Project name suffix is set to `support`.
+- Email address suffix is set to `support`.
 - Service Desk email address is configured to `contact+%{key}@example.com`.
 
 The Service Desk email address for this project is: `contact+mygroup-myproject-support@example.com`.

locale/gitlab.pot

@@ -1536,9 +1536,6 @@ msgstr ""
 msgid "A sign-in to your account has been made from the following IP address: %{ip}"
 msgstr ""
 
-msgid "A string appended to the project path to form the Service Desk email address."
-msgstr ""
-
 msgid "A title is required"
 msgstr ""
 
@@ -1971,6 +1968,9 @@ msgstr ""
 msgid "Add a related issue"
 msgstr ""
 
+msgid "Add a suffix to Service Desk email address. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
 msgid "Add a table"
 msgstr ""
 
@@ -12687,6 +12687,9 @@ msgstr ""
 msgid "Email a new %{name} to this project"
 msgstr ""
 
+msgid "Email address suffix"
+msgstr ""
+
 msgid "Email address to use for Support Desk"
 msgstr ""
 
@@ -26928,9 +26931,6 @@ msgstr ""
 msgid "Project name"
 msgstr ""
 
-msgid "Project name suffix"
-msgstr ""
-
 msgid "Project navigation"
 msgstr ""