Update lead time graphs to support group data

This commit updates the lead time DORA 4 charts to support fetching
group-level data in addition to project-level data.

ee/app/assets/javascripts/dora/components/lead_time_charts.vue

@@ -28,6 +28,10 @@ export default {
       type: String,
       default: '',
     },
+    groupPath: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -51,11 +55,28 @@ export default {
   async mounted() {
     const results = await Promise.allSettled(
       allChartDefinitions.map(async ({ id, requestParams, startDate, endDate }) => {
-        const { data: apiData } = await DoraApi.getProjectDoraMetrics(
-          this.projectPath,
-          DoraApi.LEAD_TIME_FOR_CHANGES,
-          requestParams,
-        );
+        let apiData;
+        if (this.projectPath && this.groupPath) {
+          throw new Error('Both projectPath and groupPath were provided');
+        } else if (this.projectPath) {
+          apiData = (
+            await DoraApi.getProjectDoraMetrics(
+              this.projectPath,
+              DoraApi.LEAD_TIME_FOR_CHANGES,
+              requestParams,
+            )
+          ).data;
+        } else if (this.groupPath) {
+          apiData = (
+            await DoraApi.getGroupDoraMetrics(
+              this.groupPath,
+              DoraApi.LEAD_TIME_FOR_CHANGES,
+              requestParams,
+            )
+          ).data;
+        } else {
+          throw new Error('Either projectPath or groupPath must be provided');
+        }
 
         this.chartData[id] = buildNullSeriesForLeadTimeChart(
           apiDataToChartSeries(apiData, startDate, endDate, CHART_TITLE, null),

ee/spec/frontend/dora/components/lead_time_charts_spec.js

@@ -34,14 +34,15 @@ describe('lead_time_charts.vue', () => {
 
   let wrapper;
   let mock;
+  const defaultMountOptions = {
+    provide: {
+      projectPath: 'test/project',
+    },
+    stubs: { GlSprintf },
+  };
 
-  const createComponent = (mountFn = shallowMount) => {
-    wrapper = mountFn(LeadTimeCharts, {
-      provide: {
-        projectPath: 'test/project',
-      },
-      stubs: { GlSprintf },
-    });
+  const createComponent = ({ mountFn = shallowMount, mountOptions = defaultMountOptions } = {}) => {
+    wrapper = mountFn(LeadTimeCharts, mountOptions);
   };
 
   // Initializes the mock endpoint to return a specific set of lead time data for a given "from" date.
@@ -104,7 +105,7 @@ describe('lead_time_charts.vue', () => {
     describe('methods', () => {
       describe('formatTooltipText', () => {
         it('displays a humanized version of the time interval in the tooltip', async () => {
-          createComponent(mount);
+          createComponent({ mountFn: mount });
 
           await axios.waitForAll();
 
@@ -143,4 +144,94 @@ describe('lead_time_charts.vue', () => {
       ]);
     });
   });
+
+  describe('group/project behavior', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      mock.onGet(/projects\/test%2Fproject\/dora\/metrics/).reply(httpStatus.OK, lastWeekData);
+      mock.onGet(/groups\/test%2Fgroup\/dora\/metrics/).reply(httpStatus.OK, lastWeekData);
+    });
+
+    describe('when projectPath is provided', () => {
+      beforeEach(async () => {
+        createComponent({
+          mountOptions: {
+            provide: {
+              projectPath: 'test/project',
+            },
+          },
+        });
+
+        await axios.waitForAll();
+      });
+
+      it('makes a call to the project API endpoint', () => {
+        expect(mock.history.get.length).toBe(3);
+        expect(mock.history.get[0].url).toMatch('/projects/test%2Fproject/dora/metrics');
+      });
+
+      it('does not throw an error', () => {
+        expect(createFlash).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when groupPath is provided', () => {
+      beforeEach(async () => {
+        createComponent({
+          mountOptions: {
+            provide: {
+              groupPath: 'test/group',
+            },
+          },
+        });
+
+        await axios.waitForAll();
+      });
+
+      it('makes a call to the group API endpoint', () => {
+        expect(mock.history.get.length).toBe(3);
+        expect(mock.history.get[0].url).toMatch('/groups/test%2Fgroup/dora/metrics');
+      });
+
+      it('does not throw an error', () => {
+        expect(createFlash).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when both projectPath and groupPath are provided', () => {
+      beforeEach(async () => {
+        createComponent({
+          mountOptions: {
+            provide: {
+              projectPath: 'test/project',
+              groupPath: 'test/group',
+            },
+          },
+        });
+
+        await axios.waitForAll();
+      });
+
+      it('throws an error (which shows a flash message)', () => {
+        expect(createFlash).toHaveBeenCalled();
+      });
+    });
+
+    describe('when neither projectPath nor groupPath are provided', () => {
+      beforeEach(async () => {
+        createComponent({
+          mountOptions: {
+            provide: {},
+          },
+        });
+
+        await axios.waitForAll();
+      });
+
+      it('throws an error (which shows a flash message)', () => {
+        expect(createFlash).toHaveBeenCalled();
+      });
+    });
+  });
 });