Refactor documentation links for devops_score

We're replacing the use of HAML's help_page_path
by JS helpPagePath.

app/assets/javascripts/analytics/devops_report/components/devops_score.vue

 <script>
 import { GlBadge, GlTable, GlLink, GlEmptyState } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { sprintf, s__ } from '~/locale';
 import DevopsScoreCallout from './devops_score_callout.vue';
 
@@ -22,9 +23,6 @@ export default {
     devopsScoreMetrics: {
       default: null,
     },
-    devopsReportDocsPath: {
-      default: '',
-    },
     noDataImagePath: {
       default: '',
     },
@@ -42,6 +40,7 @@ export default {
       return this.devopsScoreMetrics.averageScore === undefined;
     },
   },
+  devopsReportDocsPath: helpPagePath('user/admin_area/analytics/dev_ops_report'),
   tableHeaderFields: [
     {
       key: 'title',
@@ -76,7 +75,7 @@ export default {
     >
       <template #description>
         <p class="gl-mb-0">{{ __('It may be several days before you see feature usage data.') }}</p>
-        <gl-link :href="devopsReportDocsPath">{{
+        <gl-link :href="$options.devopsReportDocsPath">{{
           __('See example DevOps Score page in our documentation.')
         }}</gl-link>
       </template>

app/assets/javascripts/analytics/devops_report/devops_score.js

@@ -6,18 +6,12 @@ export default () => {
 
   if (!el) return false;
 
-  const {
-    devopsScoreMetrics,
-    devopsReportDocsPath,
-    noDataImagePath,
-    devopsScoreIntroImagePath,
-  } = el.dataset;
+  const { devopsScoreMetrics, noDataImagePath, devopsScoreIntroImagePath } = el.dataset;
 
   return new Vue({
     el,
     provide: {
       devopsScoreMetrics: JSON.parse(devopsScoreMetrics),
-      devopsReportDocsPath,
       noDataImagePath,
       devopsScoreIntroImagePath,
     },

app/views/admin/dev_ops_report/_report.html.haml

@@ -3,4 +3,4 @@
 - if !service_ping_enabled
   #js-devops-service-ping-disabled{ data: { is_admin: current_user&.admin.to_s, empty_state_svg_path: image_path('illustrations/convdev/convdev_no_index.svg'), enable_service_ping_path: metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), docs_link: help_page_path('development/service_ping/index.md') } }
 - else
-  #js-devops-score{ data: { devops_score_metrics: devops_score_metrics(@metric).to_json, devops_report_docs_path: help_page_path('user/admin_area/analytics/dev_ops_report'), no_data_image_path: image_path('dev_ops_report_no_data.svg'), devops_score_intro_image_path: image_path('dev_ops_report_overview.svg') } }
+  #js-devops-score{ data: { devops_score_metrics: devops_score_metrics(@metric).to_json, no_data_image_path: image_path('dev_ops_report_no_data.svg'), devops_score_intro_image_path: image_path('dev_ops_report_overview.svg') } }

spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js

-import { GlTable, GlBadge, GlEmptyState, GlLink } from '@gitlab/ui';
+import { GlTable, GlBadge, GlEmptyState } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import DevopsScore from '~/analytics/devops_report/components/devops_score.vue';
 import DevopsScoreCallout from '~/analytics/devops_report/components/devops_score_callout.vue';
-import {
-  devopsScoreMetricsData,
-  devopsReportDocsPath,
-  noDataImagePath,
-  devopsScoreTableHeaders,
-} from '../mock_data';
+import { devopsScoreMetricsData, noDataImagePath, devopsScoreTableHeaders } from '../mock_data';
 
 describe('DevopsScore', () => {
   let wrapper;
@@ -19,7 +14,6 @@ describe('DevopsScore', () => {
       mount(DevopsScore, {
         provide: {
           devopsScoreMetrics,
-          devopsReportDocsPath,
           noDataImagePath,
         },
       }),
@@ -32,6 +26,8 @@ describe('DevopsScore', () => {
   const findUsageCol = () => findCol('usageCol');
   const findDevopsScoreApp = () => wrapper.findByTestId('devops-score-app');
   const bannerExists = () => wrapper.findComponent(DevopsScoreCallout).exists();
+  const findDocsLink = () =>
+    wrapper.findByRole('link', { name: 'See example DevOps Score page in our documentation.' });
 
   describe('with no data', () => {
     beforeEach(() => {
@@ -54,7 +50,10 @@ describe('DevopsScore', () => {
       });
 
       it('contains a link to the feature documentation', () => {
-        expect(wrapper.findComponent(GlLink).exists()).toBe(true);
+        expect(findDocsLink().exists()).toBe(true);
+        expect(findDocsLink().attributes('href')).toBe(
+          '/help/user/admin_area/analytics/dev_ops_report',
+        );
       });
     });