Merge branch 'nfriend-restructure-dora-charts' into 'master'

Restructure DORA chart components

See merge request gitlab-org/gitlab!60645

app/assets/javascripts/projects/pipelines/charts/components/app.vue

@@ -9,9 +9,8 @@ export default {
     GlTab,
     PipelineCharts,
     DeploymentFrequencyCharts: () =>
-      import('ee_component/projects/pipelines/charts/components/deployment_frequency_charts.vue'),
-    LeadTimeCharts: () =>
-      import('ee_component/projects/pipelines/charts/components/lead_time_charts.vue'),
+      import('ee_component/dora/components/deployment_frequency_charts.vue'),
+    LeadTimeCharts: () => import('ee_component/dora/components/lead_time_charts.vue'),
   },
   inject: {
     shouldRenderDoraCharts: {

app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue

@@ -4,6 +4,7 @@ import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { getDateInPast } from '~/lib/utils/datetime_utility';
 import { __, s__, sprintf } from '~/locale';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import {
   DEFAULT,
   CHART_CONTAINER_HEIGHT,
@@ -21,7 +22,6 @@ import {
 } from '../constants';
 import getPipelineCountByStatus from '../graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '../graphql/queries/get_project_pipeline_statistics.query.graphql';
-import CiCdAnalyticsCharts from './ci_cd_analytics_charts.vue';
 import StatisticsList from './statistics_list.vue';
 
 const defaultAnalyticsValues = {

app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue → app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue

 <script>
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
-import { CHART_CONTAINER_HEIGHT } from '../constants';
+import { CHART_CONTAINER_HEIGHT } from './constants';
 
 export default {
   name: 'CiCdAnalyticsAreaChart',

app/assets/javascripts/vue_shared/components/ci_cd_analytics/constants.js

+export const CHART_CONTAINER_HEIGHT = 300;

ee/app/assets/javascripts/projects/pipelines/charts/components/deployment_frequency_charts.vue → ee/app/assets/javascripts/dora/components/deployment_frequency_charts.vue

@@ -3,7 +3,7 @@ import * as Sentry from '@sentry/browser';
 import * as DoraApi from 'ee/api/dora_api';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
-import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import DoraChartHeader from './dora_chart_header.vue';
 import {
   allChartDefinitions,

ee/app/assets/javascripts/projects/pipelines/charts/components/lead_time_charts.vue → ee/app/assets/javascripts/dora/components/lead_time_charts.vue

@@ -3,7 +3,7 @@ import * as DoraApi from 'ee/api/dora_api';
 import createFlash from '~/flash';
 import { humanizeTimeInterval } from '~/lib/utils/datetime_utility';
 import { s__ } from '~/locale';
-import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import DoraChartHeader from './dora_chart_header.vue';
 import {
   allChartDefinitions,

ee/spec/frontend/projects/pipelines/charts/components/__snapshots__/util_spec.js.snap → ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ee/projects/pipelines/charts/components/util.js lead time data returns the correct lead time chart data after all processing of the API response 1`] = `
+exports[`ee/dora/components/util.js lead time data returns the correct lead time chart data after all processing of the API response 1`] = `
 Array [
   Object {
     "areaStyle": Object {

ee/spec/frontend/projects/pipelines/charts/components/deployment_frequency_charts_spec.js → ee/spec/frontend/dora/components/deployment_frequency_charts_spec.js

@@ -5,7 +5,7 @@ import { useFixturesFakeDate } from 'helpers/fake_date';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
-import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 
 jest.mock('~/flash');
 
@@ -29,13 +29,9 @@ describe('deployment_frequency_charts.vue', () => {
   // that any calls to `new Date()` during module initialization use the fake date
   beforeAll(async () => {
     DeploymentFrequencyCharts = (
-      await import(
-        'ee_component/projects/pipelines/charts/components/deployment_frequency_charts.vue'
-      )
-    ).default;
-    DoraChartHeader = (
-      await import('ee/projects/pipelines/charts/components/dora_chart_header.vue')
+      await import('ee_component/dora/components/deployment_frequency_charts.vue')
     ).default;
+    DoraChartHeader = (await import('ee/dora/components/dora_chart_header.vue')).default;
   });
 
   let wrapper;

ee/spec/frontend/projects/pipelines/charts/components/dora_charts_header_spec.js → ee/spec/frontend/dora/components/dora_charts_header_spec.js

-import DoraChartHeader from 'ee/projects/pipelines/charts/components/dora_chart_header.vue';
-import { chartDescriptionText } from 'ee/projects/pipelines/charts/components/static_data/lead_time';
-import { environmentTierDocumentationHref } from 'ee/projects/pipelines/charts/components/static_data/shared';
+import DoraChartHeader from 'ee/dora/components/dora_chart_header.vue';
+import { chartDescriptionText } from 'ee/dora/components/static_data/lead_time';
+import { environmentTierDocumentationHref } from 'ee/dora/components/static_data/shared';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('dora_chart_header.vue', () => {

ee/spec/frontend/projects/pipelines/charts/components/lead_time_charts_spec.js → ee/spec/frontend/dora/components/lead_time_charts_spec.js

@@ -5,7 +5,7 @@ import { useFixturesFakeDate } from 'helpers/fake_date';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
-import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 
 jest.mock('~/flash');
 
@@ -28,12 +28,8 @@ describe('lead_time_charts.vue', () => {
   // Import these components _after_ the date has been set using `useFakeDate`, so
   // that any calls to `new Date()` during module initialization use the fake date
   beforeAll(async () => {
-    LeadTimeCharts = (
-      await import('ee_component/projects/pipelines/charts/components/lead_time_charts.vue')
-    ).default;
-    DoraChartHeader = (
-      await import('ee/projects/pipelines/charts/components/dora_chart_header.vue')
-    ).default;
+    LeadTimeCharts = (await import('ee_component/dora/components/lead_time_charts.vue')).default;
+    DoraChartHeader = (await import('ee/dora/components/dora_chart_header.vue')).default;
   });
 
   let wrapper;

ee/spec/frontend/projects/pipelines/charts/components/util_spec.js → ee/spec/frontend/dora/components/util_spec.js

-import {
-  apiDataToChartSeries,
-  buildNullSeriesForLeadTimeChart,
-} from 'ee/projects/pipelines/charts/components/util';
+import { apiDataToChartSeries, buildNullSeriesForLeadTimeChart } from 'ee/dora/components/util';
 
 const lastWeekData = getJSONFixture(
   'api/dora/metrics/daily_lead_time_for_changes_for_last_week.json',
 );
 
-describe('ee/projects/pipelines/charts/components/util.js', () => {
+describe('ee/dora/components/util.js', () => {
   describe('apiDataToChartSeries', () => {
     it('transforms the data from the API into data the chart component can use', () => {
       const apiData = [

spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js

 import { mount } from '@vue/test-utils';
-import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue';
 import { transformedAreaChartData } from '../mock_data';
 
 describe('CiCdAnalyticsAreaChart', () => {

spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js

 import { GlSegmentedControl } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
-import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
+import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import { transformedAreaChartData, chartOptions } from '../mock_data';
 
 const DEFAULT_PROPS = {
@@ -26,7 +26,7 @@ const DEFAULT_PROPS = {
   ],
 };
 
-describe('~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue', () => {
+describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', () => {
   let wrapper;
 
   const createWrapper = (props = {}) =>

spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js

@@ -2,11 +2,11 @@ import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
 import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
 import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
 import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql';
+import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
 import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
 
 const projectPath = 'gitlab-org/gitlab';