Fix incorrect date in type of work chart

Updates the type of work chart to use the correct
createdBefore/createdAfter date variables, this fixes
one of the issues related to the how the date is displayed in
gitlab.com/gitlab-org/gitlab/-/issues/340080

EE: true
Changelog: fixed

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

@@ -28,8 +28,8 @@ export default {
     },
     summaryDescription() {
       const {
-        startDate,
-        endDate,
+        createdAfter,
+        createdBefore,
         selectedProjectIds,
         currentGroup: { name: groupName },
       } = this.selectedTasksByTypeFilters;
@@ -38,14 +38,14 @@ export default {
       const str =
         selectedProjectCount > 0
           ? s__(
-              "CycleAnalytics|Showing data for group '%{groupName}' and %{selectedProjectCount} projects from %{startDate} to %{endDate}",
+              "CycleAnalytics|Showing data for group '%{groupName}' and %{selectedProjectCount} projects from %{createdAfter} to %{createdBefore}",
             )
           : s__(
-              "CycleAnalytics|Showing data for group '%{groupName}' from %{startDate} to %{endDate}",
+              "CycleAnalytics|Showing data for group '%{groupName}' from %{createdAfter} to %{createdBefore}",
             );
       return sprintf(str, {
-        startDate: formattedDate(startDate),
-        endDate: formattedDate(endDate),
+        createdAfter: formattedDate(createdAfter),
+        createdBefore: formattedDate(createdBefore),
         groupName,
         selectedProjectCount,
       });

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/type_of_work/getters.js

@@ -21,10 +21,6 @@ export const selectedTasksByTypeFilters = (state = {}, _, rootState = {}) => {
 export const tasksByTypeChartData = ({ data = [] } = {}, _, rootState = {}) => {
   const { createdAfter = null, createdBefore = null } = rootState;
   return data.length
-    ? getTasksByTypeData({
-        data,
-        startDate: createdAfter,
-        endDate: createdBefore,
-      })
+    ? getTasksByTypeData({ data, createdAfter, createdBefore })
     : { groupBy: [], data: [] };
 };

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

@@ -214,20 +214,20 @@ export const flattenTaskByTypeSeries = (series = {}) =>
  *
  * @param {Object} obj
  * @param {RawTasksByTypeData[]} obj.data - array of raw data, each element contains a label and series
- * @param {Date} obj.startDate - start date in ISO date format
- * @param {Date} obj.endDate - end date in ISO date format
+ * @param {Date} obj.createdAfter - start date in ISO date format
+ * @param {Date} obj.createdBefore - end date in ISO date format
  *
  * @returns {TransformedTasksByTypeData} The transformed data ready for use in charts
  */
-export const getTasksByTypeData = ({ data = [], startDate = null, endDate = null }) => {
-  if (!startDate || !endDate || !data.length) {
+export const getTasksByTypeData = ({ data = [], createdAfter = null, createdBefore = null }) => {
+  if (!createdAfter || !createdBefore || !data.length) {
     return {
       groupBy: [],
       data: [],
     };
   }
 
-  const groupBy = getDatesInRange(startDate, endDate, toYmd).sort(orderByDate);
+  const groupBy = getDatesInRange(createdAfter, createdBefore, toYmd).sort(orderByDate);
   const zeroValuesForEachDataPoint = groupBy.reduce(
     (acc, date) => ({
       ...acc,

ee/spec/features/groups/analytics/cycle_analytics/filters_and_data_spec.rb

@@ -212,6 +212,7 @@ RSpec.describe 'Group value stream analytics filters and data', :js do
 
         expect(element.find('.js-daterange-picker-from input').value).to eq '2019-11-01'
         expect(element.find('.js-daterange-picker-to input').value).to eq '2019-12-31'
+        expect(page.find('.js-tasks-by-type-chart')).to have_text(_("Showing data for group '%{group_name}' from Nov 1, 2019 to Dec 31, 2019") % { group_name: group.name })
       end
     end
   end

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

@@ -222,8 +222,8 @@ export const taskByTypeFilters = {
     fullPath: 'gitlab-org',
   },
   selectedProjectIds: [],
-  startDate: new Date('2019-12-11'),
-  endDate: new Date('2020-01-10'),
+  createdAfter: new Date('2019-12-11'),
+  createdBefore: new Date('2020-01-10'),
   subject: TASKS_BY_TYPE_SUBJECT_ISSUE,
   selectedLabelIds: [1, 2, 3],
 };

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

@@ -247,22 +247,20 @@ describe('Value Stream Analytics utils', () => {
     });
 
     it('will return blank arrays if given no data', () => {
-      [{ data: [], startDate: createdAfter, endDate: createdBefore }, [], {}].forEach(
-        (chartData) => {
-          transformed = getTasksByTypeData(chartData);
-          ['data', 'groupBy'].forEach((key) => {
-            expect(transformed[key]).toEqual([]);
-          });
-        },
-      );
+      [{ data: [], createdAfter, createdBefore }, [], {}].forEach((chartData) => {
+        transformed = getTasksByTypeData(chartData);
+        ['data', 'groupBy'].forEach((key) => {
+          expect(transformed[key]).toEqual([]);
+        });
+      });
     });
 
     describe('with data', () => {
       beforeEach(() => {
         transformed = getTasksByTypeData({
           data: rawTasksByTypeData,
-          startDate: createdAfter,
-          endDate: createdBefore,
+          createdAfter,
+          createdBefore,
         });
       });
 

locale/gitlab.pot

@@ -10195,10 +10195,10 @@ msgid_plural "CycleAnalytics|Showing %{subjectFilterText} and %{selectedLabelsCo
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "CycleAnalytics|Showing data for group '%{groupName}' and %{selectedProjectCount} projects from %{startDate} to %{endDate}"
+msgid "CycleAnalytics|Showing data for group '%{groupName}' and %{selectedProjectCount} projects from %{createdAfter} to %{createdBefore}"
 msgstr ""
 
-msgid "CycleAnalytics|Showing data for group '%{groupName}' from %{startDate} to %{endDate}"
+msgid "CycleAnalytics|Showing data for group '%{groupName}' from %{createdAfter} to %{createdBefore}"
 msgstr ""
 
 msgid "CycleAnalytics|Stages"
@@ -31262,6 +31262,9 @@ msgstr ""
 msgid "Showing all issues"
 msgstr ""
 
+msgid "Showing data for group '%{group_name}' from Nov 1, 2019 to Dec 31, 2019"
+msgstr ""
+
 msgid "Showing data for workflow items created in this date range. Date range cannot exceed %{maxDateRange} days."
 msgstr ""