Show project suffix input as disabled

Users are confused about the `service_desk_email` configuration and
often wonder why it's not working correctly even when it's configured.

Changelog: changed

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

 <script>
-import { GlButton, GlFormSelect, GlToggle, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import {
+  GlButton,
+  GlFormSelect,
+  GlToggle,
+  GlLoadingIcon,
+  GlSprintf,
+  GlFormInput,
+  GlLink,
+} from '@gitlab/ui';
 import { __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
@@ -14,6 +22,8 @@ export default {
     GlToggle,
     GlLoadingIcon,
     GlSprintf,
+    GlFormInput,
+    GlLink,
   },
   props: {
     isEnabled: {
@@ -148,17 +158,37 @@ export default {
           <span class="sr-only">{{ __('Fetching incoming email') }}</span>
         </template>
 
-        <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">
-            {{
-              __('A string appended to the project path to form the Service Desk email address.')
-            }}
-          </span>
-        </template>
+        <label for="service-desk-project-suffix" class="mt-3">
+          {{ __('Project name suffix') }}
+        </label>
+        <gl-form-input
+          v-if="hasProjectKeySupport"
+          id="service-desk-project-suffix"
+          v-model.trim="projectKey"
+          data-testid="project-suffix"
+          class="form-control"
+        />
+        <span v-if="hasProjectKeySupport" class="form-text text-muted">
+          {{ __('A string appended to the project path to form the Service Desk email address.') }}
+        </span>
+        <span v-else class="form-text text-muted">
+          <gl-sprintf
+            :message="
+              __(
+                'Please set up a Service Desk email address in order to add a custom suffix. %{linkStart}Learn more%{linkEnd}.',
+              )
+            "
+          >
+            <template #link="{ content }">
+              <gl-link
+                href="https://docs.gitlab.com/ee/user/project/service_desk.html#using-a-custom-email-address"
+                target="_blank"
+                class="gl-text-blue-600 font-size-inherit"
+                >{{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </span>
 
         <label for="service-desk-template-select" class="mt-3">
           {{ __('Template to append to all Service Desk issues') }}

locale/gitlab.pot

@@ -25232,6 +25232,9 @@ msgstr ""
 msgid "Please set a new password before proceeding."
 msgstr ""
 
+msgid "Please set up a Service Desk email address in order to add a custom suffix. %{linkStart}Learn more%{linkEnd}."
+msgstr ""
+
 msgid "Please share your feedback about %{featureName} %{linkStart}in this issue%{linkEnd} to help us improve the experience."
 msgstr ""
 

spec/features/projects/settings/service_desk_setting_spec.rb

@@ -38,7 +38,6 @@ RSpec.describe 'Service Desk Setting', :js, :clean_gitlab_redis_cache do
       expect(project.service_desk_enabled).to be_truthy
       expect(project.service_desk_address).to be_present
       expect(find('[data-testid="incoming-email"]').value).to eq(project.service_desk_incoming_address)
-      expect(page).not_to have_selector('#service-desk-project-suffix')
     end
   end
 

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

@@ -107,6 +107,29 @@ describe('ServiceDeskSetting', () => {
         });
       });
 
+      describe('project suffix', () => {
+        it('input is hidden', () => {
+          wrapper = createComponent({
+            props: { customEmailEnabled: false },
+          });
+
+          const input = wrapper.findByTestId('project-suffix');
+
+          expect(input.exists()).toBe(false);
+        });
+
+        it('input is enabled', () => {
+          wrapper = createComponent({
+            props: { customEmailEnabled: true },
+          });
+
+          const input = wrapper.findByTestId('project-suffix');
+
+          expect(input.exists()).toBe(true);
+          expect(input.attributes('disabled')).toBeUndefined();
+        });
+      });
+
       describe('customEmail is the same as incomingEmail', () => {
         const email = 'foo@bar.com';