Add latest changes from gitlab-org/gitlab@master

2 files changed, 42 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
index 8b76af05ffe..6a03e38a31d 100644
--- a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlSegmentedControl } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
+import SegmentedControlButtonGroup from '~/vue_shared/components/segmented_control_button_group.vue';
 import CiCdAnalyticsAreaChart from './ci_cd_analytics_area_chart.vue';
 
 export default {
   components: {
-    GlSegmentedControl,
     CiCdAnalyticsAreaChart,
+    SegmentedControlButtonGroup,
   },
   props: {
     charts: {
@@ -38,7 +38,11 @@ export default {
 </script>
 <template>
   <div>
-    <gl-segmented-control v-model="selectedChart" :options="chartRanges" class="gl-mb-4" />
+    <segmented-control-button-group
+      v-model="selectedChart"
+      :options="chartRanges"
+      class="gl-mb-4"
+    />
     <ci-cd-analytics-area-chart
       v-if="chart"
       v-bind="$attrs"
diff --git a/app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue b/app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue
new file mode 100644
index 00000000000..f50706b6de8
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue
@@ -0,0 +1,35 @@
+<script>
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
+
+// TODO: We're planning to move this component to GitLab UI
+//       https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1787
+export default {
+  components: {
+    GlButtonGroup,
+    GlButton,
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    value: {
+      type: [String, Number, Boolean],
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <gl-button-group>
+    <gl-button
+      v-for="opt in options"
+      :key="opt.value"
+      :disabled="!!opt.disabled"
+      :selected="value === opt.value"
+      @click="$emit('input', opt.value)"
+    >
+      <slot name="button-content" v-bind="opt">{{ opt.text }}</slot>
+    </gl-button>
+  </gl-button-group>
+</template>