From 6ad576e92d9ac76d0357d530011a90aee7a8410f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Axel=20Garc=C3=ADa?= <agarcia@gitlab.com>
Date: Thu, 5 Aug 2021 17:00:15 -0400
Subject: [PATCH] Refactor documentation links for devops_score
We're replacing the use of HAML's help_page_path
by JS helpPagePath.
---
.../devops_report/components/devops_score.vue | 7 +++----
.../analytics/devops_report/devops_score.js | 8 +-------
.../admin/dev_ops_report/_report.html.haml | 2 +-
.../components/devops_score_spec.js | 17 ++++++++---------
4 files changed, 13 insertions(+), 21 deletions(-)
diff --git a/app/assets/javascripts/analytics/devops_report/components/devops_score.vue b/app/assets/javascripts/analytics/devops_report/components/devops_score.vue
index be38b32c11911..238081cc3c077 100644
--- a/app/assets/javascripts/analytics/devops_report/components/devops_score.vue
+++ b/app/assets/javascripts/analytics/devops_report/components/devops_score.vue
@@ -1,6 +1,7 @@
<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>
diff --git a/app/assets/javascripts/analytics/devops_report/devops_score.js b/app/assets/javascripts/analytics/devops_report/devops_score.js
index 20e9fc776bcf3..0bf98b65ed5c9 100644
--- a/app/assets/javascripts/analytics/devops_report/devops_score.js
+++ b/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,
},
diff --git a/app/views/admin/dev_ops_report/_report.html.haml b/app/views/admin/dev_ops_report/_report.html.haml
index 5ab68a463ba69..208afefc73b65 100644
--- a/app/views/admin/dev_ops_report/_report.html.haml
+++ b/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') } }
diff --git a/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js b/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js
index cd8b70bccf0bc..8f8dac977dea7 100644
--- a/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js
+++ b/spec/frontend/admin/analytics/devops_score/components/devops_score_spec.js
@@ -1,15 +1,10 @@
-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',
+ );
});
});
--
GitLab