From 4cf8d931aa8511aa93b8504e940d2f5ddfee7b4c Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Tue, 7 Nov 2023 21:10:15 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../components/widget/app.vue                      |   7 +
 .../extensions/accessibility/index.js              | 123 ----------------
 .../extensions/accessibility/index.vue             | 154 +++++++++++++++++++++
 .../vue_merge_request_widget/mr_widget_options.vue |  19 +--
 4 files changed, 162 insertions(+), 141 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js
 create mode 100644 app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.vue

(limited to 'app/assets/javascripts/vue_merge_request_widget')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue
index 8249dffcc27..08e803bffc9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue
@@ -9,6 +9,8 @@ export default {
     MrTerraformWidget: () => import('~/vue_merge_request_widget/extensions/terraform/index.vue'),
     MrCodeQualityWidget: () =>
       import('~/vue_merge_request_widget/extensions/code_quality/index.vue'),
+    MrAccessibilityWidget: () =>
+      import('~/vue_merge_request_widget/extensions/accessibility/index.vue'),
   },
 
   props: {
@@ -31,12 +33,17 @@ export default {
       return this.mr.codequalityReportsPath ? 'MrCodeQualityWidget' : undefined;
     },
 
+    accessibilityWidget() {
+      return this.mr.accessibilityReportPath ? 'MrAccessibilityWidget' : undefined;
+    },
+
     widgets() {
       return [
         this.codeQualityWidget,
         this.testReportWidget,
         this.terraformPlansWidget,
         'MrSecurityWidget',
+        this.accessibilityWidget,
       ].filter((w) => w);
     },
   },
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
deleted file mode 100644
index 0fb5e13ad82..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js
+++ /dev/null
@@ -1,123 +0,0 @@
-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;
-    },
-    shouldCollapse() {
-      return this.collapsedData?.summary?.errored > 0;
-    },
-    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 { collapsedData } = this;
-
-      const newErrors = collapsedData.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 = collapsedData.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 = collapsedData.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/accessibility/index.vue b/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.vue
new file mode 100644
index 00000000000..2ae16eef410
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.vue
@@ -0,0 +1,154 @@
+<script>
+import { uniqueId } from 'lodash';
+import { __, n__, s__, sprintf } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
+import MrWidget from '~/vue_merge_request_widget/components/widget/widget.vue';
+import { EXTENSION_ICONS } from '../../constants';
+
+export default {
+  name: 'WidgetAccessibility',
+  i18n: {
+    loading: s__('Reports|Accessibility scanning results are being parsed'),
+    error: s__('Reports|Accessibility scanning failed loading results'),
+  },
+  components: {
+    MrWidget,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      collapsedData: {},
+      content: [],
+    };
+  },
+  computed: {
+    statusIcon() {
+      return this.collapsedData?.status === 'failed'
+        ? EXTENSION_ICONS.warning
+        : EXTENSION_ICONS.success;
+    },
+    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 ? { title: successText } : { title: warningText };
+    },
+    shouldCollapse() {
+      return this.collapsedData?.summary?.errored > 0;
+    },
+  },
+  methods: {
+    fetchCollapsedData() {
+      return axios.get(this.mr.accessibilityReportPath).then((response) => {
+        this.collapsedData = response.data;
+        this.content = this.getContent(response.data);
+
+        return response;
+      });
+    },
+    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 });
+    },
+    getContent(collapsedData) {
+      const newErrors = collapsedData.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 = collapsedData.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 = collapsedData.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];
+    },
+  },
+};
+</script>
+<template>
+  <mr-widget
+    :error-text="$options.i18n.error"
+    :status-icon-name="statusIcon"
+    :loading-text="$options.i18n.loading"
+    :widget-name="$options.name"
+    :summary="summary"
+    :content="content"
+    :is-collapsible="shouldCollapse"
+    :fetch-collapsed-data="fetchCollapsedData"
+  />
+</template>
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 02d73cf9cbd..cc116b42f1e 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
@@ -1,9 +1,6 @@
 <script>
 import { isEmpty, clamp } from 'lodash';
-import {
-  registerExtension,
-  registeredExtensions,
-} from '~/vue_merge_request_widget/components/extensions';
+import { registeredExtensions } from '~/vue_merge_request_widget/components/extensions';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import MrWidgetApprovals from 'ee_else_ce/vue_merge_request_widget/components/approvals/approvals.vue';
 import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service';
@@ -55,7 +52,6 @@ import eventHub from './event_hub';
 import mergeRequestQueryVariablesMixin from './mixins/merge_request_query_variables';
 import getStateQuery from './queries/get_state.query.graphql';
 import getStateSubscription from './queries/get_state.subscription.graphql';
-import accessibilityExtension from './extensions/accessibility';
 import ReportWidgetContainer from './components/report_widget_container.vue';
 import MrWidgetReadyToMerge from './components/states/new_ready_to_merge.vue';
 
@@ -235,9 +231,6 @@ export default {
         false,
       );
     },
-    shouldShowAccessibilityReport() {
-      return Boolean(this.mr?.accessibilityReportPath);
-    },
     formattedHumanAccess() {
       return (this.mr.humanAccess || '').toLowerCase();
     },
@@ -268,11 +261,6 @@ export default {
         this.initPostMergeDeploymentsPolling();
       }
     },
-    shouldShowAccessibilityReport(newVal) {
-      if (newVal) {
-        this.registerAccessibilityExtension();
-      }
-    },
   },
   mounted() {
     MRWidgetService.fetchInitialData()
@@ -507,11 +495,6 @@ export default {
     dismissSuggestPipelines() {
       this.mr.isDismissedSuggestPipeline = true;
     },
-    registerAccessibilityExtension() {
-      if (this.shouldShowAccessibilityReport) {
-        registerExtension(accessibilityExtension);
-      }
-    },
   },
 };
 </script>
-- 
cgit v1.2.3