Added small improvments to the chat slash command services

Updated specs

3 files changed, 47 insertions, 32 deletions

diff --git a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
index 8ca4c51a064..3a323d94cc2 100644
--- a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
@@ -1,16 +1,19 @@
-- run_actions_text = "Perform common operations on this project: #{@project.name_with_namespace}"
+- run_actions_text = "Perform common operations on GitLab project: #{@project.name_with_namespace}"
 
-To setup this service:
-%ul.list-unstyled
+%p To setup this service:
+%ul.list-unstyled.indent-list
   %li
     1.
-    = link_to 'Enable custom slash commands', 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands'
+    = link_to 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands', target: '_blank', rel: 'noreferrer noopener nofollow' do
+      Enable custom slash commands
+      = icon('external-link')
     on your Mattermost installation
   %li
     2.
-    = link_to 'Add a slash command', 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command'
-    in Mattermost with these options:
-
+    = link_to 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command', target: '_blank', rel: 'noreferrer noopener nofollow' do
+      Add a slash command
+      = icon('external-link')
+    in your Mattermost team with these options:
 %hr
 
 .help-form
@@ -83,9 +86,14 @@ To setup this service:
 
 %hr
 
-%ul.list-unstyled
+%ul.list-unstyled.indent-list
   %li
-    3. After adding the slash command, paste the
-
-    %strong token
+    3. Paste the
+    %strong Token
     into the field below
+  %li
+    4. Select the
+    %strong Active
+    checkbox, press
+    %strong Save changes
+    and start using GitLab inside Mattermost!
diff --git a/app/views/projects/services/mattermost_slash_commands/_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
index c1e576b42fc..a04fd5035a6 100644
--- a/app/views/projects/services/mattermost_slash_commands/_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
@@ -1,13 +1,16 @@
 - enabled = Gitlab.config.mattermost.enabled
 
 .well
-  This service allows GitLab users to perform common operations on this
-  project by entering slash commands in Mattermost.
-  %br
-  See list of available commands in Mattermost after setting up this service,
-  by entering
-  %code /<command_trigger_word> help
-
+  %p
+    This service allows users to perform common operations on this
+    project by entering slash commands in Mattermost.
+    = link_to help_page_path('user/project/integrations/mattermost_slash_commands.md'), target: '_blank', ref: 'noreferrer nofollow noopener' do
+      View documentation
+      = icon('external-link')
+  %p.inline
+    See list of available commands in Mattermost after setting up this service,
+    by entering
+  %kbd.inline /<trigger> help
   - unless enabled || @service.template?
     = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
 
diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/projects/services/slack_slash_commands/_help.html.haml
index 04b9100acc6..0d973a20d4c 100644
--- a/app/views/projects/services/slack_slash_commands/_help.html.haml
+++ b/app/views/projects/services/slack_slash_commands/_help.html.haml
@@ -1,21 +1,25 @@
-- pretty_name = defined?(@project) ? @project.name_with_namespace : "namespace / path"
-- run_actions_text = "Perform common operations on this project: #{pretty_name}"
+- pretty_name = defined?(@project) ? @project.name_with_namespace : 'namespace / path'
+- run_actions_text = "Perform common operations on GitLab project: #{pretty_name}"
 
 .well
-  This service allows GitLab users to perform common operations on this
-  project by entering slash commands in Slack.
-  %br
-  See list of available commands in Slack after setting up this service,
-  by entering
-  %code /<command> help
-  %br
-  %br
+  %p
+    This service allows users to perform common operations on this
+    project by entering slash commands in Slack.
+    = link_to help_page_path('user/project/integrations/slack_slash_commands.md'), target: '_blank', ref: 'noreferrer nofollow noopener' do
+      View documentation
+      = icon('external-link')
+  %p.inline
+    See list of available commands in Slack after setting up this service,
+    by entering
+  %kbd.inline /<command> help
   - unless @service.template?
-    To setup this service:
-    %ul.list-unstyled
+    %p To setup this service:
+    %ul.list-unstyled.indent-list
       %li
         1.
-        = link_to 'Add a slash command', 'https://my.slack.com/services/new/slash-commands'
+        = link_to 'https://my.slack.com/services/new/slash-commands', target: '_blank', rel: 'noreferrer noopener nofollow' do
+          Add a slash command
+          = icon('external-link')
         in your Slack team with these options:
 
     %hr
@@ -82,7 +86,7 @@
 
     %hr
 
-    %ul.list-unstyled
+    %ul.list-unstyled.indent-list
       %li
         2. Paste the
         %strong Token