Merge branch '217943-vsa-filter-bar-app-skeleton' into 'master'

VSA filter bar app skeleton

See merge request gitlab-org/gitlab!34170

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

@@ -130,11 +130,13 @@ export default {
       return this.activeStages.length;
     },
     hasProject() {
-      return this.selectedProjectIds.length;
+      return this.selectedProjectIds.length > 0;
     },
   },
   mounted() {
     const {
+      labelsPath,
+      milestonesPath,
       glFeatures: {
         cycleAnalyticsScatterplotEnabled: hasDurationChart,
         cycleAnalyticsScatterplotMedianEnabled: hasDurationChartMedian,
@@ -149,6 +151,8 @@ export default {
       hasPathNavigation,
       hasFilterBar,
     });
+
+    this.setPaths({ labelsPath, milestonesPath });
   },
   methods: {
     ...mapActions([
@@ -171,6 +175,7 @@ export default {
       'createStage',
       'clearFormErrors',
     ]),
+    ...mapActions('filters', ['setPaths']),
     onGroupSelect(group) {
       this.setSelectedGroup(group);
       this.fetchCycleAnalyticsData();
@@ -217,6 +222,7 @@ export default {
   },
   maxDateRange: DATE_RANGE_LIMIT,
   STAGE_ACTIONS,
+  commonFilterClasses: ['gl-display-flex gl-flex-direction-column gl-md-flex-direction-row'],
 };
 </script>
 <template>
@@ -236,11 +242,12 @@ export default {
           />
         </div>
         <div
-          class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between flex-lg-row"
+          :class="$options.commonFilterClasses"
+          class="gl-justify-content-space-between gl-align-items-center"
         >
           <groups-dropdown-filter
             v-if="!hideGroupDropDown"
-            class="js-groups-dropdown-filter mr-0 mr-lg-2"
+            class="js-groups-dropdown-filter"
             :query-params="$options.groupsQueryParams"
             :default-group="selectedGroup"
             @selected="onGroupSelect"
@@ -248,7 +255,7 @@ export default {
           <projects-dropdown-filter
             v-if="shouldDisplayFilters"
             :key="selectedGroup.id"
-            class="js-projects-dropdown-filter my-2 my-lg-0"
+            class="js-projects-dropdown-filter gl-ml-0"
             :group-id="selectedGroup.id"
             :query-params="$options.projectsQueryParams"
             :multi-select="$options.multiProjectSelect"
@@ -257,12 +264,13 @@ export default {
           />
           <filter-bar
             v-if="featureFlags.hasFilterBar"
-            class="js-filter-bar filtered-search-box mx-2 gl-display-none"
+            class="js-filter-bar filtered-search-box gl-display-flex gl-mt-3 mt-md-0 mx-2"
             :disabled="!hasProject"
           />
           <div
             v-if="shouldDisplayFilters"
-            class="ml-0 ml-md-auto mt-2 mt-md-0 d-flex flex-column flex-md-row align-items-md-center justify-content-md-end"
+            :class="$options.commonFilterClasses"
+            class="gl-justify-content-end gl-white-space-nowrap"
           >
             <date-range
               :start-date="startDate"

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

 <script>
+import { mapState } from 'vuex';
+import { GlFilteredSearch } from '@gitlab/ui';
+
 export default {
   name: 'FilterBar',
-  components: {},
+  components: {
+    GlFilteredSearch,
+  },
   props: {
     disabled: {
       type: Boolean,
@@ -9,8 +14,22 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      searchTerms: [],
+    };
+  },
+  computed: {
+    ...mapState('filters', ['milestonesPath', 'labelsPath']),
+  },
 };
 </script>
 <template>
-  <div></div>
+  <gl-filtered-search
+    :disabled="disabled"
+    :v-model="searchTerms"
+    :placeholder="__('Filter results')"
+    :clear-button-title="__('Clear')"
+    :close-button-title="__('Close')"
+  />
 </template>

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

@@ -16,7 +16,6 @@ export default () => {
   } = el.dataset;
 
   const initialData = buildCycleAnalyticsInitialData(el.dataset);
-
   const store = createStore();
   store.dispatch('initializeCycleAnalytics', initialData);
 

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

@@ -7,6 +7,7 @@ import state from './state';
 import customStages from './modules/custom_stages/index';
 import durationChart from './modules/duration_chart/index';
 import typeOfWork from './modules/type_of_work/index';
+import filters from './modules/filters/index';
 
 Vue.use(Vuex);
 
@@ -16,5 +17,5 @@ export default () =>
     getters,
     mutations,
     state,
-    modules: { customStages, durationChart, typeOfWork },
+    modules: { customStages, durationChart, typeOfWork, filters },
   });

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

+import * as types from './mutation_types';
+
+// eslint-disable-next-line import/prefer-default-export
+export const setPaths = ({ commit }, { milestonesPath = '', labelsPath = '' }) => {
+  commit(types.SET_MILESTONES_PATH, milestonesPath);
+  commit(types.SET_LABELS_PATH, labelsPath);
+};

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/filters/index.js

+import state from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+export default {
+  namespaced: true,
+  actions,
+  mutations,
+  state: state(),
+};

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

+export const SET_MILESTONES_PATH = 'SET_MILESTONES_PATH';
+export const SET_LABELS_PATH = 'SET_LABELS_PATH';

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/filters/mutations.js

+import * as types from './mutation_types';
+
+export default {
+  [types.SET_MILESTONES_PATH](state, milestonesPath) {
+    state.milestonesPath = milestonesPath;
+  },
+  [types.SET_LABELS_PATH](state, labelsPath) {
+    state.labelsPath = labelsPath;
+  },
+};

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/filters/state.js

+export default () => ({
+  milestonesPath: '',
+  labelsPath: '',
+});

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

+import testAction from 'helpers/vuex_action_helper';
+import * as actions from 'ee/analytics/cycle_analytics/store/modules/filters/actions';
+import * as types from 'ee/analytics/cycle_analytics/store/modules/filters/mutation_types';
+
+describe('Filters actions', () => {
+  let state;
+
+  beforeEach(() => {
+    state = {};
+  });
+
+  describe('setPaths', () => {
+    it('dispatches error', () => {
+      return testAction(
+        actions.setPaths,
+        {
+          milestonesPath: 'milestones_path',
+          labelsPath: 'labels_path',
+        },
+        state,
+        [
+          { payload: 'milestones_path', type: types.SET_MILESTONES_PATH },
+          { payload: 'labels_path', type: types.SET_LABELS_PATH },
+        ],
+        [],
+      );
+    });
+  });
+});

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

+import mutations from 'ee/analytics/cycle_analytics/store/modules/filters/mutations';
+import * as types from 'ee/analytics/cycle_analytics/store/modules/filters/mutation_types';
+
+let state = null;
+
+describe('Filters mutations', () => {
+  beforeEach(() => {
+    state = {};
+  });
+
+  afterEach(() => {
+    state = null;
+  });
+
+  it.each`
+    mutation                     | stateKey            | value
+    ${types.SET_MILESTONES_PATH} | ${'milestonesPath'} | ${'new-milestone-path'}
+    ${types.SET_LABELS_PATH}     | ${'labelsPath'}     | ${'new-label-path'}
+  `('$mutation will set $stateKey=$value', ({ mutation, stateKey, value }) => {
+    mutations[mutation](state, value);
+
+    expect(state[stateKey]).toEqual(value);
+  });
+});