Add stage dropdown filter for Cycle Analytics scatter chart

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_dropdown_filter.vue

+<script>
+import { sprintf, s__, n__ } from '~/locale';
+import $ from 'jquery';
+import _ from 'underscore';
+import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton } from '@gitlab/ui';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+
+export default {
+  name: 'StageDropdownFilter',
+  components: {
+    Icon,
+    GlButton,
+  },
+  props: {
+    stages: {
+      type: Array,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: false,
+      default: s__('CycleAnalytics|stage dropdown'),
+    },
+  },
+  data() {
+    return {
+      selectedStages: [],
+    };
+  },
+  computed: {
+    selectedStagesLabel() {
+      return this.selectedStages.length
+        ? sprintf(
+            n__(
+              'CycleAnalytics|%{stageName}',
+              'CycleAnalytics|%d stages selected',
+              this.selectedStages.length,
+            ),
+            { stageName: capitalizeFirstCharacter(this.selectedStages[0].name) },
+          )
+        : s__('CycleAnalytics|All stages');
+    },
+  },
+  mounted() {
+    $(this.$refs.stagesDropdown).glDropdown({
+      selectable: true,
+      multiSelect: true,
+      clicked: this.onClick.bind(this),
+      data: this.formatData.bind(this),
+      renderRow: group => this.rowTemplate(group),
+      text: stage => stage.name,
+    });
+  },
+  methods: {
+    setSelectedStages(selectedObj, isMarking) {
+      this.selectedStages = isMarking
+        ? this.selectedStages.concat([selectedObj])
+        : this.selectedStages.filter(stage => stage.name !== selectedObj.name);
+    },
+    onClick({ selectedObj, e, isMarking }) {
+      e.preventDefault();
+      this.setSelectedStages(selectedObj, isMarking);
+      this.$emit('selected', this.selectedStages);
+    },
+    formatData(term, callback) {
+      callback(this.stages);
+    },
+    rowTemplate(stage) {
+      return `
+          <li>
+            <a href='#' class='dropdown-menu-link'>
+              ${_.escape(capitalizeFirstCharacter(stage.name))}
+            </a>
+          </li>
+        `;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div ref="stagesDropdown" class="dropdown dropdown-stages">
+      <gl-button
+        class="dropdown-menu-toggle wide shadow-none bg-white"
+        type="button"
+        data-toggle="dropdown"
+        aria-expanded="false"
+        :aria-label="label"
+      >
+        {{ selectedStagesLabel }}
+        <icon name="chevron-down" />
+      </gl-button>
+      <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
+        <div class="dropdown-title text-left">{{ s__('CycleAnalytics|Stages') }}</div>
+        <div class="dropdown-content"></div>
+      </div>
+    </div>
+  </div>
+</template>

ee/spec/frontend/analytics/cycle_analytics/components/stage_dropdown_filter_spec.js

+import { shallowMount } from '@vue/test-utils';
+import $ from 'jquery';
+import 'bootstrap';
+import '~/gl_dropdown';
+import StageDropdownFilter from 'ee/analytics/cycle_analytics/components/stage_dropdown_filter.vue';
+
+jest.mock('~/api', () => ({
+  groupProjects: jest.fn(),
+}));
+
+const stages = [
+  {
+    name: 'issue',
+  },
+  {
+    name: 'plan',
+  },
+  {
+    name: 'code',
+  },
+];
+
+describe('StageDropdownFilter component', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(StageDropdownFilter, {
+      sync: false,
+      propsData: {
+        stages,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  beforeEach(() => {
+    createComponent({ multiSelect: false });
+  });
+
+  const findDropdown = () => wrapper.find('.dropdown');
+  const openDropdown = () => {
+    $(findDropdown().element)
+      .parent()
+      .trigger('shown.bs.dropdown');
+  };
+  const findDropdownItems = () => findDropdown().findAll('a');
+
+  describe('on stage click', () => {
+    beforeEach(() => {
+      openDropdown();
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('should add to selection when new stage is clicked', () => {
+      findDropdownItems()
+        .at(0)
+        .trigger('click');
+
+      findDropdownItems()
+        .at(1)
+        .trigger('click');
+
+      expect(wrapper.emittedByOrder()).toEqual([
+        {
+          name: 'selected',
+          args: [[stages[0]]],
+        },
+        {
+          name: 'selected',
+          args: [[stages[0], stages[1]]],
+        },
+      ]);
+    });
+
+    it('should remove from selection when clicked again', () => {
+      const item = findDropdownItems().at(0);
+
+      item.trigger('click');
+      item.trigger('click');
+
+      expect(wrapper.emittedByOrder()).toEqual([
+        {
+          name: 'selected',
+          args: [[stages[0]]],
+        },
+        {
+          name: 'selected',
+          args: [[]],
+        },
+      ]);
+    });
+  });
+});

locale/gitlab.pot

@@ -4368,12 +4368,26 @@ msgid_plural "CycleAnalytics|%d projects selected"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "CycleAnalytics|%{stageName}"
+msgid_plural "CycleAnalytics|%d stages selected"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "CycleAnalytics|All stages"
+msgstr ""
+
+msgid "CycleAnalytics|Stages"
+msgstr ""
+
 msgid "CycleAnalytics|group dropdown filter"
 msgstr ""
 
 msgid "CycleAnalytics|project dropdown filter"
 msgstr ""
 
+msgid "CycleAnalytics|stage dropdown"
+msgstr ""
+
 msgid "DNS"
 msgstr ""