Merge branch 'mattermost-configure-frontend' into 'zj-mattermost-slash-config'

Mattermost configuration frontend

## What does this MR do?

Adds mattermost configuration frontend.

## Are there points in the code the reviewer needs to double check?

⚠ NOTE: ⚠ We can review @zj's MR (!8070) and this one asynchronously, we should wait for @zj's MR to complete it's backend review before we merge this branch into his. We would like @zj to do the merge.

## Why was this MR needed?

## Screenshots (if relevant)

## Does this MR meet the acceptance criteria?

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

## What are the relevant issue numbers?

Closes #24769

See merge request !8079

app/assets/stylesheets/pages/projects.scss

@@ -882,3 +882,23 @@ pre.light-well {
     width: 30%;
   }
 }
+
+.services-installation-info .row {
+  margin-bottom: 10px;
+}
+
+.service-installation {
+  padding: 32px;
+  margin: 32px;
+  border-radius: 3px;
+  background-color: $white-light;
+
+  h3 {
+    margin-top: 0;
+  }
+
+  hr {
+    margin: 32px 0;
+    border-color: $border-color;
+  }
+}

app/helpers/projects_helper.rb

@@ -148,6 +148,15 @@ module ProjectsHelper
     ).html_safe
   end
 
+  def mattermost_teams_options(teams)
+    teams_options = teams.map do |team|
+      return nil unless team['display_name'] && team['id']
+      [team['display_name'], team['id']]
+    end.compact
+    teams_options.unshift(['Select a team...', '0']) unless teams_options.count === 1
+    teams_options
+  end
+
   private
 
   def repo_children_classes(field)

app/views/projects/mattermost/new.html.haml

-= form_for(:create, method: :post, url: configure_namespace_project_mattermost_index_path(@project.namespace, @project)) do |f|
-  = "Team ID"
-  = f.text_field(:team_id)
-  = f.submit 'Configure', class: 'btn btn-save'
+- twoTeams = [{"id"=>"w59qt5a817f69jkxdz6xe7y4ir", "create_at"=>1481835484179, "update_at"=>1481835484179, "delete_at"=>0, "display_name"=>"new_team", "name"=>"new-team", "email"=>"", "type"=>"O", "company_name"=>"", "allowed_domains"=>"", "invite_id"=>"mfgsqnmpiby18eepo6jd6pq3oh", "allow_open_invite"=>false}, {"id"=>"my9oujxf5jy1zqdgu9rihd66do", "create_at"=>1481826062406, "update_at"=>1481826062406, "delete_at"=>0, "display_name"=>"chatops", "name"=>"chatops", "email"=>"", "type"=>"O", "company_name"=>"", "allowed_domains"=>"", "invite_id"=>"s7c1phenmi8udkybcyytc3pxuh", "allow_open_invite"=>false}]
+- oneTeams = [{"id"=>"w59qt5a817f69jkxdz6xe7y4ir", "create_at"=>1481835484179, "update_at"=>1481835484179, "delete_at"=>0, "display_name"=>"new_team", "name"=>"new-team", "email"=>"", "type"=>"O", "company_name"=>"", "allowed_domains"=>"", "invite_id"=>"mfgsqnmpiby18eepo6jd6pq3oh", "allow_open_invite"=>false}]
+- noTeams = []
+- teams = twoTeams
+
+.service-installation
+  .inline.pull-right
+    = custom_icon('mattermost_logo', size: 48)
+  %h3 Install Mattermost Command
+  - if teams.count === 0
+    %p
+      To install this service, you must be administrator of a team in the Mattermost instance at
+      %strong some_path.url
+    %p Ask your Mattermost system administrator for permissions.
+    %hr
+    .clearfix
+      = link_to 'Go back', 'some_url', class: 'btn btn-lg pull-right'
+  - else
+    %p
+      This service will be installed on the Mattermost instance at
+      %strong some_path.url
+    %hr
+    = form_for(:create, method: :post, url: configure_namespace_project_mattermost_index_path(@project.namespace, @project, )) do |f|
+      %h4 Team
+      %p Select or create the team where the slash commands will be used in
+      - options = mattermost_teams_options(teams)
+      - isOneTeam = options.count === 1
+      = f.select(:team_id, options, {}, {class: 'form-control', selected: "#{options.first[1] if isOneTeam}", disabled: isOneTeam})
+      - if isOneTeam
+        .help-block
+          This is the only team where you are an administrator.
+          To create a team, ask your Mattermost system administrator.
+      - else
+        .help-block
+          The list shows teams where you are administrator
+          To create a team, ask your Mattermost system administrator.
+      %hr
+      %h4 Command trigger word
+      %p Choose the word that will trigger commands
+      = f.text_field(:trigger, value: @project.path, class: 'form-control')
+      .help-block
+        %p Trigger word must be unique, and cannot begin with a slash or contain any spaces. Use the word that works best for your team.
+        %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
+        %p
+          Reserved:
+          = link_to 'see list of built-in slash commands', 'some_url'
+      %hr
+      .clearfix
+        .pull-right
+          = link_to 'Cancel', 'some_url', class: 'btn btn-lg'
+          = f.submit 'Install', class: 'btn btn-save btn-lg'

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

@@ -8,7 +8,7 @@
   .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, subject: @service
-
+      - if @service.to_param != 'mattermost_slash_commands'
         .footer-block.row-content-block
           = form.submit 'Save changes', class: 'btn btn-save'
            

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.
@@ -8,96 +5,5 @@
   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
 
-- if Gitlab.config.mattermost.enabled
-  = link_to "Auto config", new_namespace_project_mattermost_path(@project.namespace, @project)
+= render 'projects/services/mattermost_slash_commands/installation_info'

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

+-# THE ALERT BOX...
+-# .alert.alert-info
+-#   Mattermost Command was successfully installed. You can now use GitLab inside Mattermost
+-#   = emoji_icon('')
+
+.services-installation-info
+  .row
+    %strong.col-sm-3.text-right Status
+    .col-sm-9= @service.activated? ? 'Installed' : 'Not installed'
+  .row
+    %strong.col-sm-3.text-right Mattermost
+    = link_to 'some_path.url', 'some_path.url', class: 'col-sm-9'
+  - if @service.activated?
+    .row
+      %strong.col-sm-3.text-right Team
+      .col-sm-9 some_team.name
+  .row
+    %strong.col-sm-3.text-right Installation
+    .col-sm-9
+      - if @service.activated?
+        To edit or uninstall this service, press
+        %strong Edit in Mattermost
+      - else
+        To install this service, press
+        %strong Add to Mattermost
+        and follow the instructions
+  .row
+    .col-sm-9.col-sm-offset-3
+      = link_to new_namespace_project_mattermost_path(@project.namespace, @project), class: 'btn btn-lg' do
+        = custom_icon('mattermost_logo', size: 15)
+        = @service.activated? ? 'Edit in Mattermost' : 'Add to Mattermost'

app/views/shared/_service_settings.html.haml

@@ -7,7 +7,8 @@
     = preserve do
       = markdown @service.help
 
-.service-settings
+- if @service.to_param != 'mattermost_slash_commands'
+  .service-settings
     .form-group
       = form.label :active, "Active", class: "control-label"
       .col-sm-10

app/views/shared/icons/_mattermost_logo.svg.erb

+<svg xmlns="http://www.w3.org/2000/svg" width="<%= size %>" height="<%= size %>" version="1" viewBox="0 0 501 501"><path d="M236 .7C137.7 7.5 54 68.2 18.2 158.5c-32 81-19.6 172.8 33 242.5 39.8 53 97.2 87 164.3 97 16.5 2.7 48 3.2 63.5 1.2 48.7-6.3 92.2-24.6 129-54.2 13-10.5 33-31.2 42.2-43.7 26.4-35.5 42.8-75.8 49-120.3 1.6-12.3 1.6-48.7 0-61-4-28.3-12-54.8-24.2-79.5-12.8-26-26.5-45.3-46.8-65.8C417.8 64 400.2 49 398.4 49c-.6 0-.4 10.5.3 26l1.3 26 7 8.7c19 23.7 32.8 53.5 38.2 83 2.5 14 3 43 1 55.8-4.5 27.8-15.2 54-31 76.5-8.6 12.2-28 31.6-40.2 40.2-24 17-50 27.6-80 33-10 1.8-49 1.8-59 0-43-7.7-78.8-26-107.2-54.8-29.3-29.7-46.5-64-52.4-104.4-2-14-1.5-42 1-55C90 121.4 132 72 192 49.7c8-3 18.4-5.8 29.5-8.2 1.7-.4 34.4-38 35.3-40.6.3-1-10.2-1-20.8-.4z"/><path d="M322.2 24.6c-1.3.8-8.4 9.3-16 18.7-7.4 9.5-22.4 28-33.2 41.2-51 62.2-66 81.6-70.6 91-6 12-8.4 21-9 33-1.2 19.8 5 36 19 50C222 268 230 273 243 277.2c9 3 10.4 3.2 24 3.2 13.8 0 15 0 22.6-3 23.2-9 39-28.4 45-55.7 2-8.2 2-28.7.4-79.7l-2-72c-1-36.8-1.4-41.8-3-44-2-3-4.8-3.6-7.8-1.4z"/></svg>