Connect new endpoint for cycle analytics13076-new-cycle-analytics-data-endpoints

Added checks for the :customisable_cycle_analytics_form
feature and updates the `decorateData` to handle
the new api response

3 files changed, 41 insertions, 29 deletions

diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 7f89d92b72f..397fc9de6af 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -15,12 +15,6 @@ import { __ } from '~/locale';
 
 Vue.use(Translate);
 
-const {
-  gon: { features = null },
-} = window;
-// const withCustomisableCycleAnalytics = features && features.customisableCycleAnalyticsForm;
-const withCustomisableCycleAnalytics = false;
-
 export default () => {
   const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
   const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
@@ -44,6 +38,10 @@ export default () => {
         requestPath: cycleAnalyticsEl.dataset.requestPath,
       });
 
+      const {
+        gon: { features = null },
+      } = window;
+
       return {
         store: CycleAnalyticsStore,
         state: CycleAnalyticsStore.state,
@@ -54,6 +52,7 @@ export default () => {
         startDate: 30,
         isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
         service: cycleAnalyticsService,
+        withCustomisableCycleAnalytics: features && features.customisableCycleAnalyticsForm,
       };
     },
     computed: {
@@ -90,12 +89,11 @@ export default () => {
             $label.text($target.text().trim());
             this.fetchCycleAnalyticsData({
               startDate: this.startDate,
-              // withCustomisableCycleAnalytics,
             });
           });
       },
       fetchCycleAnalyticsData(options) {
-        console.log('fetchCycleAnalyticsData::options', options);
+        const { withCustomisableCycleAnalytics } = this;
         const fetchOptions = options || {
           startDate: this.startDate,
           withCustomisableCycleAnalytics,
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
index 9eca307e52e..84dc927ec9b 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
@@ -9,13 +9,15 @@ export default class CycleAnalyticsService {
 
   fetchCycleAnalyticsData(options = { startDate: 30 }) {
     const { startDate, projectIds } = options;
+    const additionalParams =
+      options && options.withCustomisableCycleAnalytics ? { new_api: true } : {};
 
     return this.axios
       .get('', {
         params: {
           'cycle_analytics[start_date]': startDate,
           'cycle_analytics[project_ids]': projectIds,
-          // new_api: options && options.withCustomisableCycleAnalytics,
+          ...additionalParams,
         },
       })
       .then(x => x.data);
@@ -23,13 +25,15 @@ export default class CycleAnalyticsService {
 
   fetchStageData(options) {
     const { stage, startDate, projectIds } = options;
+    const additionalParams =
+      options && options.withCustomisableCycleAnalytics ? { new_api: true } : {};
 
     return this.axios
       .get(`events/${stage.name}.json`, {
         params: {
           'cycle_analytics[start_date]': startDate,
           'cycle_analytics[project_ids]': projectIds,
-          // new_api: options && options.withCustomisableCycleAnalytics,
+          ...additionalParams,
         },
       })
       .then(x => x.data);
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
index 5b9e71901a3..c66e4660071 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
@@ -28,11 +28,6 @@ const EMPTY_STAGE_TEXTS = {
   ),
 };
 
-const extractCustomStages = data => {
-  console.log('cycleAnalyticsStore::extractCustomStages', data);
-  return data;
-};
-
 export default {
   state: {
     summary: '',
@@ -42,29 +37,44 @@ export default {
     stages: [],
   },
   setCycleAnalyticsData(data, withCustomCycleAnalytics = false) {
-    const cycleAnalyticsData = withCustomCycleAnalytics ? extractCustomStages(data) : data;
-    console.log('setCycleAnalyticsData::withCustomCycleAnalytics', withCustomCycleAnalytics);
-    console.log('setCycleAnalyticsData::cycleAnalyticsData', cycleAnalyticsData);
-    this.state = Object.assign(this.state, this.decorateData(cycleAnalyticsData));
+    const decorated = this.decorateData(data, withCustomCycleAnalytics);
+    this.state = Object.assign(this.state, decorated);
   },
-  decorateData(data) {
+  decorateData(data, withCustomCycleAnalytics = false) {
     const newData = {};
 
-    newData.stages = data.stats || [];
+    newData.stages = (withCustomCycleAnalytics ? data.stages : data.stats) || [];
     newData.summary = data.summary || [];
 
     newData.summary.forEach(item => {
       item.value = item.value || '-';
     });
 
-    newData.stages.forEach(item => {
-      const stageSlug = dasherize(item.name.toLowerCase());
-      item.active = false;
-      item.isUserAllowed = data.permissions[stageSlug];
-      item.emptyStageText = EMPTY_STAGE_TEXTS[stageSlug];
-      item.component = `stage-${stageSlug}-component`;
-      item.slug = stageSlug;
-    });
+    if (withCustomCycleAnalytics) {
+      const { stages } = newData;
+      const { permissions } = data;
+      newData.stages = stages.map(item => {
+        const slug = dasherize(item.name.toLowerCase()); // TODO: is this just the id?
+        return {
+          ...item,
+          slug,
+          component: `stage-${slug}-component`,
+          active: false,
+          emptyStageText: EMPTY_STAGE_TEXTS[slug],
+          isUserAllowed: permissions[slug],
+          title: item.name, // can we get the proper title from the BE so we get the correct spacing / capitalization?
+        };
+      });
+    } else {
+      newData.stages.forEach(item => {
+        const stageSlug = dasherize(item.name.toLowerCase());
+        item.active = false;
+        item.isUserAllowed = data.permissions[stageSlug];
+        item.emptyStageText = EMPTY_STAGE_TEXTS[stageSlug];
+        item.component = `stage-${stageSlug}-component`;
+        item.slug = stageSlug;
+      });
+    }
     newData.analytics = data;
     return newData;
   },