Add latest changes from gitlab-org/gitlab@master

4 files changed, 154 insertions, 15 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index 7322958e6df..96ee46c3b27 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -139,7 +139,7 @@ export default {
           fetchData: () => this.fetchCollapsedData(this.$props),
         },
         method: 'fetchData',
-        successCallback: (data) => {
+        successCallback: ({ data }) => {
           if (Object.keys(data).length > 0) {
             poll.stop();
             this.setCollapsedData(data);
@@ -317,9 +317,13 @@ export default {
                   <div v-if="data.link">
                     <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
                   </div>
+                  <div v-if="data.supportingText">
+                    <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
+                  </div>
                   <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
                     {{ data.badge.text }}
                   </gl-badge>
+
                   <actions
                     :widget="$options.label || $options.name"
                     :tertiary-buttons="data.actions"
diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js b/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js
new file mode 100644
index 00000000000..168f10bd148
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js
@@ -0,0 +1,120 @@
+import { uniqueId } from 'lodash';
+import { __, n__, s__, sprintf } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
+import { EXTENSION_ICONS } from '../../constants';
+
+export default {
+  name: 'WidgetAccessibility',
+  enablePolling: true,
+  i18n: {
+    loading: s__('Reports|Accessibility scanning results are being parsed'),
+    error: s__('Reports|Accessibility scanning failed loading results'),
+  },
+  props: ['accessibilityReportPath'],
+  computed: {
+    statusIcon() {
+      return this.collapsedData.status === 'failed'
+        ? EXTENSION_ICONS.warning
+        : EXTENSION_ICONS.success;
+    },
+  },
+  methods: {
+    summary() {
+      const numOfResults = this.collapsedData?.summary?.errored || 0;
+
+      const successText = s__(
+        'Reports|Accessibility scanning detected no issues for the source branch only',
+      );
+      const warningText = sprintf(
+        n__(
+          'Reports|Accessibility scanning detected %{strong_start}%{number}%{strong_end} issue for the source branch only',
+          'Reports|Accessibility scanning detected %{strong_start}%{number}%{strong_end} issues for the source branch only',
+          numOfResults,
+        ),
+        {
+          number: numOfResults,
+        },
+        false,
+      );
+
+      return numOfResults === 0 ? successText : warningText;
+    },
+    fetchCollapsedData() {
+      return axios.get(this.accessibilityReportPath);
+    },
+    fetchFullData() {
+      return Promise.resolve(this.prepareReports());
+    },
+    parsedTECHSCode(code) {
+      /*
+       * 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
+       */
+      return code?.split('.')[4];
+    },
+    formatLearnMoreUrl(code) {
+      const parsed = this.parsedTECHSCode(code);
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `https://www.w3.org/TR/WCAG20-TECHS/${parsed || 'Overview'}.html`;
+    },
+    formatText(code) {
+      return sprintf(
+        s__(
+          'AccessibilityReport|The accessibility scanning found an error of the following type: %{code}',
+        ),
+        { code },
+      );
+    },
+    formatMessage(message) {
+      return sprintf(s__('AccessibilityReport|Message: %{message}'), { message });
+    },
+    prepareReports() {
+      const { new_errors, existing_errors, resolved_errors } = this.collapsedData;
+
+      const newErrors = new_errors.map((error) => {
+        return {
+          header: __('New'),
+          id: uniqueId('new-error-'),
+          text: this.formatText(error.code),
+          icon: { name: EXTENSION_ICONS.failed },
+          link: {
+            href: this.formatLearnMoreUrl(error.code),
+            text: __('Learn more'),
+          },
+          supportingText: this.formatMessage(error.message),
+        };
+      });
+
+      const existingErrors = existing_errors.map((error) => {
+        return {
+          id: uniqueId('existing-error-'),
+          text: this.formatText(error.code),
+          icon: { name: EXTENSION_ICONS.failed },
+          link: {
+            href: this.formatLearnMoreUrl(error.code),
+            text: __('Learn more'),
+          },
+          supportingText: this.formatMessage(error.message),
+        };
+      });
+
+      const resolvedErrors = resolved_errors.map((error) => {
+        return {
+          id: uniqueId('resolved-error-'),
+          text: this.formatText(error.code),
+          icon: { name: EXTENSION_ICONS.success },
+          link: {
+            href: this.formatLearnMoreUrl(error.code),
+            text: __('Learn more'),
+          },
+          supportingText: this.formatMessage(error.message),
+        };
+      });
+
+      return [...newErrors, ...existingErrors, ...resolvedErrors];
+    },
+  },
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js b/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js
index a564acada02..8fcc4f818ec 100644
--- a/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js
@@ -73,26 +73,30 @@ export default {
       return `${title}${subtitle}`;
     },
     fetchCollapsedData() {
-      return Promise.resolve(this.fetchPlans().then(this.prepareReports));
-    },
-    fetchFullData() {
-      const { valid, invalid } = this.collapsedData;
-      return Promise.resolve([...valid, ...invalid]);
-    },
-    // Custom methods
-    fetchPlans() {
       return axios
         .get(this.terraformReportsPath)
-        .then(({ data }) => {
-          return Object.keys(data).map((key) => {
-            return data[key];
+        .then((res) => {
+          const reports = Object.keys(res.data).map((key) => {
+            return res.data[key];
           });
+
+          const formattedData = this.prepareReports(reports);
+
+          return {
+            ...res,
+            data: formattedData,
+          };
         })
         .catch(() => {
-          const invalidData = { tf_report_error: 'api_error' };
-          return [invalidData];
+          const formattedData = this.prepareReports([{ tf_report_error: 'api_error' }]);
+
+          return { data: formattedData };
         });
     },
+    fetchFullData() {
+      const { valid, invalid } = this.collapsedData;
+      return Promise.resolve([...valid, ...invalid]);
+    },
     createReportRow(report, iconName) {
       const addNum = Number(report.create);
       const changeNum = Number(report.update);
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 83a07240403..6f61afe6e68 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -45,6 +45,7 @@ import eventHub from './event_hub';
 import mergeRequestQueryVariablesMixin from './mixins/merge_request_query_variables';
 import getStateQuery from './queries/get_state.query.graphql';
 import terraformExtension from './extensions/terraform';
+import accessibilityExtension from './extensions/accessibility';
 
 export default {
   // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
@@ -205,7 +206,7 @@ export default {
       );
     },
     shouldShowAccessibilityReport() {
-      return this.mr.accessibilityReportPath;
+      return Boolean(this.mr?.accessibilityReportPath);
     },
     formattedHumanAccess() {
       return (this.mr.humanAccess || '').toLowerCase();
@@ -240,6 +241,11 @@ export default {
         this.registerTerraformPlans();
       }
     },
+    shouldShowAccessibilityReport(newVal) {
+      if (newVal) {
+        this.registerAccessibilityExtension();
+      }
+    },
   },
   mounted() {
     MRWidgetService.fetchInitialData()
@@ -478,6 +484,11 @@ export default {
         registerExtension(terraformExtension);
       }
     },
+    registerAccessibilityExtension() {
+      if (this.shouldShowAccessibilityReport && this.shouldShowExtension) {
+        registerExtension(accessibilityExtension);
+      }
+    },
   },
 };
 </script>