Commit 9cd9ca44 authored by Rajat Jain's avatar Rajat Jain

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
parent 5e00874a
<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') }}
......
......@@ -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 ""
......
......@@ -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
......
......@@ -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';
......
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