Update styling of date range indicator

Changelog: changed

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

 <script>
-import { GlDaterangePicker, GlSprintf, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlDaterangePicker, GlSprintf } from '@gitlab/ui';
 import { getDayDifference } from '~/lib/utils/datetime_utility';
 import { __, sprintf } from '~/locale';
 import { OFFSET_DATE_BY_ONE } from '../constants';
@@ -8,10 +8,6 @@ export default {
   components: {
     GlDaterangePicker,
     GlSprintf,
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
   },
   props: {
     show: {
@@ -56,7 +52,7 @@ export default {
     return {
       maxDateRangeTooltip: sprintf(
         __(
-          'Showing data for workflow items created in this date range. Date range cannot exceed %{maxDateRange} days.',
+          'Showing data for workflow items created in this date range. Date range limited to %{maxDateRange} days.',
         ),
         {
           maxDateRange: this.maxDateRange,
@@ -94,28 +90,15 @@ export default {
       :max-date-range="maxDateRange"
       :default-max-date="maxDate"
       :same-day-selection="includeSelectedDate"
+      :tooltip="maxDateRangeTooltip"
       theme="animate-picker"
       start-picker-class="js-daterange-picker-from gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-lg-align-items-center gl-lg-mr-3 gl-mb-2 gl-lg-mb-0"
-      end-picker-class="js-daterange-picker-to d-flex flex-column flex-lg-row align-items-lg-center"
+      end-picker-class="js-daterange-picker-to d-flex flex-column flex-lg-row align-items-lg-center gl-mb-2 gl-lg-mb-0"
       label-class="gl-mb-2 gl-lg-mb-0"
-    />
-    <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="n__('1 day selected', '%d days selected', numberOfDays)">
         <template #numberOfDays>{{ numberOfDays }}</template>
       </gl-sprintf>
-      </span>
-      <gl-icon
-        v-gl-tooltip
-        data-testid="helper-icon"
-        :title="maxDateRangeTooltip"
-        name="question"
-        :size="14"
-        class="text-secondary"
-      />
-    </div>
+    </gl-daterange-picker>
   </div>
 </template>

locale/gitlab.pot

@@ -33106,7 +33106,7 @@ msgstr ""
 msgid "Showing data for group '%{group_name}' from Nov 1, 2019 to Dec 31, 2019"
 msgstr ""
 
-msgid "Showing data for workflow items created in this date range. Date range cannot exceed %{maxDateRange} days."
+msgid "Showing data for workflow items created in this date range. Date range limited to %{maxDateRange} days."
 msgstr ""
 
 msgid "Showing graphs based on events of the last %{timerange} days."

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

-import { GlDaterangePicker } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { GlDaterangePicker, GlSprintf } from '@gitlab/ui';
+import { shallowMount, mount } from '@vue/test-utils';
 import { useFakeDate } from 'helpers/fake_date';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import Daterange from '~/analytics/shared/components/daterange.vue';
 
 const defaultProps = {
@@ -15,13 +13,13 @@ describe('Daterange component', () => {
 
   let wrapper;
 
-  const factory = (props = defaultProps) => {
-    wrapper = mount(Daterange, {
+  const factory = (props = defaultProps, mountFn = shallowMount) => {
+    wrapper = mountFn(Daterange, {
       propsData: {
         ...defaultProps,
         ...props,
       },
-      directives: { GlTooltip: createMockDirective() },
+      stubs: { GlSprintf },
     });
   };
 
@@ -29,9 +27,8 @@ describe('Daterange component', () => {
     wrapper.destroy();
   });
 
-  const findDaterangePicker = () => wrapper.find(GlDaterangePicker);
-
-  const findDateRangeIndicator = () => wrapper.find('.daterange-indicator');
+  const findDaterangePicker = () => wrapper.findComponent(GlDaterangePicker);
+  const findDateRangeIndicator = () => wrapper.findComponent(GlSprintf);
 
   describe('template', () => {
     describe('when show is false', () => {
@@ -44,6 +41,7 @@ describe('Daterange component', () => {
     describe('when show is true', () => {
       it('renders the daterange picker', () => {
         factory({ show: true });
+
         expect(findDaterangePicker().exists()).toBe(true);
       });
     });
@@ -54,14 +52,12 @@ describe('Daterange component', () => {
         const endDate = new Date('2019-09-30');
         const minDate = new Date('2019-06-01');
 
-        factory({ show: true, startDate, endDate, minDate });
-
+        factory({ show: true, startDate, endDate, minDate }, mount);
         const input = findDaterangePicker().find('input');
 
         input.setValue('2019-01-01');
-        input.trigger('change');
+        await input.trigger('change');
 
-        await nextTick();
         expect(wrapper.emitted().change).toEqual([[{ startDate: minDate, endDate }]]);
       });
     });
@@ -76,16 +72,13 @@ describe('Daterange component', () => {
       });
 
       it('displays the correct number of selected days in the indicator', () => {
-        expect(findDateRangeIndicator().find('span').text()).toBe('10 days selected');
+        expect(findDateRangeIndicator().text()).toMatchInterpolatedText('10 days selected');
       });
 
-      it('displays a tooltip', () => {
-        const icon = wrapper.find('[data-testid="helper-icon"]');
-        const tooltip = getBinding(icon.element, 'gl-tooltip');
-
-        expect(tooltip).toBeDefined();
-        expect(icon.attributes('title')).toBe(
-          'Showing data for workflow items created in this date range. Date range cannot exceed 30 days.',
+      it('sets the tooltip', () => {
+        const tooltip = findDaterangePicker().props('tooltip');
+        expect(tooltip).toBe(
+          'Showing data for workflow items created in this date range. Date range limited to 30 days.',
         );
       });
     });