Check full_path exists not id

Add events to custom_stage_form_container data

Remove extra class

Fix spec for eventToOption

Fix static analysis warnings

Specify required prop

Remove test events data

app/views/projects/cycle_analytics/show.html.haml

 - page_title "Cycle Analytics"
 
-#cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
+#cycle-analytics{ "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data
     %banner{ "v-if" => "!isOverviewDialogDismissed",
       "documentation-link": help_page_path('user/project/cycle_analytics'),

ee/app/assets/javascripts/analytics/cycle_analytics/components/custom_stage_form.vue

 <script>
 import { isEqual } from 'underscore';
 import { GlButton, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { s__ } from '~/locale';
 
 import LabelsSelector from './labels_selector.vue';
 
@@ -34,96 +33,7 @@ export default {
   props: {
     events: {
       type: Array,
-      required: true,
-      // required: false,
-      // default: () =>
-      //   [
-      //     {
-      //       name: __('Issue created'),
-      //       identifier: 'issue_created',
-      //       type: 'simple',
-      //       can_be_start_event: true,
-      //       allowed_end_events: ['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: [],
-      //     },
-      //     {
-      //       name: __('Merge request created'),
-      //       identifier: 'merge_request_created',
-      //       type: 'simple',
-      //       can_be_start_event: true,
-      //       allowed_end_events: ['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: [],
-      //     },
-      //     {
-      //       name: __('Merge request last build finish time'),
-      //       identifier: 'merge_request_last_build_finished',
-      //       type: 'simple',
-      //       can_be_start_event: false,
-      //       allowed_end_events: [],
-      //     },
-      //     {
-      //       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'],
-      //     },
-      //     {
-      //       name: __('Merge request merged'),
-      //       identifier: 'merge_request_merged',
-      //       type: 'simple',
-      //       can_be_start_event: true,
-      //       allowed_end_events: ['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'],
-      //     },
-      //     {
-      //       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: [],
-      //     },
-      //     {
-      //       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'],
-      //     },
-      //     {
-      //       identifier: 'issue_label_added',
-      //       name: __('Issue Label Added'),
-      //       type: 'label',
-      //       can_be_start_event: true,
-      //       allowed_end_events: ['issue_closed', 'issue_label_removed'],
-      //     },
-      //     {
-      //       identifier: 'issue_label_removed',
-      //       name: __('Issue Label Removed'),
-      //       type: 'label',
-      //       can_be_start_event: false,
-      //       allowed_end_events: [],
-      //     },
-      //   ].map(e => convertObjectPropsToCamelCase(e)),
+      required: true,      
     },
     labels: {
       type: Array,

ee/app/assets/javascripts/analytics/cycle_analytics/components/custom_stage_form_container.vue

@@ -22,11 +22,14 @@ export default {
   },
   data() {
     return {
+      events: [],
       labels: [],
       isLoading: false,
     };
   },
   created() {
+    // NOTE: events will be part of the response from the new cycle analytics backend
+    // https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/31535
     this.isLoading = true;
     Api.groupLabels(this.namespace)
       .then(labels => {
@@ -43,5 +46,5 @@ export default {
 </script>
 <template>
   <gl-loading-icon v-if="isLoading" size="md" class="my-3" />
-  <custom-stage-form v-else :labels="labels" />
+  <custom-stage-form v-else :labels="labels" :events="events" />
 </template>

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

@@ -2,10 +2,11 @@ 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 eventToOption = (obj = null) => {
+  if (!obj || (!obj.text && !obj.identifier)) return null;
+  const { name: text = '', identifier: value = null } = obj;
+  return { text, value };
+};
 
 export const getAllowedEndEvents = (events = [], targetIdentifier = null) => {
   if (!targetIdentifier || !events.length) return [];

ee/app/views/analytics/cycle_analytics/show.html.haml

@@ -78,4 +78,4 @@
                 %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage && !isCustomStageForm" }
                   %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" }
                 - if customizable_cycle_analytics
-                  %custom-stage-form-container{ "v-if" => "isCustomStageForm && selectedGroup && selectedGroup.id", ":namespace" => "selectedGroup.full_path" }
+                  %custom-stage-form-container{ "v-if" => "isCustomStageForm && selectedGroup && selectedGroup.full_path", ":namespace" => "selectedGroup.full_path" }

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

@@ -39,8 +39,10 @@ describe('Cycle analytics utils', () => {
   });
 
   describe('eventToOption', () => {
-    it('will return an empty array if no events are passed in', () => {
-      expect([]).toEqual([]);
+    it('will return null if no valid object is passed in', () => {
+      [{}, [], null, undefined].forEach(i => {
+        expect(eventToOption(i)).toEqual(null);
+      });
     });
 
     it('will set the "value" property to the events identifier', () => {