Merge branch...

Merge branch '334569-docs-links-refactor-on-follow-up-pass-for-renaming-usage-ping-data-to-service-ping-data' into 'master'

Refactor documentation links source for Service Ping disabled component

See merge request gitlab-org/gitlab!67384

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/components/service_ping_disabled.vue

 <script>
 import { GlEmptyState, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
   components: {
@@ -15,13 +16,11 @@ export default {
     svgPath: {
       default: '',
     },
-    docsLink: {
-      default: '',
-    },
     primaryButtonPath: {
       default: '',
     },
   },
+  docsLink: helpPagePath('development/service_ping/index.md'),
 };
 </script>
 <template>
@@ -36,7 +35,7 @@ export default {
         "
       >
         <template #docLink="{ content }">
-          <gl-link :href="docsLink" target="_blank" data-testid="docs-link">{{ content }}</gl-link>
+          <gl-link :href="$options.docsLink" target="_blank">{{ content }}</gl-link>
         </template>
       </gl-sprintf>
       <template v-else>
@@ -44,12 +43,7 @@ export default {
           {{ s__('ServicePing|Turn on service ping to review instance-level analytics.') }}
         </p>
 
-        <gl-button
-          category="primary"
-          variant="success"
-          :href="primaryButtonPath"
-          data-testid="power-on-button"
-        >
+        <gl-button category="primary" variant="success" :href="primaryButtonPath">
           {{ s__('ServicePing|Turn on service ping') }}
         </gl-button>
       </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/assets/javascripts/analytics/devops_report/devops_score_disabled_service_ping.js

@@ -11,12 +11,7 @@ export default () => {
 
   if (!emptyStateContainer) return false;
 
-  const {
-    isAdmin,
-    emptyStateSvgPath,
-    enableServicePingPath,
-    docsLink,
-  } = emptyStateContainer.dataset;
+  const { isAdmin, emptyStateSvgPath, enableServicePingPath } = emptyStateContainer.dataset;
 
   return new Vue({
     el: emptyStateContainer,
@@ -24,7 +19,6 @@ export default () => {
       isAdmin: parseBoolean(isAdmin),
       svgPath: emptyStateSvgPath,
       primaryButtonPath: enableServicePingPath,
-      docsLink,
     },
     render(h) {
       return h(ServicePingDisabled);

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') } }

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/index.js

@@ -13,7 +13,6 @@ export default () => {
     emptyStateSvgPath,
     groupId,
     devopsScoreMetrics,
-    devopsReportDocsPath,
     devopsScoreIntroImagePath,
     noDataImagePath,
   } = el.dataset;
@@ -28,7 +27,6 @@ export default () => {
       isGroup,
       groupGid: isGroup ? convertToGraphQLId(TYPE_GROUP, groupId) : null,
       devopsScoreMetrics: isGroup ? null : JSON.parse(devopsScoreMetrics),
-      devopsReportDocsPath,
       noDataImagePath,
       devopsScoreIntroImagePath,
     },

ee/app/views/admin/dev_ops_report/_devops_tabs.html.haml

@@ -4,6 +4,6 @@
   = _('DevOps Report')
 
 - 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') } }
+  #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') } }
 - else
-  .js-devops-adoption{ data: { empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg'), 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-adoption{ data: { empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg'), 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',
+        );
       });
     });
 

spec/frontend/analytics/devops_report/components/service_ping_disabled_spec.js

 import { GlEmptyState, GlSprintf } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ServicePingDisabled from '~/analytics/devops_report/components/service_ping_disabled.vue';
 
 describe('~/analytics/devops_report/components/service_ping_disabled.vue', () => {
@@ -11,21 +11,19 @@ describe('~/analytics/devops_report/components/service_ping_disabled.vue', () =>
   });
 
   const createWrapper = ({ isAdmin = false } = {}) => {
-    wrapper = shallowMountExtended(ServicePingDisabled, {
+    wrapper = mountExtended(ServicePingDisabled, {
       provide: {
         isAdmin,
         svgPath: TEST_HOST,
-        docsLink: TEST_HOST,
         primaryButtonPath: TEST_HOST,
       },
-      stubs: { GlEmptyState, GlSprintf },
     });
   };
 
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findMessageForRegularUsers = () => wrapper.findComponent(GlSprintf);
-  const findDocsLink = () => wrapper.findByTestId('docs-link');
-  const findPowerOnButton = () => wrapper.findByTestId('power-on-button');
+  const findDocsLink = () => wrapper.findByRole('link', { name: 'service ping' });
+  const findPowerOnButton = () => wrapper.findByRole('link', { name: 'Turn on service ping' });
 
   it('renders empty state with provided SVG path', () => {
     createWrapper();
@@ -45,7 +43,7 @@ describe('~/analytics/devops_report/components/service_ping_disabled.vue', () =>
 
     it('renders docs link', () => {
       expect(findDocsLink().exists()).toBe(true);
-      expect(findDocsLink().attributes('href')).toBe(TEST_HOST);
+      expect(findDocsLink().attributes('href')).toBe('/help/development/service_ping/index.md');
     });
   });