Adds a stub filter bar component

Adds a placeholder filter bar component
and some basic specs to check it renders

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

@@ -19,6 +19,7 @@ import StageTableNav from './stage_table_nav.vue';
 import CustomStageForm from './custom_stage_form.vue';
 import PathNavigation from './path_navigation.vue';
 import MetricCard from '../../shared/components/metric_card.vue';
+import FilterBar from './filter_bar.vue';
 
 export default {
   name: 'CycleAnalytics',
@@ -37,6 +38,7 @@ export default {
     StageTableNav,
     PathNavigation,
     MetricCard,
+    FilterBar,
   },
   mixins: [glFeatureFlagsMixin(), UrlSyncMixin],
   props: {
@@ -56,6 +58,14 @@ export default {
       type: Boolean,
       required: true,
     },
+    milestonesPath: {
+      type: String,
+      required: true,
+    },
+    labelsPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState([
@@ -119,12 +129,25 @@ export default {
     stageCount() {
       return this.activeStages.length;
     },
+    hasProject() {
+      return this.selectedProjectIds.length;
+    },
   },
   mounted() {
+    const {
+      glFeatures: {
+        cycleAnalyticsScatterplotEnabled: hasDurationChart,
+        cycleAnalyticsScatterplotMedianEnabled: hasDurationChartMedian,
+        valueStreamAnalyticsPathNavigation: hasPathNavigation,
+        valueStreamAnalyticsFilterBar: hasFilterBar,
+      },
+    } = this;
+
     this.setFeatureFlags({
-      hasDurationChart: this.glFeatures.cycleAnalyticsScatterplotEnabled,
-      hasDurationChartMedian: this.glFeatures.cycleAnalyticsScatterplotMedianEnabled,
-      hasPathNavigation: this.glFeatures.valueStreamAnalyticsPathNavigation,
+      hasDurationChart,
+      hasDurationChartMedian,
+      hasPathNavigation,
+      hasFilterBar,
     });
   },
   methods: {
@@ -232,6 +255,11 @@ export default {
             :default-projects="selectedProjects"
             @selected="onProjectsSelect"
           />
+          <filter-bar
+            v-if="featureFlags.hasFilterBar"
+            class="js-filter-bar filtered-search-box mx-2 gl-display-none"
+            :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"

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

+<script>
+export default {
+  name: 'FilterBar',
+  components: {},
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+<template>
+  <div></div>
+</template>

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

@@ -6,9 +6,17 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 
 export default () => {
   const el = document.querySelector('#js-cycle-analytics-app');
-  const { emptyStateSvgPath, noDataSvgPath, noAccessSvgPath, hideGroupDropDown } = el.dataset;
+  const {
+    emptyStateSvgPath,
+    noDataSvgPath,
+    noAccessSvgPath,
+    hideGroupDropDown,
+    milestonesPath = '',
+    labelsPath = '',
+  } = el.dataset;
 
   const initialData = buildCycleAnalyticsInitialData(el.dataset);
+
   const store = createStore();
   store.dispatch('initializeCycleAnalytics', initialData);
 
@@ -23,6 +31,8 @@ export default () => {
           noDataSvgPath,
           noAccessSvgPath,
           hideGroupDropDown: parseBoolean(hideGroupDropDown),
+          milestonesPath,
+          labelsPath,
         },
       }),
   });

ee/spec/features/analytics/cycle_analytics/cycle_analytics_spec.rb

@@ -159,7 +159,7 @@ RSpec.describe 'Group Value Stream Analytics', :js do
     end
 
     it 'does not show the filter bar' do
-      expect(page).to have_selector(filter_bar_selector, visible: false)
+      expect(page).not_to have_selector(filter_bar_selector)
     end
 
     context 'with path navigation feature flag enabled' do
@@ -180,7 +180,7 @@ RSpec.describe 'Group Value Stream Analytics', :js do
       end
 
       it 'shows the filter bar' do
-        expect(page).to have_selector(filter_bar_selector, visible: true)
+        expect(page).to have_selector(filter_bar_selector, visible: :hidden)
       end
     end
   end

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

@@ -14,6 +14,7 @@ import StageTable from 'ee/analytics/cycle_analytics/components/stage_table.vue'
 import StageTableNav from 'ee/analytics/cycle_analytics/components/stage_table_nav.vue';
 import StageNavItem from 'ee/analytics/cycle_analytics/components/stage_nav_item.vue';
 import AddStageButton from 'ee/analytics/cycle_analytics/components/add_stage_button.vue';
+import FilterBar from 'ee/analytics/cycle_analytics/components/filter_bar.vue';
 import DurationChart from 'ee/analytics/cycle_analytics/components/duration_chart.vue';
 import Daterange from 'ee/analytics/shared/components/daterange.vue';
 import TypeOfWorkCharts from 'ee/analytics/cycle_analytics/components/type_of_work_charts.vue';
@@ -29,6 +30,8 @@ import UrlSyncMixin from 'ee/analytics/shared/mixins/url_sync_mixin';
 const noDataSvgPath = 'path/to/no/data';
 const noAccessSvgPath = 'path/to/no/access';
 const emptyStateSvgPath = 'path/to/empty/state';
+const milestonesPath = '/some/milestones/endpoint';
+const labelsPath = '/some/labels/endpoint';
 const hideGroupDropDown = false;
 const selectedGroup = convertObjectPropsToCamelCase(mockData.group);
 
@@ -53,6 +56,7 @@ function createComponent({
   withStageSelected = false,
   scatterplotEnabled = true,
   pathNavigationEnabled = false,
+  filterBarEnabled = false,
   props = {},
 } = {}) {
   const func = shallow ? shallowMount : mount;
@@ -64,6 +68,8 @@ function createComponent({
       emptyStateSvgPath,
       noDataSvgPath,
       noAccessSvgPath,
+      milestonesPath,
+      labelsPath,
       baseStagesEndpoint: mockData.endpoints.baseStagesEndpoint,
       hideGroupDropDown,
       ...props,
@@ -72,6 +78,7 @@ function createComponent({
       glFeatures: {
         cycleAnalyticsScatterplotEnabled: scatterplotEnabled,
         valueStreamAnalyticsPathNavigation: pathNavigationEnabled,
+        valueStreamAnalyticsFilterBar: filterBarEnabled,
       },
     },
     ...opts,
@@ -150,6 +157,10 @@ describe('Cycle Analytics component', () => {
     expect(wrapper.find(AddStageButton).exists()).toBe(flag);
   };
 
+  const displaysFilterBar = flag => {
+    expect(wrapper.find(FilterBar).exists()).toBe(flag);
+  };
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
     wrapper = createComponent();
@@ -294,6 +305,10 @@ describe('Cycle Analytics component', () => {
           });
         });
 
+        it('displays the duration chart', () => {
+          displaysDurationChart(true);
+        });
+
         describe('path navigation', () => {
           describe('disabled', () => {
             it('does not display the path navigation', () => {
@@ -315,8 +330,25 @@ describe('Cycle Analytics component', () => {
           });
         });
 
-        it('displays the duration chart', () => {
-          displaysDurationChart(true);
+        describe('filter bar', () => {
+          describe('disabled', () => {
+            it('does not display the filter bar', () => {
+              displaysFilterBar(false);
+            });
+          });
+
+          describe('enabled', () => {
+            beforeEach(() => {
+              wrapper = createComponent({
+                withStageSelected: true,
+                filterBarEnabled: true,
+              });
+            });
+
+            it('displays the filter bar', () => {
+              displaysFilterBar(true);
+            });
+          });
         });
 
         describe('StageTable', () => {