Fetch initial merge request widget data async

This changes the way the merge request widget is init'd
instead of requiring data to be available on creation
it now fetches the initial data on created and then renders the widget

`mrWidgetData` still exists, and now mainly just holds the different
paths and routes that are needed in the widget

Closes https://gitlab.com/gitlab-org/gitlab/issues/31406

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -80,12 +80,10 @@ export default {
     },
   },
   data() {
-    const store = new MRWidgetStore(this.mrData || window.gl.mrWidgetData);
-    const service = this.createService(store);
     return {
-      mr: store,
-      state: store.state,
-      service,
+      mr: null,
+      state: null,
+      service: null,
     };
   },
   computed: {
@@ -133,18 +131,24 @@ export default {
       }
     },
   },
-  created() {
-    this.initPolling();
-    this.bindEventHubListeners();
-    eventHub.$on('mr.discussion.updated', this.checkStatus);
-  },
+  created() {},
   mounted() {
-    this.setFaviconHelper();
-    this.initDeploymentsPolling();
+    return MRWidgetService.fetchInitialData().then(({ data }) => {
+      this.mr = new MRWidgetStore({ ...window.gl.mrWidgetData, ...data });
+      this.state = this.mr.state;
+      this.service = this.createService(this.mr);
 
-    if (this.shouldRenderMergedPipeline) {
-      this.initPostMergeDeploymentsPolling();
-    }
+      this.setFaviconHelper();
+      this.initDeploymentsPolling();
+
+      if (this.shouldRenderMergedPipeline) {
+        this.initPostMergeDeploymentsPolling();
+      }
+
+      this.initPolling();
+      this.bindEventHubListeners();
+      eventHub.$on('mr.discussion.updated', this.checkStatus);
+    });
   },
   beforeDestroy() {
     eventHub.$off('mr.discussion.updated', this.checkStatus);
@@ -319,7 +323,7 @@ export default {
 };
 </script>
 <template>
-  <div class="mr-state-widget prepend-top-default">
+  <div v-if="mr" class="mr-state-widget prepend-top-default">
     <mr-widget-header :mr="mr" />
     <mr-widget-pipeline-container
       v-if="shouldRenderPipelines"

app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js

@@ -61,4 +61,11 @@ export default class MRWidgetService {
   static fetchMetrics(metricsUrl) {
     return axios.get(`${metricsUrl}.json`);
   }
+
+  static fetchInitialData() {
+    return Promise.all([
+      axios.get(window.gl.mrWidgetData.merge_request_cached_widget_path),
+      axios.get(window.gl.mrWidgetData.merge_request_widget_path),
+    ]).then(axios.spread((res, cachedRes) => ({ data: Object.assign(res.data, cachedRes.data) })));
+  }
 }

app/serializers/merge_request_widget_entity.rb

@@ -3,6 +3,8 @@
 class MergeRequestWidgetEntity < Grape::Entity
   include RequestAwareEntity
 
+  expose :iid
+
   expose :source_project_full_path do |merge_request|
     merge_request.source_project&.full_path
   end
@@ -66,8 +68,6 @@ class MergeRequestWidgetEntity < Grape::Entity
 
   def as_json(options = {})
     super(options)
-      .merge(MergeRequestPollCachedWidgetEntity.new(object, **@options.opts_hash).as_json(options))
-      .merge(MergeRequestPollWidgetEntity.new(object, **@options.opts_hash).as_json(options))
   end
 
   private

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -43,7 +43,7 @@ export default {
       return this.mr.hasApprovalsAvailable && this.mr.state !== 'nothingToMerge';
     },
     shouldRenderCodeQuality() {
-      const { codeclimate } = this.mr;
+      const { codeclimate } = this.mr || {};
       return codeclimate && codeclimate.head_path && codeclimate.base_path;
     },
     shouldRenderLicenseReport() {
@@ -67,7 +67,7 @@ export default {
       );
     },
     shouldRenderPerformance() {
-      const { performance } = this.mr;
+      const { performance } = this.mr || {};
       return performance && performance.head_path && performance.base_path;
     },
     shouldRenderSecurityReport() {
@@ -149,14 +149,17 @@ export default {
       return (gl && gl.mrWidgetData && gl.mrWidgetData.license_management_comparison_path) || null;
     },
   },
-  created() {
-    if (this.shouldRenderCodeQuality) {
-      this.fetchCodeQuality();
-    }
-
-    if (this.shouldRenderPerformance) {
-      this.fetchPerformance();
-    }
+  watch: {
+    shouldRenderCodeQuality(newVal) {
+      if (newVal) {
+        this.fetchCodeQuality();
+      }
+    },
+    shouldRenderPerformance(newVal) {
+      if (newVal) {
+        this.fetchPerformance();
+      }
+    },
   },
   methods: {
     getServiceEndpoints(store) {
@@ -223,7 +226,7 @@ export default {
 };
 </script>
 <template>
-  <div class="mr-state-widget prepend-top-default">
+  <div v-if="mr" class="mr-state-widget prepend-top-default">
     <mr-widget-header :mr="mr" />
     <mr-widget-pipeline-container
       v-if="shouldRenderPipelines"