Check `cycleAnalyticsForGroups` license for metrics

Makes sure that we skip time summary requests for
projects that do not have the
`cycle_analytics_for_groups license

app/assets/javascripts/cycle_analytics/components/base.vue

@@ -6,7 +6,7 @@ import PathNavigation from '~/cycle_analytics/components/path_navigation.vue';
 import StageTable from '~/cycle_analytics/components/stage_table.vue';
 import ValueStreamMetrics from '~/cycle_analytics/components/value_stream_metrics.vue';
 import { __ } from '~/locale';
-import { METRICS_REQUESTS } from '../constants';
+import { projectMetricsRequests } from '../constants';
 
 const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
 
@@ -49,6 +49,7 @@ export default {
       'permissions',
       'stageCounts',
       'endpoints',
+      'features',
     ]),
     ...mapGetters(['pathNavigationData', 'filterParams']),
     displayStageEvents() {
@@ -92,6 +93,9 @@ export default {
       }
       return 0;
     },
+    metricsRequests() {
+      return projectMetricsRequests(this.features.cycleAnalyticsForGroups);
+    },
   },
   methods: {
     ...mapActions([
@@ -121,46 +125,47 @@ export default {
     pageTitle: __('Value Stream Analytics'),
     recentActivity: __('Recent Project Activity'),
   },
-  METRICS_REQUESTS,
 };
 </script>
 <template>
   <div class="cycle-analytics">
     <h3>{{ $options.i18n.pageTitle }}</h3>
-    <path-navigation
-      v-if="displayPathNavigation"
-      class="js-path-navigation gl-w-full gl-pb-2"
-      :loading="isLoading || isLoadingStage"
-      :stages="pathNavigationData"
-      :selected-stage="selectedStage"
-      @selected="onSelectStage"
-    />
-    <div class="gl-text-right flex-grow align-self-center">
-      <div class="js-ca-dropdown dropdown inline">
-        <!-- eslint-disable-next-line @gitlab/vue-no-data-toggle -->
-        <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
-          <span class="dropdown-label">
-            <gl-sprintf :message="$options.i18n.dropdownText">
-              <template #days>{{ daysInPast }}</template>
-            </gl-sprintf>
-            <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon gl-top-3" />
-          </span>
-        </button>
-        <ul class="dropdown-menu dropdown-menu-right">
-          <li v-for="days in $options.dayRangeOptions" :key="`day-range-${days}`">
-            <a href="#" @click.prevent="handleDateSelect(days)">
+    <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row">
+      <path-navigation
+        v-if="displayPathNavigation"
+        class="js-path-navigation gl-w-full gl-pb-2"
+        :loading="isLoading || isLoadingStage"
+        :stages="pathNavigationData"
+        :selected-stage="selectedStage"
+        @selected="onSelectStage"
+      />
+      <div class="gl-flex-grow gl-align-self-end">
+        <div class="js-ca-dropdown dropdown inline">
+          <!-- eslint-disable-next-line @gitlab/vue-no-data-toggle -->
+          <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
+            <span class="dropdown-label">
               <gl-sprintf :message="$options.i18n.dropdownText">
-                <template #days>{{ days }}</template>
+                <template #days>{{ daysInPast }}</template>
               </gl-sprintf>
-            </a>
-          </li>
-        </ul>
+              <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon gl-top-3" />
+            </span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-right">
+            <li v-for="days in $options.dayRangeOptions" :key="`day-range-${days}`">
+              <a href="#" @click.prevent="handleDateSelect(days)">
+                <gl-sprintf :message="$options.i18n.dropdownText">
+                  <template #days>{{ days }}</template>
+                </gl-sprintf>
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
     <value-stream-metrics
       :request-path="endpoints.fullPath"
       :request-params="filterParams"
-      :requests="$options.METRICS_REQUESTS"
+      :requests="metricsRequests"
     />
     <gl-loading-icon v-if="isLoading" size="lg" />
     <stage-table

app/assets/javascripts/cycle_analytics/constants.js

@@ -40,17 +40,6 @@ export const OVERVIEW_METRICS = {
   RECENT_ACTIVITY: 'RECENT_ACTIVITY',
 };
 
-export const METRICS_REQUESTS = [
-  {
-    request: getValueStreamTimeSummaryMetrics,
-    name: __('time summary'),
-  },
-  {
-    request: getValueStreamSummaryMetrics,
-    name: __('recent activity'),
-  },
-];
-
 export const METRICS_POPOVER_CONTENT = {
   'lead-time': {
     description: s__('ValueStreamAnalytics|Median time from issue created to issue closed.'),
@@ -66,3 +55,13 @@ export const METRICS_POPOVER_CONTENT = {
     description: s__('ValueStreamAnalytics|Average number of deployments to production per day.'),
   },
 };
+
+export const projectMetricsRequests = (cycleAnalyticsForGroups = false) => {
+  const summaryMetrics = [{ request: getValueStreamSummaryMetrics, name: __('recent activity') }];
+  if (cycleAnalyticsForGroups) {
+    return [{ request: getValueStreamTimeSummaryMetrics, name: __('time summary') }].concat(
+      summaryMetrics,
+    );
+  }
+  return summaryMetrics;
+};

app/assets/javascripts/cycle_analytics/index.js

@@ -24,6 +24,9 @@ export default () => {
       requestPath,
       fullPath,
     },
+    features: {
+      cycleAnalyticsForGroups: Boolean(gon?.licensed_features?.cycleAnalyticsForGroups),
+    },
   });
 
   // eslint-disable-next-line no-new

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

@@ -4,11 +4,12 @@ import { decorateData, formatMedianValues, calculateFormattedDayInPast } from '.
 import * as types from './mutation_types';
 
 export default {
-  [types.INITIALIZE_VSA](state, { endpoints }) {
+  [types.INITIALIZE_VSA](state, { endpoints, features }) {
     state.endpoints = endpoints;
     const { now, past } = calculateFormattedDayInPast(DEFAULT_DAYS_TO_DISPLAY);
     state.createdBefore = now;
     state.createdAfter = past;
+    state.features = features;
   },
   [types.SET_LOADING](state, loadingState) {
     state.isLoading = loadingState;

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

@@ -2,6 +2,7 @@ import { DEFAULT_DAYS_TO_DISPLAY } from '../constants';
 
 export default () => ({
   id: null,
+  features: {},
   endpoints: {},
   daysInPast: DEFAULT_DAYS_TO_DISPLAY,
   createdAfter: null,

app/controllers/projects/analytics/cycle_analytics/summary_controller.rb

 # frozen_string_literal: true
+
 class Projects::Analytics::CycleAnalytics::SummaryController < Projects::ApplicationController
   include CycleAnalyticsParams
 

spec/frontend/cycle_analytics/base_spec.js

@@ -79,6 +79,12 @@ const findStageTable = () => wrapper.findComponent(StageTable);
 const findStageEvents = () => findStageTable().props('stageEvents');
 const findEmptyStageTitle = () => wrapper.findComponent(GlEmptyState).props('title');
 
+const hasMetricsRequests = (reqs) => {
+  const foundReqs = findOverviewMetrics().props('requests');
+  expect(foundReqs.length).toEqual(reqs.length);
+  expect(foundReqs.map(({ name }) => name)).toEqual(reqs);
+};
+
 describe('Value stream analytics component', () => {
   beforeEach(() => {
     wrapper = createComponent({ initialState: { selectedStage, selectedStageEvents } });
@@ -101,6 +107,10 @@ describe('Value stream analytics component', () => {
     expect(findOverviewMetrics().exists()).toBe(true);
   });
 
+  it('passes requests prop to the metrics component', () => {
+    hasMetricsRequests(['recent activity']);
+  });
+
   it('renders the stage table', () => {
     expect(findStageTable().exists()).toBe(true);
   });
@@ -117,6 +127,16 @@ describe('Value stream analytics component', () => {
     expect(findLoadingIcon().exists()).toBe(false);
   });
 
+  describe('with `cycleAnalyticsForGroups=true` license', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ initialState: { features: { cycleAnalyticsForGroups: true } } });
+    });
+
+    it('passes requests prop to the metrics component', () => {
+      hasMetricsRequests(['time summary', 'recent activity']);
+    });
+  });
+
   describe('isLoading = true', () => {
     beforeEach(() => {
       wrapper = createComponent({