Merge branch '199987-missing-label-titles-for-customizable-cycle-analytics-form' into 'master'

Missing label titles for customizable cycle analytics form

Closes #199987

See merge request gitlab-org/gitlab!24155

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

@@ -43,9 +43,7 @@ export default {
     initialFields: {
       type: Object,
       required: false,
-      default: () => ({
-        ...initFields,
-      }),
+      default: () => {},
     },
     isSavingCustomStage: {
       type: Boolean,
@@ -61,6 +59,7 @@ export default {
   data() {
     return {
       fields: {
+        ...initFields,
         ...this.initialFields,
       },
     };
@@ -114,7 +113,7 @@ export default {
       );
     },
     isDirty() {
-      return !isEqual(this.initialFields, this.fields);
+      return !isEqual(this.initialFields, this.fields) && !isEqual(initFields, this.fields);
     },
     hasValidStartAndEndEventPair() {
       const {
@@ -147,7 +146,10 @@ export default {
   },
   methods: {
     handleCancel() {
-      this.fields = { ...this.initialFields };
+      this.fields = {
+        ...initFields,
+        ...this.initialFields,
+      };
       this.$emit('cancel');
     },
     handleSave() {

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

@@ -41,7 +41,7 @@ export default {
           class="d-inline-block dropdown-label-box"
         >
         </span>
-        {{ selectedLabel.name }}
+        {{ selectedLabel.title }}
       </span>
       <span v-else>{{ __('Select a label') }}</span>
     </template>
@@ -56,7 +56,7 @@ export default {
     >
       <span :style="{ backgroundColor: label.color }" class="d-inline-block dropdown-label-box">
       </span>
-      {{ label.name }}
+      {{ label.title }}
     </gl-dropdown-item>
   </gl-dropdown>
 </template>

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

@@ -120,7 +120,25 @@ export default {
       ];
     },
     customStageInitialData() {
-      return this.isEditingCustomStage ? this.currentStage : {};
+      if (this.isEditingCustomStage) {
+        const {
+          id = null,
+          name = null,
+          startEventIdentifier = null,
+          startEventLabel: { id: startEventLabelId = null } = {},
+          endEventIdentifier = null,
+          endEventLabel: { id: endEventLabelId = null } = {},
+        } = this.currentStage;
+        return {
+          id,
+          name,
+          startEventIdentifier,
+          startEventLabelId,
+          endEventIdentifier,
+          endEventLabelId,
+        };
+      }
+      return {};
     },
   },
   methods: {

ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/tasks_by_type_chart_spec.js.snap

@@ -30,7 +30,7 @@ exports[`TasksByTypeChart with data available filters labels with label dropdown
       <a href=\\"#\\" class=\\"dropdown-menu-link is-active\\">
         <span style=\\"background-color: #BADA55;\\" class=\\"d-inline-block dropdown-label-box\\">
               </span>
-
+        Foo Label
       </a>
     </li>
 
@@ -38,7 +38,7 @@ exports[`TasksByTypeChart with data available filters labels with label dropdown
       <a href=\\"#\\" class=\\"dropdown-menu-link is-active\\">
         <span style=\\"background-color: #0033CC;\\" class=\\"d-inline-block dropdown-label-box\\">
               </span>
-
+        Foo::Bar
       </a>
     </li>
   </ul>

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

@@ -16,7 +16,7 @@ describe('Value Stream Analytics LabelsSelector', () => {
   }
 
   let wrapper = null;
-  const labelNames = groupLabels.map(({ name }) => name);
+  const labelNames = groupLabels.map(({ title }) => title);
 
   describe('with no item selected', () => {
     beforeEach(() => {
@@ -27,8 +27,8 @@ describe('Value Stream Analytics LabelsSelector', () => {
       wrapper.destroy();
     });
 
-    it.each(labelNames)('generate a label item for the label %s', name => {
-      expect(wrapper.text()).toContain(name);
+    it.each(labelNames)('generate a label item for the label %s', title => {
+      expect(wrapper.text()).toContain(title);
     });
 
     it('will render with the default option selected', () => {
@@ -81,7 +81,7 @@ describe('Value Stream Analytics LabelsSelector', () => {
       const activeItem = wrapper.find('[active="true"]');
 
       expect(activeItem.exists()).toBe(true);
-      expect(activeItem.text()).toEqual(selectedLabel.name);
+      expect(activeItem.text()).toEqual(selectedLabel.title);
     });
   });
 });

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

@@ -17,7 +17,7 @@ const endpoints = {
   summaryData: 'analytics/value_stream_analytics/summary.json',
 };
 
-export const groupLabels = mockLabels.map(({ title, ...rest }) => ({ ...rest, name: title }));
+export const groupLabels = mockLabels;
 
 export const group = {
   id: 1,