Merge branch 'zj-mattermost-command-help-message' into 'master'

Add help section for MM commands

## What should this MR do

Check @pedroms' design for the Mattermost service screen: https://gitlab.com/gitlab-org/gitlab-ce/issues/22540

Now this has to be implemented, I've created a clean canvas for you, @lbennett, to draw on.

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- Tests
  - [x] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !7558

app/assets/stylesheets/framework/common.scss

@@ -299,6 +299,10 @@ table {
 
 .well {
   margin-bottom: $gl-padding;
+
+  hr {
+    border-color: $gray-darker;
+  }
 }
 
 .search_box {

app/assets/stylesheets/framework/forms.scss

@@ -68,6 +68,46 @@ label {
   }
 }
 
+.help-form .form-group {
+  margin-left: 0;
+  margin-right: 0;
+
+  .control-label {
+    font-weight: bold;
+    padding-top: 4px;
+  }
+
+  .form-control {
+    height: 29px;
+    background: $white-light;
+    font-family: $monospace_font;
+  }
+
+  .input-group-btn .btn {
+    padding: 3px $gl-btn-padding;
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+  }
+
+  .text-block {
+    line-height: 0.8;
+    padding-top: 9px;
+
+    code {
+      line-height: 1.8;
+    }
+  }
+
+  @media(max-width: $screen-sm-min) {
+    padding: 0 $gl-padding;
+
+    .control-label,
+    .text-block {
+      padding-left: 0;
+    }
+  }
+}
+
 .fieldset-form fieldset {
   margin-bottom: 20px;
 }
@@ -167,4 +207,3 @@ label {
     color: $gl-text-color;
   }
 }
-

app/assets/stylesheets/pages/settings.scss

@@ -20,3 +20,7 @@
 .danger-title {
   color: $gl-danger;
 }
+
+.service-settings .control-label {
+  padding-top: 0;
+}

app/models/project_services/mattermost_slash_commands_service.rb

@@ -19,13 +19,6 @@ class MattermostSlashCommandsService < ChatService
     'mattermost_slash_commands'
   end
 
-  def help
-    "This service allows you to use slash commands with your Mattermost installation.<br/>
-    To setup this Service you need to create a new <b>Slash commands</b> in your Mattermost integration panel.<br/>
-    <br/>
-    Create integration with URL #{service_trigger_url(self)} and enter the token below."
-  end
-
   def fields
     [
       { type: 'text', name: 'token', placeholder: '' }

app/views/admin/services/_form.html.haml

@@ -4,7 +4,8 @@
 %p #{@service.description} template
 
 = form_for :service, url: admin_application_settings_service_path, method: :put, html: { class: 'form-horizontal fieldset-form' } do |form|
-  = render 'shared/service_settings', form: form
+  = render 'shared/service_settings', form: form, subject: @service
 
+  .footer-block.row-content-block
     .form-actions
       = form.submit 'Save', class: 'btn btn-save'

app/views/projects/services/_form.html.haml

@@ -7,8 +7,9 @@
     %p= @service.description
   .col-lg-9
     = form_for(@service, as: :service, url: namespace_project_service_path(@project.namespace, @project, @service.to_param), method: :put, html: { class: 'form-horizontal' }) do |form|
-      = render 'shared/service_settings', form: form
+      = render 'shared/service_settings', form: form, subject: @service
 
+      .footer-block.row-content-block
         = form.submit 'Save changes', class: 'btn btn-save'
          
         - if @service.valid? && @service.activated?

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

+- pretty_path_with_namespace = "#{@project ? @project.namespace.name : 'namespace'} / #{@project ? @project.name : 'name'}"
+- run_actions_text = "Perform common operations on this project: #{pretty_path_with_namespace}"
+
+.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
+  %br
+  %br
+  To setup this service:
+  %ul.list-unstyled
+    %li
+      1.
+      = link_to 'Enable custom slash commands', 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands'
+      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:
+
+  %hr
+
+  .help-form
+    .form-group
+      = label_tag :display_name, 'Display name', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :display_name, "GitLab / #{pretty_path_with_namespace}", class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#display_name')
+
+    .form-group
+      = label_tag :description, 'Description', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#description')
+
+    .form-group
+      = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.text-block
+        %p Fill in the word that works best for your team.
+        %p
+          Suggestions:
+          %code= 'gitlab'
+          %code= @project.path # Path contains no spaces, but dashes
+          %code= @project.path_with_namespace
+
+    .form-group
+      = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :request_url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#request_url')
+
+    .form-group
+      = label_tag nil, 'Request method', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.text-block POST
+
+    .form-group
+      = label_tag :response_username, 'Response username', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :response_username, 'GitLab', class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#response_username')
+
+    .form-group
+      = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#response_icon')
+
+    .form-group
+      = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.text-block Yes
+
+    .form-group
+      = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :autocomplete_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#autocomplete_hint')
+
+    .form-group
+      = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#autocomplete_description')
+
+  %hr
+
+  %ul.list-unstyled
+    %li
+      3. After adding the slash command, paste the
+      %strong token
+      into the field below

app/views/shared/_service_settings.html.haml

 = form_errors(@service)
 
-- if @service.help.present?
+- if lookup_context.template_exists?('help', "projects/services/#{@service.to_param}", true)
+  = render "projects/services/#{@service.to_param}/help", subject: subject
+- elsif @service.help.present?
   .well
     = preserve do
       = markdown @service.help
 
-.form-group
+.service-settings
+  .form-group
     = form.label :active, "Active", class: "control-label"
     .col-sm-10
       = form.check_box :active
 
-- if @service.supported_events.present?
+  - if @service.supported_events.present?
     .form-group
       = form.label :url, "Trigger", class: 'control-label'
 
@@ -32,7 +35,7 @@
           %p.light
             = service_event_description(event)
 
-- @service.global_fields.each do |field|
+  - @service.global_fields.each do |field|
     - type = field[:type]
 
     - if type == 'fieldset'

changelogs/unreleased/zj-mattermost-command-help-message.yml

+---
+title: Add help message for configuring Mattermost slash commands
+merge_request: 7558
+author: 

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(:project) }
+  let(:service) { project.create_mattermost_slash_commands_service }
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+  end
+
+  describe 'user visites the mattermost slash command config page', js: true do
+    it 'shows a help message' do
+      visit edit_namespace_project_service_path(project.namespace, project, service)
+
+      wait_for_ajax
+
+      expect(page).to have_content("This service allows GitLab users to perform common")
+    end
+  end
+
+  describe 'saving a token' do
+    let(:token) { ('a'..'z').to_a.join }
+
+    it 'shows the token after saving' do
+      visit edit_namespace_project_service_path(project.namespace, project, service)
+
+      fill_in 'service_token', with: token
+      click_on 'Save'
+
+      value = find_field('service_token').value
+
+      expect(value).to eq(token)
+    end
+  end
+
+  describe 'the trigger url' do
+    it 'shows the correct url' do
+      visit edit_namespace_project_service_path(project.namespace, project, service)
+
+      value = find_field('request_url').value
+      expect(value).to match("api/v3/projects/#{project.id}/services/mattermost_slash_commands/trigger")
+    end
+  end
+end