Use enum for placeholder text

- Minor adjustments to padding, column width and content width.
- Re-align backend code to be clearer on data structure.

app/assets/javascripts/integrations/edit/components/trigger_fields.vue

@@ -3,6 +3,16 @@ import { startCase } from 'lodash';
 import { __ } from '~/locale';
 import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 
+const typeWithPlaceholder = {
+  SLACK: 'slack',
+  MATTERMOST: 'mattermost',
+};
+
+const placeholderForType = {
+  [typeWithPlaceholder.SLACK]: __('Slack channels (e.g. general, development)'),
+  [typeWithPlaceholder.MATTERMOST]: __('Channel handle (e.g. town-square)'),
+};
+
 export default {
   name: 'TriggerFields',
   components: {
@@ -23,12 +33,7 @@ export default {
   },
   computed: {
     placeholder() {
-      if (this.type === 'slack') {
-        return __('Slack channels (e.g. general, development)');
-      } else if (this.type === 'mattermost') {
-        return __('Channel handle (e.g. town-square)');
-      }
-      return null;
+      return placeholderForType[this.type];
     },
   },
   methods: {
@@ -44,9 +49,14 @@ export default {
 </script>
 
 <template>
-  <gl-form-group :label="__('Trigger')" label-for="trigger-fields">
+  <gl-form-group class="gl-pt-3" :label="__('Trigger')" label-for="trigger-fields">
     <div id="trigger-fields">
-      <gl-form-group v-for="event in events" :key="event.title" :description="event.description">
+      <gl-form-group
+        v-for="event in events"
+        :key="event.title"
+        class="gl-pt-3"
+        :description="event.description"
+      >
         <input :name="checkboxName(event.name)" type="hidden" value="false" />
         <gl-form-checkbox v-model="event.value" :name="checkboxName(event.name)">
           {{ startCase(event.title) }}

app/models/service.rb

@@ -173,7 +173,12 @@ class Service < ApplicationRecord
   def configurable_events_json
     configurable_events.map do |event|
       event_method = ServicesHelper.service_event_field_name(event)
-      result = { title: event, name: event_method, value: send(event_method), description: self.class.event_description(event) } # rubocop:disable GitlabSecurity/PublicSend
+      result = {
+        title: event,
+        name: event_method,
+        value: send(event_method), # rubocop:disable GitlabSecurity/PublicSend
+        description: self.class.event_description(event)
+      }
       field = event_field(event)
       if field
         result.merge({ field: { name: field[:name], value: send(field[:name]) } }) # rubocop:disable GitlabSecurity/PublicSend

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

 .row.prepend-top-default.append-bottom-default
-  .col-lg-3
+  .col-lg-4
     %h4.prepend-top-0
       = @service.title
       - [true, false].each do |value|
@@ -9,7 +9,7 @@
 
     - if @service.respond_to?(:detailed_description)
       %p= @service.detailed_description
-  .col-lg-9
+  .col-lg-8
     = form_for(@service, as: :service, url: scoped_integration_path(@service), method: :put, html: { class: 'gl-show-field-errors integration-settings-form js-integration-settings-form', data: { 'can-test' => @service.can_test?, 'test-url' => test_project_service_path(@project, @service) } }) do |form|
       = render 'shared/service_settings', form: form, service: @service
       .footer-block.row-content-block

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

 - breadcrumb_title @service.title
 - add_to_breadcrumbs _('Integration Settings'), project_settings_integrations_path(@project)
 - page_title @service.title, _('Integrations')
+- @content_class = 'limit-container-width' unless fluid_layout
 
 = render 'form'
 - if @web_hook_logs