Improve service desk UI text

Also made some documentaiton improvements

app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue

@@ -108,11 +108,11 @@ export default {
         .updateTemplate({ selectedTemplate, outgoingName, projectKey }, this.isEnabled)
         .then(({ data }) => {
           this.updatedCustomEmail = data?.service_desk_address;
-          this.showAlert(__('Changes were successfully made.'), 'success');
+          this.showAlert(__('Changes saved.'), 'success');
         })
         .catch((err) => {
           this.showAlert(
-            sprintf(__('An error occured while making the changes: %{error}'), {
+            sprintf(__('An error occured while saving changes: %{error}'), {
               error: err?.response?.data?.message,
             }),
           );

app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue

@@ -103,7 +103,6 @@ export default {
       id="service-desk-checkbox"
       :value="isEnabled"
       class="d-inline-block align-middle mr-1"
-      label="Service desk"
       label-position="left"
       @change="onCheckboxToggle"
     />
@@ -113,7 +112,7 @@ export default {
     <div v-if="isEnabled" class="row mt-3">
       <div class="col-md-9 mb-0">
         <strong id="incoming-email-describer" class="d-block mb-1">
-          {{ __('Forward external support email address to') }}
+          {{ __('Email address to use for Support Desk') }}
         </strong>
         <template v-if="email">
           <div class="input-group">
@@ -137,7 +136,7 @@ export default {
             </div>
           </div>
           <span v-if="hasCustomEmail" class="form-text text-muted">
-            <gl-sprintf :message="__('Emails sent to %{email} will still be supported')">
+            <gl-sprintf :message="__('Emails sent to %{email} are also supported.')">
               <template #email>
                 <code>{{ incomingEmail }}</code>
               </template>
@@ -156,9 +155,7 @@ export default {
           <input id="service-desk-project-suffix" v-model.trim="projectKey" class="form-control" />
           <span class="form-text text-muted">
             {{
-              __(
-                'Project name suffix is a user-defined string which will be appended to the project path, and will form the Service Desk email address.',
-              )
+              __('A string appended to the project path to form the Service Desk email address.')
             }}
           </span>
         </template>
@@ -176,7 +173,7 @@ export default {
         </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 will have this name') }}
+          {{ __('Emails sent from Service Desk have this name.') }}
         </span>
         <div class="gl-display-flex gl-justify-content-end">
           <gl-button

app/views/projects/_service_desk_settings.html.haml

@@ -5,7 +5,7 @@
     %button.btn.js-settings-toggle
       = expanded ? _('Collapse') : _('Expand')
     - link_start = "<a href='#{help_page_path('user/project/service_desk')}' target='_blank' rel='noopener noreferrer'>".html_safe
-    %p= _('Enable/disable your service desk. %{link_start}Learn more about service desk%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+    %p= _('Enable and disable Service Desk. Some additional configuration might be required. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
   .settings-content
     - if ::Gitlab::ServiceDesk.supported?
       .js-service-desk-setting-root{ data: { endpoint: project_service_desk_path(@project),

app/views/shared/promotions/_promote_servicedesk.html.haml

@@ -6,8 +6,6 @@
       = custom_icon('icon_service_desk')
     .user-callout-copy
       %h4
-        = _("Improve customer support with GitLab Service Desk.")
+        = _("Improve customer support with Service Desk")
       %p
-        = _("GitLab Service Desk is a simple way to allow people to create issues in your GitLab instance without needing their own user account. It provides a unique email address for end users to create issues in a project, and replies can be sent either through the GitLab interface or by email. End users will only see the thread through email.")
-        = link_to _('Read more'), help_page_path('user/project/service_desk.md'), target: '_blank'
-
+        = _("Service Desk allows people to create issues in your GitLab instance without their own user account. It provides a unique email address for end users to create issues in a project. Replies can be sent either through the GitLab interface or by email. End users only see threads through email.")

changelogs/unreleased/eread-improve-service-desk-ui-text.yml

+---
+title: Improve service desk UI text
+merge_request: 50407
+author:
+type: other

doc/user/project/service_desk.md

@@ -25,7 +25,14 @@ the cycle time from feedback to software update.
 
 For an overview, check the video demonstration on [GitLab Service Desk](https://about.gitlab.com/blog/2017/05/09/demo-service-desk/).
 
-## Use cases
+## How it works
+
+GitLab Service Desk enables people to create issues in your
+GitLab instance without needing their own user account.
+
+It provides a unique email address for end users to create issues in a project.
+Follow-up notes can be sent either through the GitLab interface or by email. End
+users only see the thread through email.
 
 For instance, let's assume you develop a game for iOS or Android.
 The codebase is hosted in your GitLab instance, built and deployed
@@ -47,26 +54,16 @@ Here's how Service Desk works for you:
 1. Your team saved time by not having to leave GitLab (or setup any integrations) to follow up with
    your customer.
 
-## How it works
-
-GitLab Service Desk enables people to create issues in your
-GitLab instance without needing their own user account.
-
-It provides a unique email address for end users to create issues in a project.
-Follow-up notes can be sent either through the GitLab interface or by email. End
-users only see the thread through email.
-
 ## Configuring Service Desk
 
 NOTE:
 Service Desk is enabled on GitLab.com.
 You can skip step 1 below; you only need to enable it per project.
 
-If you have project maintainer access you have the option to set up Service Desk.
-Follow these steps to do so:
+If you have project maintainer access you have the option to set up Service Desk. Follow these steps:
 
 1. [Set up incoming email](../../administration/incoming_email.md#set-it-up) for the GitLab instance.
-     - We recommend using [email sub-addressing](../../administration/incoming_email.md#email-sub-addressing),
+   We recommend using [email sub-addressing](../../administration/incoming_email.md#email-sub-addressing),
    but in GitLab 11.7 and later you can also use [catch-all mailboxes](../../administration/incoming_email.md#catch-all-mailbox).
 1. Navigate to your project's **Settings > General** and locate the **Service Desk** section.
 1. Enable the **Activate Service Desk** toggle. This reveals a unique email address to email issues
@@ -85,10 +82,8 @@ Follow these steps to do so:
    If you have [templates](description_templates.md) in your repository, you can optionally select
    one from the selector menu to append it to all Service Desk issues.
 
-   ![Service Desk enabled](img/service_desk_enabled.png)
-
-Service Desk is now enabled for this project! You should be able to access it from your project
-navigation's **Issues** menu.
+Service Desk is now enabled for this project! You should be able to access it from your project's
+**Issues** menu.
 
 ![Service Desk Navigation Item](img/service_desk_nav_item.png)
 
@@ -156,14 +151,12 @@ The `%{key}` part is used to find the project where the issue should be created.
 You can set the project name suffix in your project's Service Desk settings.
 It can contain only lowercase letters (`a-z`), numbers (`0-9`), or underscores (`_`).
 
-![Setting custom Service Desk email address](img/service_desk_custom_email_address_v13_0.png)
+You can add the following snippets to your configuration:
 
-You can add the following snippets to your configuration.
+- Example for installations from source:
 
-Example for installations from source:
-
-```yaml
-service_desk_email:
+  ```yaml
+  service_desk_email:
     enabled: true
     address: "project_contact+%{key}@example.com"
     user: "project_support@example.com"
@@ -176,33 +169,33 @@ service_desk_email:
     mailbox: "inbox"
     idle_timeout: 60
     expunge_deleted: true
-```
+  ```
 
-Example for Omnibus GitLab installations:
+- Example for Omnibus GitLab installations:
 
-```ruby
-gitlab_rails['service_desk_email_enabled'] = true
+  ```ruby
+  gitlab_rails['service_desk_email_enabled'] = true
 
-gitlab_rails['service_desk_email_address'] = "project_contact+%{key}@gmail.com"
+  gitlab_rails['service_desk_email_address'] = "project_contact+%{key}@gmail.com"
 
-gitlab_rails['service_desk_email_email'] = "project_support@gmail.com"
+  gitlab_rails['service_desk_email_email'] = "project_support@gmail.com"
 
-gitlab_rails['service_desk_email_password'] = "[REDACTED]"
+  gitlab_rails['service_desk_email_password'] = "[REDACTED]"
 
-gitlab_rails['service_desk_email_mailbox_name'] = "inbox"
+  gitlab_rails['service_desk_email_mailbox_name'] = "inbox"
 
-gitlab_rails['service_desk_email_idle_timeout'] = 60
+  gitlab_rails['service_desk_email_idle_timeout'] = 60
 
-gitlab_rails['service_desk_email_log_file'] = "/var/log/gitlab/mailroom/mail_room_json.log"
+  gitlab_rails['service_desk_email_log_file'] = "/var/log/gitlab/mailroom/mail_room_json.log"
 
-gitlab_rails['service_desk_email_host'] = "imap.gmail.com"
+  gitlab_rails['service_desk_email_host'] = "imap.gmail.com"
 
-gitlab_rails['service_desk_email_port'] = 993
+  gitlab_rails['service_desk_email_port'] = 993
 
-gitlab_rails['service_desk_email_ssl'] = true
+  gitlab_rails['service_desk_email_ssl'] = true
 
-gitlab_rails['service_desk_email_start_tls'] = false
-```
+  gitlab_rails['service_desk_email_start_tls'] = false
+  ```
 
 In this case, suppose the `mygroup/myproject` project Service Desk settings has the project name
 suffix set to `support`, and a user sends an email to `project_contact+mygroup-myproject-support@example.com`.
@@ -215,23 +208,23 @@ The configuration options are the same as for configuring
 
 Service Desk custom email is under development but ready for production use.
 It is deployed behind a feature flag that is **enabled by default**.
-[GitLab administrators with access to the GitLab Rails console](../../administration/feature_flags.md)
-can opt to disable it.
 
-To enable it:
+To disable it:
 
 ```ruby
-Feature.enable(:service_desk_custom_address)
+Feature.disable(:service_desk_custom_address)
 ```
 
-To disable it:
+To enable it:
 
 ```ruby
-Feature.disable(:service_desk_custom_address)
+Feature.enable(:service_desk_custom_address)
 ```
 
 ## Using Service Desk
 
+There are a few ways Service Desk can be used.
+
 ### As an end user (issue creator)
 
 To create a Service Desk issue, an end user does not need to know anything about

locale/gitlab.pot

@@ -1331,6 +1331,9 @@ msgstr ""
 msgid "A sign-in to your account has been made from the following IP address: %{ip}"
 msgstr ""
 
+msgid "A string appended to the project path to form the Service Desk email address."
+msgstr ""
+
 msgid "A subscription will trigger a new pipeline on the default branch of this project when a pipeline successfully completes for a new tag on the %{default_branch_docs} of the subscribed project."
 msgstr ""
 
@@ -3030,7 +3033,7 @@ msgstr ""
 msgid "An error has occurred"
 msgstr ""
 
-msgid "An error occured while making the changes: %{error}"
+msgid "An error occured while saving changes: %{error}"
 msgstr ""
 
 msgid "An error occurred adding a draft to the thread."
@@ -5248,13 +5251,13 @@ msgstr ""
 msgid "Changes are still tracked. Useful for cluster/index migrations."
 msgstr ""
 
-msgid "Changes suppressed. Click to show."
+msgid "Changes saved."
 msgstr ""
 
-msgid "Changes the title to \"%{title_param}\"."
+msgid "Changes suppressed. Click to show."
 msgstr ""
 
-msgid "Changes were successfully made."
+msgid "Changes the title to \"%{title_param}\"."
 msgstr ""
 
 msgid "Changes won't take place until the index is %{link_start}recreated%{link_end}."
@@ -10401,6 +10404,9 @@ msgstr ""
 msgid "Email Notification"
 msgstr ""
 
+msgid "Email address to use for Support Desk"
+msgstr ""
+
 msgid "Email cannot be blank"
 msgstr ""
 
@@ -10470,10 +10476,10 @@ msgstr ""
 msgid "Emails"
 msgstr ""
 
-msgid "Emails sent from Service Desk will have this name"
+msgid "Emails sent from Service Desk have this name."
 msgstr ""
 
-msgid "Emails sent to %{email} will still be supported"
+msgid "Emails sent to %{email} are also supported."
 msgstr ""
 
 msgid "Emails separated by comma"
@@ -10554,6 +10560,9 @@ msgstr ""
 msgid "Enable and configure Prometheus metrics."
 msgstr ""
 
+msgid "Enable and disable Service Desk. Some additional configuration might be required. %{link_start}Learn more%{link_end}."
+msgstr ""
+
 msgid "Enable classification control using an external service"
 msgstr ""
 
@@ -10641,9 +10650,6 @@ msgstr ""
 msgid "Enable usage ping"
 msgstr ""
 
-msgid "Enable/disable your service desk. %{link_start}Learn more about service desk%{link_end}."
-msgstr ""
-
 msgid "EnableReviewApp|%{stepStart}Step 1%{stepEnd}. Ensure you have Kubernetes set up and have a base domain for your %{linkStart}cluster%{linkEnd}."
 msgstr ""
 
@@ -12524,9 +12530,6 @@ msgstr ""
 msgid "Format: %{dateFormat}"
 msgstr ""
 
-msgid "Forward external support email address to"
-msgstr ""
-
 msgid "Found errors in your %{gitlab_ci_yml}:"
 msgstr ""
 
@@ -13073,9 +13076,6 @@ msgstr ""
 msgid "GitLab Pages"
 msgstr ""
 
-msgid "GitLab Service Desk is a simple way to allow people to create issues in your GitLab instance without needing their own user account. It provides a unique email address for end users to create issues in a project, and replies can be sent either through the GitLab interface or by email. End users will only see the thread through email."
-msgstr ""
-
 msgid "GitLab Shell"
 msgstr ""
 
@@ -14671,7 +14671,7 @@ msgstr ""
 msgid "Improve Merge Requests and customer support with GitLab Enterprise Edition."
 msgstr ""
 
-msgid "Improve customer support with GitLab Service Desk."
+msgid "Improve customer support with Service Desk"
 msgstr ""
 
 msgid "Improve search with Advanced Search and GitLab Enterprise Edition."
@@ -21721,9 +21721,6 @@ msgstr ""
 msgid "Project name suffix"
 msgstr ""
 
-msgid "Project name suffix is a user-defined string which will be appended to the project path, and will form the Service Desk email address."
-msgstr ""
-
 msgid "Project order will not be saved as local storage is not available."
 msgstr ""
 
@@ -25306,6 +25303,9 @@ msgstr ""
 msgid "Service Desk"
 msgstr ""
 
+msgid "Service Desk allows people to create issues in your GitLab instance without their own user account. It provides a unique email address for end users to create issues in a project. Replies can be sent either through the GitLab interface or by email. End users only see threads through email."
+msgstr ""
+
 msgid "Service Desk is enabled but not yet active"
 msgstr ""
 

spec/features/promotion_spec.rb

@@ -20,7 +20,7 @@ RSpec.describe 'Promotions', :js do
       it 'appears in project edit page' do
         visit edit_project_path(project)
 
-        expect(find('#promote_service_desk')).to have_content 'Improve customer support with GitLab Service Desk.'
+        expect(find('#promote_service_desk')).to have_content 'Improve customer support with Service Desk'
       end
 
       it 'does not show when cookie is set' do

spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js

@@ -137,7 +137,7 @@ describe('ServiceDeskRoot', () => {
       .$nextTick()
       .then(waitForPromises)
       .then(() => {
-        expect(wrapper.html()).toContain('Changes were successfully made.');
+        expect(wrapper.html()).toContain('Changes saved.');
       });
   });
 
@@ -160,7 +160,7 @@ describe('ServiceDeskRoot', () => {
       .$nextTick()
       .then(waitForPromises)
       .then(() => {
-        expect(wrapper.html()).toContain('An error occured while making the changes:');
+        expect(wrapper.html()).toContain('An error occured while saving changes:');
       });
   });