Commit c9a40be0 authored by Rajat Jain's avatar Rajat Jain

Make Service Desk Pajamas Design compliant

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

Changelog: other
parent d60872a3
<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"
......
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);
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment