diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-08 21:09:50 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-08 21:09:50 +0000 |
commit | 76358aee81a471a5e71eaf3e8c2d91b7c9a0a5a9 (patch) | |
tree | df9ba3dcc09eb404de31e0d79cb8f0b77812e655 /app/assets/javascripts/reports | |
parent | 80e9fdc9682cfbcfb9202a2733605a6a6bd23f05 (diff) | |
download | gitlab-ce-76358aee81a471a5e71eaf3e8c2d91b7c9a0a5a9.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/reports')
-rw-r--r-- | app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue | 62 | ||||
-rw-r--r-- | app/assets/javascripts/reports/components/issue_body.js | 3 |
2 files changed, 65 insertions, 0 deletions
diff --git a/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue b/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue new file mode 100644 index 00000000000..6aae9195be1 --- /dev/null +++ b/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue @@ -0,0 +1,62 @@ +<script> +import { GlLink } from '@gitlab/ui'; + +export default { + name: 'AccessibilityIssueBody', + components: { + GlLink, + }, + props: { + issue: { + type: Object, + required: true, + }, + isNew: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + parsedTECHSCode() { + /* + * In issue code looks like "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail" + * or "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent" + * + * The TECHS code is the "G18", "G168", "H91", etc. from the code which is used for the documentation. + * Here we simply split the string on `.` and get the code in the 5th position + */ + if (this.issue.code === undefined) { + return null; + } + + return this.issue.code.split('.')[4] || null; + }, + learnMoreUrl() { + if (this.parsedTECHSCode === null) { + return 'https://www.w3.org/TR/WCAG20-TECHS/Overview.html'; + } + + return `https://www.w3.org/TR/WCAG20-TECHS/${this.parsedTECHSCode}.html`; + }, + }, +}; +</script> +<template> + <div class="report-block-list-issue-description prepend-top-5 append-bottom-5"> + <div ref="accessibility-issue-description" class="report-block-list-issue-description-text"> + <div + v-if="isNew" + ref="accessibility-issue-is-new-badge" + class="badge badge-danger append-right-5" + > + {{ s__('AccessibilityReport|New') }} + </div> + {{ issue.name }} + <gl-link ref="accessibility-issue-learn-more" :href="learnMoreUrl" target="_blank">{{ + s__('AccessibilityReport|Learn More') + }}</gl-link> + {{ sprintf(s__('AccessibilityReport|Message: %{message}'), { message: issue.message }) }} + </div> + </div> +</template> diff --git a/app/assets/javascripts/reports/components/issue_body.js b/app/assets/javascripts/reports/components/issue_body.js index 8b5af263d50..e106e60951b 100644 --- a/app/assets/javascripts/reports/components/issue_body.js +++ b/app/assets/javascripts/reports/components/issue_body.js @@ -1,9 +1,12 @@ import TestIssueBody from './test_issue_body.vue'; +import AccessibilityIssueBody from '../accessibility_report/components/accessibility_issue_body.vue'; export const components = { + AccessibilityIssueBody, TestIssueBody, }; export const componentNames = { + AccessibilityIssueBody: AccessibilityIssueBody.name, TestIssueBody: TestIssueBody.name, }; |