Make Service Desk Pajamas Design compliant

Use Gitlab UI components in service_desk_settings
to have more consistent looking spacing

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 {
+  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,114 +154,122 @@ 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">
-            <gl-sprintf :message="__('Emails sent to %{email} are also supported.')">
-              <template #email>
-                <code>{{ incomingEmail }}</code>
+            </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>
+                </template>
+              </gl-sprintf>
+            </span>
+          </template>
+          <template v-if="!email">
+            <gl-loading-icon size="sm" :inline="true" />
+            <span class="sr-only">{{ __('Fetching incoming email') }}</span>
+          </template>
+        </gl-form-group>
+
+        <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"
+            @blur="validateProjectKey"
+          />
+
+          <template v-if="hasProjectKeySupport" #description>
+            <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>
-        </template>
-        <template v-else>
-          <gl-loading-icon size="sm" :inline="true" />
-          <span class="sr-only">{{ __('Fetching incoming email') }}</span>
-        </template>
+          </template>
+          <template v-else #description>
+            <gl-sprintf
+              :message="
+                __(
+                  'To add a custom suffix, set up a Service Desk email address. %{linkStart}Learn more.%{linkEnd}',
+                )
+              "
+            >
+              <template #link="{ content }">
+                <gl-link
+                  :href="customEmailAddressHelpUrl"
+                  target="_blank"
+                  class="gl-text-blue-600 font-size-inherit"
+                  >{{ content }}
+                </gl-link>
+              </template>
+            </gl-sprintf>
+          </template>
+
+          <template v-if="hasProjectKeySupport && projectKeyError" #invalid-feedback>
+            {{ projectKeyError }}
+          </template>
+        </gl-form-group>
 
-        <label for="service-desk-project-suffix" class="mt-3">
-          {{ __('Email address suffix') }}
-        </label>
-        <gl-form-input
-          v-if="hasProjectKeySupport"
-          id="service-desk-project-suffix"
-          v-model.trim="projectKey"
-          data-testid="project-suffix"
-          class="form-control"
+        <gl-form-group
+          :label="__('Template to append to all Service Desk issues')"
           :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 }"
+          class="mt-3"
         >
-          <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
-            :message="
-              __(
-                'To add a custom suffix, set up a Service Desk email address. %{linkStart}Learn more.%{linkEnd}',
-              )
-            "
-          >
-            <template #link="{ content }">
-              <gl-link
-                :href="customEmailAddressHelpUrl"
-                target="_blank"
-                class="gl-text-blue-600 font-size-inherit"
-                >{{ content }}
-              </gl-link>
-            </template>
-          </gl-sprintf>
-        </span>
+          <service-desk-template-dropdown
+            :selected-template="selectedTemplate"
+            :selected-file-template-project-id="selectedFileTemplateProjectId"
+            :templates="templates"
+            @change="templateChange"
+          />
+        </gl-form-group>
+
+        <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"
+          />
 
-        <label for="service-desk-template-select" class="mt-3">
-          {{ __('Template to append to all Service Desk issues') }}
-        </label>
-        <service-desk-template-dropdown
-          :selected-template="selectedTemplate"
-          :selected-file-template-project-id="selectedFileTemplateProjectId"
-          :templates="templates"
-          @change="templateChange"
-        />
+          <template v-if="hasProjectKeySupport" #description>
+            {{ __('Emails sent from Service Desk have this name.') }}
+          </template>
+        </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">
-          {{ __('Emails sent from Service Desk have this name.') }}
-        </span>
         <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);
         });
       });