Add latest changes from gitlab-org/gitlab@master

3 files changed, 49 insertions, 28 deletions

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.vue
index 0fb5e13ad82..2ae16eef410 100644
--- a/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.vue
@@ -1,24 +1,37 @@
+<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',
-  enablePolling: true,
   i18n: {
     loading: s__('Reports|Accessibility scanning results are being parsed'),
     error: s__('Reports|Accessibility scanning failed loading results'),
   },
-  props: ['accessibilityReportPath'],
+  components: {
+    MrWidget,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      collapsedData: {},
+      content: [],
+    };
+  },
   computed: {
     statusIcon() {
-      return this.collapsedData.status === 'failed'
+      return this.collapsedData?.status === 'failed'
         ? EXTENSION_ICONS.warning
         : EXTENSION_ICONS.success;
     },
-  },
-  methods: {
     summary() {
       const numOfResults = this.collapsedData?.summary?.errored || 0;
 
@@ -37,13 +50,20 @@ export default {
         false,
       );
 
-      return numOfResults === 0 ? successText : warningText;
+      return numOfResults === 0 ? { title: successText } : { title: warningText };
     },
     shouldCollapse() {
       return this.collapsedData?.summary?.errored > 0;
     },
+  },
+  methods: {
     fetchCollapsedData() {
-      return axios.get(this.accessibilityReportPath);
+      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());
@@ -74,9 +94,7 @@ export default {
     formatMessage(message) {
       return sprintf(s__('AccessibilityReport|Message: %{message}'), { message });
     },
-    prepareReports() {
-      const { collapsedData } = this;
-
+    getContent(collapsedData) {
       const newErrors = collapsedData.new_errors.map((error) => {
         return {
           header: __('New'),
@@ -121,3 +139,16 @@ export default {
     },
   },
 };
+</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>