Added new .help-form styling and implemented with mattermost command service help well

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,45 @@ label {
   }
 }
 
+.help-form {
+  .form-group {
+    .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 +206,3 @@ label {
     color: $gl-text-color;
   }
 }
-

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

@@ -6,5 +6,6 @@
 = 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
 
-  .form-actions
-    = form.submit 'Save', class: 'btn btn-save'
+  .footer-block.row-content-block
+    .form-actions
+      = form.submit 'Save', class: 'btn btn-save'

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

@@ -9,12 +9,13 @@
     = 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
 
-      = form.submit 'Save changes', class: 'btn btn-save'
-       
-      - if @service.valid? && @service.activated?
-        - unless @service.can_test?
-          - disabled_class = 'disabled'
-          - disabled_title = @service.disabled_title
+      .footer-block.row-content-block
+        = form.submit 'Save changes', class: 'btn btn-save'
+         
+        - if @service.valid? && @service.activated?
+          - unless @service.can_test?
+            - disabled_class = 'disabled'
+            - disabled_title = @service.disabled_title
 
-        = link_to 'Test settings', test_namespace_project_service_path(@project.namespace, @project, @service), class: "btn #{disabled_class}", title: disabled_title
-      = link_to "Cancel", namespace_project_services_path(@project.namespace, @project), class: "btn btn-cancel"
+          = link_to 'Test settings', test_namespace_project_service_path(@project.namespace, @project, @service), class: "btn #{disabled_class}", title: disabled_title
+        = link_to "Cancel", namespace_project_services_path(@project.namespace, @project), class: "btn btn-cancel"

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

-Hello Jared!

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

+- pretty_path_with_namespace = "#{@project ? @project.namespace.name : 'namespace'} / #{@project ? @project.name : 'name'}"
+- run_actions_text = "Run action on the GitLab project: #{pretty_path_with_namespace}"
+
+.well
+  %p
+    This service allows GitLab users to perform common operations on this
+    project by entering slash commands in Mattermost.
+  %p
+    See list of available commands in Mattermost after setting up this service,
+    by entering
+    %code /<command_trigger_word> help
+  %p
+    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= @project ? @project.name : 'project_name'
+          %code= @project ? @project.namespace.name : 'namespace_name'
+          %code= @project ? @project.name_with_namespace : 'namespace_name/project_name'
+
+    .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(@service), 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_path('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)
 
-- byebug
-
-- if lookup_context.template_exists?(@service.type.underscore, "projects/services", true)
-  = render 'projects/services/mattermost_command_service'
+- if lookup_context.template_exists?('help', "projects/services/#{@service.to_param}", true)
+  = render "projects/services/#{@service.to_param}/help", subject: @service
 - elsif @service.help.present?
   .well
     = preserve do