Fix occasionally-hidden burnup charts

Don't render the charts until they have data or they can
be stuck with 0 width. This is something to do with
resizable-chart-container but I don't know what yet.

changelogs/unreleased/297346-flaky-spec-in-ee-spec-features-burnup_charts_spec-rb-burnup-charts.yml

+---
+title: Fix charts sometimes being hidden on milestone page
+merge_request: 52552
+author:
+type: fixed

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

@@ -369,6 +369,7 @@ export default {
         :open-issues-count="issuesCount"
         :open-issues-weight="issuesWeight"
         :issues-selected="issuesSelected"
+        :loading="loading"
         class="col-md-6"
       />
       <burnup-chart
@@ -376,6 +377,7 @@ export default {
         :due-date="dueDate"
         :burnup-data="burnupData"
         :issues-selected="issuesSelected"
+        :loading="loading"
         class="col-md-6"
       />
     </div>

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

@@ -40,6 +40,11 @@ export default {
       required: false,
       default: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -126,7 +131,7 @@ export default {
     <div v-if="showTitle" class="burndown-header d-flex align-items-center">
       <h3>{{ __('Burndown chart') }}</h3>
     </div>
-    <resizable-chart-container class="burndown-chart js-burndown-chart">
+    <resizable-chart-container v-if="!loading" class="burndown-chart js-burndown-chart">
       <gl-line-chart
         slot-scope="{ width }"
         :width="width"

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

@@ -30,6 +30,11 @@ export default {
       required: false,
       default: () => [],
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -114,8 +119,10 @@ export default {
     <div class="burndown-header d-flex align-items-center">
       <h3>{{ __('Burnup chart') }}</h3>
     </div>
-    <resizable-chart-container class="js-burnup-chart">
+    <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"

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

@@ -39,7 +39,7 @@ describe('burndown_chart', () => {
     burndownEventsPath: '/api/v4/projects/1234/milestones/1/burndown_events',
   };
 
-  const createComponent = ({ props = {}, data = {} } = {}) => {
+  const createComponent = ({ props = {}, data = {}, loading = false } = {}) => {
     wrapper = shallowMount(BurnCharts, {
       propsData: {
         ...defaultProps,
@@ -49,7 +49,7 @@ describe('burndown_chart', () => {
         $apollo: {
           queries: {
             report: {
-              loading: false,
+              loading,
             },
           },
         },
@@ -69,6 +69,20 @@ describe('burndown_chart', () => {
     wrapper.destroy();
   });
 
+  it('passes loading=true through to charts', () => {
+    createComponent({ loading: true });
+
+    expect(findBurndownChart().props('loading')).toBe(true);
+    expect(findBurnupChart().props('loading')).toBe(true);
+  });
+
+  it('passes loading=false through to charts', () => {
+    createComponent({ loading: false });
+
+    expect(findBurndownChart().props('loading')).toBe(false);
+    expect(findBurnupChart().props('loading')).toBe(false);
+  });
+
   it('includes Issues and Issue weight buttons', () => {
     createComponent();
 

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

@@ -27,6 +27,18 @@ describe('burndown_chart', () => {
     });
   };
 
+  it('hides chart while loading', () => {
+    createComponent({ loading: true });
+
+    expect(findChart().exists()).toBe(false);
+  });
+
+  it('shows chart when not loading', () => {
+    createComponent({ loading: false });
+
+    expect(findChart().exists()).toBe(true);
+  });
+
   describe('with single point', () => {
     it('does not show guideline', () => {
       createComponent({

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

@@ -26,6 +26,18 @@ describe('Burnup chart', () => {
     });
   };
 
+  it('hides chart while loading', () => {
+    createComponent({ loading: true });
+
+    expect(findChart().exists()).toBe(false);
+  });
+
+  it('shows chart when not loading', () => {
+    createComponent({ loading: false });
+
+    expect(findChart().exists()).toBe(true);
+  });
+
   it('renders the lineChart correctly', () => {
     const burnupData = [day1, day2, day3];