Improve VSM date tooltip

Add copy to the tooltip which more
accurately describes how data is collected.

Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/62194
EE: true

doc/user/group/value_stream_analytics/index.md

@@ -65,7 +65,7 @@ To filter results:
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13216) in GitLab 12.4.
 
-GitLab provides the ability to filter analytics based on a date range. To filter results:
+GitLab provides the ability to filter analytics based on a date range. Data is shown for workflow items created during the selected date range. To filter results:
 
 1. Select a group.
 1. Optionally select a project.

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

@@ -54,9 +54,14 @@ export default {
   },
   data() {
     return {
-      maxDateRangeTooltip: sprintf(__('Date range cannot exceed %{maxDateRange} days.'), {
-        maxDateRange: this.maxDateRange,
-      }),
+      maxDateRangeTooltip: sprintf(
+        __(
+          'Showing data for workflow items created in this date range. Date range cannot exceed %{maxDateRange} days.',
+        ),
+        {
+          maxDateRange: this.maxDateRange,
+        },
+      ),
     };
   },
   computed: {
@@ -105,6 +110,7 @@ export default {
       </span>
       <gl-icon
         v-gl-tooltip
+        data-testid="helper-icon"
         :title="maxDateRangeTooltip"
         name="question"
         :size="14"

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

@@ -2,6 +2,7 @@ import { GlDaterangePicker } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Daterange from 'ee/analytics/shared/components/daterange.vue';
 import { useFakeDate } from 'helpers/fake_date';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 const defaultProps = {
   startDate: new Date(2019, 8, 1),
@@ -19,6 +20,7 @@ describe('Daterange component', () => {
         ...defaultProps,
         ...props,
       },
+      directives: { GlTooltip: createMockDirective() },
     });
   };
 
@@ -76,6 +78,16 @@ describe('Daterange component', () => {
       it('displays the correct number of selected days in the indicator', () => {
         expect(findDateRangeIndicator().find('span').text()).toBe('10 days');
       });
+
+      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.',
+        );
+      });
     });
   });
 

locale/gitlab.pot

@@ -10437,9 +10437,6 @@ msgstr ""
 msgid "Date range"
 msgstr ""
 
-msgid "Date range cannot exceed %{maxDateRange} days."
-msgstr ""
-
 msgid "Date range must be shorter than %{max_range} days."
 msgstr ""
 
@@ -30192,6 +30189,9 @@ msgstr ""
 msgid "Showing all issues"
 msgstr ""
 
+msgid "Showing data for workflow items created in this date range. Date range cannot exceed %{maxDateRange} days."
+msgstr ""
+
 msgid "Showing graphs based on events of the last %{timerange} days."
 msgstr ""