Merge branch 'psi-buresize' into 'master'

Fix occasionally missing burndown charts

See merge request gitlab-org/gitlab!61335

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

 <script>
+import { GlResizeObserverDirective as GlResizeObserver } from '@gitlab/ui';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { merge } from 'lodash';
 import { __, n__, s__, sprintf } from '~/locale';
-import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 import commonChartOptions from './common_chart_options';
 
 export default {
+  directives: {
+    GlResizeObserver,
+  },
   components: {
     GlLineChart,
-    ResizableChartContainer,
   },
   props: {
     startDate: {
@@ -106,6 +108,12 @@ export default {
     },
   },
   methods: {
+    setChart(chart) {
+      this.chart = chart;
+    },
+    onResize() {
+      this.chart?.resize();
+    },
     formatTooltipText(params) {
       const [seriesData] = params.seriesData;
       if (!seriesData) {
@@ -131,18 +139,18 @@ export default {
     <div v-if="showTitle" class="burndown-header d-flex align-items-center">
       <h3>{{ __('Burndown chart') }}</h3>
     </div>
-    <resizable-chart-container v-if="!loading" class="burndown-chart js-burndown-chart">
-      <gl-line-chart
-        slot-scope="{ width }"
-        :width="width"
-        :data="dataSeries"
-        :option="options"
-        :format-tooltip-text="formatTooltipText"
-        :include-legend-avg-max="false"
-      >
-        <template slot="tooltip-title">{{ tooltip.title }}</template>
-        <template slot="tooltip-content">{{ tooltip.content }}</template>
-      </gl-line-chart>
-    </resizable-chart-container>
+    <gl-line-chart
+      v-if="!loading"
+      v-gl-resize-observer="onResize"
+      class="burndown-chart js-burndown-chart"
+      :data="dataSeries"
+      :option="options"
+      :format-tooltip-text="formatTooltipText"
+      :include-legend-avg-max="false"
+      @created="setChart"
+    >
+      <template slot="tooltip-title">{{ tooltip.title }}</template>
+      <template slot="tooltip-content">{{ tooltip.content }}</template>
+    </gl-line-chart>
   </div>
 </template>

ee/app/assets/javascripts/burndown_chart/components/burnup_chart.vue

 <script>
+import { GlResizeObserverDirective as GlResizeObserver } from '@gitlab/ui';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { merge } from 'lodash';
 import { __, n__, sprintf } from '~/locale';
-import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 import commonChartOptions from './common_chart_options';
 
 export default {
+  directives: {
+    GlResizeObserver,
+  },
   components: {
     GlLineChart,
-    ResizableChartContainer,
   },
   props: {
     startDate: {
@@ -83,7 +85,14 @@ export default {
       });
     },
   },
+
   methods: {
+    setChart(chart) {
+      this.chart = chart;
+    },
+    onResize() {
+      this.chart?.resize();
+    },
     // transform the object to a chart-friendly array of date + value
     transform(key) {
       return this.burnupData.map((val) => [val.date, val[key]]);
@@ -119,21 +128,21 @@ export default {
     <div class="burndown-header d-flex align-items-center">
       <h3>{{ __('Burnup chart') }}</h3>
     </div>
-    <resizable-chart-container v-if="!loading" class="js-burnup-chart">
-      <gl-line-chart
-        slot-scope="{ width }"
-        :width="width"
-        :data="dataSeries"
-        :option="options"
-        :format-tooltip-text="formatTooltipText"
-        :include-legend-avg-max="false"
-      >
-        <template slot="tooltip-title">{{ tooltip.title }}</template>
-        <template slot="tooltip-content">
-          <div>{{ tooltip.total }}</div>
-          <div>{{ tooltip.completed }}</div>
-        </template>
-      </gl-line-chart>
-    </resizable-chart-container>
+    <gl-line-chart
+      v-if="!loading"
+      v-gl-resize-observer="onResize"
+      class="js-burnup-chart"
+      :data="dataSeries"
+      :option="options"
+      :format-tooltip-text="formatTooltipText"
+      :include-legend-avg-max="false"
+      @created="setChart"
+    >
+      <template slot="tooltip-title">{{ tooltip.title }}</template>
+      <template slot="tooltip-content">
+        <div>{{ tooltip.total }}</div>
+        <div>{{ tooltip.completed }}</div>
+      </template>
+    </gl-line-chart>
   </div>
 </template>

ee/changelogs/unreleased/psi-buresize.yml

+---
+title: Fix occasionally invisible burndown charts
+merge_request: 61335
+author:
+type: fixed

ee/spec/frontend/burndown_chart/components/burndown_chart_spec.js

 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
 import BurndownChart from 'ee/burndown_chart/components/burndown_chart.vue';
-import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 
 describe('burndown_chart', () => {
   let wrapper;
@@ -21,9 +20,6 @@ describe('burndown_chart', () => {
         ...defaultProps,
         ...props,
       },
-      stubs: {
-        ResizableChartContainer,
-      },
     });
   };
 

ee/spec/frontend/burndown_chart/components/burnup_chart_spec.js

 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
 import BurnupChart from 'ee/burndown_chart/components/burnup_chart.vue';
-import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 import { day1, day2, day3 } from '../mock_data';
 
 describe('Burnup chart', () => {
@@ -20,9 +19,6 @@ describe('Burnup chart', () => {
         ...defaultProps,
         ...props,
       },
-      stubs: {
-        ResizableChartContainer,
-      },
     });
   };