Merge branch...

Merge branch '25487-small-improvements-to-the-ui-of-mattermost-and-slack-command-services' into 'master'

Resolve "Small improvements to the UI of Mattermost and Slack Command services"

Closes #25487

See merge request !8491

app/assets/stylesheets/framework/lists.scss

@@ -307,3 +307,7 @@ ul.controls {
     }
   }
 }
+
+ul.indent-list {
+  padding: 10px 0 0 30px;
+}

app/models/project_services/chat_slash_commands_service.rb

@@ -23,7 +23,7 @@ class ChatSlashCommandsService < Service
 
   def fields
     [
-      { type: 'text', name: 'token', placeholder: '' }
+      { type: 'text', name: 'token', placeholder: 'XXxxXXxxXXxxXXxxXXxxXXxx' }
     ]
   end
 

app/models/project_services/mattermost_slash_commands_service.rb

@@ -8,11 +8,11 @@ class MattermostSlashCommandsService < ChatSlashCommandsService
   end
 
   def title
-    'Mattermost Command'
+    'Mattermost slash commands'
   end
 
   def description
-    "Perform common operations on GitLab in Mattermost"
+    "Perform common operations in Mattermost"
   end
 
   def self.to_param

app/models/project_services/slack_slash_commands_service.rb

@@ -2,11 +2,11 @@ class SlackSlashCommandsService < ChatSlashCommandsService
   include TriggersHelper
 
   def title
-    'Slack Command'
+    'Slack slash commands'
   end
 
   def description
-    "Perform common operations on GitLab in Slack"
+    "Perform common operations in Slack"
   end
 
   def self.to_param

app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml

-- 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!

app/views/projects/services/mattermost_slash_commands/_help.html.haml

 - enabled = Gitlab.config.mattermost.enabled
 
 .well
-  This service allows GitLab users to perform common operations on this
+  %p
+    This service allows users to perform common operations on this
     project by entering slash commands in Mattermost.
-  %br
+    = 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
-  %code /<command_trigger_word> help
-
+  %kbd.inline /<trigger> help
   - unless enabled || @service.template?
     = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
 

app/views/projects/services/slack_slash_commands/_help.html.haml

-- 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
+  %p
+    This service allows users to perform common operations on this
     project by entering slash commands in Slack.
-  %br
+    = 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
-  %code /<command> help
-  %br
-  %br
+  %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

spec/features/projects/services/mattermost_slash_command_spec.rb

 require 'spec_helper'
 
 feature 'Setup Mattermost slash commands', feature: true do
-  include WaitForAjax
-
   let(:user) { create(:user) }
   let(:project) { create(:empty_project) }
   let(:service) { project.create_mattermost_slash_commands_service }
@@ -15,11 +13,15 @@ feature 'Setup Mattermost slash commands', feature: true do
     visit edit_namespace_project_service_path(project.namespace, project, service)
   end
 
-  describe 'user visits the mattermost slash command config page', js: true do
+  describe 'user visits the mattermost slash command config page' do
     it 'shows a help message' do
-      wait_for_ajax
+      expect(page).to have_content("This service allows users to perform common")
+    end
+
+    it 'shows a token placeholder' do
+      token_placeholder = find_field('service_token')['placeholder']
 
-      expect(page).to have_content("This service allows GitLab users to perform common")
+      expect(token_placeholder).to eq('XXxxXXxxXXxxXXxxXXxxXXxx')
     end
 
     it 'shows the token after saving' do
@@ -64,7 +66,7 @@ feature 'Setup Mattermost slash commands', feature: true do
       select_element = find('select#mattermost_team_id')
       selected_option = select_element.find('option[selected]')
 
-      expect(select_element['disabled']).to be(true)
+      expect(select_element['disabled']).to eq('disabled')
       expect(selected_option).to have_content(team_name.to_s)
     end
 
@@ -93,7 +95,7 @@ feature 'Setup Mattermost slash commands', feature: true do
       select_element = find('select#mattermost_team_id')
       selected_option = select_element.find('option[selected]')
 
-      expect(select_element['disabled']).to be(false)
+      expect(select_element['disabled']).to be(nil)
       expect(selected_option).to have_content('Select team...')
       # The 'Select team...' placeholder is item `0`.
       expect(select_element.all('option').count).to eq(3)
@@ -135,6 +137,12 @@ feature 'Setup Mattermost slash commands', feature: true do
 
         expect(value).to match("api/v3/projects/#{project.id}/services/mattermost_slash_commands/trigger")
       end
+
+      it 'shows a token placeholder' do
+        token_placeholder = find_field('service_token')['placeholder']
+
+        expect(token_placeholder).to eq('XXxxXXxxXXxxXXxxXXxxXXxx')
+      end
     end
   end
 

spec/features/projects/services/slack_slash_command_spec.rb

 require 'spec_helper'
 
 feature 'Slack slash commands', feature: true do
-  include WaitForAjax
-
   given(:user) { create(:user) }
   given(:project) { create(:project) }
   given(:service) { project.create_slack_slash_commands_service }
@@ -10,19 +8,20 @@ feature 'Slack slash commands', feature: true do
   background do
     project.team << [user, :master]
     login_as(user)
-  end
-
-  scenario 'user visits the slack slash command config page and shows a help message', js: true do
     visit edit_namespace_project_service_path(project.namespace, project, service)
+  end
 
-    wait_for_ajax
+  it 'shows a token placeholder' do
+    token_placeholder = find_field('service_token')['placeholder']
 
-    expect(page).to have_content('This service allows GitLab users to perform common')
+    expect(token_placeholder).to eq('XXxxXXxxXXxxXXxxXXxxXXxx')
   end
 
-  scenario 'shows the token after saving' do
-    visit edit_namespace_project_service_path(project.namespace, project, service)
+  it 'shows a help message' do
+    expect(page).to have_content('This service allows users to perform common')
+  end
 
+  it 'shows the token after saving' do
     fill_in 'service_token', with: 'token'
     click_on 'Save'
 
@@ -31,9 +30,7 @@ feature 'Slack slash commands', feature: true do
     expect(value).to eq('token')
   end
 
-  scenario 'shows the correct trigger url' do
-    visit edit_namespace_project_service_path(project.namespace, project, service)
-
+  it 'shows the correct trigger url' do
     value = find_field('url').value
     expect(value).to match("api/v3/projects/#{project.id}/services/slack_slash_commands/trigger")
   end