Moved group labels request to ~/api

Added loading icon to custom stage form container

Minor cleanup test createComponent call

Check label fields if they are required

Set the field key when calling handleClearLabel

Minor cleanup to resolve differences after rebase

app/assets/javascripts/api.js

@@ -74,6 +74,11 @@ const Api = {
       });
   },
 
+  groupLabels(namespace) {
+    const url = Api.buildUrl(Api.groupLabelsPath).replace(':namespace_path', namespace);
+    return axios.get(url).then(({ data }) => data);
+  },
+
   // Return namespaces list. Filtered by query
   namespaces(query, callback) {
     const url = Api.buildUrl(Api.namespacesPath);

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -8,7 +8,6 @@ import Flash from '../flash';
 import { __ } from '~/locale';
 import Translate from '../vue_shared/translate';
 import banner from './components/banner.vue';
-// TODO: should the be capitalized?
 import stageCodeComponent from './components/stage_code_component.vue';
 import stageComponent from './components/stage_component.vue';
 import stageReviewComponent from './components/stage_review_component.vue';

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -172,20 +172,6 @@
         color: $gl-text-color-secondary;
       }
     }
-
-    // EE-specific start
-    .stage-ghost {
-      border: dashed 1px $border-color;
-
-      &:hover,
-      &.active {
-        font-weight: bold;
-        background: $blue-50;
-        border-color: solid 1px $blue-300;
-        box-shadow: inset 4px 0 0 0 $blue-500;
-      }
-    }
-    // EE-specific end
   }
 
   .stage-panel-container {

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

@@ -34,96 +34,96 @@ 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'],
-          },
+      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)),
+      //     {
+      //       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)),
     },
     labels: {
       type: Array,
@@ -170,7 +170,15 @@ export default {
     isComplete() {
       if (!this.hasValidStartAndStopEventPair) return false;
       const requiredFields = [this.fields.startEvent, this.fields.stopEvent, this.fields.name];
-      return requiredFields.every(fieldValue => fieldValue && fieldValue.length > 0);
+      if (this.startEventRequiresLabel) {
+        requiredFields.push(this.fields.startEventLabel);
+      }
+      if (this.stopEventRequiresLabel) {
+        requiredFields.push(this.fields.stopEventLabel);
+      }
+      return requiredFields.every(
+        fieldValue => fieldValue && (fieldValue.length > 0 || fieldValue > 0),
+      );
     },
     isDirty() {
       return !isEqual(this.initialFields, this.fields);
@@ -244,7 +252,7 @@ export default {
             :selected-label-id="fields.startEventLabel"
             name="add-stage-start-event-label"
             @selectLabel="labelId => handleSelectLabel('startEventLabel', labelId)"
-            @clearLabel="handleClearLabel"
+            @clearLabel="handleClearLabel('startEventLabel')"
           />
         </gl-form-group>
       </div>
@@ -275,7 +283,7 @@ export default {
             :selected-label-id="fields.stopEventLabel"
             name="add-stage-stop-event-label"
             @selectLabel="labelId => handleSelectLabel('stopEventLabel', labelId)"
-            @clearLabel="handleClearLabel"
+            @clearLabel="handleClearLabel('stopEventLabel')"
           />
         </gl-form-group>
       </div>

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

@@ -2,44 +2,46 @@
 // NOTE: this is a temporary component while cycle-analytics is being refactored
 //        post refactor we will have a vuex store and functionality to fetch data
 // https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/15039
-import createFlash from '~/flash';
-import axios from '~/lib/utils/axios_utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
+import createFlash from '~/flash';
+import Api from '~/api';
 import CustomStageForm from './custom_stage_form.vue';
 
-function fetchGroupLabels(groupId, query = {}) {
-  const { api_version: apiVersion } = window.gon;
-  const url = `/api/${apiVersion}/groups/${groupId}/labels`;
-  return axios.get(url, { ...query }).then(response => response.data);
-}
-
 export default {
   name: 'CustomStageFormContainer',
   components: {
     CustomStageForm,
+    GlLoadingIcon,
   },
   props: {
-    groupId: {
-      type: Number,
+    namespace: {
+      type: String,
       required: true,
     },
   },
   data() {
     return {
       labels: [],
+      isLoading: false,
     };
   },
   created() {
-    fetchGroupLabels(this.groupId)
+    this.isLoading = true;
+    Api.groupLabels(this.namespace)
       .then(labels => {
-        this.labels = labels;
+        this.labels = labels.map(({ title, ...rest }) => ({ ...rest, name: title }));
       })
       .catch(() => {
         createFlash(__('There was an error fetching the form data'));
+      })
+      .finally(() => {
+        this.isLoading = false;
       });
   },
 };
 </script>
 <template>
-  <custom-stage-form :labels="labels" />
+  <gl-loading-icon v-if="isLoading" size="md" class="my-3" />
+  <custom-stage-form v-else :labels="labels" />
 </template>

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

@@ -78,5 +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", ":group-id" => "selectedGroup.id" }
-
+                  %custom-stage-form-container{ "v-if" => "isCustomStageForm && selectedGroup && selectedGroup.id", ":namespace" => "selectedGroup.full_path" }

locale/gitlab.pot

@@ -8566,27 +8566,12 @@ 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 ""
 
@@ -9633,21 +9618,6 @@ 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 ""
 
@@ -10259,9 +10229,6 @@ msgstr ""
 msgid "New snippet"
 msgstr ""
 
-msgid "New stage"
-msgstr ""
-
 msgid "New subgroup"
 msgstr ""