Refactor backend to use a serializer

- Refactor frontend specs to use forEach to DRY them up.
- Use a serializer and entity for the json data instead of
generating it in the model

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

@@ -49,7 +49,12 @@ export default {
 </script>
 
 <template>
-  <gl-form-group class="gl-pt-3" :label="__('Trigger')" label-for="trigger-fields">
+  <gl-form-group
+    class="gl-pt-3"
+    :label="__('Trigger')"
+    label-for="trigger-fields"
+    data-testid="trigger-fields-group"
+  >
     <div id="trigger-fields">
       <gl-form-group
         v-for="event in events"

app/models/service.rb

@@ -170,27 +170,6 @@ class Service < ApplicationRecord
     end
   end
 
-  def configurable_events_json
-    configurable_events.map do |event|
-      event_field_name = ServicesHelper.service_event_field_name(event)
-      result = {
-        title: event,
-        name: event_field_name,
-        value: self[event_field_name],
-        description: self.class.event_description(event)
-      }
-
-      if field = event_field(event)
-        result[:field] = {
-          name: field[:name],
-          value: public_send(field[:name]) # rubocop:disable GitlabSecurity/PublicSend
-        }
-      end
-
-      result
-    end.to_json
-  end
-
   def configurable_event_actions
     self.class.supported_event_actions
   end

app/serializers/service_event_entity.rb

+# frozen_string_literal: true
+
+class ServiceEventEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :title do |event|
+    event
+  end
+
+  expose :name do |event|
+    event_field_name
+  end
+
+  expose :value do |event|
+    service[event_field_name]
+  end
+
+  expose :description do |event|
+    service.class.event_description(event)
+  end
+
+  expose :field, if: -> (_, _) { event_field } do
+    expose :name do |event|
+      event_field[:name]
+    end
+    expose :value do |event|
+      service.public_send(event_field[:name]) # rubocop:disable GitlabSecurity/PublicSend
+    end
+  end
+
+  private
+
+  alias_method :event, :object
+
+  def event_field_name
+    ServicesHelper.service_event_field_name(event)
+  end
+
+  def event_field
+    service.event_field(event)
+  end
+
+  def service
+    request.service
+  end
+end

app/serializers/service_event_serializer.rb

+# frozen_string_literal: true
+
+class ServiceEventSerializer < BaseSerializer
+  entity ServiceEventEntity
+end

app/views/shared/_service_settings.html.haml

 = form_errors(@service)
+- trigger_events = Feature.enabled?(:integration_form_refactor) ? ServiceEventSerializer.new(service: @service).represent(@service.configurable_events).to_json : []
 
 - if lookup_context.template_exists?('help', "projects/services/#{@service.to_param}", true)
   = render "projects/services/#{@service.to_param}/help", subject: @service
@@ -9,7 +10,7 @@
 
 .service-settings
   .js-vue-integration-settings{ data: { show_active: @service.show_active_box?.to_s, activated: (@service.active || @service.new_record?).to_s, type: @service.to_param, merge_request_events: @service.merge_requests_events.to_s,
-commit_events: @service.commit_events.to_s, enable_comments: @service.comment_on_event_enabled.to_s, comment_detail: @service.comment_detail, trigger_events: Feature.enabled?(:integration_form_refactor) ? @service.configurable_events_json : [] } }
+commit_events: @service.commit_events.to_s, enable_comments: @service.comment_on_event_enabled.to_s, comment_detail: @service.comment_detail, trigger_events: trigger_events } }
 
   - if @service.configurable_events.present? && !@service.is_a?(JiraService) && Feature.disabled?(:integration_form_refactor)
     .form-group.row

spec/frontend/integrations/edit/components/trigger_fields_spec.js

@@ -29,8 +29,7 @@ describe('TriggerFields', () => {
     it('renders a label with text "Trigger"', () => {
       createComponent();
 
-      const triggerLabel = wrapper.find('label[for="trigger-fields"]');
-
+      const triggerLabel = wrapper.find('[data-testid="trigger-fields-group"]').find('label');
       expect(triggerLabel.exists()).toBe(true);
       expect(triggerLabel.text()).toBe('Trigger');
     });
@@ -65,52 +64,24 @@ describe('TriggerFields', () => {
         const groups = wrapper.find('#trigger-fields').findAll(GlFormGroup);
 
         expect(groups).toHaveLength(2);
-        expect(
-          groups
-            .at(0)
-            .find('small')
-            .text(),
-        ).toBe(events[0].description);
-        expect(
-          groups
-            .at(1)
-            .find('small')
-            .text(),
-        ).toBe(events[1].description);
+        groups.wrappers.forEach((group, index) => {
+          expect(group.find('small').text()).toBe(events[index].description);
+        });
       });
 
       it('renders GlFormCheckbox for each event', () => {
         const checkboxes = findAllGlFormCheckboxes();
-
+        const expectedResults = [
+          { labelText: 'Push', inputName: 'service[push_event]' },
+          { labelText: 'Merge Request', inputName: 'service[merge_requests_event]' },
+        ];
         expect(checkboxes).toHaveLength(2);
 
-        expect(
-          checkboxes
-            .at(0)
-            .find('label')
-            .text(),
-        ).toBe('Push');
-        expect(
-          checkboxes
-            .at(0)
-            .find('input')
-            .attributes('name'),
-        ).toBe('service[push_event]');
-        expect(checkboxes.at(0).vm.$attrs.checked).toBe(true);
-
-        expect(
-          checkboxes
-            .at(1)
-            .find('label')
-            .text(),
-        ).toBe('Merge Request');
-        expect(
-          checkboxes
-            .at(1)
-            .find('input')
-            .attributes('name'),
-        ).toBe('service[merge_requests_event]');
-        expect(checkboxes.at(1).vm.$attrs.checked).toBe(false);
+        checkboxes.wrappers.forEach((checkbox, index) => {
+          expect(checkbox.find('label').text()).toBe(expectedResults[index].labelText);
+          expect(checkbox.find('input').attributes('name')).toBe(expectedResults[index].inputName);
+          expect(checkbox.vm.$attrs.checked).toBe(events[index].value);
+        });
       });
     });
 
@@ -142,20 +113,23 @@ describe('TriggerFields', () => {
 
       it('renders GlFormInput for each event', () => {
         const fields = findAllGlFormInputs();
+        const expectedResults = [
+          {
+            name: 'service[push_channel]',
+            placeholder: 'Slack channels (e.g. general, development)',
+          },
+          {
+            name: 'service[merge_request_channel]',
+            placeholder: 'Slack channels (e.g. general, development)',
+          },
+        ];
 
         expect(fields).toHaveLength(2);
 
-        expect(fields.at(0).attributes()).toMatchObject({
-          name: 'service[push_channel]',
-          placeholder: 'Slack channels (e.g. general, development)',
-        });
-        expect(fields.at(0).vm.$attrs.value).toBe('');
-
-        expect(fields.at(1).attributes()).toMatchObject({
-          name: 'service[merge_request_channel]',
-          placeholder: 'Slack channels (e.g. general, development)',
+        fields.wrappers.forEach((field, index) => {
+          expect(field.attributes()).toMatchObject(expectedResults[index]);
+          expect(field.vm.$attrs.value).toBe(events[index].field.value);
         });
-        expect(fields.at(1).vm.$attrs.value).toBe('gitlab-development');
       });
     });
   });