Add burnup feature flag and column for chart

Add a wrapper charts component, so I can add a burnup chart to it

app/controllers/groups/milestones_controller.rb

@@ -5,6 +5,9 @@ class Groups::MilestonesController < Groups::ApplicationController
 
   before_action :milestone, only: [:edit, :show, :update, :merge_requests, :participants, :labels, :destroy]
   before_action :authorize_admin_milestones!, only: [:edit, :new, :create, :update, :destroy]
+  before_action do
+    push_frontend_feature_flag(:burnup_charts, group)
+  end
 
   def index
     respond_to do |format|

app/controllers/projects/milestones_controller.rb

@@ -6,6 +6,9 @@ class Projects::MilestonesController < Projects::ApplicationController
 
   before_action :check_issuables_available!
   before_action :milestone, only: [:edit, :update, :destroy, :show, :merge_requests, :participants, :labels, :promote]
+  before_action do
+    push_frontend_feature_flag(:burnup_charts, project)
+  end
 
   # Allow read any milestone
   before_action :authorize_read_milestone!

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

+<script>
+import { GlDeprecatedButton, GlButtonGroup } from '@gitlab/ui';
+import { __ } from '~/locale';
+import BurndownChart from './burndown_chart.vue';
+
+export default {
+  burnupChartsEnabled: gon.features.burnupCharts,
+  components: {
+    GlDeprecatedButton,
+    GlButtonGroup,
+    BurndownChart,
+  },
+  props: {
+    startDate: {
+      type: String,
+      required: true,
+    },
+    dueDate: {
+      type: String,
+      required: true,
+    },
+    openIssuesCount: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    openIssuesWeight: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      issuesSelected: true,
+    };
+  },
+  computed: {
+    title() {
+      return this.$options.burnupChartsEnabled ? __('Charts') : __('Burndown chart');
+    },
+  },
+  methods: {
+    showIssueCount() {
+      this.issuesSelected = true;
+    },
+    showIssueWeight() {
+      this.issuesSelected = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div data-qa-selector="burndown_chart">
+    <div class="burndown-header d-flex align-items-center">
+      <h3>{{ title }}</h3>
+      <gl-button-group class="ml-3 js-burndown-data-selector">
+        <gl-deprecated-button
+          ref="totalIssuesButton"
+          :variant="issuesSelected ? 'primary' : 'inverted-primary'"
+          size="sm"
+          @click="showIssueCount"
+        >
+          {{ __('Issues') }}
+        </gl-deprecated-button>
+        <gl-deprecated-button
+          ref="totalWeightButton"
+          :variant="issuesSelected ? 'inverted-primary' : 'primary'"
+          size="sm"
+          data-qa-selector="weight_button"
+          @click="showIssueWeight"
+        >
+          {{ __('Issue weight') }}
+        </gl-deprecated-button>
+      </gl-button-group>
+    </div>
+    <div v-if="$options.burnupChartsEnabled" class="row">
+      <burndown-chart
+        :start-date="startDate"
+        :due-date="dueDate"
+        :open-issues-count="openIssuesCount"
+        :open-issues-weight="openIssuesWeight"
+        :issues-selected="issuesSelected"
+        class="col-md-6"
+      />
+    </div>
+    <burndown-chart
+      v-else
+      :show-title="false"
+      :start-date="startDate"
+      :due-date="dueDate"
+      :open-issues-count="openIssuesCount"
+      :open-issues-weight="openIssuesWeight"
+      :issues-selected="issuesSelected"
+    />
+  </div>
+</template>

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

 <script>
-import { GlDeprecatedButton, GlButtonGroup } from '@gitlab/ui';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
-import { s__, __, sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 
 export default {
   components: {
-    GlDeprecatedButton,
-    GlButtonGroup,
     GlLineChart,
     ResizableChartContainer,
   },
@@ -31,10 +28,19 @@ export default {
       required: false,
       default: () => [],
     },
+    issuesSelected: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showTitle: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
-      issuesSelected: true,
       tooltip: {
         title: '',
         content: '',
@@ -44,15 +50,7 @@ export default {
   computed: {
     dataSeries() {
       let name;
-      let data;
-
-      if (this.issuesSelected) {
-        name = s__('BurndownChartLabel|Open issues');
-        data = this.openIssuesCount;
-      } else {
-        name = s__('BurndownChartLabel|Open issue weight');
-        data = this.openIssuesWeight;
-      }
+      const data = this.issuesSelected ? this.openIssuesCount : this.openIssuesWeight;
 
       const series = [
         {
@@ -132,27 +130,8 @@ export default {
 
 <template>
   <div data-qa-selector="burndown_chart">
-    <div class="burndown-header d-flex align-items-center">
+    <div v-if="showTitle" class="burndown-header d-flex align-items-center">
       <h3>{{ __('Burndown chart') }}</h3>
-      <gl-button-group class="ml-3 js-burndown-data-selector">
-        <gl-deprecated-button
-          ref="totalIssuesButton"
-          :variant="issuesSelected ? 'primary' : 'inverted-primary'"
-          size="sm"
-          @click="showIssueCount"
-        >
-          {{ __('Issues') }}
-        </gl-deprecated-button>
-        <gl-deprecated-button
-          ref="totalWeightButton"
-          :variant="issuesSelected ? 'inverted-primary' : 'primary'"
-          size="sm"
-          data-qa-selector="weight_button"
-          @click="showIssueWeight"
-        >
-          {{ __('Issue weight') }}
-        </gl-deprecated-button>
-      </gl-button-group>
     </div>
     <resizable-chart-container class="burndown-chart">
       <gl-line-chart

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

 import Vue from 'vue';
 import $ from 'jquery';
 import Cookies from 'js-cookie';
-import BurndownChart from './components/burndown_chart.vue';
+import BurnCharts from './components/burn_charts.vue';
 import BurndownChartData from './burndown_chart_data';
 import Flash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -36,10 +36,10 @@ export default () => {
         return new Vue({
           el: container,
           components: {
-            BurndownChart,
+            BurnCharts,
           },
           render(createElement) {
-            return createElement('burndown-chart', {
+            return createElement('burn-charts', {
               props: {
                 startDate,
                 dueDate,