Skip to content

G
gitlab-ce
Commit c9a40be0 authored by Rajat Jain's avatar Rajat Jain
Browse files
Options

Make Service Desk Pajamas Design compliant 

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

Changelog: other
parent d60872a3
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 99 deletions
app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
View file @ c9a40be0
<script> <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 { helpPagePath } from '~/helpers/help_page_helper';
import { __ } from '~/locale'; import { __ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
...@@ -16,6 +25,8 @@ export default { ...@@ -16,6 +25,8 @@ export default {
GlLoadingIcon, GlLoadingIcon,
GlSprintf, GlSprintf,
GlFormInput, GlFormInput,
GlFormGroup,
GlFormInputGroup,
GlLink, GlLink,
ServiceDeskTemplateDropdown, ServiceDeskTemplateDropdown,
}, },
...@@ -143,114 +154,122 @@ export default { ...@@ -143,114 +154,122 @@ export default {
</label> </label>
<div v-if="isEnabled" class="row mt-3"> <div v-if="isEnabled" class="row mt-3">
<div class="col-md-9 mb-0"> <div class="col-md-9 mb-0">
<strong <gl-form-group
id="incoming-email-describer" :label="__('Email address to use for Support Desk')"
class="gl-display-block gl-mb-1" label-for="incoming-email"
data-testid="incoming-email-describer" data-testid="incoming-email-label"
> >
{{ __('Email address to use for Support Desk') }} <gl-form-input-group v-if="email">
</strong> <gl-form-input
<template v-if="email"> id="incoming-email"
<div class="input-group">
<input
ref="service-desk-incoming-email" ref="service-desk-incoming-email"
type="text" type="text"
class="form-control"
data-testid="incoming-email" data-testid="incoming-email"
:placeholder="__('Incoming email')" :placeholder="__('Incoming email')"
:aria-label="__('Incoming email')" :aria-label="__('Incoming email')"
aria-describedby="incoming-email-describer" aria-describedby="incoming-email-describer"
:value="email" :value="email"
disabled="true" :disabled="true"
/> />
<div class="input-group-append"> <template #append>
<clipboard-button :title="__('Copy')" :text="email" css-class="input-group-text" /> <clipboard-button :title="__('Copy')" :text="email" css-class="input-group-text" />
</div> </template>
</div> </gl-form-input-group>
<span v-if="hasCustomEmail" class="form-text text-muted"> <template v-if="email && hasCustomEmail" #description>
<gl-sprintf :message="__('Emails sent to %{email} are also supported.')"> <span class="gl-mt-2 d-inline-block">
<template #email> <gl-sprintf :message="__('Emails sent to %{email} are also supported.')">
<code>{{ incomingEmail }}</code> <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> </template>
</gl-sprintf> </gl-sprintf>
</span> </template>
</template> <template v-else #description>
<template v-else> <gl-sprintf
<gl-loading-icon size="sm" :inline="true" /> :message="
<span class="sr-only">{{ __('Fetching incoming email') }}</span> __(
</template> '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"> <gl-form-group
{{ __('Email address suffix') }} :label="__('Template to append to all Service Desk issues')"
</label>
<gl-form-input
v-if="hasProjectKeySupport"
id="service-desk-project-suffix"
v-model.trim="projectKey"
data-testid="project-suffix"
class="form-control"
:state="!projectKeyError" :state="!projectKeyError"
@blur="validateProjectKey" class="mt-3"
/>
<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 }"
> >
<gl-sprintf <service-desk-template-dropdown
:message=" :selected-template="selectedTemplate"
__('Add a suffix to Service Desk email address. %{linkStart}Learn more.%{linkEnd}') :selected-file-template-project-id="selectedFileTemplateProjectId"
" :templates="templates"
> @change="templateChange"
<template #link="{ content }"> />
<gl-link </gl-form-group>
:href="emailSuffixHelpUrl"
target="_blank" <gl-form-group
class="gl-text-blue-600 font-size-inherit" :label="__('Email display name')"
>{{ content }} label-for="service-desk-email-from-name"
</gl-link> :state="!projectKeyError"
</template> class="mt-3"
</gl-sprintf> >
</span> <gl-form-input
<span v-else class="form-text text-muted"> v-if="hasProjectKeySupport"
<gl-sprintf id="service-desk-email-from-name"
:message=" v-model.trim="outgoingName"
__( data-testid="email-from-name"
'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>
<label for="service-desk-template-select" class="mt-3"> <template v-if="hasProjectKeySupport" #description>
{{ __('Template to append to all Service Desk issues') }} {{ __('Emails sent from Service Desk have this name.') }}
</label> </template>
<service-desk-template-dropdown </gl-form-group>
:selected-template="selectedTemplate"
:selected-file-template-project-id="selectedFileTemplateProjectId"
:templates="templates"
@change="templateChange"
/>
<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"> <div class="gl-display-flex gl-justify-content-end">
<gl-button <gl-button
variant="success" variant="success"
......
spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
View file @ c9a40be0
import { GlButton, GlDropdown, GlLoadingIcon, GlToggle } from '@gitlab/ui'; 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 { nextTick } from 'vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue'; import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue';
...@@ -11,14 +11,14 @@ describe('ServiceDeskSetting', () => { ...@@ -11,14 +11,14 @@ describe('ServiceDeskSetting', () => {
const findButton = () => wrapper.find(GlButton); const findButton = () => wrapper.find(GlButton);
const findClipboardButton = () => wrapper.find(ClipboardButton); const findClipboardButton = () => wrapper.find(ClipboardButton);
const findIncomingEmail = () => wrapper.findByTestId('incoming-email'); 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 findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findTemplateDropdown = () => wrapper.find(GlDropdown); const findTemplateDropdown = () => wrapper.find(GlDropdown);
const findToggle = () => wrapper.find(GlToggle); const findToggle = () => wrapper.find(GlToggle);
const createComponent = ({ props = {}, mountFunction = shallowMount } = {}) => const createComponent = ({ props = {} } = {}) =>
extendedWrapper( extendedWrapper(
mountFunction(ServiceDeskSetting, { mount(ServiceDeskSetting, {
propsData: { propsData: {
isEnabled: true, isEnabled: true,
...props, ...props,
...@@ -131,8 +131,7 @@ describe('ServiceDeskSetting', () => { ...@@ -131,8 +131,7 @@ describe('ServiceDeskSetting', () => {
it('shows error when value contains uppercase or special chars', async () => { it('shows error when value contains uppercase or special chars', async () => {
wrapper = createComponent({ wrapper = createComponent({
props: { customEmailEnabled: true }, props: { email: 'foo@bar.com', customEmailEnabled: true },
mountFunction: mount,
}); });
const input = wrapper.findByTestId('project-suffix'); const input = wrapper.findByTestId('project-suffix');
...@@ -142,7 +141,7 @@ describe('ServiceDeskSetting', () => { ...@@ -142,7 +141,7 @@ describe('ServiceDeskSetting', () => {
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
const errorText = wrapper.find('.text-danger'); const errorText = wrapper.find('.invalid-feedback');
expect(errorText.exists()).toBe(true); 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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7