Merge branch...

Merge branch '232698-follow-up-from-vsa-add-info-icons-to-explain-lead-time-cycle-time-calculations' into 'master'

Refactor metrics card data transformation

Closes #232698

See merge request gitlab-org/gitlab!38145

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

@@ -2,9 +2,8 @@
 import Api from 'ee/api';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
-import { slugify } from '~/lib/utils/text_utility';
 import MetricCard from '../../shared/components/metric_card.vue';
-import { removeFlash } from '../utils';
+import { removeFlash, prepareTimeMetricsData } from '../utils';
 
 export default {
   name: 'RecentActivityCard',
@@ -45,11 +44,7 @@ export default {
         this.additionalParams ? this.additionalParams : {},
       )
         .then(({ data }) => {
-          this.data = data.map(({ title: label, value }) => ({
-            value: value || '-',
-            label,
-            key: slugify(label),
-          }));
+          this.data = prepareTimeMetricsData(data);
         })
         .catch(() => {
           createFlash(

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

@@ -2,9 +2,8 @@
 import Api from 'ee/api';
 import { __, s__ } from '~/locale';
 import createFlash from '~/flash';
-import { slugify } from '~/lib/utils/text_utility';
 import MetricCard from '../../shared/components/metric_card.vue';
-import { removeFlash } from '../utils';
+import { removeFlash, prepareTimeMetricsData } from '../utils';
 
 const I18N_TEXT = {
   'lead-time': s__('ValueStreamAnalytics|Median time from issue created to issue closed.'),
@@ -47,15 +46,7 @@ export default {
       this.loading = true;
       return Api.cycleAnalyticsTimeSummaryData(this.groupPath, this.additionalParams)
         .then(({ data }) => {
-          this.data = data.map(({ title: label, ...rest }) => {
-            const key = slugify(label);
-            return {
-              ...rest,
-              label,
-              key,
-              tooltipText: I18N_TEXT[key] || '',
-            };
-          });
+          this.data = prepareTimeMetricsData(data, I18N_TEXT);
         })
         .catch(() => {
           createFlash(

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

@@ -3,7 +3,7 @@ import dateFormat from 'dateformat';
 import { s__, sprintf } from '~/locale';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import httpStatus from '~/lib/utils/http_status';
-import { convertToSnakeCase } from '~/lib/utils/text_utility';
+import { convertToSnakeCase, slugify } from '~/lib/utils/text_utility';
 import { hideFlash } from '~/flash';
 import {
   newDate,
@@ -378,3 +378,36 @@ export const transformStagesForPathNavigation = ({ stages, medians, selectedStag
     stage.title === CAPITALIZED_STAGE_NAME.OVERVIEW ? 0 : 1,
   );
 };
+
+/**
+ * @typedef {Object} MetricData
+ * @property {String} title - Title of the metric measured
+ * @property {String} value - String representing the decimal point value, e.g '1.5'
+ * @property {String} [unit] - String representing the decimal point value, e.g '1.5'
+ *
+ * @typedef {Object} TransformedMetricData
+ * @property {String} label - Title of the metric measured
+ * @property {String} value - String representing the decimal point value, e.g '1.5'
+ * @property {String} key - Slugified string based on the 'title'
+ * @property {String} [tooltipText] - String to display for aa tooltip
+ * @property {String} [unit] - String representing the decimal point value, e.g '1.5'
+ */
+
+/**
+ * Prepares metric data to be rendered in the metric_card component
+ *
+ * @param {MetricData[]} data - The metric data to be rendered
+ * @param {Object} [tooltipText] - Key value pair of strings to display in the tooltip
+ * @returns {TransformedMetricData[]} An array of metrics ready to render in the metric_card
+ */
+
+export const prepareTimeMetricsData = (data = [], tooltipText = {}) =>
+  data.map(({ title: label, ...rest }) => {
+    const key = slugify(label);
+    return {
+      ...rest,
+      label,
+      key,
+      tooltipText: tooltipText[key] || '',
+    };
+  });

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

 import { isNumber } from 'lodash';
 import { getDatesInRange } from '~/lib/utils/datetime_utility';
+import { slugify } from '~/lib/utils/text_utility';
 import {
   isStartEvent,
   isLabelEvent,
@@ -17,6 +18,7 @@ import {
   orderByDate,
   toggleSelectedLabel,
   transformStagesForPathNavigation,
+  prepareTimeMetricsData,
 } from 'ee/analytics/cycle_analytics/utils';
 import { toYmd } from 'ee/analytics/shared/utils';
 import {
@@ -38,6 +40,7 @@ import {
   stageMediansWithNumericIds,
   totalStage,
   pathNavIssueMetric,
+  timeMetricsData,
 } from './mock_data';
 import { CAPITALIZED_STAGE_NAME, PATH_HOME_ICON } from 'ee/analytics/cycle_analytics/constants';
 
@@ -320,6 +323,7 @@ describe('Cycle analytics utils', () => {
     it('will remove an id that exists', () => {
       expect(toggleSelectedLabel({ selectedLabelIds, value: 2 })).toEqual([1, 3]);
     });
+
     it('will add an id that does not exist', () => {
       expect(toggleSelectedLabel({ selectedLabelIds, value: 4 })).toEqual([1, 2, 3, 4]);
     });
@@ -368,4 +372,32 @@ describe('Cycle analytics utils', () => {
       });
     });
   });
+
+  describe('prepareTimeMetricsData', () => {
+    let prepared;
+    const [{ title: firstTitle }, { title: secondTitle }] = timeMetricsData;
+    const firstKey = slugify(firstTitle);
+    const secondKey = slugify(secondTitle);
+
+    beforeEach(() => {
+      prepared = prepareTimeMetricsData(timeMetricsData, {
+        [firstKey]: 'Is a value that is good',
+      });
+    });
+
+    it('will add a `key` based on the title', () => {
+      expect(prepared).toMatchObject([{ key: firstKey }, { key: secondKey }]);
+    });
+
+    it('will add a `label` key', () => {
+      expect(prepared).toMatchObject([{ label: 'Lead Time' }, { label: 'Cycle Time' }]);
+    });
+
+    it('will add a tooltip text using the key if it is provided', () => {
+      expect(prepared).toMatchObject([
+        { tooltipText: 'Is a value that is good' },
+        { tooltipText: '' },
+      ]);
+    });
+  });
 });