Display warning if start event changed

Address review comments

Remove unused `value` attribute

Moved functions to utils

Moved reuseable functions to a utils file
adding specs for each function.

Camelcase fields in mock data

Fix unused createComponent call in spec

ee/app/assets/javascripts/analytics/cycle_analytics/utils.js

+const EVENT_TYPE_LABEL = 'label';
+
+export const isStartEvent = ev => Boolean(ev) && Boolean(ev.canBeStartEvent) && ev.canBeStartEvent;
+
+export const eventToOption = ({ name: text = '', identifier: value = null }) => ({
+  text,
+  value,
+});
+
+export const getAllowedEndEvents = (events = [], targetIdentifier = null) => {
+  if (!targetIdentifier || !events.length) return [];
+  const st = events.find(({ identifier }) => identifier === targetIdentifier);
+  return st && st.allowedEndEvents ? st.allowedEndEvents : [];
+};
+
+export const eventsByIdentifier = (events = [], targetIdentifier = []) => {
+  if (!targetIdentifier || !targetIdentifier.length || !events.length) return [];
+  return events.filter(({ identifier = '' }) => targetIdentifier.includes(identifier));
+};
+
+export const isLabelEvent = (labelEvents = [], ev = null) =>
+  Boolean(ev) && labelEvents.length && labelEvents.includes(ev);
+
+export const getLabelEventsIdentifiers = (events = []) =>
+  events.filter(ev => ev.type && ev.type === EVENT_TYPE_LABEL).map(i => i.identifier);

ee/spec/frontend/analytics/cycle_analytics/components/custom_stage_form_spec.js

@@ -476,6 +476,7 @@ describe('CustomStageForm', () => {
     afterEach(() => {
       wrapper.destroy();
     });
+
     describe('Cancel button', () => {
       it('will reset the fields to initial state when clicked', () => {
         wrapper.setData({
@@ -497,6 +498,7 @@ describe('CustomStageForm', () => {
         });
       });
     });
+
     describe('Add stage button', () => {
       it('is disabled by default', () => {
         expect(wrapper.find(sel.submit).attributes('disabled')).toEqual('disabled');

ee/spec/frontend/analytics/cycle_analytics/mock_data.js

@@ -58,86 +58,86 @@ const apiResponse = {
       name: 'Issue created',
       identifier: 'issue_created',
       type: 'simple',
-      can_be_start_event: true,
-      allowed_end_events: ['issue_stage_end'],
+      canBeStartEvent: true,
+      allowedEndEvents: ['issue_stage_end'],
     },
     {
       name: 'Issue first mentioned in a commit',
       identifier: 'issue_first_mentioned_in_commit',
       type: 'simple',
-      can_be_start_event: false,
-      allowed_end_events: [],
+      canBeStartEvent: false,
+      allowedEndEvents: [],
     },
     {
       name: 'Merge request created',
       identifier: 'merge_request_created',
       type: 'simple',
-      can_be_start_event: true,
-      allowed_end_events: ['merge_request_merged'],
+      canBeStartEvent: true,
+      allowedEndEvents: ['merge_request_merged'],
     },
 
     {
       name: 'Merge request first deployed to production',
       identifier: 'merge_request_first_deployed_to_production',
       type: 'simple',
-      can_be_start_event: false,
-      allowed_end_events: [],
+      canBeStartEvent: false,
+      allowedEndEvents: [],
     },
     {
       name: 'Merge request last build finish time',
       identifier: 'merge_request_last_build_finished',
       type: 'simple',
-      can_be_start_event: false,
-      allowed_end_events: [],
+      canBeStartEvent: false,
+      allowedEndEvents: [],
     },
     {
       name: 'Merge request last build start time',
       identifier: 'merge_request_last_build_started',
       type: 'simple',
-      can_be_start_event: true,
-      allowed_end_events: ['merge_request_last_build_finished'],
+      canBeStartEvent: true,
+      allowedEndEvents: ['merge_request_last_build_finished'],
     },
     {
       name: 'Merge request merged',
       identifier: 'merge_request_merged',
       type: 'simple',
-      can_be_start_event: true,
-      allowed_end_events: ['merge_request_first_deployed_to_production'],
+      canBeStartEvent: true,
+      allowedEndEvents: ['merge_request_first_deployed_to_production'],
     },
     {
       name: 'Issue first mentioned in a commit',
       identifier: 'code_stage_start',
       type: 'simple',
-      can_be_start_event: true,
-      allowed_end_events: ['merge_request_created'],
+      canBeStartEvent: true,
+      allowedEndEvents: ['merge_request_created'],
     },
     {
       name: 'Issue first associated with a milestone or issue first added to a board',
       identifier: 'issue_stage_end',
       type: 'simple',
-      can_be_start_event: false,
-      allowed_end_events: [],
+      canBeStartEvent: false,
+      allowedEndEvents: [],
     },
     {
       name: 'Issue first associated with a milestone or issue first added to a board',
       identifier: 'plan_stage_start',
       type: 'simple',
-      can_be_start_event: true,
-      allowed_end_events: ['issue_first_mentioned_in_commit'],
+      canBeStartEvent: true,
+      allowedEndEvents: ['issue_first_mentioned_in_commit'],
     },
     {
       identifier: 'issue_label_added',
       name: 'Issue Label Added',
       type: 'label',
-      can_be_start_event: true,
-      allowed_end_events: ['issue_closed', 'issue_label_removed'],
+      canBeStartEvent: true,
+      allowedEndEvents: ['issue_closed', 'issue_label_removed'],
     },
     {
       identifier: 'issue_label_removed',
       name: 'Issue Label Removed',
       type: 'label',
-      can_be_start_event: false,
-      allowed_end_events: [],
+      canBeStartEvent: false,
+      allowedEndEvents: [],
     },
   ],
   stages: [
@@ -149,8 +149,8 @@ const apiResponse = {
       position: 1,
       hidden: false,
       custom: false,
-      start_event_identifier: 'issue_created',
-      end_event_identifier: 'issue_stage_end',
+      startEventIdentifier: 'issue_created',
+      endEventIdentifier: 'issue_stage_end',
     },
     {
       name: 'plan',
@@ -160,8 +160,8 @@ const apiResponse = {
       position: 2,
       hidden: false,
       custom: false,
-      start_event_identifier: 'plan_stage_start',
-      end_event_identifier: 'issue_first_mentioned_in_commit',
+      startEventIdentifier: 'plan_stage_start',
+      endEventIdentifier: 'issue_first_mentioned_in_commit',
     },
     {
       name: 'code',
@@ -171,8 +171,8 @@ const apiResponse = {
       position: 3,
       hidden: false,
       custom: false,
-      start_event_identifier: 'code_stage_start',
-      end_event_identifier: 'merge_request_created',
+      startEventIdentifier: 'code_stage_start',
+      endEventIdentifier: 'merge_request_created',
     },
     {
       name: 'test',
@@ -182,8 +182,8 @@ const apiResponse = {
       position: 4,
       hidden: false,
       custom: false,
-      start_event_identifier: 'merge_request_last_build_started',
-      end_event_identifier: 'merge_request_last_build_finished',
+      startEventIdentifier: 'merge_request_last_build_started',
+      endEventIdentifier: 'merge_request_last_build_finished',
     },
     {
       name: 'review',
@@ -193,8 +193,8 @@ const apiResponse = {
       position: 5,
       hidden: false,
       custom: false,
-      start_event_identifier: 'merge_request_created',
-      end_event_identifier: 'merge_request_merged',
+      startEventIdentifier: 'merge_request_created',
+      endEventIdentifier: 'merge_request_merged',
     },
     {
       name: 'staging',
@@ -204,8 +204,8 @@ const apiResponse = {
       position: 6,
       hidden: false,
       custom: false,
-      start_event_identifier: 'merge_request_merged',
-      end_event_identifier: 'merge_request_first_deployed_to_production',
+      startEventIdentifier: 'merge_request_merged',
+      endEventIdentifier: 'merge_request_first_deployed_to_production',
     },
     {
       name: 'production',
@@ -215,8 +215,8 @@ const apiResponse = {
       position: 7,
       hidden: false,
       custom: false,
-      start_event_identifier: 'merge_request_merged',
-      end_event_identifier: 'merge_request_first_deployed_to_production',
+      startEventIdentifier: 'merge_request_merged',
+      endEventIdentifier: 'merge_request_first_deployed_to_production',
     },
   ],
   summary: [
@@ -244,34 +244,48 @@ const apiResponse = {
   },
 };
 
-const rawEvents = [
+export const rawEvents = [
   {
     name: 'Issue created',
     identifier: 'issue_created',
     type: 'simple',
-    can_be_start_event: true,
-    allowed_end_events: ['issue_closed', 'issue_merged'],
+    canBeStartEvent: true,
+    allowedEndEvents: ['issue_closed', 'issue_merged'],
   },
   {
     name: 'Merge request closed',
     identifier: 'merge_request_closed',
     type: 'simple',
-    can_be_start_event: false,
-    allowed_end_events: [],
+    canBeStartEvent: false,
+    allowedEndEvents: [],
   },
   {
     name: 'Issue closed',
     identifier: 'issue_closed',
     type: 'simple',
-    can_be_start_event: false,
-    allowed_end_events: [],
+    canBeStartEvent: false,
+    allowedEndEvents: [],
   },
   {
     name: 'Issue merged',
     identifier: 'issue_merged',
     type: 'simple',
-    can_be_start_event: false,
-    allowed_end_events: [],
+    canBeStartEvent: false,
+    allowedEndEvents: [],
+  },
+  {
+    identifier: 'issue_label_added',
+    name: 'Issue Label Added',
+    type: 'label',
+    canBeStartEvent: true,
+    allowedEndEvents: ['issue_closed', 'issue_label_removed'],
+  },
+  {
+    identifier: 'issue_label_removed',
+    name: 'Issue Label Removed',
+    type: 'label',
+    canBeStartEvent: false,
+    allowedEndEvents: [],
   },
 ];
 

ee/spec/frontend/analytics/cycle_analytics/utils_spec.js

+import {
+  isStartEvent,
+  isLabelEvent,
+  getAllowedEndEvents,
+  eventToOption,
+  eventsByIdentifier,
+  getLabelEventsIdentifiers,
+} from 'ee/analytics/cycle_analytics/utils';
+import { rawEvents } from './mock_data';
+
+const startEvent = rawEvents[0];
+const endEvent = rawEvents[1];
+const labelEvent = rawEvents[5];
+const labelEvents = [rawEvents[4], rawEvents[5]].map(i => i.identifier);
+
+describe('Cycle analytics utils', () => {
+  describe('isStartEvent', () => {
+    it('will return true for a valid start event', () => {
+      expect(isStartEvent(startEvent)).toEqual(true);
+    });
+
+    it('will return false for input that is not a start event', () => {
+      [endEvent, {}, [], null, undefined].forEach(ev => {
+        expect(isStartEvent(ev)).toEqual(false);
+      });
+    });
+  });
+
+  describe('isLabelEvent', () => {
+    it('will return true if the given event identifier is in the labelEvents array', () => {
+      expect(isLabelEvent(labelEvents, labelEvent.identifier)).toEqual(true);
+    });
+    it('will return false if the given event identifier is not in the labelEvents array', () => {
+      [startEvent.identifier, null, undefined, ''].forEach(ev => {
+        expect(isLabelEvent(labelEvents, ev)).toEqual(false);
+      });
+      expect(isLabelEvent(labelEvents)).toEqual(false);
+    });
+  });
+
+  describe('eventToOption', () => {
+    it('will return an empty array if no events are passed in', () => {
+      expect([]).toEqual([]);
+    });
+
+    it('will set the "value" property to the events identifier', () => {
+      rawEvents.forEach(ev => {
+        const res = eventToOption(ev);
+        expect(res.value).toEqual(ev.identifier);
+      });
+    });
+
+    it('will set the "text" property to the events name', () => {
+      rawEvents.forEach(ev => {
+        const res = eventToOption(ev);
+        expect(res.text).toEqual(ev.name);
+      });
+    });
+  });
+
+  describe('getLabelEventsIdentifiers', () => {
+    it('will return an array of identifiers for the label events', () => {
+      const res = getLabelEventsIdentifiers(rawEvents);
+      expect(res.length).toEqual(labelEvents.length);
+      expect(res).toEqual(labelEvents);
+    });
+    it('will return an empty array when there are no matches', () => {
+      const ev = [{ _type: 'simple' }, { type: 'simple' }, { t: 'simple' }];
+      expect(getLabelEventsIdentifiers(ev)).toEqual([]);
+      expect(getLabelEventsIdentifiers([])).toEqual([]);
+    });
+  });
+
+  describe('getAllowedEndEvents', () => {
+    it('will return the relevant end events for a given start event identifier', () => {
+      const se = rawEvents[4].allowedEndEvents;
+      expect(getAllowedEndEvents(rawEvents, 'issue_label_added')).toEqual(se);
+    });
+
+    it('will return an empty array if there are no end events available', () => {
+      ['cool_issue_label_added', [], {}, null, undefined].forEach(ev => {
+        expect(getAllowedEndEvents(rawEvents, ev)).toEqual([]);
+      });
+    });
+  });
+
+  describe('eventsByIdentifier', () => {
+    it('will return the events with an identifier in the provided array', () => {
+      expect(eventsByIdentifier(rawEvents, labelEvents)).toEqual([rawEvents[4], rawEvents[5]]);
+    });
+
+    it('will return an empty array if there are no matching events', () => {
+      [['lol', 'bad'], [], {}, null, undefined].forEach(items => {
+        expect(eventsByIdentifier(rawEvents, items)).toEqual([]);
+      });
+      expect(eventsByIdentifier([], labelEvents)).toEqual([]);
+    });
+  });
+});

locale/gitlab.pot

@@ -4532,6 +4532,9 @@ msgstr ""
 msgid "Custom project templates have not been set up for groups that you are a member of. They are enabled from a group’s settings page. Contact your group’s Owner or Maintainer to setup custom project templates."
 msgstr ""
 
+msgid "CustomCycleAnalyticsStart event changed, please select a valid stop event"
+msgstr ""
+
 msgid "CustomCycleAnalytics|Add a stage"
 msgstr ""
 
@@ -8563,12 +8566,27 @@ msgstr ""
 msgid "Issue Boards"
 msgstr ""
 
+msgid "Issue Label Added"
+msgstr ""
+
+msgid "Issue Label Removed"
+msgstr ""
+
 msgid "Issue board focus mode"
 msgstr ""
 
+msgid "Issue created"
+msgstr ""
+
 msgid "Issue events"
 msgstr ""
 
+msgid "Issue first associated with a milestone or issue first added to a board"
+msgstr ""
+
+msgid "Issue first mentioned in a commit"
+msgstr ""
+
 msgid "Issue template (optional)"
 msgstr ""
 
@@ -9615,6 +9633,21 @@ msgstr ""
 msgid "Merge request approvals allow you to set the number of necessary approvals and predefine a list of approvers that will need to approve every merge request in a project."
 msgstr ""
 
+msgid "Merge request created"
+msgstr ""
+
+msgid "Merge request first deployed to production"
+msgstr ""
+
+msgid "Merge request last build finish time"
+msgstr ""
+
+msgid "Merge request last build start time"
+msgstr ""
+
+msgid "Merge request merged"
+msgstr ""
+
 msgid "Merge requests"
 msgstr ""