Added specs for the prepopulated form

Added isDirty check to the form

Added specs for cancel button

Updated gitlab.pot file

Minor cleanup and update gitlab.pot

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -79,14 +79,6 @@ export default () => {
       // variable itself can be completely removed.
       // Follow up issue: https://gitlab.com/gitlab-org/gitlab-foss/issues/64490
       if (cycleAnalyticsEl.dataset.requestPath) this.fetchCycleAnalyticsData();
-
-      console.log('LOADING::data', cycleAnalyticsEl.dataset);
-
-      // groupLabels needed for label dropdown in the custom stages form
-      const groupLabels = cycleAnalyticsEl.dataset.groupLabels
-        ? JSON.parse(cycleAnalyticsEl.dataset.groupLabels)
-        : [];
-      this.store.setGroupLabels(groupLabels);
     },
     methods: {
       handleError() {

app/assets/javascripts/cycle_analytics/cycle_analytics_store.js

@@ -35,7 +35,6 @@ export default {
     analytics: '',
     events: [],
     stages: [],
-    groupLabels: [],
   },
   setCycleAnalyticsData(data) {
     this.state = Object.assign(this.state, this.decorateData(data));
@@ -113,13 +112,4 @@ export default {
   currentActiveStage() {
     return this.state.stages.find(stage => stage.active);
   },
-  setGroupLabels(labels) {
-    this.state.groupLabels = labels.map(({ id, title, color, textColor, description }) => ({
-      id,
-      title,
-      color,
-      textColor,
-      description,
-    }));
-  },
 };

app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue

@@ -68,9 +68,7 @@ export default {
           :key="`${project.organizationSlug}.${project.slug}`"
           class="w-100"
           @click="$emit('select-project', project)"
-          >
-            <div></div>{{ getDisplayName(project) }}
-          </gl-dropdown-item
+          >{{ getDisplayName(project) }}</gl-dropdown-item
         >
       </gl-dropdown>
     </div>

app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue

@@ -127,7 +127,7 @@ export default {
 
 <template>
   <div class="block labels js-labels-block">
-    <!-- <dropdown-value-collapsed
+    <dropdown-value-collapsed
       v-if="showCreate"
       :labels="context.labels"
       @onValueClick="handleCollapsedValueClick"
@@ -140,8 +140,8 @@ export default {
       :enable-scoped-labels="enableScopedLabels"
     >
       <slot></slot>
-    </dropdown-value> -->
-    <div class="selectbox js-selectbox">
+    </dropdown-value>
+    <div v-if="canEdit" class="selectbox js-selectbox" style="display: none;">
       <dropdown-hidden-input
         v-for="label in context.labels"
         :key="label.id"

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

 <script>
+import { isEqual } from 'underscore';
 import { s__, __ } from '~/locale';
 import { GlButton, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
 
@@ -25,6 +26,14 @@ const eventsByIdentifier = (events = [], targetIdentifier = []) => {
 const isLabelEvent = (labelEvents = [], ev = null) =>
   ev && labelEvents.length && labelEvents.includes(ev);
 
+const initFields = {
+  name: '',
+  startEvent: '',
+  startEventLabel: null,
+  stopEvent: '',
+  stopEventLabel: null,
+};
+
 export default {
   components: {
     GlButton,
@@ -36,109 +45,112 @@ 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: [],
-        },
-      ],
+      //   {
+      //     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: [],
+      //   },
+      // ],
     },
     labels: {
       type: Array,
       required: true,
     },
+    initialFields: {
+      type: Object,
+      required: false,
+      default: () => ({
+        ...initFields,
+      }),
+    },
   },
   data() {
     return {
       fields: {
-        name: '',
-        startEvent: '',
-        startEventLabel: null,
-        stopEvent: '',
-        stopEventLabel: null,
+        ...initFields,
       },
       labelEvents: [],
     };
@@ -168,9 +180,12 @@ export default {
     },
     isComplete() {
       const requiredFields = [this.fields.startEvent, this.fields.stopEvent, this.fields.name];
-      // TODO: need to factor in label field
+
       return requiredFields.every(fieldValue => fieldValue && fieldValue.length > 0);
     },
+    isDirty() {
+      return !isEqual(this.initialFields, this.fields);
+    },
   },
   mounted() {
     this.labelEvents = this.events
@@ -178,6 +193,10 @@ export default {
       .map(i => i.identifier);
   },
   methods: {
+    handleCancel() {
+      this.fields = { ...this.initialFields };
+      this.$emit('cancel');
+    },
     handleSave() {
       this.$emit('submit', this.fields);
     },
@@ -258,16 +277,16 @@ export default {
     </div>
 
     <div class="add-stage-form-actions">
-      <!-- 
-          TODO: what does the cancel button do?
-          - Just hide the form?
-          - clear entered data?
-        -->
-      <button class="btn btn-cancel add-stage-cancel" type="button" @click="cancelHandler()">
+      <button
+        :disabled="!isDirty"
+        class="btn btn-cancel js-add-stage-cancel"
+        type="button"
+        @click="handleCancel"
+      >
         {{ __('Cancel') }}
       </button>
       <button
-        :disabled="!isComplete"
+        :disabled="!isComplete || !isDirty"
         type="button"
         class="js-add-stage btn btn-success"
         @click="handleSave"

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

@@ -497,7 +497,6 @@ 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/components/labels_selector_spec.js

@@ -84,21 +84,4 @@ describe('Cycle Analytics LabelsSelector', () => {
       expect(activeItem.text()).toEqual(selectedLabel.name);
     });
   });
-
-  describe('with selectedLabelId set', () => {
-    beforeEach(() => {
-      wrapper = createComponent({
-        selectedLabelId: 55,
-      });
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
-    it('will set the active class', () => {
-      const activeItem = wrapper.find('[active="true"]');
-      expect(activeItem.exists()).toBe(true);
-      expect(activeItem.text()).toEqual('workflow::this-is-a-label');
-    });
-  });
 });

locale/gitlab.pot

@@ -4538,9 +4538,6 @@ msgstr ""
 msgid "CustomCycleAnalytics|Add stage"
 msgstr ""
 
-msgid "CustomCycleAnalytics|Choose which object types will trigger this stage"
-msgstr ""
-
 msgid "CustomCycleAnalytics|Enter a name for the stage"
 msgstr ""
 
@@ -4550,15 +4547,9 @@ msgstr ""
 msgid "CustomCycleAnalytics|New stage"
 msgstr ""
 
-msgid "CustomCycleAnalytics|Object type"
-msgstr ""
-
 msgid "CustomCycleAnalytics|Please select a start event first"
 msgstr ""
 
-msgid "CustomCycleAnalytics|Select one or more objects"
-msgstr ""
-
 msgid "CustomCycleAnalytics|Select start event"
 msgstr ""
 
@@ -4568,9 +4559,15 @@ msgstr ""
 msgid "CustomCycleAnalytics|Start event"
 msgstr ""
 
+msgid "CustomCycleAnalytics|Start event label"
+msgstr ""
+
 msgid "CustomCycleAnalytics|Stop event"
 msgstr ""
 
+msgid "CustomCycleAnalytics|Stop event label"
+msgstr ""
+
 msgid "Customize colors"
 msgstr ""
 
@@ -15713,6 +15710,9 @@ msgstr ""
 msgid "There was an error fetching configuration for charts"
 msgstr ""
 
+msgid "There was an error fetching the form data"
+msgstr ""
+
 msgid "There was an error gathering the chart data"
 msgstr ""