From 9cffbbf92ee388f6d9760ad9c6e49631188f5871 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 13 Dec 2021 07:18:54 -0700
Subject: [PATCH] Switch MR Widgets to use a structured data output for
 summaries

---
 .../components/extensions/base.vue            | 22 ++++++++++++++++++-
 .../extensions/browser_performance/index.js   |  8 +++----
 .../extensions/load_performance/index.js      |  8 +++----
 .../extensions/status_checks/index.js         | 11 ++++------
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index f5159f22973367..549cf64fb08f5a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/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"
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js
index c02d70baaf368c..ea4039e62bdba0 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js
+++ b/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) {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js
index 7c9053d5416374..d50f4cf4273ce5 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js
+++ b/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) {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/status_checks/index.js b/ee/app/assets/javascripts/vue_merge_request_widget/extensions/status_checks/index.js
index d9648be272145d..2b167736874f99 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/extensions/status_checks/index.js
+++ b/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) {
-- 
GitLab