Merge branch '220344-move-legacy-filtered-search-into-component' into 'master'

Refactor(issues analytics): move filter into vue

See merge request gitlab-org/gitlab!34385

ee/app/assets/javascripts/issues_analytics/components/issues_analytics.vue

@@ -8,6 +8,7 @@ import { getMonthNames } from '~/lib/utils/datetime_utility';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import IssuesAnalyticsTable from './issues_analytics_table.vue';
+import FilteredSearchIssueAnalytics from '../filtered_search_issues_analytics';
 import { transformFilters } from '../utils';
 
 export default {
@@ -91,15 +92,21 @@ export default {
     showFiltersEmptyState() {
       return !this.loading && !this.showChart && this.hasFilters;
     },
+    dataZoomConfig() {
+      const config = {
+        type: 'slider',
+        startValue: 0,
+      };
+
+      if (this.svgs['scroll-handle']) {
+        return { ...config, handleIcon: this.svgs['scroll-handle'] };
+      }
+
+      return config;
+    },
     chartOptions() {
       return {
-        dataZoom: [
-          {
-            type: 'slider',
-            startValue: 0,
-            handleIcon: this.svgs['scroll-handle'],
-          },
-        ],
+        dataZoom: [this.dataZoomConfig],
       };
     },
     series() {
@@ -134,6 +141,9 @@ export default {
     },
   },
   created() {
+    this.filterManager = new FilteredSearchIssueAnalytics(this.appliedFilters);
+    this.filterManager.setup();
+
     this.setSvg('scroll-handle');
   },
   mounted() {

ee/app/assets/javascripts/issues_analytics/index.js

 import Vue from 'vue';
 import IssuesAnalytics from './components/issues_analytics.vue';
 import store from './stores';
-import FilteredSearchIssueAnalytics from './filtered_search_issues_analytics';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
 
 export default () => {
@@ -28,10 +27,6 @@ export default () => {
     components: {
       IssuesAnalytics,
     },
-    mounted() {
-      this.filterManager = new FilteredSearchIssueAnalytics(store.state.issueAnalytics.filters);
-      this.filterManager.setup();
-    },
     render(createElement) {
       return createElement('issues-analytics', {
         props: {

ee/spec/frontend/issues_analytics/components/issues_analytics_spec.js

@@ -8,6 +8,13 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import { createStore } from 'ee/issues_analytics/stores';
 
+const mockFilterManagerSetup = jest.fn();
+jest.mock('ee/issues_analytics/filtered_search_issues_analytics', () =>
+  jest.fn().mockImplementation(() => ({
+    setup: mockFilterManagerSetup,
+  })),
+);
+
 const localVue = createLocalVue();
 localVue.use(Vuex);