VSA fix haml helper paths passed to the frontend

app/assets/javascripts/cycle_analytics/store/actions.js

@@ -9,7 +9,6 @@ import {
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import { DEFAULT_VALUE_STREAM, I18N_VSA_ERROR_STAGE_MEDIAN } from '../constants';
-import { appendExtension } from '../utils';
 import * as types from './mutation_types';
 
 export const setSelectedValueStream = ({ commit, dispatch }, valueStream) => {
@@ -184,8 +183,8 @@ export const initializeVsa = ({ commit, dispatch }, initialData = {}) => {
     endpoints: { fullPath, groupPath, milestonesPath = '', labelsPath = '' },
   } = initialData;
   dispatch('filters/setEndpoints', {
-    labelsEndpoint: appendExtension(labelsPath),
-    milestonesEndpoint: appendExtension(milestonesPath),
+    labelsEndpoint: labelsPath,
+    milestonesEndpoint: milestonesPath,
     groupEndpoint: groupPath,
     projectEndpoint: fullPath,
   });

app/assets/javascripts/cycle_analytics/utils.js

@@ -149,5 +149,3 @@ export const prepareTimeMetricsData = (data = [], popoverContent = {}) =>
       description: popoverContent[key]?.description || '',
     };
   });
-
-export const appendExtension = (path) => (path.indexOf('.') > -1 ? path : `${path}.json`);

app/helpers/analytics/cycle_analytics_helper.rb

@@ -7,5 +7,23 @@ module Analytics
         Analytics::CycleAnalytics::StagePresenter.new(stage_params)
       end
     end
+
+    def cycle_analytics_initial_data(project, group = nil)
+      base_data = { project_id: project.id, group_path: project.group&.path, request_path: project_cycle_analytics_path(project), full_path: project.full_path }
+      svgs = { empty_state_svg_path: image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), no_data_svg_path: image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), no_access_svg_path: image_path("illustrations/analytics/no-access.svg") }
+      api_paths = group.present? ? cycle_analytics_group_api_paths(group) : cycle_analytics_project_api_paths(project)
+
+      base_data.merge(svgs, api_paths)
+    end
+
+    private
+
+    def cycle_analytics_group_api_paths(group)
+      { milestones_path: group_milestones_path(group, format: :json), labels_path: group_labels_path(group, format: :json), group_path: group_path(group), group_id: group&.id }
+    end
+
+    def cycle_analytics_project_api_paths(project)
+      { milestones_path: project_milestones_path(project, format: :json), labels_path: project_labels_path(project, format: :json), group_path: project.parent&.path, group_id: project.parent&.id }
+    end
   end
 end

app/views/projects/cycle_analytics/show.html.haml

 - page_title _("Value Stream Analytics")
 - add_page_specific_style 'page_bundles/cycle_analytics'
-- svgs = { empty_state_svg_path: image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), no_data_svg_path: image_path("illustrations/analytics/cycle-analytics-empty-chart.svg"), no_access_svg_path: image_path("illustrations/analytics/no-access.svg") }
-- api_paths = @group.present? ? { milestones_path: group_milestones_path(@group), labels_path: group_labels_path(@group), group_path: group_path(@group), group_id: @group&.id } : { milestones_path: project_milestones_path(@project), labels_path: project_labels_path(@project), group_path: @project.parent&.path, group_id: @project.parent&.id }
-- initial_data = { project_id: @project.id, group_path: @project.group&.path, request_path: project_cycle_analytics_path(@project), full_path: @project.full_path }.merge!(svgs, api_paths)
 
-#js-cycle-analytics{ data: initial_data }
+#js-cycle-analytics{ data: cycle_analytics_initial_data(@project, @group) }

ee/app/assets/javascripts/analytics/cycle_analytics/store/actions.js

 import Api from 'ee/api';
-import { removeFlash, appendExtension } from '~/cycle_analytics/utils';
+import { removeFlash } from '~/cycle_analytics/utils';
 import createFlash from '~/flash';
 import httpStatus from '~/lib/utils/http_status';
 import { __ } from '~/locale';
@@ -13,8 +13,8 @@ export const setPaths = ({ dispatch }, options) => {
   const { groupPath, milestonesPath = '', labelsPath = '' } = options;
 
   return dispatch('filters/setEndpoints', {
-    labelsEndpoint: appendExtension(labelsPath),
-    milestonesEndpoint: appendExtension(milestonesPath),
+    labelsEndpoint: labelsPath,
+    milestonesEndpoint: milestonesPath,
     groupEndpoint: groupPath,
   });
 };

ee/app/helpers/ee/groups/analytics/cycle_analytics_helper.rb

@@ -22,6 +22,6 @@ module EE::Groups::Analytics::CycleAnalyticsHelper
   end
 
   def cycle_analytics_api_paths(group)
-    { milestones_path: group_milestones_path(group), labels_path: group_labels_path(group) }
+    { milestones_path: group_milestones_path(group, format: :json), labels_path: group_labels_path(group, format: :json) }
   end
 end

ee/spec/frontend/analytics/cycle_analytics/store/actions_spec.js

@@ -11,8 +11,8 @@ import httpStatusCodes from '~/lib/utils/http_status';
 import { allowedStages as stages, valueStreams, endpoints, groupLabels } from '../mock_data';
 
 const group = { fullPath: 'fake_group_full_path' };
-const milestonesPath = 'fake_milestones_path';
-const labelsPath = 'fake_labels_path';
+const milestonesPath = 'fake_milestones_path.json';
+const labelsPath = 'fake_labels_path.json';
 
 const flashErrorMessage = 'There was an error while fetching value stream analytics data.';
 
@@ -79,8 +79,8 @@ describe('Value Stream Analytics actions', () => {
             type: 'filters/setEndpoints',
             payload: {
               groupEndpoint: 'fake_group_full_path',
-              labelsEndpoint: 'fake_labels_path.json',
-              milestonesEndpoint: 'fake_milestones_path.json',
+              labelsEndpoint: labelsPath,
+              milestonesEndpoint: milestonesPath,
             },
           },
         ],

spec/frontend/cycle_analytics/store/actions_spec.js

@@ -14,8 +14,8 @@ import {
 } from '../mock_data';
 
 const { id: groupId, path: groupPath } = currentGroup;
-const mockMilestonesPath = 'mock-milestones';
-const mockLabelsPath = 'mock-labels';
+const mockMilestonesPath = 'mock-milestones.json';
+const mockLabelsPath = 'mock-labels.json';
 const mockRequestPath = 'some/cool/path';
 const mockFullPath = '/namespace/-/analytics/value_stream_analytics/value_streams';
 const mockEndpoints = {
@@ -83,8 +83,8 @@ describe('Project Value Stream Analytics actions', () => {
     const payload = { endpoints: mockEndpoints };
     const mockFilterEndpoints = {
       groupEndpoint: 'foo',
-      labelsEndpoint: 'mock-labels.json',
-      milestonesEndpoint: 'mock-milestones.json',
+      labelsEndpoint: mockLabelsPath,
+      milestonesEndpoint: mockMilestonesPath,
       projectEndpoint: '/namespace/-/analytics/value_stream_analytics/value_streams',
     };
 

spec/helpers/analytics/cycle_analytics_helper_spec.rb

+# frozen_string_literal: true
+require "spec_helper"
+
+RSpec.describe Analytics::CycleAnalyticsHelper do
+  describe '#cycle_analytics_initial_data' do
+    let(:user) { create(:user, name: 'fake user', username: 'fake_user') }
+    let(:image_path_keys) { [:empty_state_svg_path, :no_data_svg_path, :no_access_svg_path] }
+    let(:api_path_keys) { [:milestones_path, :labels_path] }
+    let(:additional_data_keys) { [:full_path, :group_id, :group_path, :project_id, :request_path] }
+    let(:group) { create(:group) }
+
+    subject(:cycle_analytics_data) { helper.cycle_analytics_initial_data(project, group) }
+
+    before do
+      project.add_maintainer(user)
+    end
+
+    context 'when a group is present' do
+      let(:project) { create(:project, group: group) }
+
+      it "sets the correct data keys" do
+        expect(cycle_analytics_data.keys)
+          .to match_array(api_path_keys + image_path_keys + additional_data_keys)
+      end
+
+      it "sets group paths" do
+        expect(cycle_analytics_data)
+          .to include({
+            full_path: project.full_path,
+            group_path: "/#{project.namespace.name}",
+            group_id: project.namespace.id,
+            request_path: "/#{project.full_path}/-/value_stream_analytics",
+            milestones_path: "/groups/#{group.name}/-/milestones.json",
+            labels_path: "/groups/#{group.name}/-/labels.json"
+          })
+      end
+    end
+
+    context 'when a group is not present' do
+      let(:group) { nil }
+      let(:project) { create(:project) }
+
+      it "sets the correct data keys" do
+        expect(cycle_analytics_data.keys)
+          .to match_array(image_path_keys + api_path_keys + additional_data_keys)
+      end
+
+      it "sets project name space paths" do
+        expect(cycle_analytics_data)
+          .to include({
+            full_path: project.full_path,
+            group_path: project.namespace.path,
+            group_id: project.namespace.id,
+            request_path: "/#{project.full_path}/-/value_stream_analytics",
+            milestones_path: "/#{project.full_path}/-/milestones.json",
+            labels_path: "/#{project.full_path}/-/labels.json"
+          })
+      end
+    end
+  end
+end