1 files changed, 27 insertions, 63 deletions

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 a3f70b551bf..b96bdcb3833 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,7 +1,10 @@
 <script>
 import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
-import { registerExtension } from '~/vue_merge_request_widget/components/extensions';
+import {
+  registerExtension,
+  registeredExtensions,
+} from '~/vue_merge_request_widget/components/extensions';
 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';
 import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_store';
@@ -47,6 +50,7 @@ import terraformExtension from './extensions/terraform';
 import accessibilityExtension from './extensions/accessibility';
 import codeQualityExtension from './extensions/code_quality';
 import testReportExtension from './extensions/test_report';
+import ReportWidgetContainer from './components/report_widget_container.vue';
 
 export default {
   // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
@@ -82,21 +86,18 @@ export default {
     MrWidgetAutoMergeFailed: AutoMergeFailed,
     MrWidgetRebase: RebaseState,
     SourceBranchRemovalStatus,
-    GroupedCodequalityReportsApp: () =>
-      import('../reports/codequality_report/grouped_codequality_reports_app.vue'),
-    GroupedTestReportsApp: () =>
-      import('../reports/grouped_test_report/grouped_test_reports_app.vue'),
     MrWidgetApprovals,
     SecurityReportsApp: () => import('~/vue_shared/security_reports/security_reports_app.vue'),
     MergeChecksFailed: () => import('./components/states/merge_checks_failed.vue'),
     ReadyToMerge: ReadyToMergeState,
+    ReportWidgetContainer,
   },
   apollo: {
     state: {
       query: getStateQuery,
       manual: true,
       skip() {
-        return !this.mr || !window.gon?.features?.mergeRequestWidgetGraphql;
+        return !this.mr;
       },
       variables() {
         return this.mergeRequestQueryVariables;
@@ -130,13 +131,6 @@ export default {
     };
   },
   computed: {
-    isLoaded() {
-      if (window.gon?.features?.mergeRequestWidgetGraphql) {
-        return !this.loading;
-      }
-
-      return this.mr;
-    },
     shouldRenderApprovals() {
       return this.mr.state !== 'nothingToMerge';
     },
@@ -185,9 +179,6 @@ export default {
     shouldRenderTestReport() {
       return Boolean(this.mr?.testResultsPath);
     },
-    shouldRenderRefactoredTestReport() {
-      return window.gon?.features?.refactorMrWidgetTestSummary;
-    },
     mergeError() {
       let { mergeError } = this.mr;
 
@@ -218,14 +209,14 @@ export default {
     shouldShowSecurityExtension() {
       return window.gon?.features?.refactorSecurityExtension;
     },
-    shouldShowCodeQualityExtension() {
-      return window.gon?.features?.refactorCodeQualityExtension;
-    },
     shouldShowMergeDetails() {
       if (this.mr.state === 'readyToMerge') return true;
 
       return !this.mr.mergeDetailsCollapsed;
     },
+    hasExtensions() {
+      return registeredExtensions.extensions.length;
+    },
   },
   watch: {
     'mr.machineValue': {
@@ -343,9 +334,7 @@ export default {
       return new MRWidgetService(this.getServiceEndpoints(store));
     },
     checkStatus(cb, isRebased) {
-      if (window.gon?.features?.mergeRequestWidgetGraphql) {
-        this.$apollo.queries.state.refetch();
-      }
+      this.$apollo.queries.state.refetch();
 
       return this.service
         .checkStatus()
@@ -519,12 +508,12 @@ export default {
       }
     },
     registerCodeQualityExtension() {
-      if (this.shouldRenderCodeQuality && this.shouldShowCodeQualityExtension) {
+      if (this.shouldRenderCodeQuality) {
         registerExtension(codeQualityExtension);
       }
     },
     registerTestReportExtension() {
-      if (this.shouldRenderTestReport && this.shouldRenderRefactoredTestReport) {
+      if (this.shouldRenderTestReport) {
         registerExtension(testReportExtension);
       }
     },
@@ -532,7 +521,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="isLoaded" class="mr-state-widget gl-mt-3">
+  <div v-if="!loading" class="mr-state-widget gl-mt-3">
     <header
       v-if="shouldRenderCollaborationStatus"
       class="gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100 gl-overflow-hidden mr-widget-workflow gl-mt-0!"
@@ -552,17 +541,19 @@ export default {
       :user-callout-feature-id="mr.suggestPipelineFeatureId"
       @dismiss="dismissSuggestPipelines"
     />
-    <mr-widget-pipeline-container
-      v-if="shouldRenderPipelines"
-      class="mr-widget-workflow"
-      :mr="mr"
-    />
-    <mr-widget-approvals
-      v-if="shouldRenderApprovals"
-      class="mr-widget-workflow"
-      :mr="mr"
-      :service="service"
-    />
+    <mr-widget-pipeline-container v-if="shouldRenderPipelines" :mr="mr" />
+    <mr-widget-approvals v-if="shouldRenderApprovals" :mr="mr" :service="service" />
+    <report-widget-container>
+      <extensions-container v-if="hasExtensions" :mr="mr" />
+      <security-reports-app
+        v-if="shouldRenderSecurityReport && !shouldShowSecurityExtension"
+        :pipeline-id="mr.pipeline.id"
+        :project-id="mr.sourceProjectId"
+        :security-reports-docs-path="mr.securityReportsDocsPath"
+        :target-project-full-path="mr.targetProjectFullPath"
+        :mr-iid="mr.iid"
+      />
+    </report-widget-container>
     <div class="mr-section-container mr-widget-workflow">
       <div v-if="hasAlerts" class="gl-overflow-hidden mr-widget-alert-container">
         <mr-widget-alert-message
@@ -589,35 +580,8 @@ export default {
         </mr-widget-alert-message>
       </div>
 
-      <extensions-container :mr="mr" />
-
       <widget-container v-if="mr" :mr="mr" />
 
-      <grouped-codequality-reports-app
-        v-if="shouldRenderCodeQuality && !shouldShowCodeQualityExtension"
-        :head-blob-path="mr.headBlobPath"
-        :base-blob-path="mr.baseBlobPath"
-        :codequality-reports-path="mr.codequalityReportsPath"
-        :codequality-help-path="mr.codequalityHelpPath"
-      />
-
-      <security-reports-app
-        v-if="shouldRenderSecurityReport && !shouldShowSecurityExtension"
-        :pipeline-id="mr.pipeline.id"
-        :project-id="mr.sourceProjectId"
-        :security-reports-docs-path="mr.securityReportsDocsPath"
-        :target-project-full-path="mr.targetProjectFullPath"
-        :mr-iid="mr.iid"
-      />
-
-      <grouped-test-reports-app
-        v-if="shouldRenderTestReport && !shouldRenderRefactoredTestReport"
-        class="js-reports-container"
-        :endpoint="mr.testResultsPath"
-        :head-blob-path="mr.headBlobPath"
-        :pipeline-path="mr.pipeline.path"
-      />
-
       <div class="mr-widget-section" data-qa-selector="mr_widget_content">
         <component :is="componentName" :mr="mr" :service="service" />
         <ready-to-merge