Roadmap - Introduce progress tracking setting

Review feedback

ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue

@@ -8,7 +8,7 @@ import {
   PRESET_TYPES,
   SMALL_TIMELINE_BAR,
   TIMELINE_CELL_MIN_WIDTH,
-  PROGRESS_TRACKING_OPTIONS,
+  PROGRESS_COUNT,
 } from '../constants';
 import CommonMixin from '../mixins/common_mixin';
 
@@ -79,7 +79,7 @@ export default {
       return this.isTimelineBarSmall ? '...' : this.epic.title;
     },
     progressTrackingIsCount() {
-      return this.progressTracking === PROGRESS_TRACKING_OPTIONS.COUNT;
+      return this.progressTracking === PROGRESS_COUNT;
     },
     epicDescendants() {
       return this.progressTrackingIsCount
@@ -99,25 +99,25 @@ export default {
         : 0;
     },
     epicPercentageText() {
-      return sprintf(__(`%{percentage}%% %{trackingOption}`), {
-        percentage: this.epicPercentage,
-        trackingOption: this.trackingOptionText,
-      });
+      const str = this.progressTrackingIsCount
+        ? __('%{percentage}%% issues closed')
+        : __('%{percentage}%% weight completed');
+      return sprintf(str, { percentage: this.epicPercentage });
     },
+
     popoverText() {
       if (this.epicDescendants) {
-        return sprintf(__('%{completed} of %{total} %{trackingOption}'), {
+        const str = this.progressTrackingIsCount
+          ? __('%{completed} of %{total} issues closed')
+          : __('%{completed} of %{total} weight completed');
+        return sprintf(str, {
           completed: this.epicDescendants.closedIssues,
           total: this.epicTotal,
-          trackingOption: this.trackingOptionText,
         });
       }
-      return sprintf(__('- of - %{trackingOption}'), {
-        trackingOption: this.trackingOptionText,
-      });
-    },
-    trackingOptionText() {
-      return this.progressTrackingIsCount ? __('issues closed') : __('weight completed');
+      return this.progressTrackingIsCount
+        ? __('- of - issues closed')
+        : __('- of - weight completed');
     },
     progressIcon() {
       return this.progressTrackingIsCount ? 'issue-closed' : 'weight';

ee/app/assets/javascripts/roadmap/components/roadmap_progress_tracking.vue

@@ -12,12 +12,6 @@ export default {
   },
   computed: {
     ...mapState(['progressTracking']),
-    availableOptions() {
-      const weight = { text: __('Use issue weight'), value: PROGRESS_TRACKING_OPTIONS.WEIGHT };
-      const count = { text: __('Use issue count'), value: PROGRESS_TRACKING_OPTIONS.COUNT };
-
-      return [weight, count];
-    },
   },
   methods: {
     ...mapActions(['setProgressTracking']),
@@ -30,6 +24,7 @@ export default {
   i18n: {
     header: __('Progress tracking'),
   },
+  PROGRESS_TRACKING_OPTIONS,
 };
 </script>
 
@@ -43,7 +38,7 @@ export default {
       <gl-form-radio-group
         :checked="progressTracking"
         stacked
-        :options="availableOptions"
+        :options="$options.PROGRESS_TRACKING_OPTIONS"
         @change="handleProgressTrackingChange"
       />
     </gl-form-group>

ee/app/assets/javascripts/roadmap/constants.js

-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 /*
   Update the counterparts in roadmap.scss when making changes.
@@ -62,7 +62,20 @@ export const EPIC_LEVEL_MARGIN = {
 
 export const ROADMAP_PAGE_SIZE = 50;
 
-export const PROGRESS_TRACKING_OPTIONS = {
-  WEIGHT: 'WEIGHT',
-  COUNT: 'COUNT',
-};
+export const PROGRESS_WEIGHT = 'WEIGHT';
+export const PROGRESS_COUNT = 'COUNT';
+
+export const PROGRESS_TRACKING_OPTIONS = [
+  { text: __('Use issue weight'), value: PROGRESS_WEIGHT },
+  { text: __('Use issue count'), value: PROGRESS_COUNT },
+];
+
+export const UNSUPPORTED_ROADMAP_PARAMS = [
+  'scope',
+  'utf8',
+  'state',
+  'sort',
+  'timeframe_range_type',
+  'layout',
+  'progress',
+];

ee/app/assets/javascripts/roadmap/roadmap_bundle.js

@@ -11,7 +11,7 @@ import EpicItem from './components/epic_item.vue';
 import EpicItemContainer from './components/epic_item_container.vue';
 
 import roadmapApp from './components/roadmap_app.vue';
-import { DATE_RANGES } from './constants';
+import { DATE_RANGES, PROGRESS_WEIGHT, UNSUPPORTED_ROADMAP_PARAMS } from './constants';
 
 import createStore from './store';
 import {
@@ -74,15 +74,7 @@ export default () => {
       });
       const filterParams = {
         ...convertObjectPropsToCamelCase(rawFilterParams, {
-          dropKeys: [
-            'scope',
-            'utf8',
-            'state',
-            'sort',
-            'timeframe_range_type',
-            'layout',
-            'progress',
-          ], // These keys are unsupported/unnecessary
+          dropKeys: UNSUPPORTED_ROADMAP_PARAMS,
         }),
         // We shall put parsed value of `confidential` only
         // when it is defined.
@@ -111,7 +103,7 @@ export default () => {
         timeframeRangeType,
         presetType,
         timeframe,
-        progressTracking: rawFilterParams.progress,
+        progressTracking: rawFilterParams.progress || PROGRESS_WEIGHT,
       };
     },
     created() {

ee/spec/frontend/roadmap/components/epic_item_timeline_spec.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import EpicItemTimeline from 'ee/roadmap/components/epic_item_timeline.vue';
-import { DATE_RANGES, PRESET_TYPES, PROGRESS_TRACKING_OPTIONS } from 'ee/roadmap/constants';
+import { DATE_RANGES, PRESET_TYPES, PROGRESS_COUNT, PROGRESS_WEIGHT } from 'ee/roadmap/constants';
 import createStore from 'ee/roadmap/store';
 import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
 import { mockTimeframeInitialDate, mockFormattedEpic } from 'ee_jest/roadmap/mock_data';
@@ -22,7 +22,7 @@ const createComponent = ({
   timeframe = mockTimeframeMonths,
   timeframeItem = mockTimeframeMonths[0],
   timeframeString = '',
-  progressTracking = PROGRESS_TRACKING_OPTIONS.WEIGHT,
+  progressTracking = PROGRESS_WEIGHT,
 } = {}) => {
   const store = createStore();
 
@@ -76,9 +76,9 @@ describe('EpicItemTimelineComponent', () => {
     });
 
     it.each`
-      progressTracking | icon
-      ${'WEIGHT'}      | ${'weight'}
-      ${'COUNT'}       | ${'issue-closed'}
+      progressTracking   | icon
+      ${PROGRESS_WEIGHT} | ${'weight'}
+      ${PROGRESS_COUNT}  | ${'issue-closed'}
     `(
       'displays icon $icon when progressTracking equals $progressTracking',
       ({ progressTracking, icon }) => {
@@ -97,9 +97,9 @@ describe('EpicItemTimelineComponent', () => {
     });
 
     it.each`
-      progressTracking | option      | text
-      ${'WEIGHT'}      | ${'weight'} | ${'3 of 5 weight completed'}
-      ${'COUNT'}       | ${'issues'} | ${'3 of 5 issues closed'}
+      progressTracking   | option      | text
+      ${PROGRESS_WEIGHT} | ${'weight'} | ${'3 of 5 weight completed'}
+      ${PROGRESS_COUNT}  | ${'issues'} | ${'3 of 5 issues closed'}
     `(
       'shows $option completed when progressTracking equals $progressTracking',
       ({ progressTracking, text }) => {
@@ -110,9 +110,9 @@ describe('EpicItemTimelineComponent', () => {
     );
 
     it.each`
-      progressTracking | option      | text
-      ${'WEIGHT'}      | ${'weight'} | ${'- of - weight completed'}
-      ${'COUNT'}       | ${'issues'} | ${'- of - issues closed'}
+      progressTracking   | option      | text
+      ${PROGRESS_WEIGHT} | ${'weight'} | ${'- of - weight completed'}
+      ${PROGRESS_COUNT}  | ${'issues'} | ${'- of - issues closed'}
     `(
       'shows $option completed with no numbers when there is no $option information and progressTracking equals $progressTracking',
       ({ progressTracking, text }) => {

ee/spec/frontend/roadmap/components/roadmap_filters_spec.js

@@ -3,12 +3,7 @@ import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import RoadmapFilters from 'ee/roadmap/components/roadmap_filters.vue';
-import {
-  PRESET_TYPES,
-  EPICS_STATES,
-  DATE_RANGES,
-  PROGRESS_TRACKING_OPTIONS,
-} from 'ee/roadmap/constants';
+import { PRESET_TYPES, EPICS_STATES, DATE_RANGES, PROGRESS_WEIGHT } from 'ee/roadmap/constants';
 import createStore from 'ee/roadmap/store';
 import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
 import {
@@ -60,7 +55,7 @@ const createComponent = ({
     sortedBy,
     filterParams,
     timeframe,
-    progressTracking: PROGRESS_TRACKING_OPTIONS.WEIGHT,
+    progressTracking: PROGRESS_WEIGHT,
   });
 
   return shallowMountExtended(RoadmapFilters, {

ee/spec/frontend/roadmap/components/roadmap_progress_tracking_spec.js

 import { GlFormGroup, GlFormRadioGroup } from '@gitlab/ui';
 
-import { __ } from '~/locale';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createStore from 'ee/roadmap/store';
 import RoadmapProgressTracking from 'ee/roadmap/components/roadmap_progress_tracking.vue';
-import { PROGRESS_TRACKING_OPTIONS } from 'ee/roadmap/constants';
+import { PROGRESS_WEIGHT, PROGRESS_TRACKING_OPTIONS } from 'ee/roadmap/constants';
 
 describe('RoadmapProgressTracking', () => {
   let wrapper;
 
-  const availableOptions = [
-    { text: __('Use issue weight'), value: PROGRESS_TRACKING_OPTIONS.WEIGHT },
-    { text: __('Use issue count'), value: PROGRESS_TRACKING_OPTIONS.COUNT },
-  ];
-
   const createComponent = () => {
     const store = createStore();
 
     store.dispatch('setInitialData', {
-      progressTracking: PROGRESS_TRACKING_OPTIONS.WEIGHT,
+      progressTracking: PROGRESS_WEIGHT,
     });
 
     wrapper = shallowMountExtended(RoadmapProgressTracking, {
@@ -45,7 +39,7 @@ describe('RoadmapProgressTracking', () => {
 
     it('renders radio form group', () => {
       expect(findFormRadioGroup().exists()).toBe(true);
-      expect(findFormRadioGroup().props('options')).toEqual(availableOptions);
+      expect(findFormRadioGroup().props('options')).toEqual(PROGRESS_TRACKING_OPTIONS);
     });
   });
 });

ee/spec/frontend/roadmap/mixins/months_preset_mixin_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import EpicItemTimelineComponent from 'ee/roadmap/components/epic_item_timeline.vue';
-import { DATE_RANGES, PRESET_TYPES, PROGRESS_TRACKING_OPTIONS } from 'ee/roadmap/constants';
+import { DATE_RANGES, PRESET_TYPES, PROGRESS_WEIGHT } from 'ee/roadmap/constants';
 import createStore from 'ee/roadmap/store';
 import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
 
@@ -28,7 +28,7 @@ describe('MonthsPresetMixin', () => {
     const store = createStore();
 
     store.dispatch('setInitialData', {
-      progressTracking: PROGRESS_TRACKING_OPTIONS.WEIGHT,
+      progressTracking: PROGRESS_WEIGHT,
     });
 
     return shallowMount(EpicItemTimelineComponent, {

ee/spec/frontend/roadmap/mixins/quarters_preset_mixin_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import EpicItemTimelineComponent from 'ee/roadmap/components/epic_item_timeline.vue';
-import { DATE_RANGES, PRESET_TYPES, PROGRESS_TRACKING_OPTIONS } from 'ee/roadmap/constants';
+import { DATE_RANGES, PRESET_TYPES, PROGRESS_WEIGHT } from 'ee/roadmap/constants';
 import createStore from 'ee/roadmap/store';
 import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
 
@@ -28,7 +28,7 @@ describe('QuartersPresetMixin', () => {
     const store = createStore();
 
     store.dispatch('setInitialData', {
-      progressTracking: PROGRESS_TRACKING_OPTIONS.WEIGHT,
+      progressTracking: PROGRESS_WEIGHT,
     });
 
     return shallowMount(EpicItemTimelineComponent, {

ee/spec/frontend/roadmap/mixins/weeks_preset_mixin_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import EpicItemTimelineComponent from 'ee/roadmap/components/epic_item_timeline.vue';
-import { DATE_RANGES, PRESET_TYPES, PROGRESS_TRACKING_OPTIONS } from 'ee/roadmap/constants';
+import { DATE_RANGES, PRESET_TYPES, PROGRESS_WEIGHT } from 'ee/roadmap/constants';
 import createStore from 'ee/roadmap/store';
 import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
 
@@ -28,7 +28,7 @@ describe('WeeksPresetMixin', () => {
     const store = createStore();
 
     store.dispatch('setInitialData', {
-      progressTracking: PROGRESS_TRACKING_OPTIONS.WEIGHT,
+      progressTracking: PROGRESS_WEIGHT,
     });
 
     return shallowMount(EpicItemTimelineComponent, {

ee/spec/frontend/roadmap/store/mutations_spec.js

 import * as types from 'ee/roadmap/store/mutation_types';
 import mutations from 'ee/roadmap/store/mutations';
 
+import { PROGRESS_COUNT } from 'ee/roadmap/constants';
 import defaultState from 'ee/roadmap/store/state';
 import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
 
@@ -345,7 +346,7 @@ describe('Roadmap Store Mutations', () => {
 
   describe('SET_PROGRESS_TRACKING', () => {
     it('Should set `progressTracking` to the state', () => {
-      const progressTracking = 'COUNT';
+      const progressTracking = PROGRESS_COUNT;
       setEpicMockData(state);
 
       mutations[types.SET_PROGRESS_TRACKING](state, progressTracking);

locale/gitlab.pot

@@ -510,7 +510,10 @@ msgstr[1] ""
 msgid "%{completedWeight} of %{totalWeight} weight completed"
 msgstr ""
 
-msgid "%{completed} of %{total} %{trackingOption}"
+msgid "%{completed} of %{total} issues closed"
+msgstr ""
+
+msgid "%{completed} of %{total} weight completed"
 msgstr ""
 
 msgid "%{cores} cores"
@@ -861,7 +864,10 @@ msgstr ""
 msgid "%{openedIssues} open, %{closedIssues} closed"
 msgstr ""
 
-msgid "%{percentage}%% %{trackingOption}"
+msgid "%{percentage}%% issues closed"
+msgstr ""
+
+msgid "%{percentage}%% weight completed"
 msgstr ""
 
 msgid "%{percent}%% complete"
@@ -1290,7 +1296,10 @@ msgid_plural "- Users"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "- of - %{trackingOption}"
+msgid "- of - issues closed"
+msgstr ""
+
+msgid "- of - weight completed"
 msgstr ""
 
 msgid "- show less"
@@ -42845,9 +42854,6 @@ msgstr ""
 msgid "issues at risk"
 msgstr ""
 
-msgid "issues closed"
-msgstr ""
-
 msgid "issues need attention"
 msgstr ""
 
@@ -43802,9 +43808,6 @@ msgstr ""
 msgid "was scheduled to merge after pipeline succeeds by"
 msgstr ""
 
-msgid "weight completed"
-msgstr ""
-
 msgid "wiki page"
 msgstr ""