Added slack slash commands frontend help well

Added tests

app/assets/stylesheets/framework/forms.scss

@@ -96,6 +96,10 @@ label {
     code {
       line-height: 1.8;
     }
+
+    img {
+      margin-right: $gl-padding;
+    }
   }
 
   @media(max-width: $screen-xs-max) {

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

+- run_actions_text = "Perform common operations on this project: #{@project.name_with_namespace}"
+
+.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
+  To setup this service:
+  %ul.list-unstyled
+    %li
+      1.
+      = link_to 'Add a slash command', 'https://my.slack.com/services/new/slash-commands'
+      in your Slack team with these options:
+
+  %hr
+
+  .help-form
+    .form-group
+      = label_tag nil, 'Command', 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 :url, 'URL', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#url')
+
+    .form-group
+      = label_tag nil, 'Method', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.text-block POST
+
+    .form-group
+      = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :customize_name, 'GitLab', class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#customize_name')
+
+    .form-group
+      = label_tag nil, 'Customize icon', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.text-block
+        = image_tag(asset_url('gitlab_logo.png'), width: 36, height: 36)
+        = link_to('Download image', asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank')
+
+    .form-group
+      = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.text-block Show this command in the autocomplete list
+
+    .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')
+
+    .form-group
+      = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#autocomplete_usage_hint')
+
+    .form-group
+      = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-xs-12 control-label'
+      .col-sm-10.col-xs-12.input-group
+        = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control input-sm', readonly: 'readonly'
+        .input-group-btn
+          = clipboard_button(clipboard_target: '#descriptive_label')
+
+  %hr
+
+  %ul.list-unstyled
+    %li
+      2. Paste the
+      %strong Token
+      into the field below
+    %li
+      3. Select the
+      %strong Active
+      checkbox, press
+      %strong Save changes
+      and start using GitLab inside Slack!

spec/features/projects/services/slack_slash_command_spec.rb

+require 'spec_helper'
+
+feature 'Setup Slack slash commands', feature: true do
+  include WaitForAjax
+
+  let(:user) { create(:user) }
+  let(:project) { create(:project) }
+  let(:service) { project.create_slack_slash_commands_service }
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+  end
+
+  describe 'user visits the slack 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('url').value
+      expect(value).to match("api/v3/projects/#{project.id}/services/slack_slash_commands/trigger")
+    end
+  end
+end