Merge branch...

Merge branch '33169-fe-productivity-analytics-no-labels-on-the-last-column-of-the-column-chart' into 'master'

Resolve "[FE] Productivity Analytics: No labels on the last column of the column chart"

Closes #33169

See merge request gitlab-org/gitlab!18052

ee/app/assets/javascripts/analytics/productivity_analytics/index.js

@@ -20,6 +20,7 @@ export default () => {
   const appContainer = container.querySelector('.js-productivity-analytics-app-container');
 
   const { endpoint, emptyStateSvgPath, noAccessSvgPath } = appContainer.dataset;
+  const { startDate: minDate } = timeframeContainer.dataset;
 
   const now = new Date(Date.now());
   const defaultStartDate = getDateInPast(now, defaultDaysInPast);
@@ -97,6 +98,7 @@ export default () => {
           show: this.groupNamespace !== null,
           startDate: defaultStartDate,
           endDate: defaultEndDate,
+          minDate: minDate ? new Date(minDate) : null,
         },
         on: {
           change: this.onDateRangeChange,

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

@@ -21,6 +21,11 @@ export default {
       required: false,
       default: null,
     },
+    minDate: {
+      type: Date,
+      rerquired: false,
+      default: null,
+    },
   },
   computed: {
     dateRange: {
@@ -44,6 +49,7 @@ export default {
       class="d-flex flex-column flex-lg-row"
       :default-start-date="startDate"
       :default-end-date="endDate"
+      :default-min-date="minDate"
       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"

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

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Daterange from 'ee/analytics/shared/components/daterange.vue';
 import { GlDaterangePicker } from '@gitlab/ui';
 
@@ -11,7 +11,7 @@ describe('Daterange component', () => {
   let wrapper;
 
   const factory = (props = defaultProps) => {
-    wrapper = shallowMount(Daterange, {
+    wrapper = mount(Daterange, {
       propsData: {
         ...defaultProps,
         ...props,
@@ -43,6 +43,28 @@ describe('Daterange component', () => {
         expect(findDaterangePicker().exists()).toBe(true);
       });
     });
+
+    describe('with a minDate being set', () => {
+      it('emits the change event with the minDate when the user enters a start date before the minDate', () => {
+        const startDate = new Date('2019-09-01');
+        const endDate = new Date('2019-09-30');
+        const minDate = new Date('2019-06-01');
+
+        factory({ show: true, startDate, endDate, minDate });
+
+        const input = findDaterangePicker().find('input');
+
+        input.setValue('2019-01-01');
+        input.trigger('change');
+
+        expect(wrapper.emittedByOrder()).toEqual([
+          {
+            name: 'change',
+            args: [{ startDate: minDate, endDate }],
+          },
+        ]);
+      });
+    });
   });
 
   describe('computed', () => {