Default cycle analytics duration chart stage filter to all items selected

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

 <script>
-import { sprintf, s__, n__ } from '~/locale';
+import { sprintf, s__ } 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',
@@ -25,21 +24,26 @@ export default {
   },
   data() {
     return {
-      selectedStages: [],
+      selectedStages: this.stages,
     };
   },
   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');
+      const { stages, selectedStages } = this;
+
+      if (selectedStages.length === stages.length) {
+        return s__('CycleAnalytics|All stages');
+      }
+      if (selectedStages.length > 1) {
+        return sprintf(s__('CycleAnalytics|%{stageCount} stages selected'), {
+          stageCount: selectedStages.length,
+        });
+      }
+      if (selectedStages.length === 1) {
+        return selectedStages[0].title;
+      }
+
+      return s__('CycleAnalytics|No stages selected');
     },
   },
   mounted() {
@@ -49,14 +53,14 @@ export default {
       clicked: this.onClick.bind(this),
       data: this.formatData.bind(this),
       renderRow: group => this.rowTemplate(group),
-      text: stage => stage.name,
+      text: stage => stage.title,
     });
   },
   methods: {
     setSelectedStages(selectedObj, isMarking) {
       this.selectedStages = isMarking
         ? this.selectedStages.concat([selectedObj])
-        : this.selectedStages.filter(stage => stage.name !== selectedObj.name);
+        : this.selectedStages.filter(stage => stage.title !== selectedObj.title);
     },
     onClick({ selectedObj, e, isMarking }) {
       e.preventDefault();
@@ -69,8 +73,8 @@ export default {
     rowTemplate(stage) {
       return `
           <li>
-            <a href='#' class='dropdown-menu-link'>
-              ${_.escape(capitalizeFirstCharacter(stage.name))}
+            <a href='#' class='dropdown-menu-link is-active'>
+              ${_.escape(stage.title)}
             </a>
           </li>
         `;

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

@@ -10,13 +10,13 @@ jest.mock('~/api', () => ({
 
 const stages = [
   {
-    name: 'issue',
+    title: 'Issue',
   },
   {
-    name: 'plan',
+    title: 'Plan',
   },
   {
-    name: 'code',
+    title: 'Code',
   },
 ];
 
@@ -34,10 +34,11 @@ describe('StageDropdownFilter component', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
   });
 
   beforeEach(() => {
-    createComponent({ multiSelect: false });
+    createComponent();
   });
 
   const findDropdown = () => wrapper.find('.dropdown');
@@ -55,43 +56,42 @@ describe('StageDropdownFilter component', () => {
       return wrapper.vm.$nextTick();
     });
 
-    it('should add to selection when new stage is clicked', () => {
-      findDropdownItems()
-        .at(0)
-        .trigger('click');
+    describe('clicking a selected stage', () => {
+      it('should remove from selection', () => {
+        const item = findDropdownItems().at(0);
 
-      findDropdownItems()
-        .at(1)
-        .trigger('click');
+        item.trigger('click');
 
         expect(wrapper.emittedByOrder()).toEqual([
           {
             name: 'selected',
-          args: [[stages[0]]],
-        },
-        {
-          name: 'selected',
-          args: [[stages[0], stages[1]]],
+            args: [[stages[1], stages[2]]],
           },
         ]);
       });
+    });
 
-    it('should remove from selection when clicked again', () => {
-      const item = findDropdownItems().at(0);
+    describe('clicking a deselected stage', () => {
+      it('should add to selection', () => {
+        findDropdownItems()
+          .at(0)
+          .trigger('click');
 
-      item.trigger('click');
-      item.trigger('click');
+        findDropdownItems()
+          .at(0)
+          .trigger('click');
 
         expect(wrapper.emittedByOrder()).toEqual([
           {
             name: 'selected',
-          args: [[stages[0]]],
+            args: [[stages[1], stages[2]]],
           },
           {
             name: 'selected',
-          args: [[]],
+            args: [[stages[1], stages[2], stages[0]]],
           },
         ]);
       });
     });
+  });
 });

locale/gitlab.pot

@@ -5257,14 +5257,15 @@ 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|%{stageCount} stages selected"
+msgstr ""
 
 msgid "CycleAnalytics|All stages"
 msgstr ""
 
+msgid "CycleAnalytics|No stages selected"
+msgstr ""
+
 msgid "CycleAnalytics|Stages"
 msgstr ""