Add description to Deployment Frequency charts

This commit updates the project Deployment Frequency charts to include a
line of text that describes the feature, its limitations, and includes a
link to the documentation.

ee/app/assets/javascripts/projects/pipelines/charts/components/deployment_frequency_charts.vue

 <script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
 import Api from 'ee/api';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import * as Sentry from '~/sentry/wrapper';
 import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
-import { allChartDefinitions, areaChartOptions } from './static_data';
+import {
+  allChartDefinitions,
+  areaChartOptions,
+  chartDescriptionText,
+  chartDocumentationHref,
+} from './static_data';
 import { apiDataToChartSeries } from './util';
 import { LAST_WEEK, LAST_MONTH, LAST_90_DAYS } from './constants';
 
 export default {
   name: 'DeploymentFrequencyCharts',
   components: {
+    GlLink,
+    GlSprintf,
     CiCdAnalyticsAreaChart,
   },
   inject: {
@@ -56,11 +64,23 @@ export default {
   },
   allChartDefinitions,
   areaChartOptions,
+  chartDescriptionText,
+  chartDocumentationHref,
 };
 </script>
 <template>
   <div>
     <h4 class="gl-my-4">{{ s__('DeploymentFrequencyCharts|Deployments charts') }}</h4>
+    <p data-testid="help-text">
+      <gl-sprintf :message="$options.chartDescriptionText">
+        <template #code="{ content }">
+          <code>{{ content }}</code>
+        </template>
+      </gl-sprintf>
+      <gl-link :href="$options.chartDocumentationHref">
+        {{ __('Learn more.') }}
+      </gl-link>
+    </p>
     <ci-cd-analytics-area-chart
       v-for="chart of $options.allChartDefinitions"
       :key="chart.id"

ee/app/assets/javascripts/projects/pipelines/charts/components/static_data.js

 import dateFormat from 'dateformat';
 import { s__, sprintf } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { nDaysBefore, nMonthsBefore } from '~/lib/utils/datetime_utility';
 import { LAST_WEEK, LAST_MONTH, LAST_90_DAYS } from './constants';
 
@@ -84,3 +85,11 @@ export const areaChartOptions = {
     minInterval: 1,
   },
 };
+
+export const chartDescriptionText = s__(
+  'DeploymentFrequencyCharts|These charts display the frequency of deployments to the production environment, as part of the DORA 4 metrics. The environment must be named %{codeStart}production%{codeEnd} for its data to appear in these charts.',
+);
+
+export const chartDocumentationHref = helpPagePath('user/analytics/ci_cd_analytics.html', {
+  anchor: 'deployment-frequency-charts',
+});

ee/changelogs/unreleased/nfriend-add-note-about-environment-name.yml

+---
+title: Add description text to Deployment Frequency charts
+merge_request: 51250
+author:
+type: added

ee/spec/frontend/projects/pipelines/charts/components/deployment_frequency_charts_spec.js

+import { GlSprintf, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { useFakeDate } from 'helpers/fake_date';
@@ -44,6 +45,7 @@ describe('ee_component/projects/pipelines/charts/components/deployment_frequency
       provide: {
         projectPath: 'test/project',
       },
+      stubs: { GlSprintf },
     });
   };
 
@@ -68,6 +70,9 @@ describe('ee_component/projects/pipelines/charts/components/deployment_frequency
     mock.restore();
   });
 
+  const findHelpText = () => wrapper.find('[data-testid="help-text"]');
+  const findDocLink = () => findHelpText().find(GlLink);
+
   describe('when there are no network errors', () => {
     beforeEach(async () => {
       mock = new MockAdapter(axios);
@@ -94,6 +99,18 @@ describe('ee_component/projects/pipelines/charts/components/deployment_frequency
     it('does not show a flash message', () => {
       expect(createFlash).not.toHaveBeenCalled();
     });
+
+    it('renders description text', () => {
+      expect(findHelpText().text()).toMatchInterpolatedText(
+        'These charts display the frequency of deployments to the production environment, as part of the DORA 4 metrics. The environment must be named production for its data to appear in these charts. Learn more.',
+      );
+    });
+
+    it('renders a link to the documentation', () => {
+      expect(findDocLink().attributes().href).toBe(
+        '/help/user/analytics/ci_cd_analytics.html#deployment-frequency-charts',
+      );
+    });
   });
 
   describe('when there are network errors', () => {

locale/gitlab.pot

@@ -9760,6 +9760,9 @@ msgstr ""
 msgid "DeploymentFrequencyCharts|Something went wrong while getting deployment frequency data"
 msgstr ""
 
+msgid "DeploymentFrequencyCharts|These charts display the frequency of deployments to the production environment, as part of the DORA 4 metrics. The environment must be named %{codeStart}production%{codeEnd} for its data to appear in these charts."
+msgstr ""
+
 msgid "Deployments"
 msgstr ""