From 718e9eaf08d0f4f3045fd445fc10a71e0b333261 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Fri, 8 Apr 2022 10:00:46 -0500
Subject: [PATCH] Replace segmented-control with implementation using
 button-group

- Use in ci_cd_analytics_chart
- We are planning to move this new component to GitLab UI
  https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1787
---
 .../ci_cd_analytics_charts.vue                |  10 +-
 .../segmented_control_button_group.vue        |  35 ++++++
 .../components/ci_cd_analytics_charts_spec.js |   6 +-
 .../segmented_control_button_group_spec.js    | 104 ++++++++++++++++++
 4 files changed, 149 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue
 create mode 100644 spec/frontend/vue_shared/components/segmented_control_button_group_spec.js

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 8b76af05ffe8f9..6a03e38a31de02 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 00000000000000..f50706b6de89c8
--- /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>
diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
index cafb3f231bd1ee..7bb289408b8060 100644
--- a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
@@ -1,8 +1,8 @@
 import { nextTick } from 'vue';
-import { GlSegmentedControl } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue';
 import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue';
+import SegmentedControlButtonGroup from '~/vue_shared/components/segmented_control_button_group.vue';
 import { transformedAreaChartData, chartOptions } from '../mock_data';
 
 const DEFAULT_PROPS = {
@@ -48,7 +48,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', (
   });
 
   const findMetricsSlot = () => wrapper.findByTestId('metrics-slot');
-  const findSegmentedControl = () => wrapper.findComponent(GlSegmentedControl);
+  const findSegmentedControl = () => wrapper.findComponent(SegmentedControlButtonGroup);
 
   describe('segmented control', () => {
     beforeEach(() => {
@@ -56,7 +56,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', (
     });
 
     it('should default to the first chart', () => {
-      expect(findSegmentedControl().props('checked')).toBe(0);
+      expect(findSegmentedControl().props('value')).toBe(0);
     });
 
     it('should use the title and index as values', () => {
diff --git a/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js b/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js
new file mode 100644
index 00000000000000..88445b6684ce8c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js
@@ -0,0 +1,104 @@
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import SegmentedControlButtonGroup from '~/vue_shared/components/segmented_control_button_group.vue';
+
+const DEFAULT_OPTIONS = [
+  { text: 'Lorem', value: 'abc' },
+  { text: 'Ipsum', value: 'def' },
+  { text: 'Foo', value: 'x', disabled: true },
+  { text: 'Dolar', value: 'ghi' },
+];
+
+describe('~/vue_shared/components/segmented_control_button_group.vue', () => {
+  let wrapper;
+
+  const createComponent = (props = {}, scopedSlots = {}) => {
+    wrapper = shallowMount(SegmentedControlButtonGroup, {
+      propsData: {
+        value: DEFAULT_OPTIONS[0].value,
+        options: DEFAULT_OPTIONS,
+        ...props,
+      },
+      scopedSlots,
+    });
+  };
+
+  const findButtonGroup = () => wrapper.findComponent(GlButtonGroup);
+  const findButtons = () => findButtonGroup().findAllComponents(GlButton);
+  const findButtonsData = () =>
+    findButtons().wrappers.map((x) => ({
+      selected: x.props('selected'),
+      text: x.text(),
+      disabled: x.props('disabled'),
+    }));
+  const findButtonWithText = (text) => findButtons().wrappers.find((x) => x.text() === text);
+
+  const optionsAsButtonData = (options) =>
+    options.map(({ text, disabled = false }) => ({
+      selected: false,
+      text,
+      disabled,
+    }));
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders button group', () => {
+      expect(findButtonGroup().exists()).toBe(true);
+    });
+
+    it('renders buttons', () => {
+      const expectation = optionsAsButtonData(DEFAULT_OPTIONS);
+      expectation[0].selected = true;
+
+      expect(findButtonsData()).toEqual(expectation);
+    });
+
+    describe.each(DEFAULT_OPTIONS.filter((x) => !x.disabled))(
+      'when button clicked %p',
+      ({ text, value }) => {
+        it('emits input with value', () => {
+          expect(wrapper.emitted('input')).toBeUndefined();
+
+          findButtonWithText(text).vm.$emit('click');
+
+          expect(wrapper.emitted('input')).toEqual([[value]]);
+        });
+      },
+    );
+  });
+
+  const VALUE_TEST_CASES = [0, 1, 3].map((index) => [DEFAULT_OPTIONS[index].value, index]);
+
+  describe.each(VALUE_TEST_CASES)('with value=%s', (value, index) => {
+    it(`renders selected button at ${index}`, () => {
+      createComponent({ value });
+
+      const expectation = optionsAsButtonData(DEFAULT_OPTIONS);
+      expectation[index].selected = true;
+
+      expect(findButtonsData()).toEqual(expectation);
+    });
+  });
+
+  describe('with button-content slot', () => {
+    it('renders button content based on slot', () => {
+      createComponent(
+        {},
+        {
+          'button-content': `<template #button-content="{ text }">In a slot - {{ text }}</template>`,
+        },
+      );
+
+      expect(findButtonsData().map((x) => x.text)).toEqual(
+        DEFAULT_OPTIONS.map((x) => `In a slot - ${x.text}`),
+      );
+    });
+  });
+});
-- 
GitLab