Merge branch '351911-statistics-history-chart-responsiveness' into 'master'

Refactored statistics chart responsiveness

See merge request gitlab-org/gitlab!81457

ee/app/assets/javascripts/threat_monitoring/components/statistics_history.vue

 <script>
-import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
-import { isFunction } from 'lodash';
 
 import { COLORS, DATE_FORMATS, TIME } from './constants';
 
@@ -11,9 +9,6 @@ export default {
   components: {
     GlAreaChart,
   },
-  directives: {
-    GlResizeObserverDirective,
-  },
   props: {
     data: {
       type: Object,
@@ -87,18 +82,13 @@ export default {
     onChartCreated(chartInstance) {
       this.chartInstance = chartInstance;
     },
-    onResize() {
-      if (isFunction(this.chartInstance?.resize)) {
-        this.chartInstance.resize();
-      }
-    },
   },
 };
 </script>
 
 <template>
   <gl-area-chart
-    v-gl-resize-observer-directive="onResize"
+    :responsive="true"
     :data="chartData"
     :option="chartOptions"
     :include-legend-avg-max="false"

ee/spec/frontend/threat_monitoring/components/__snapshots__/statistics_history_spec.js.snap

@@ -4,6 +4,7 @@ exports[`StatisticsHistory component chart tooltip renders the title and series
 <div
   data="[object Object],[object Object]"
   option="[object Object]"
+  responsive="true"
 >
   <div>
     Dec 4, 2019 12:00am (Time)

ee/spec/frontend/threat_monitoring/components/statistics_history_spec.js

 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import { TOTAL_REQUESTS, ANOMALOUS_REQUESTS } from 'ee/threat_monitoring/components/constants';
 import StatisticsHistory from 'ee/threat_monitoring/components/statistics_history.vue';
 import { mockNominalHistory, mockAnomalousHistory } from '../mocks/mock_data';
 
-let resizeCallback = null;
-const MockResizeObserverDirective = {
-  bind(el, { value }) {
-    resizeCallback = value;
-  },
-
-  simulateResize() {
-    // Let tests fail if callback throws or isn't callable
-    resizeCallback();
-  },
-
-  unbind() {
-    resizeCallback = null;
-  },
-};
-
-Vue.directive('gl-resize-observer-directive', MockResizeObserverDirective);
-
 describe('StatisticsHistory component', () => {
   let wrapper;
 
@@ -75,38 +57,6 @@ describe('StatisticsHistory component', () => {
     });
   });
 
-  describe('given the component needs to resize', () => {
-    let mockChartInstance;
-    beforeEach(() => {
-      factory();
-
-      mockChartInstance = {
-        resize: jest.fn(),
-      };
-    });
-
-    describe('given the chart has not emitted the created event', () => {
-      beforeEach(() => {
-        MockResizeObserverDirective.simulateResize();
-      });
-
-      it('there is no attempt to resize the chart instance', () => {
-        expect(mockChartInstance.resize).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('given the chart has emitted the created event', () => {
-      beforeEach(() => {
-        findChart().vm.$emit('created', mockChartInstance);
-        MockResizeObserverDirective.simulateResize();
-      });
-
-      it('the chart instance is resized', () => {
-        expect(mockChartInstance.resize).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
-
   describe('chart tooltip', () => {
     beforeEach(async () => {
       const mockParams = {