Merge branch 'rajatgitlab/service-desk-pj' into 'master'

Make Service Desk Pajamas Compliant

See merge request gitlab-org/gitlab!74795

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

 <script>
-import { GlButton, GlToggle, GlLoadingIcon, GlSprintf, GlFormInput, GlLink } from '@gitlab/ui';
+import {
+  GlButton,
+  GlToggle,
+  GlLoadingIcon,
+  GlSprintf,
+  GlFormInputGroup,
+  GlFormGroup,
+  GlFormInput,
+  GlLink,
+} from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -16,6 +25,8 @@ export default {
     GlLoadingIcon,
     GlSprintf,
     GlFormInput,
+    GlFormGroup,
+    GlFormInputGroup,
     GlLink,
     ServiceDeskTemplateDropdown,
   },
@@ -143,31 +154,29 @@ export default {
     </label>
     <div v-if="isEnabled" class="row mt-3">
       <div class="col-md-9 mb-0">
-        <strong
-          id="incoming-email-describer"
-          class="gl-display-block gl-mb-1"
-          data-testid="incoming-email-describer"
+        <gl-form-group
+          :label="__('Email address to use for Support Desk')"
+          label-for="incoming-email"
+          data-testid="incoming-email-label"
         >
-          {{ __('Email address to use for Support Desk') }}
-        </strong>
-        <template v-if="email">
-          <div class="input-group">
-            <input
+          <gl-form-input-group v-if="email">
+            <gl-form-input
+              id="incoming-email"
               ref="service-desk-incoming-email"
               type="text"
-              class="form-control"
               data-testid="incoming-email"
               :placeholder="__('Incoming email')"
               :aria-label="__('Incoming email')"
               aria-describedby="incoming-email-describer"
               :value="email"
-              disabled="true"
+              :disabled="true"
             />
-            <div class="input-group-append">
+            <template #append>
               <clipboard-button :title="__('Copy')" :text="email" css-class="input-group-text" />
-            </div>
-          </div>
-          <span v-if="hasCustomEmail" class="form-text text-muted">
+            </template>
+          </gl-form-input-group>
+          <template v-if="email && hasCustomEmail" #description>
+            <span class="gl-mt-2 d-inline-block">
               <gl-sprintf :message="__('Emails sent to %{email} are also supported.')">
                 <template #email>
                   <code>{{ incomingEmail }}</code>
@@ -175,31 +184,22 @@ export default {
               </gl-sprintf>
             </span>
           </template>
-        <template v-else>
+          <template v-if="!email">
             <gl-loading-icon size="sm" :inline="true" />
             <span class="sr-only">{{ __('Fetching incoming email') }}</span>
           </template>
+        </gl-form-group>
 
-        <label for="service-desk-project-suffix" class="mt-3">
-          {{ __('Email address suffix') }}
-        </label>
+        <gl-form-group :label="__('Email address suffix')" :state="!projectKeyError">
           <gl-form-input
             v-if="hasProjectKeySupport"
             id="service-desk-project-suffix"
             v-model.trim="projectKey"
             data-testid="project-suffix"
-          class="form-control"
-          :state="!projectKeyError"
             @blur="validateProjectKey"
           />
-        <span v-if="hasProjectKeySupport && projectKeyError" class="form-text text-danger">
-          {{ projectKeyError }}
-        </span>
-        <span
-          v-if="hasProjectKeySupport"
-          class="form-text text-muted"
-          :class="{ 'gl-mt-2!': hasProjectKeySupport && projectKeyError }"
-        >
+
+          <template v-if="hasProjectKeySupport" #description>
             <gl-sprintf
               :message="
                 __('Add a suffix to Service Desk email address. %{linkStart}Learn more.%{linkEnd}')
@@ -214,8 +214,8 @@ export default {
                 </gl-link>
               </template>
             </gl-sprintf>
-        </span>
-        <span v-else class="form-text text-muted">
+          </template>
+          <template v-else #description>
             <gl-sprintf
               :message="
                 __(
@@ -232,25 +232,44 @@ export default {
                 </gl-link>
               </template>
             </gl-sprintf>
-        </span>
+          </template>
 
-        <label for="service-desk-template-select" class="mt-3">
-          {{ __('Template to append to all Service Desk issues') }}
-        </label>
+          <template v-if="hasProjectKeySupport && projectKeyError" #invalid-feedback>
+            {{ projectKeyError }}
+          </template>
+        </gl-form-group>
+
+        <gl-form-group
+          :label="__('Template to append to all Service Desk issues')"
+          :state="!projectKeyError"
+          class="mt-3"
+        >
           <service-desk-template-dropdown
             :selected-template="selectedTemplate"
             :selected-file-template-project-id="selectedFileTemplateProjectId"
             :templates="templates"
             @change="templateChange"
           />
+        </gl-form-group>
 
-        <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">
+        <gl-form-group
+          :label="__('Email display name')"
+          label-for="service-desk-email-from-name"
+          :state="!projectKeyError"
+          class="mt-3"
+        >
+          <gl-form-input
+            v-if="hasProjectKeySupport"
+            id="service-desk-email-from-name"
+            v-model.trim="outgoingName"
+            data-testid="email-from-name"
+          />
+
+          <template v-if="hasProjectKeySupport" #description>
             {{ __('Emails sent from Service Desk have this name.') }}
-        </span>
+          </template>
+        </gl-form-group>
+
         <div class="gl-display-flex gl-justify-content-end">
           <gl-button
             variant="success"

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

 import { GlButton, GlDropdown, GlLoadingIcon, GlToggle } from '@gitlab/ui';
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue';
@@ -11,14 +11,14 @@ describe('ServiceDeskSetting', () => {
   const findButton = () => wrapper.find(GlButton);
   const findClipboardButton = () => wrapper.find(ClipboardButton);
   const findIncomingEmail = () => wrapper.findByTestId('incoming-email');
-  const findIncomingEmailLabel = () => wrapper.findByTestId('incoming-email-describer');
+  const findIncomingEmailLabel = () => wrapper.findByTestId('incoming-email-label');
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findTemplateDropdown = () => wrapper.find(GlDropdown);
   const findToggle = () => wrapper.find(GlToggle);
 
-  const createComponent = ({ props = {}, mountFunction = shallowMount } = {}) =>
+  const createComponent = ({ props = {} } = {}) =>
     extendedWrapper(
-      mountFunction(ServiceDeskSetting, {
+      mount(ServiceDeskSetting, {
         propsData: {
           isEnabled: true,
           ...props,
@@ -131,8 +131,7 @@ describe('ServiceDeskSetting', () => {
 
         it('shows error when value contains uppercase or special chars', async () => {
           wrapper = createComponent({
-            props: { customEmailEnabled: true },
-            mountFunction: mount,
+            props: { email: 'foo@bar.com', customEmailEnabled: true },
           });
 
           const input = wrapper.findByTestId('project-suffix');
@@ -142,7 +141,7 @@ describe('ServiceDeskSetting', () => {
 
           await wrapper.vm.$nextTick();
 
-          const errorText = wrapper.find('.text-danger');
+          const errorText = wrapper.find('.invalid-feedback');
           expect(errorText.exists()).toBe(true);
         });
       });