Merge branch '46711-admin-area-styling-of-service-template-page' into 'master'

Resolve "Admin area > Styling of service template page"

Closes #46711

See merge request gitlab-org/gitlab-ce!19483

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

@@ -7,5 +7,4 @@
   = render 'shared/service_settings', form: form, subject: @service
 
   .footer-block.row-content-block
-    .form-actions
-      = form.submit 'Save', class: 'btn btn-save'
+    = form.submit 'Save', class: 'btn btn-save'

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

 - enabled = Gitlab.config.mattermost.enabled
 
-.card
-  %p
-    This service allows users to perform common operations on this
-    project by entering slash commands in Mattermost.
-    = link_to help_page_path('user/project/integrations/mattermost_slash_commands.md'), target: '_blank' do
-      View documentation
-      = icon('external-link')
-  %p.inline
-    See list of available commands in Mattermost after setting up this service,
-    by entering
-  %kbd.inline /<trigger> help
-  - unless enabled || @service.template?
-    = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
+.info-well
+  .well-segment
+    %p
+      This service allows users to perform common operations on this
+      project by entering slash commands in Mattermost.
+      = link_to help_page_path('user/project/integrations/mattermost_slash_commands.md'), target: '_blank' do
+        View documentation
+        = icon('external-link')
+    %p.inline
+      See list of available commands in Mattermost after setting up this service,
+      by entering
+    %kbd.inline /<trigger> help
+    - unless enabled || @service.template?
+      = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
 
 - if enabled && !@service.template?
   = render 'projects/services/mattermost_slash_commands/installation_info', subject: @service

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

 - pretty_name = defined?(@project) ? @project.full_name : 'namespace / path'
 - run_actions_text = "Perform common operations on GitLab project: #{pretty_name}"
 
-.card
-  %p
-    This service allows users to perform common operations on this
-    project by entering slash commands in Slack.
-    = link_to help_page_path('user/project/integrations/slack_slash_commands.md'), target: '_blank' do
-      View documentation
-      = icon('external-link')
-  %p.inline
-    See list of available commands in Slack after setting up this service,
-    by entering
-  %kbd.inline /<command> help
-  - unless @service.template?
-    %p To setup this service:
-    %ul.list-unstyled.indent-list
-      %li
-        1.
-        = 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:
+.info-well
+  .well-segment
+    %p
+      This service allows users to perform common operations on this
+      project by entering slash commands in Slack.
+      = link_to help_page_path('user/project/integrations/slack_slash_commands.md'), target: '_blank' do
+        View documentation
+        = icon('external-link')
+    %p.inline
+      See list of available commands in Slack after setting up this service,
+      by entering
+    %kbd.inline /<command> help
+    - unless @service.template?
+      %p To setup this service:
+      %ul.list-unstyled.indent-list
+        %li
+          1.
+          = 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
+      %hr
 
-    .help-form
-      .form-group
-        = label_tag nil, 'Command', class: 'col-sm-2 col-12 col-form-label'
-        .col-sm-10.col-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.full_path
+      .help-form
+        .form-group
+          = label_tag nil, 'Command', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-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.full_path
 
-      .form-group
-        = label_tag :url, 'URL', class: 'col-sm-2 col-12 col-form-label'
-        .col-sm-10.col-12.input-group
-          = text_field_tag :url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-append
-            = clipboard_button(target: '#url', class: 'input-group-text')
+        .form-group
+          = label_tag :url, 'URL', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#url', class: 'input-group-text')
 
-      .form-group
-        = label_tag nil, 'Method', class: 'col-sm-2 col-12 col-form-label'
-        .col-sm-10.col-12.text-block POST
+        .form-group
+          = label_tag nil, 'Method', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.text-block POST
 
-      .form-group
-        = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-12 col-form-label'
-        .col-sm-10.col-12.input-group
-          = text_field_tag :customize_name, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-append
-            = clipboard_button(target: '#customize_name', class: 'input-group-text')
+        .form-group
+          = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :customize_name, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#customize_name', class: 'input-group-text')
 
-      .form-group
-        = label_tag nil, 'Customize icon', class: 'col-sm-2 col-12 col-form-label'
-        .col-sm-10.col-12.text-block
-          = image_tag(asset_url('slash-command-logo.png'), width: 36, height: 36)
-          = link_to('Download image', asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer')
+        .form-group
+          = label_tag nil, 'Customize icon', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.text-block
+            = image_tag(asset_url('slash-command-logo.png'), width: 36, height: 36)
+            = link_to('Download image', asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer')
 
-      .form-group
-        = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 col-form-label'
-        .col-sm-10.col-12.text-block Show this command in the autocomplete list
+        .form-group
+          = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.text-block Show this command in the autocomplete list
 
-      .form-group
-        = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label'
-        .col-sm-10.col-12.input-group
-          = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-append
-            = clipboard_button(target: '#autocomplete_description', class: 'input-group-text')
+        .form-group
+          = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#autocomplete_description', class: 'input-group-text')
 
-      .form-group
-        = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-12 col-form-label'
-        .col-sm-10.col-12.input-group
-          = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-append
-            = clipboard_button(target: '#autocomplete_usage_hint', class: 'input-group-text')
+        .form-group
+          = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#autocomplete_usage_hint', class: 'input-group-text')
 
-      .form-group
-        = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-12 col-form-label'
-        .col-sm-10.col-12.input-group
-          = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-append
-            = clipboard_button(target: '#descriptive_label', class: 'input-group-text')
+        .form-group
+          = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-12 col-form-label'
+          .col-sm-10.col-12.input-group
+            = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control form-control-sm', readonly: 'readonly'
+            .input-group-append
+              = clipboard_button(target: '#descriptive_label', class: 'input-group-text')
 
-    %hr
+      %hr
 
-    %ul.list-unstyled.indent-list
-      %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!
+      %ul.list-unstyled.indent-list
+        %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!

app/views/shared/_field.html.haml

@@ -9,11 +9,11 @@
 - help = field[:help]
 - disabled = disable_fields_service?(@service)
 
-.form-group
+.form-group.row
   - if type == "password" && value.present?
-    = form.label name, "Enter new #{title.downcase}", class: "col-form-label"
+    = form.label name, "Enter new #{title.downcase}", class: "col-form-label col-sm-2"
   - else
-    = form.label name, title, class: "col-form-label"
+    = form.label name, title, class: "col-form-label col-sm-2"
   .col-sm-10
     - if type == 'text'
       = form.text_field name, class: "form-control", placeholder: placeholder, required: required, disabled: disabled

app/views/shared/_service_settings.html.haml

@@ -3,8 +3,9 @@
 - 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?
-  .card
-    = markdown @service.help
+  .info-well
+    .well-segment
+      = markdown @service.help
 
 .service-settings
   - if @service.show_active_box?
@@ -15,25 +16,24 @@
 
   - if @service.configurable_events.present?
     .form-group.row
-      = form.label :url, "Trigger", class: 'col-form-label col-sm-2'
+      .col-sm-2.text-right Trigger
 
       .col-sm-10
         - @service.configurable_events.each do |event|
-          %div
-            = form.check_box service_event_field_name(event), class: 'float-left'
-            .prepend-left-20
-              = form.label service_event_field_name(event), class: 'list-label' do
+          .form-group
+            .form-check
+              = form.check_box service_event_field_name(event), class: 'form-check-input'
+              = form.label service_event_field_name(event), class: 'form-check-label' do
                 %strong
                   = event.humanize
 
-          - field = @service.event_field(event)
+            - field = @service.event_field(event)
 
-          - if field
-            %p
+            - if field
               = form.text_field field[:name], class: "form-control", placeholder: field[:placeholder]
 
-          %p.light
-            = @service.class.event_description(event)
+            %p.text-muted
+              = @service.class.event_description(event)
 
   - @service.global_fields.each do |field|
     - type = field[:type]