Switch MR Widgets to use a structured data output for summaries

app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue

@@ -94,6 +94,20 @@ export default {
     tertiaryActionsButtons() {
       return this.tertiaryButtons ? this.tertiaryButtons() : undefined;
     },
+    hydratedSummary() {
+      const structuredOutput = this.summary(this.collapsedData);
+      const summary = {
+        subject: generateText(
+          typeof structuredOutput === 'string' ? structuredOutput : structuredOutput.subject,
+        ),
+      };
+
+      if (structuredOutput.meta) {
+        summary.meta = generateText(structuredOutput.meta);
+      }
+
+      return summary;
+    },
   },
   watch: {
     isCollapsed(newVal) {
@@ -182,7 +196,13 @@ export default {
         <div class="gl-flex-grow-1">
           <template v-if="isLoadingSummary">{{ widgetLoadingText }}</template>
           <template v-else-if="hasFetchError">{{ widgetErrorText }}</template>
-          <div v-else v-safe-html="generateText(summary(collapsedData))"></div>
+          <div v-else>
+            <span v-safe-html="hydratedSummary.subject"></span>
+            <template v-if="hydratedSummary.meta">
+              <br />
+              <span v-safe-html="hydratedSummary.meta" class="gl-font-sm"></span>
+            </template>
+          </div>
         </div>
         <actions
           :widget="$options.label || $options.name"

ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js

@@ -38,10 +38,10 @@ export default {
         },
       );
 
-      return `${text}
-      <br>
-      ${reportNumbersText}
-      `;
+      return {
+        subject: text,
+        meta: reportNumbersText,
+      };
     },
     statusIcon() {
       if (this.collapsedData.degraded.length || this.collapsedData.same.length) {

ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js

@@ -35,10 +35,10 @@ export default {
         },
       );
 
-      return `${text}
-      <br>
-      ${reportNumbersText}
-      `;
+      return {
+        subject: text,
+        meta: reportNumbersText,
+      };
     },
     statusIcon() {
       if (this.collapsedData.degraded.length || this.collapsedData.same.length) {

ee/app/assets/javascripts/vue_merge_request_widget/extensions/status_checks/index.js

@@ -46,13 +46,10 @@ export default {
         );
       }
 
-      return `
-        ${s__('StatusCheck|Status checks')}
-        <br>
-        <span class="gl-font-sm">
-          ${reports.join(__(', and '))}
-        </span>
-      `;
+      return {
+        subject: s__('StatusCheck|Status checks'),
+        meta: reports.join(__(', and ')),
+      };
     },
     statusIcon({ pending = [], failed = [] }) {
       if (failed.length > 0) {