Render text output as markdown in metadig view

Issue #2394

src/js/views/MdqRunView.js

@@ -11,6 +11,7 @@ define([
   "text!templates/mdqRun.html",
   "text!templates/loading-metrics.html",
   "collections/QualityReport",
+  "views/MarkdownView",
 ], (
   $,
   _,
@@ -22,6 +23,7 @@ define([
   MdqRunTemplate,
   LoadingTemplate,
   QualityReport,
+  MarkdownView,
 ) => {
   const MSG_ERROR_GENERATING_REPORT =
     "There was an error generating the assessment report.";
@@ -172,7 +174,7 @@ define([
       /**
        * Render the quality report once it has been fetched
        */
-      renderQualityReport() {
+      async renderQualityReport() {
         const viewRef = this;
         const { qualityReport } = this;
         if (qualityReport.runStatus !== "success") {
@@ -230,7 +232,7 @@ define([
         };
 
         viewRef.$el.html(viewRef.template(data));
-        viewRef.addCheckItems(groupedResults);
+        await viewRef.addCheckItems(groupedResults);
         viewRef.insertBreadcrumbs();
         viewRef.drawScoreChart(qualityReport.models, groupedResults);
         viewRef.showCitation();
@@ -243,7 +245,7 @@ define([
        * @param {object} groupedResults - The results grouped by status
        * @since 0.0.0
        */
-      addCheckItems(groupedResults) {
+      async addCheckItems(groupedResults) {
         const viewRef = this;
 
         const types = {
@@ -269,24 +271,28 @@ define([
           },
         };
 
-        Object.keys(types).forEach((type) => {
+        for (const type in types) {
           const { className, iconClass, headerClass } = types[type];
           const results = groupedResults[type];
           const itemEls = [];
           if (results) {
-            results.forEach((result) => {
-              const checkItemHTML = viewRef.createCheckItem(
-                result,
-                className,
-                iconClass,
-              );
-              itemEls.push(checkItemHTML);
-            });
+            // Use `map` to handle promises
+            const itemEls = await Promise.all(
+              results.map(async (result) => {
+                return await viewRef.createCheckItem(
+                  result,
+                  className,
+                  iconClass,
+                );
+              }),
+            );
+
+            // Join the resolved HTML strings and append them
             viewRef
               .$(`.list-group-item.${headerClass}`)
               .after(itemEls.join(""));
           }
-        });
+        }
       },
 
       /**
@@ -297,15 +303,8 @@ define([
        * @returns {string} The HTML for the check item
        * @since 0.0.0
        */
-      createCheckItem(result, className, iconClass) {
-        const outputs = result
-          .get("output")
-          .map((output) =>
-            output.type && output.type.includes("image")
-              ? `<img src="data:${output.type};base64,${output.value}" />`
-              : `<div class="check-output">${output.value}</div>`,
-          )
-          .join("");
+      async createCheckItem(result, className, iconClass) {
+        const outputs = await this.getOutputHTML(result.get("output"));
 
         return `
           <li class="list-group-item check ${className} collapse row-fluid">
@@ -334,6 +333,41 @@ define([
         `;
       },
 
+      /**
+       * Get the HTML for the output
+       * @param {Array} outputs - The outputs from the quality service
+       * @returns {string} The HTML for the output
+       */
+      async getOutputHTML(outputs) {
+        const outputHTMLs = await Promise.all(outputs.map(async (output) => {
+          if (output.type && output.type.includes("image")) {
+            return `<img src="data:${output.type};base64,${output.value}" />`;
+          } else {
+            return await this.getHTMLFromMarkdown(output.value);
+          }
+        }));
+
+        return outputHTMLs.join("");
+      },
+
+      /**
+       * Get the HTML from markdown
+       * @param {string} markdown - The markdown to convert to HTML
+       * @returns {Promise} A promise that resolves with the HTML
+       */
+      getHTMLFromMarkdown(markdown) {
+        const markdownView = new MarkdownView({
+          markdown: markdown,
+          showTOC: false,
+        }).render();
+
+        return new Promise((resolve) => {
+          this.listenToOnce(markdownView, "mdRendered", () => {
+            resolve(markdownView.el.innerHTML);
+          });
+        });
+      },
+
       /**
        * Handles errors that occur when fetching the quality report
        */