diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-24 12:09:58 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-11-24 12:09:58 +0300 |
commit | 49cea0b04a1138a00cc7068c4c1a997867aeae88 (patch) | |
tree | 8fcb67c495910b1e29d3d103c67f4b5ab08f4486 /app/assets/javascripts/projects | |
parent | b8c4740f87d08217b970b6441eda28f79b78ecef (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/projects')
-rw-r--r-- | app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue | 203 |
1 files changed, 111 insertions, 92 deletions
diff --git a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue index 5d66a5900a1..e5ddfe82e3b 100644 --- a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue +++ b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue @@ -1,5 +1,14 @@ <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" |