Merge branch '217943-vsa-apply-filter-bar-values-to-api' into 'master'

Apply filter bar values to api requests

See merge request gitlab-org/gitlab!35112

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

@@ -72,7 +72,6 @@ export default {
       'selectedLabels',
       'selectedAssignees',
       'stages',
-      'summary',
       'currentStageEvents',
       'errorCode',
       'startDate',
@@ -248,7 +247,7 @@ export default {
           </div>
           <filter-bar
             v-if="shouldDisplayFilterBar"
-            class="js-filter-bar filtered-search-box gl-display-flex gl-mt-3 mt-md-0 gl-mr-3"
+            class="js-filter-bar filtered-search-box gl-display-flex gl-mt-3 mt-md-0 gl-mr-3 gl-border-none"
             :disabled="!hasProject"
           />
           <div v-if="shouldDisplayFilters" class="gl-justify-content-end gl-white-space-nowrap">

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

@@ -77,7 +77,7 @@ export default {
   },
   watch: {
     searchTerm() {
-      debounce(this.fetchData(), DATA_REFETCH_DELAY);
+      this.search();
     },
   },
   mounted() {
@@ -102,6 +102,9 @@ export default {
           this.loading = false;
         });
     },
+    search: debounce(function debouncedSearch() {
+      this.fetchData();
+    }, DATA_REFETCH_DELAY),
     labelTitle(label) {
       // there are 2 possible endpoints for group labels
       // one returns label.name the other label.title

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

@@ -72,22 +72,16 @@ const fetchStageMedian = (currentGroupPath, stageId, params) =>
   }));
 
 export const fetchStageMedianValues = ({ state, dispatch, getters }) => {
-  const {
-    currentGroupPath,
-    cycleAnalyticsRequestParams: { created_after, created_before, project_ids },
-  } = getters;
-
+  const { currentGroupPath, cycleAnalyticsRequestParams } = getters;
   const { stages } = state;
-  const params = {
-    created_after,
-    created_before,
-    project_ids,
-  };
-
-  dispatch('requestStageMedianValues');
   const stageIds = stages.map(s => s.slug);
 
-  return Promise.all(stageIds.map(stageId => fetchStageMedian(currentGroupPath, stageId, params)))
+  dispatch('requestStageMedianValues');
+  return Promise.all(
+    stageIds.map(stageId =>
+      fetchStageMedian(currentGroupPath, stageId, cycleAnalyticsRequestParams),
+    ),
+  )
     .then(data => dispatch('receiveStageMedianValuesSuccess', data))
     .catch(error =>
       handleErrorOrRethrow({

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

@@ -12,10 +12,24 @@ export const currentGroupPath = ({ selectedGroup }) =>
 export const selectedProjectIds = ({ selectedProjects }) =>
   selectedProjects.length ? selectedProjects.map(({ id }) => id) : [];
 
-export const cycleAnalyticsRequestParams = ({ startDate = null, endDate = null }, getters) => ({
+export const cycleAnalyticsRequestParams = (
+  {
+    startDate = null,
+    endDate = null,
+    selectedAuthor = null,
+    selectedMilestone = null,
+    selectedAssignees = [],
+    selectedLabels = [],
+  },
+  getters,
+) => ({
   project_ids: getters.selectedProjectIds,
   created_after: startDate ? dateFormat(startDate, dateFormats.isoDate) : null,
   created_before: endDate ? dateFormat(endDate, dateFormats.isoDate) : null,
+  author_username: selectedAuthor,
+  milestone_title: selectedMilestone,
+  assignee_username: selectedAssignees,
+  label_name: selectedLabels,
 });
 
 const filterStagesByHiddenStatus = (stages = [], isHidden = true) =>

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

@@ -28,23 +28,19 @@ export const fetchDurationData = ({ dispatch, rootGetters, rootState }) => {
     selectedGroup: { fullPath },
   } = rootState;
 
-  const {
-    cycleAnalyticsRequestParams: { created_after, created_before, project_ids },
-  } = rootGetters;
+  const { cycleAnalyticsRequestParams } = rootGetters;
 
   return Promise.all(
     stages.map(stage => {
       const { slug } = stage;
 
-      return Api.cycleAnalyticsDurationChart(fullPath, slug, {
-        created_after,
-        created_before,
-        project_ids,
-      }).then(({ data }) => ({
-        slug,
-        selected: true,
-        data,
-      }));
+      return Api.cycleAnalyticsDurationChart(fullPath, slug, cycleAnalyticsRequestParams).then(
+        ({ data }) => ({
+          slug,
+          selected: true,
+          data,
+        }),
+      );
     }),
   )
     .then(data => dispatch('receiveDurationDataSuccess', data))
@@ -66,9 +62,7 @@ export const fetchDurationMedianData = ({ dispatch, rootState, rootGetters }) =>
     startDate,
     endDate,
   } = rootState;
-  const {
-    cycleAnalyticsRequestParams: { project_ids },
-  } = rootGetters;
+  const { cycleAnalyticsRequestParams } = rootGetters;
 
   const offsetValue = getDayDifference(new Date(startDate), new Date(endDate));
   const offsetCreatedAfter = getDateInPast(new Date(startDate), offsetValue);
@@ -79,9 +73,9 @@ export const fetchDurationMedianData = ({ dispatch, rootState, rootGetters }) =>
       const { slug } = stage;
 
       return Api.cycleAnalyticsDurationChart(fullPath, slug, {
+        ...cycleAnalyticsRequestParams,
         created_after: dateFormat(offsetCreatedAfter, dateFormats.isoDate),
         created_before: dateFormat(offsetCreatedBefore, dateFormats.isoDate),
-        project_ids,
       }).then(({ data }) => ({
         slug,
         selected: true,

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

@@ -18,14 +18,25 @@ export const fetchTopRankedGroupLabels = ({ dispatch, commit, state, rootGetters
   commit(types.REQUEST_TOP_RANKED_GROUP_LABELS);
   const {
     currentGroupPath,
-    cycleAnalyticsRequestParams: { created_after, created_before },
+    cycleAnalyticsRequestParams: {
+      project_ids,
+      created_after,
+      created_before,
+      author_username,
+      milestone_title,
+      assignee_username,
+    },
   } = rootGetters;
   const { subject } = state;
 
   return Api.cycleAnalyticsTopLabels(currentGroupPath, {
     subject,
+    project_ids,
     created_after,
     created_before,
+    author_username,
+    milestone_title,
+    assignee_username,
   })
     .then(({ data }) => dispatch('receiveTopRankedGroupLabelsSuccess', data))
     .catch(error =>
@@ -42,27 +53,35 @@ export const receiveTasksByTypeDataError = ({ commit }, error) => {
 };
 
 export const fetchTasksByTypeData = ({ dispatch, commit, state, rootGetters }) => {
-  const {
-    currentGroupPath,
-    cycleAnalyticsRequestParams: { created_after, created_before, project_ids },
-  } = rootGetters;
-
+  const { currentGroupPath, cycleAnalyticsRequestParams } = rootGetters;
   const { subject, selectedLabelIds } = state;
 
+  const {
+    project_ids,
+    created_after,
+    created_before,
+    author_username,
+    milestone_title,
+    assignee_username,
+  } = cycleAnalyticsRequestParams;
+
   // ensure we clear any chart data currently in state
   commit(types.REQUEST_TASKS_BY_TYPE_DATA);
 
   // dont request if we have no labels selected...for now
   if (selectedLabelIds.length) {
-    const params = {
+    return Api.cycleAnalyticsTasksByType(currentGroupPath, {
+      project_ids,
       created_after,
       created_before,
-      project_ids,
+      author_username,
+      milestone_title,
+      assignee_username,
       subject,
+      // NOTE: the type of work module will continute to manage its labels, ignoring the filter bar labels
+      // until we resolve: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/34524
       label_ids: selectedLabelIds,
-    };
-
-    return Api.cycleAnalyticsTasksByType(currentGroupPath, params)
+    })
       .then(({ data }) => commit(types.RECEIVE_TASKS_BY_TYPE_DATA_SUCCESS, data))
       .catch(error => dispatch('receiveTasksByTypeDataError', error));
   }

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/type_of_work/mutation_types.js

@@ -6,6 +6,4 @@ export const REQUEST_TASKS_BY_TYPE_DATA = 'REQUEST_TASKS_BY_TYPE_DATA';
 export const RECEIVE_TASKS_BY_TYPE_DATA_SUCCESS = 'RECEIVE_TASKS_BY_TYPE_DATA_SUCCESS';
 export const RECEIVE_TASKS_BY_TYPE_DATA_ERROR = 'RECEIVE_TASKS_BY_TYPE_DATA_ERROR';
 
-export const SET_TASKS_BY_TYPE_SUBJECT = 'SET_TASKS_BY_TYPE_SUBJECT';
-export const SET_TASKS_BY_TYPE_LABELS = 'SET_TASKS_BY_TYPE_LABELS';
 export const SET_TASKS_BY_TYPE_FILTERS = 'SET_TASKS_BY_TYPE_FILTERS';

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

@@ -26,6 +26,7 @@ const fakeStore = ({ initialGetters, initialState }) =>
         getters: {
           tasksByTypeChartData: () => tasksByTypeData,
           selectedTasksByTypeFilters: () => taskByTypeFilters,
+          currentGroupPath: () => 'fake/group/path',
           ...initialGetters,
         },
         state: {

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

@@ -71,6 +71,11 @@ describe('Cycle analytics getters', () => {
   });
 
   describe('cycleAnalyticsRequestParams', () => {
+    const selectedAuthor = 'Gohan';
+    const selectedMilestone = 'SSJ4';
+    const selectedAssignees = ['krillin', 'gotenks'];
+    const selectedLabels = ['cell saga', 'buu saga'];
+
     beforeEach(() => {
       const fullPath = 'cool-beans';
       state = {
@@ -80,14 +85,22 @@ describe('Cycle analytics getters', () => {
         startDate,
         endDate,
         selectedProjects,
+        selectedAuthor,
+        selectedMilestone,
+        selectedAssignees,
+        selectedLabels,
       };
     });
 
     it.each`
-      param               | value
-      ${'created_after'}  | ${'2018-12-15'}
-      ${'created_before'} | ${'2019-01-14'}
-      ${'project_ids'}    | ${[1, 2]}
+      param                  | value
+      ${'created_after'}     | ${'2018-12-15'}
+      ${'created_before'}    | ${'2019-01-14'}
+      ${'project_ids'}       | ${[1, 2]}
+      ${'author_username'}   | ${selectedAuthor}
+      ${'milestone_title'}   | ${selectedMilestone}
+      ${'assignee_username'} | ${selectedAssignees}
+      ${'label_name'}        | ${selectedLabels}
     `('should return the $param with value $value', ({ param, value }) => {
       expect(
         getters.cycleAnalyticsRequestParams(state, { selectedProjectIds: [1, 2] }),
@@ -95,6 +108,19 @@ describe('Cycle analytics getters', () => {
         [param]: value,
       });
     });
+
+    it.each`
+      param                  | stateKey               | value
+      ${'assignee_username'} | ${'selectedAssignees'} | ${[]}
+      ${'label_name'}        | ${'selectedLabels'}    | ${[]}
+    `('should not return the $param when $stateKey=$value', ({ param, stateKey, value }) => {
+      expect(
+        getters.cycleAnalyticsRequestParams(
+          { ...state, [stateKey]: value },
+          { selectedProjectIds: [1, 2] },
+        ),
+      ).not.toContain(param);
+    });
   });
 
   const hiddenStage = { ...allowedStages[2], hidden: true };