Use sentence case for trigger events

Pass externalized strings from the backend instead of
doing string transforms on the frontend.

Changelog: changed

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

 <script>
 import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
-import { startCase } from 'lodash';
 import { mapGetters } from 'vuex';
 import { __ } from '~/locale';
 
@@ -45,7 +44,6 @@ export default {
     fieldName(name) {
       return `service[${name}]`;
     },
-    startCase,
   },
 };
 </script>
@@ -58,10 +56,10 @@ export default {
     data-testid="trigger-fields-group"
   >
     <div id="trigger-fields" class="gl-pt-3">
-      <gl-form-group v-for="event in events" :key="event.title" :description="event.description">
+      <gl-form-group v-for="event in events" :key="event.name" :description="event.description">
         <input :name="checkboxName(event.name)" type="hidden" :value="event.value || false" />
         <gl-form-checkbox v-model="event.value" :disabled="isInheriting">
-          {{ startCase(event.title) }}
+          {{ event.title }}
         </gl-form-checkbox>
         <gl-form-input
           v-if="event.field"

app/helpers/integrations_helper.rb

 # frozen_string_literal: true
 
 module IntegrationsHelper
+  def integration_event_title(event)
+    case event
+    when "push", "push_events"
+      _("Push")
+    when "tag_push", "tag_push_events"
+      _("Tag push")
+    when "note", "note_events"
+      _("Note")
+    when "confidential_note", "confidential_note_events"
+      _("Confidential note")
+    when "issue", "issue_events"
+      _("Issue")
+    when "confidential_issue", "confidential_issue_events"
+      _("Confidential issue")
+    when "merge_request", "merge_request_events"
+      _("Merge request")
+    when "pipeline", "pipeline_events"
+      _("Pipeline")
+    when "wiki_page", "wiki_page_events"
+      _("Wiki page")
+    when "commit", "commit_events"
+      _("Commit")
+    when "deployment"
+      _("Deployment")
+    when "alert"
+      _("Alert")
+    end
+  end
+
   def integration_event_description(integration, event)
     case integration
     when Integrations::Jira

app/serializers/service_event_entity.rb

@@ -4,7 +4,7 @@ class ServiceEventEntity < Grape::Entity
   include RequestAwareEntity
 
   expose :title do |event|
-    event
+    IntegrationsHelper.integration_event_title(event)
   end
 
   expose :event_field_name, as: :name

locale/gitlab.pot

@@ -3147,6 +3147,9 @@ msgstr ""
 msgid "Akismet helps prevent the creation of spam issues in public projects."
 msgstr ""
 
+msgid "Alert"
+msgstr ""
+
 msgid "AlertManagement|Acknowledged"
 msgstr ""
 
@@ -9110,6 +9113,12 @@ msgstr ""
 msgid "Confidential"
 msgstr ""
 
+msgid "Confidential issue"
+msgstr ""
+
+msgid "Confidential note"
+msgstr ""
+
 msgid "Confidentiality"
 msgstr ""
 
@@ -12197,6 +12206,9 @@ msgstr ""
 msgid "Deploying to AWS is easy with GitLab"
 msgstr ""
 
+msgid "Deployment"
+msgstr ""
+
 msgid "Deployment Frequency"
 msgstr ""
 
@@ -35756,6 +35768,9 @@ msgstr ""
 msgid "Tag name is required"
 msgstr ""
 
+msgid "Tag push"
+msgstr ""
+
 msgid "Tag push events"
 msgstr ""
 
@@ -41297,6 +41312,9 @@ msgstr ""
 msgid "Wiki"
 msgstr ""
 
+msgid "Wiki page"
+msgstr ""
+
 msgid "Wiki page was successfully created."
 msgstr ""
 

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

@@ -40,13 +40,13 @@ describe('TriggerFields', () => {
     describe('events without field property', () => {
       const events = [
         {
-          title: 'push',
+          title: 'Push',
           name: 'push_event',
           description: 'Event on push',
           value: true,
         },
         {
-          title: 'merge_request',
+          title: 'Merge request',
           name: 'merge_requests_event',
           description: 'Event on merge_request',
           value: false,
@@ -81,7 +81,7 @@ describe('TriggerFields', () => {
         const checkboxes = findAllGlFormGroups();
         const expectedResults = [
           { labelText: 'Push', inputName: 'service[push_event]' },
-          { labelText: 'Merge Request', inputName: 'service[merge_requests_event]' },
+          { labelText: 'Merge request', inputName: 'service[merge_requests_event]' },
         ];
         expect(checkboxes).toHaveLength(2);