Merge branch '326701-move-ee-vsa-filter-components-to-ce' into 'master'

Moves the VSA filter EE to CE[RUN-AS-IF-FOSS]

See merge request gitlab-org/gitlab!65433

ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue → app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

@@ -9,11 +9,11 @@ import {
   GlSearchBoxByType,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
+import { filterBySearchTerm } from '~/analytics/shared/utils';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { n__, s__, __ } from '~/locale';
-import { DATA_REFETCH_DELAY } from '../constants';
 import getProjects from '../graphql/projects.query.graphql';
-import { filterBySearchTerm } from '../utils';
 
 export default {
   name: 'ProjectsDropdownFilter',
@@ -106,7 +106,7 @@ export default {
   methods: {
     search: debounce(function debouncedSearch() {
       this.fetchData();
-    }, DATA_REFETCH_DELAY),
+    }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS),
     getSelectedProjects(selectedProject, isMarking) {
       return isMarking
         ? this.selectedProjects.concat([selectedProject])

app/assets/javascripts/analytics/shared/constants.js

+export const DATE_RANGE_LIMIT = 180;
+export const OFFSET_DATE_BY_ONE = 1;
+export const PROJECTS_PER_PAGE = 50;

app/assets/javascripts/analytics/shared/utils.js

+export const filterBySearchTerm = (data = [], searchTerm = '', filterByKey = 'name') => {
+  if (!searchTerm?.length) return data;
+  return data.filter((item) => item[filterByKey].toLowerCase().includes(searchTerm.toLowerCase()));
+};

ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue → app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue

 <script>
-import DateRange from '../../shared/components/daterange.vue';
-import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
-import { DATE_RANGE_LIMIT } from '../../shared/constants';
-import { PROJECTS_PER_PAGE } from '../constants';
+import DateRange from '~/analytics/shared/components/daterange.vue';
+import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
+import { DATE_RANGE_LIMIT, PROJECTS_PER_PAGE } from '~/analytics/shared/constants';
 import FilterBar from './filter_bar.vue';
 
 export default {

app/assets/javascripts/cycle_analytics/constants.js

+export const DEFAULT_DAYS_IN_PAST = 30;
 export const DEFAULT_DAYS_TO_DISPLAY = 30;
 export const OVERVIEW_STAGE_ID = 'overview';
 

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

@@ -92,6 +92,8 @@ const refetchData = (dispatch, commit) => {
     .finally(() => commit(types.SET_LOADING, false));
 };
 
+export const setFilters = ({ dispatch, commit }) => refetchData(dispatch, commit);
+
 export const setDateRange = ({ dispatch, commit }, { startDate = DEFAULT_DAYS_TO_DISPLAY }) => {
   commit(types.SET_DATE_RANGE, { startDate });
   return refetchData(dispatch, commit);

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

@@ -7,6 +7,7 @@
 
 import Vue from 'vue';
 import Vuex from 'vuex';
+import filters from '~/vue_shared/components/filtered_search_bar/store/modules/filters';
 import * as actions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
@@ -20,4 +21,5 @@ export default () =>
     getters,
     mutations,
     state,
+    modules: { filters },
   });

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

@@ -2,6 +2,7 @@
 import { GlEmptyState } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import PathNavigation from '~/cycle_analytics/components/path_navigation.vue';
+import ValueStreamFilters from '~/cycle_analytics/components/value_stream_filters.vue';
 import { OVERVIEW_STAGE_ID } from '~/cycle_analytics/constants';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 import { toYmd } from '../../shared/utils';
@@ -9,7 +10,6 @@ import DurationChart from './duration_chart.vue';
 import Metrics from './metrics.vue';
 import StageTable from './stage_table.vue';
 import TypeOfWorkCharts from './type_of_work_charts.vue';
-import ValueStreamFilters from './value_stream_filters.vue';
 import ValueStreamSelect from './value_stream_select.vue';
 
 export default {

ee/app/assets/javascripts/analytics/cycle_analytics/constants.js

 import { OVERVIEW_STAGE_ID } from '~/cycle_analytics/constants';
 import { __, s__ } from '~/locale';
 
-export const PROJECTS_PER_PAGE = 50;
-
-export const DEFAULT_DAYS_IN_PAST = 30;
-
 export const EVENTS_LIST_ITEM_LIMIT = 50;
 
 export const TASKS_BY_TYPE_SUBJECT_ISSUE = 'Issue';

ee/app/assets/javascripts/analytics/merge_request_analytics/components/app.vue

 <script>
 import dateFormat from 'dateformat';
+import DateRange from '~/analytics/shared/components/daterange.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
-import DateRange from '../../shared/components/daterange.vue';
 import { dateFormats } from '../../shared/constants';
 import { DEFAULT_NUMBER_OF_DAYS } from '../constants';
 import FilterBar from './filter_bar.vue';

ee/app/assets/javascripts/analytics/productivity_analytics/components/filter_dropdowns.vue

 <script>
 import { mapState, mapActions } from 'vuex';
+import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import GroupsDropdownFilter from '../../shared/components/groups_dropdown_filter.vue';
-import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
 import { accessLevelReporter, projectsPerPage } from '../constants';
 
 export default {

ee/app/assets/javascripts/analytics/productivity_analytics/index.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { mapState, mapActions } from 'vuex';
+import DateRange from '~/analytics/shared/components/daterange.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import DateRange from '../shared/components/daterange.vue';
 import { buildGroupFromDataset, buildProjectFromDataset } from '../shared/utils';
 import ProductivityAnalyticsApp from './components/app.vue';
 import FilterDropdowns from './components/filter_dropdowns.vue';

ee/app/assets/javascripts/analytics/shared/components/groups_dropdown_filter.vue

@@ -10,10 +10,10 @@ import {
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
+import { filterBySearchTerm } from '~/analytics/shared/utils';
 import Api from '~/api';
 import { s__, __ } from '~/locale';
 import { DATA_REFETCH_DELAY } from '../constants';
-import { filterBySearchTerm } from '../utils';
 
 export default {
   name: 'GroupsDropdownFilter',

ee/app/assets/javascripts/analytics/shared/constants.js

@@ -19,10 +19,6 @@ export const scatterChartLineProps = {
   },
 };
 
-export const DATE_RANGE_LIMIT = 180;
-
-export const OFFSET_DATE_BY_ONE = 1;
-
 export const NO_DRAG_CLASS = 'no-drag';
 
 export const DATA_REFETCH_DELAY = DEFAULT_DEBOUNCE_AND_THROTTLE_MS;

ee/app/assets/javascripts/analytics/shared/utils.js

@@ -135,8 +135,3 @@ export const buildCycleAnalyticsInitialData = ({
     : [],
   stage: JSON.parse(stage),
 });
-
-export const filterBySearchTerm = (data = [], searchTerm = '', filterByKey = 'name') => {
-  if (!searchTerm?.length) return data;
-  return data.filter((item) => item[filterByKey].toLowerCase().includes(searchTerm.toLowerCase()));
-};

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -8,25 +8,38 @@ import DurationChart from 'ee/analytics/cycle_analytics/components/duration_char
 import Metrics from 'ee/analytics/cycle_analytics/components/metrics.vue';
 import StageTable from 'ee/analytics/cycle_analytics/components/stage_table.vue';
 import TypeOfWorkCharts from 'ee/analytics/cycle_analytics/components/type_of_work_charts.vue';
-import ValueStreamFilters from 'ee/analytics/cycle_analytics/components/value_stream_filters.vue';
 import ValueStreamSelect from 'ee/analytics/cycle_analytics/components/value_stream_select.vue';
 import createStore from 'ee/analytics/cycle_analytics/store';
 import { toYmd } from 'ee/analytics/shared/utils';
 import waitForPromises from 'helpers/wait_for_promises';
+import {
+  currentGroup,
+  createdBefore,
+  createdAfter,
+  selectedProjects,
+} from 'jest/cycle_analytics/mock_data';
 import PathNavigation from '~/cycle_analytics/components/path_navigation.vue';
+import ValueStreamFilters from '~/cycle_analytics/components/value_stream_filters.vue';
 import { OVERVIEW_STAGE_ID } from '~/cycle_analytics/constants';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import * as commonUtils from '~/lib/utils/common_utils';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 import * as urlUtils from '~/lib/utils/url_utility';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
-import * as mockData from '../mock_data';
+import {
+  initialPaginationQuery,
+  valueStreams,
+  endpoints,
+  customizableStagesAndEvents,
+  issueStage,
+  issueEvents,
+  groupLabels,
+  tasksByTypeData,
+} from '../mock_data';
 
 const noDataSvgPath = 'path/to/no/data';
 const noAccessSvgPath = 'path/to/no/access';
-const currentGroup = convertObjectPropsToCamelCase(mockData.group);
 const emptyStateSvgPath = 'path/to/empty/state';
 const stage = null;
 
@@ -49,12 +62,12 @@ const defaultFeatureFlags = {
   hasDurationChart: true,
 };
 
-const [selectedValueStream] = mockData.valueStreams;
+const [selectedValueStream] = valueStreams;
 
 const initialCycleAnalyticsState = {
   selectedValueStream,
-  createdAfter: mockData.createdAfter,
-  createdBefore: mockData.createdBefore,
+  createdAfter,
+  createdBefore,
   group: currentGroup,
   stage,
 };
@@ -71,23 +84,17 @@ const mocks = {
 };
 
 function mockRequiredRoutes(mockAdapter) {
-  mockAdapter.onGet(mockData.endpoints.stageData).reply(httpStatusCodes.OK, mockData.issueEvents);
+  mockAdapter.onGet(endpoints.stageData).reply(httpStatusCodes.OK, issueEvents);
+  mockAdapter.onGet(endpoints.tasksByTypeTopLabelsData).reply(httpStatusCodes.OK, groupLabels);
+  mockAdapter.onGet(endpoints.tasksByTypeData).reply(httpStatusCodes.OK, { ...tasksByTypeData });
   mockAdapter
-    .onGet(mockData.endpoints.tasksByTypeTopLabelsData)
-    .reply(httpStatusCodes.OK, mockData.groupLabels);
+    .onGet(endpoints.baseStagesEndpoint)
+    .reply(httpStatusCodes.OK, { ...customizableStagesAndEvents });
   mockAdapter
-    .onGet(mockData.endpoints.tasksByTypeData)
-    .reply(httpStatusCodes.OK, { ...mockData.tasksByTypeData });
-  mockAdapter
-    .onGet(mockData.endpoints.baseStagesEndpoint)
-    .reply(httpStatusCodes.OK, { ...mockData.customizableStagesAndEvents });
-  mockAdapter
-    .onGet(mockData.endpoints.durationData)
-    .reply(httpStatusCodes.OK, mockData.customizableStagesAndEvents.stages);
-  mockAdapter.onGet(mockData.endpoints.stageMedian).reply(httpStatusCodes.OK, { value: null });
-  mockAdapter
-    .onGet(mockData.endpoints.valueStreamData)
-    .reply(httpStatusCodes.OK, mockData.valueStreams);
+    .onGet(endpoints.durationData)
+    .reply(httpStatusCodes.OK, customizableStagesAndEvents.stages);
+  mockAdapter.onGet(endpoints.stageMedian).reply(httpStatusCodes.OK, { value: null });
+  mockAdapter.onGet(endpoints.valueStreamData).reply(httpStatusCodes.OK, valueStreams);
 }
 
 async function shouldMergeUrlParams(wrapper, result) {
@@ -140,10 +147,7 @@ describe('EE Value Stream Analytics component', () => {
     });
 
     if (withStageSelected || selectedStage) {
-      await store.dispatch(
-        'receiveGroupStagesSuccess',
-        mockData.customizableStagesAndEvents.stages,
-      );
+      await store.dispatch('receiveGroupStagesSuccess', customizableStagesAndEvents.stages);
       if (selectedStage) {
         await store.dispatch('setSelectedStage', selectedStage);
         await store.dispatch('fetchStageData', selectedStage.slug);
@@ -311,7 +315,7 @@ describe('EE Value Stream Analytics component', () => {
       beforeEach(async () => {
         mock = new MockAdapter(axios);
         mockRequiredRoutes(mock);
-        wrapper = await createComponent({ selectedStage: mockData.issueStage });
+        wrapper = await createComponent({ selectedStage: issueStage });
       });
 
       it('displays the stage table', () => {
@@ -340,7 +344,7 @@ describe('EE Value Stream Analytics component', () => {
       expect(createFlash).not.toHaveBeenCalled();
 
       mock
-        .onGet(mockData.endpoints.baseStagesEndpoint)
+        .onGet(endpoints.baseStagesEndpoint)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
       wrapper = await createComponent();
 
@@ -353,10 +357,10 @@ describe('EE Value Stream Analytics component', () => {
       expect(createFlash).not.toHaveBeenCalled();
 
       mock
-        .onGet(mockData.endpoints.stageData)
+        .onGet(endpoints.stageData)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
 
-      wrapper = await createComponent({ selectedStage: mockData.issueStage });
+      wrapper = await createComponent({ selectedStage: issueStage });
 
       expect(createFlash).toHaveBeenCalledWith({
         message: 'There was an error fetching data for the selected stage',
@@ -367,7 +371,7 @@ describe('EE Value Stream Analytics component', () => {
       expect(createFlash).not.toHaveBeenCalled();
 
       mock
-        .onGet(mockData.endpoints.tasksByTypeTopLabelsData)
+        .onGet(endpoints.tasksByTypeTopLabelsData)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
       wrapper = await createComponent();
       await waitForPromises();
@@ -381,7 +385,7 @@ describe('EE Value Stream Analytics component', () => {
       expect(createFlash).not.toHaveBeenCalled();
 
       mock
-        .onGet(mockData.endpoints.tasksByTypeData)
+        .onGet(endpoints.tasksByTypeData)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
       wrapper = await createComponent();
       await waitForPromises();
@@ -395,7 +399,7 @@ describe('EE Value Stream Analytics component', () => {
       expect(createFlash).not.toHaveBeenCalled();
 
       mock
-        .onGet(mockData.endpoints.stageMedian)
+        .onGet(endpoints.stageMedian)
         .reply(httpStatusCodes.NOT_FOUND, { response: { status: httpStatusCodes.NOT_FOUND } });
       wrapper = await createComponent();
 
@@ -406,11 +410,9 @@ describe('EE Value Stream Analytics component', () => {
 
     it('will display an error if the fetchStageData request is successful but has an embedded error', async () => {
       const tooMuchDataError = 'There is too much data to calculate. Please change your selection.';
-      mock
-        .onGet(mockData.endpoints.stageData)
-        .reply(httpStatusCodes.OK, { error: tooMuchDataError });
+      mock.onGet(endpoints.stageData).reply(httpStatusCodes.OK, { error: tooMuchDataError });
 
-      wrapper = await createComponent({ selectedStage: mockData.issueStage });
+      wrapper = await createComponent({ selectedStage: issueStage });
 
       displaysStageTable(true);
       expect(findStageTable().props('emptyStateMessage')).toBe(tooMuchDataError);
@@ -447,7 +449,7 @@ describe('EE Value Stream Analytics component', () => {
       expect(actionSpies.setDefaultSelectedStage).not.toHaveBeenCalled();
       expect(actionSpies.setSelectedStage).toHaveBeenCalledWith(selectedStage);
       expect(actionSpies.updateStageTablePagination).toHaveBeenCalledWith({
-        ...mockData.initialPaginationQuery,
+        ...initialPaginationQuery,
         page: 1,
       });
     });
@@ -464,8 +466,8 @@ describe('EE Value Stream Analytics component', () => {
   describe('Url parameters', () => {
     const defaultParams = {
       value_stream_id: selectedValueStream.id,
-      created_after: toYmd(mockData.createdAfter),
-      created_before: toYmd(mockData.createdBefore),
+      created_after: toYmd(createdAfter),
+      created_before: toYmd(createdBefore),
       stage_id: null,
       project_ids: null,
       sort: null,
@@ -473,7 +475,7 @@ describe('EE Value Stream Analytics component', () => {
       page: null,
     };
 
-    const selectedProjectIds = mockData.selectedProjects.map(({ id }) => getIdFromGraphQLId(id));
+    const selectedProjectIds = selectedProjects.map(({ id }) => getIdFromGraphQLId(id));
     const selectedStage = { title: 'Plan', id: 2 };
 
     beforeEach(async () => {
@@ -515,8 +517,8 @@ describe('EE Value Stream Analytics component', () => {
       it('sets the value_stream_id url parameter', async () => {
         await shouldMergeUrlParams(wrapper, {
           ...defaultParams,
-          created_after: toYmd(mockData.createdAfter),
-          created_before: toYmd(mockData.createdBefore),
+          created_after: toYmd(createdAfter),
+          created_before: toYmd(createdBefore),
           project_ids: null,
         });
       });
@@ -525,15 +527,15 @@ describe('EE Value Stream Analytics component', () => {
     describe('with selectedProjectIds set', () => {
       beforeEach(async () => {
         wrapper = await createComponent();
-        await store.dispatch('setSelectedProjects', mockData.selectedProjects);
+        await store.dispatch('setSelectedProjects', selectedProjects);
         await wrapper.vm.$nextTick();
       });
 
       it('sets the project_ids url parameter', async () => {
         await shouldMergeUrlParams(wrapper, {
           ...defaultParams,
-          created_after: toYmd(mockData.createdAfter),
-          created_before: toYmd(mockData.createdBefore),
+          created_after: toYmd(createdAfter),
+          created_before: toYmd(createdBefore),
           project_ids: selectedProjectIds,
           stage_id: null,
         });
@@ -545,7 +547,7 @@ describe('EE Value Stream Analytics component', () => {
         wrapper = await createComponent({
           initialState: {
             ...initialCycleAnalyticsState,
-            pagination: mockData.initialPaginationQuery,
+            pagination: initialPaginationQuery,
           },
           selectedStage,
         });
@@ -554,7 +556,7 @@ describe('EE Value Stream Analytics component', () => {
       it('sets the stage, sort, direction and page parameters', async () => {
         await shouldMergeUrlParams(wrapper, {
           ...defaultParams,
-          ...mockData.initialPaginationQuery,
+          ...initialPaginationQuery,
           stage_id: selectedStage.id,
         });
       });

ee/spec/frontend/analytics/cycle_analytics/components/metrics_spec.js

@@ -3,8 +3,9 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Metrics from 'ee/analytics/cycle_analytics/components/metrics.vue';
 import Api from 'ee/api';
+import { group } from 'jest/cycle_analytics/mock_data';
 import createFlash from '~/flash';
-import { group, timeMetricsData, recentActivityData } from '../mock_data';
+import { timeMetricsData, recentActivityData } from '../mock_data';
 
 jest.mock('~/flash');
 

ee/spec/frontend/analytics/cycle_analytics/mock_data.js

 import { uniq } from 'lodash';
 import {
-  DEFAULT_DAYS_IN_PAST,
   TASKS_BY_TYPE_SUBJECT_ISSUE,
   OVERVIEW_STAGE_CONFIG,
   PAGINATION_TYPE,
@@ -15,11 +14,16 @@ import {
 } from 'ee/analytics/cycle_analytics/utils';
 import { toYmd } from 'ee/analytics/shared/utils';
 import { getJSONFixture } from 'helpers/fixtures';
-import { TEST_HOST } from 'helpers/test_constants';
-import { getStageByTitle, defaultStages, rawStageMedians } from 'jest/cycle_analytics/mock_data';
+import {
+  getStageByTitle,
+  defaultStages,
+  rawStageMedians,
+  createdBefore,
+  createdAfter,
+} from 'jest/cycle_analytics/mock_data';
 import { transformStagesForPathNavigation } from '~/cycle_analytics/utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { getDateInPast, getDatesInRange } from '~/lib/utils/datetime_utility';
+import { getDatesInRange } from '~/lib/utils/datetime_utility';
 
 const fixtureEndpoints = {
   customizableCycleAnalyticsStagesAndEvents: 'analytics/value_stream_analytics/stages.json', // customizable stages and events endpoint
@@ -54,16 +58,6 @@ export const groupLabels = getJSONFixture(fixtureEndpoints.groupLabels).map(
   convertObjectPropsToCamelCase,
 );
 
-export const group = {
-  id: 1,
-  name: 'foo',
-  path: 'foo',
-  full_path: 'foo',
-  avatar_url: `${TEST_HOST}/images/home/nasa.svg`,
-};
-
-export const currentGroup = convertObjectPropsToCamelCase(group, { deep: true });
-
 export const recentActivityData = getJSONFixture(fixtureEndpoints.recentActivityData);
 export const timeMetricsData = getJSONFixture(fixtureEndpoints.timeMetricsData);
 
@@ -158,9 +152,6 @@ export const stageCounts = rawStageMedians.reduce((acc, { id, value }) => {
   return { ...acc, [stageId]: value };
 }, {});
 
-export const createdBefore = new Date(2019, 0, 14);
-export const createdAfter = getDateInPast(createdBefore, DEFAULT_DAYS_IN_PAST);
-
 export const issueEvents = deepCamelCase(stageFixtures.issue);
 export const planEvents = deepCamelCase(stageFixtures.plan);
 export const reviewEvents = deepCamelCase(stageFixtures.review);
@@ -299,21 +290,6 @@ export const rawDurationMedianData = [
   },
 ];
 
-export const selectedProjects = [
-  {
-    id: 'gid://gitlab/Project/1',
-    name: 'cool project',
-    pathWithNamespace: 'group/cool-project',
-    avatarUrl: null,
-  },
-  {
-    id: 'gid://gitlab/Project/2',
-    name: 'another cool project',
-    pathWithNamespace: 'group/another-cool-project',
-    avatarUrl: null,
-  },
-];
-
 export const pathNavIssueMetric = 172800;
 
 export const initialPaginationQuery = {

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

@@ -5,13 +5,11 @@ import * as actions from 'ee/analytics/cycle_analytics/store/actions';
 import * as getters from 'ee/analytics/cycle_analytics/store/getters';
 import * as types from 'ee/analytics/cycle_analytics/store/mutation_types';
 import testAction from 'helpers/vuex_action_helper';
+import { createdAfter, createdBefore, currentGroup } from 'jest/cycle_analytics/mock_data';
 import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import {
-  currentGroup,
   allowedStages as stages,
-  createdAfter,
-  createdBefore,
   customizableStagesAndEvents,
   endpoints,
   valueStreams,

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

 import * as getters from 'ee/analytics/cycle_analytics/store/getters';
+import { createdAfter, createdBefore, selectedProjects } from 'jest/cycle_analytics/mock_data';
 import {
   filterMilestones,
   filterUsers,
@@ -9,10 +10,7 @@ import {
   getFilterValues,
 } from 'jest/vue_shared/components/filtered_search_bar/store/modules/filters/test_helper';
 import {
-  createdAfter,
-  createdBefore,
   allowedStages,
-  selectedProjects,
   issueStage,
   stageMedians,
   stageCounts,

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

@@ -5,13 +5,11 @@ import * as actions from 'ee/analytics/cycle_analytics/store/modules/duration_ch
 import * as getters from 'ee/analytics/cycle_analytics/store/modules/duration_chart/getters';
 import * as types from 'ee/analytics/cycle_analytics/store/modules/duration_chart/mutation_types';
 import testAction from 'helpers/vuex_action_helper';
+import { createdAfter, createdBefore, group } from 'jest/cycle_analytics/mock_data';
 import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import {
-  group,
   allowedStages as stages,
-  createdAfter,
-  createdBefore,
   rawDurationData,
   transformedDurationData,
   endpoints,

ee/spec/frontend/analytics/cycle_analytics/store/modules/duration_chart/getters_spec.js

 import * as getters from 'ee/analytics/cycle_analytics/store/modules/duration_chart/getters';
-import {
-  createdAfter,
-  createdBefore,
-  transformedDurationData,
-  durationChartPlottableData,
-} from '../../../mock_data';
+import { createdAfter, createdBefore } from 'jest/cycle_analytics/mock_data';
+import { transformedDurationData, durationChartPlottableData } from '../../../mock_data';
 
 const rootState = {
   createdAfter,

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

@@ -9,15 +9,10 @@ import * as actions from 'ee/analytics/cycle_analytics/store/modules/type_of_wor
 import * as getters from 'ee/analytics/cycle_analytics/store/modules/type_of_work/getters';
 import * as types from 'ee/analytics/cycle_analytics/store/modules/type_of_work/mutation_types';
 import testAction from 'helpers/vuex_action_helper';
+import { createdAfter, createdBefore } from 'jest/cycle_analytics/mock_data';
 import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
-import {
-  groupLabels,
-  endpoints,
-  createdAfter,
-  createdBefore,
-  rawTasksByTypeData,
-} from '../../../mock_data';
+import { groupLabels, endpoints, rawTasksByTypeData } from '../../../mock_data';
 
 jest.mock('~/flash');
 

ee/spec/frontend/analytics/cycle_analytics/store/modules/type_of_work/getters_spec.js

 import { tasksByTypeChartData } from 'ee/analytics/cycle_analytics/store/modules/type_of_work/getters';
-import {
-  rawTasksByTypeData,
-  transformedTasksByTypeData,
-  createdAfter,
-  createdBefore,
-} from '../../../mock_data';
+import { createdAfter, createdBefore } from 'jest/cycle_analytics/mock_data';
+import { rawTasksByTypeData, transformedTasksByTypeData } from '../../../mock_data';
 
 describe('Type of work getters', () => {
   describe('tasksByTypeChartData', () => {

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

@@ -4,16 +4,13 @@ import {
 } from 'ee/analytics/cycle_analytics/constants';
 import * as types from 'ee/analytics/cycle_analytics/store/mutation_types';
 import mutations from 'ee/analytics/cycle_analytics/store/mutations';
-
+import { createdAfter, createdBefore, selectedProjects } from 'jest/cycle_analytics/mock_data';
 import {
   issueStage,
   planStage,
   codeStage,
   stagingStage,
   reviewStage,
-  createdAfter,
-  createdBefore,
-  selectedProjects,
   customizableStagesAndEvents,
   valueStreams,
   rawCustomStageEvents,

ee/spec/frontend/analytics/cycle_analytics/utils_spec.js

@@ -19,7 +19,7 @@ import {
   formatMedianValuesWithOverview,
 } from 'ee/analytics/cycle_analytics/utils';
 import { toYmd } from 'ee/analytics/shared/utils';
-import { rawStageMedians } from 'jest/cycle_analytics/mock_data';
+import { createdAfter, createdBefore, rawStageMedians } from 'jest/cycle_analytics/mock_data';
 import { OVERVIEW_STAGE_ID } from '~/cycle_analytics/constants';
 import { medianTimeToParsedSeconds } from '~/cycle_analytics/utils';
 import { getDatesInRange } from '~/lib/utils/datetime_utility';
@@ -32,8 +32,6 @@ import {
   transformedDurationData,
   flattenedDurationData,
   durationChartPlottableData,
-  createdAfter,
-  createdBefore,
   issueStage,
   rawCustomStage,
   rawTasksByTypeData,

ee/spec/frontend/analytics/merge_request_analytics/components/app_spec.js

@@ -3,7 +3,7 @@ import MergeRequestAnalyticsApp from 'ee/analytics/merge_request_analytics/compo
 import FilterBar from 'ee/analytics/merge_request_analytics/components/filter_bar.vue';
 import ThroughputChart from 'ee/analytics/merge_request_analytics/components/throughput_chart.vue';
 import ThroughputTable from 'ee/analytics/merge_request_analytics/components/throughput_table.vue';
-import DateRange from 'ee/analytics/shared/components/daterange.vue';
+import DateRange from '~/analytics/shared/components/daterange.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 
 describe('MergeRequestAnalyticsApp', () => {

ee/spec/frontend/analytics/productivity_analytics/components/filter_dropdowns_spec.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 import FilterDropdowns from 'ee/analytics/productivity_analytics/components/filter_dropdowns.vue';
 import { getStoreConfig } from 'ee/analytics/productivity_analytics/store';
 import GroupsDropdownFilter from 'ee/analytics/shared/components/groups_dropdown_filter.vue';
-import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue';
+import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
 import resetStore from '../helpers';
 
 const localVue = createLocalVue();

ee/spec/frontend/analytics/shared/utils_spec.js

@@ -2,7 +2,6 @@ import {
   buildGroupFromDataset,
   buildProjectFromDataset,
   buildCycleAnalyticsInitialData,
-  filterBySearchTerm,
 } from 'ee/analytics/shared/utils';
 
 const rawValueStream = `{
@@ -179,27 +178,4 @@ describe('buildCycleAnalyticsInitialData', () => {
       expect(buildCycleAnalyticsInitialData()).toMatchObject({ [field]: null });
     });
   });
-
-  describe('filterBySearchTerm', () => {
-    const data = [
-      { name: 'eins', title: 'one' },
-      { name: 'zwei', title: 'two' },
-      { name: 'drei', title: 'three' },
-    ];
-    const searchTerm = 'rei';
-
-    it('filters data by `name` for the provided search term', () => {
-      expect(filterBySearchTerm(data, searchTerm)).toEqual([data[2]]);
-    });
-
-    it('with no search term returns the data', () => {
-      ['', null].forEach((search) => {
-        expect(filterBySearchTerm(data, search)).toEqual(data);
-      });
-    });
-
-    it('with a key, filters by the provided key', () => {
-      expect(filterBySearchTerm(data, 'ne', 'title')).toEqual([data[0]]);
-    });
-  });
 });

ee/spec/frontend/analytics/shared/components/daterange_spec.js → spec/frontend/analytics/shared/components/daterange_spec.js

 import { GlDaterangePicker } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import Daterange from 'ee/analytics/shared/components/daterange.vue';
 import { useFakeDate } from 'helpers/fake_date';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import Daterange from '~/analytics/shared/components/daterange.vue';
 
 const defaultProps = {
   startDate: new Date(2019, 8, 1),

ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js → spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue';
-import getProjects from 'ee/analytics/shared/graphql/projects.query.graphql';
 import { TEST_HOST } from 'helpers/test_constants';
+import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
+import getProjects from '~/analytics/shared/graphql/projects.query.graphql';
 
 const projects = [
   {

spec/frontend/analytics/shared/utils_spec.js

+import { filterBySearchTerm } from '~/analytics/shared/utils';
+
+describe('filterBySearchTerm', () => {
+  const data = [
+    { name: 'eins', title: 'one' },
+    { name: 'zwei', title: 'two' },
+    { name: 'drei', title: 'three' },
+  ];
+  const searchTerm = 'rei';
+
+  it('filters data by `name` for the provided search term', () => {
+    expect(filterBySearchTerm(data, searchTerm)).toEqual([data[2]]);
+  });
+
+  it('with no search term returns the data', () => {
+    ['', null].forEach((search) => {
+      expect(filterBySearchTerm(data, search)).toEqual(data);
+    });
+  });
+
+  it('with a key, filters by the provided key', () => {
+    expect(filterBySearchTerm(data, 'ne', 'title')).toEqual([data[0]]);
+  });
+});

ee/spec/frontend/analytics/cycle_analytics/components/filter_bar_spec.js → spec/frontend/cycle_analytics/filter_bar_spec.js

@@ -2,12 +2,12 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
-import FilterBar from 'ee/analytics/cycle_analytics/components/filter_bar.vue';
-import storeConfig from 'ee/analytics/cycle_analytics/store';
 import {
   filterMilestones,
   filterLabels,
 } from 'jest/vue_shared/components/filtered_search_bar/store/modules/filters/mock_data';
+import FilterBar from '~/cycle_analytics/components/filter_bar.vue';
+import storeConfig from '~/cycle_analytics/store';
 import * as commonUtils from '~/lib/utils/common_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';

spec/frontend/cycle_analytics/mock_data.js

-import { DEFAULT_VALUE_STREAM } from '~/cycle_analytics/constants';
+import { TEST_HOST } from 'helpers/test_constants';
+import { DEFAULT_VALUE_STREAM, DEFAULT_DAYS_IN_PAST } from '~/cycle_analytics/constants';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { getDateInPast } from '~/lib/utils/datetime_utility';
+
+export const createdBefore = new Date(2019, 0, 14);
+export const createdAfter = getDateInPast(createdBefore, DEFAULT_DAYS_IN_PAST);
 
 export const getStageByTitle = (stages, title) =>
   stages.find((stage) => stage.title && stage.title.toLowerCase().trim() === title) || {};
@@ -212,6 +217,31 @@ export const transformedProjectStagePathData = [
 
 export const selectedValueStream = DEFAULT_VALUE_STREAM;
 
+export const group = {
+  id: 1,
+  name: 'foo',
+  path: 'foo',
+  full_path: 'foo',
+  avatar_url: `${TEST_HOST}/images/home/nasa.svg`,
+};
+
+export const currentGroup = convertObjectPropsToCamelCase(group, { deep: true });
+
+export const selectedProjects = [
+  {
+    id: 'gid://gitlab/Project/1',
+    name: 'cool project',
+    pathWithNamespace: 'group/cool-project',
+    avatarUrl: null,
+  },
+  {
+    id: 'gid://gitlab/Project/2',
+    name: 'another cool project',
+    pathWithNamespace: 'group/another-cool-project',
+    avatarUrl: null,
+  },
+];
+
 export const rawValueStreamStages = [
   {
     title: 'Issue',

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_filters_spec.js → spec/frontend/cycle_analytics/value_stream_filters_spec.js

 import { shallowMount } from '@vue/test-utils';
-import FilterBar from 'ee/analytics/cycle_analytics/components/filter_bar.vue';
-import ValueStreamFilters from 'ee/analytics/cycle_analytics/components/value_stream_filters.vue';
-import Daterange from 'ee/analytics/shared/components/daterange.vue';
-import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue';
+import Daterange from '~/analytics/shared/components/daterange.vue';
+import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
+import FilterBar from '~/cycle_analytics/components/filter_bar.vue';
+import ValueStreamFilters from '~/cycle_analytics/components/value_stream_filters.vue';
 import {
   createdAfter as startDate,
   createdBefore as endDate,
   currentGroup,
   selectedProjects,
-} from '../mock_data';
+} from './mock_data';
 
 function createComponent(props = {}) {
   return shallowMount(ValueStreamFilters, {