Add latest changes from gitlab-org/gitlab@master

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,
 };