Add limit to daterange component

This commit adds a range limit to the shared analytics
daterange component.

It also adds a date range indicator which displays the
number of days in the currently selected range.

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

@@ -8,7 +8,7 @@ import { PROJECTS_PER_PAGE, DEFAULT_DAYS_IN_PAST } from '../constants';
 import GroupsDropdownFilter from '../../shared/components/groups_dropdown_filter.vue';
 import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
 import Scatterplot from '../../shared/components/scatterplot.vue';
-import { LAST_ACTIVITY_AT, dateFormats } from '../../shared/constants';
+import { LAST_ACTIVITY_AT, dateFormats, DATE_RANGE_LIMIT } from '../../shared/constants';
 import DateRange from '../../shared/components/daterange.vue';
 import StageDropdownFilter from './stage_dropdown_filter.vue';
 import SummaryTable from './summary_table.vue';
@@ -195,6 +195,7 @@ export default {
     order_by: LAST_ACTIVITY_AT,
   },
   durationChartTooltipDateFormat: dateFormats.defaultDate,
+  maxDateRange: DATE_RANGE_LIMIT,
 };
 </script>
 
@@ -228,6 +229,7 @@ export default {
           <date-range
             :start-date="startDate"
             :end-date="endDate"
+            :max-date-range="$options.maxDateRange"
             class="js-daterange-picker"
             @change="setDateRange"
           />

ee/app/assets/javascripts/analytics/shared/components/daterange.vue

 <script>
-import { GlDaterangePicker } from '@gitlab/ui';
+import { GlDaterangePicker, GlSprintf, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { getDayDifference } from '~/lib/utils/datetime_utility';
+import { __, sprintf } from '~/locale';
 
 export default {
   components: {
     GlDaterangePicker,
+    GlSprintf,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     show: {
@@ -26,6 +33,18 @@ export default {
       rerquired: false,
       default: null,
     },
+    maxDateRange: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      maxDateRangeTooltip: sprintf(__('Date range cannot exceed %{maxDateRange} days.'), {
+        maxDateRange: this.maxDateRange,
+      }),
+    };
   },
   computed: {
     dateRange: {
@@ -36,6 +55,9 @@ export default {
         this.$emit('change', { startDate, endDate });
       },
     },
+    numberOfDays() {
+      return getDayDifference(this.startDate, this.endDate);
+    },
   },
 };
 </script>
@@ -50,9 +72,27 @@ export default {
       :default-start-date="startDate"
       :default-end-date="endDate"
       :default-min-date="minDate"
+      :max-date-range="maxDateRange"
       theme="animate-picker"
       start-picker-class="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-2 mb-2 mb-md-0"
       end-picker-class="d-flex flex-column flex-lg-row align-items-lg-center"
     />
+    <div
+      v-if="maxDateRange"
+      class="daterange-indicator d-flex flex-row flex-lg-row align-items-flex-start align-items-lg-center"
+    >
+      <span class="number-of-days pl-2 pr-1">
+        <gl-sprintf message="%{numberOfDays} days">
+          <template #numberOfDays>{{ numberOfDays }}</template>
+        </gl-sprintf>
+      </span>
+      <gl-icon
+        v-gl-tooltip
+        :title="maxDateRangeTooltip"
+        name="question"
+        :size="14"
+        class="text-secondary"
+      />
+    </div>
   </div>
 </template>

ee/app/assets/javascripts/analytics/shared/constants.js

@@ -15,3 +15,5 @@ export const scatterChartLineProps = {
 };
 
 export const LAST_ACTIVITY_AT = 'last_activity_at';
+
+export const DATE_RANGE_LIMIT = 180;

ee/app/assets/stylesheets/pages/cycle_analytics.scss

@@ -14,3 +14,16 @@
     }
   }
 }
+
+.daterange-indicator {
+  @include media-breakpoint-down(md) {
+    .number-of-days {
+      padding-left: 0.25rem !important;
+      margin-top: 0.25rem;
+    }
+
+    svg {
+      margin-top: 0.45rem;
+    }
+  }
+}

ee/spec/frontend/analytics/shared/components/daterange_spec.js

@@ -29,6 +29,8 @@ describe('Daterange component', () => {
 
   const findDaterangePicker = () => wrapper.find(GlDaterangePicker);
 
+  const findDateRangeIndicator = () => wrapper.find('.daterange-indicator');
+
   describe('template', () => {
     describe('when show is false', () => {
       it('does not render the daterange picker', () => {
@@ -67,6 +69,24 @@ describe('Daterange component', () => {
         });
       });
     });
+
+    describe('with a maxDateRange being set', () => {
+      beforeEach(() => {
+        factory({ maxDateRange: 30 });
+      });
+
+      it('displays the max date range indicator', () => {
+        expect(findDateRangeIndicator().exists()).toBe(true);
+      });
+
+      it('displays the correct number of selected days in the indicator', () => {
+        expect(
+          findDateRangeIndicator()
+            .find('span')
+            .text(),
+        ).toBe('10 days');
+      });
+    });
   });
 
   describe('computed', () => {

locale/gitlab.pot

@@ -5963,6 +5963,9 @@ msgstr ""
 msgid "Date picker"
 msgstr ""
 
+msgid "Date range cannot exceed %{maxDateRange} days."
+msgstr ""
+
 msgid "DayTitle|F"
 msgstr ""