feat: add detail section to code webview [HEAD-559]

media/views/snykCode/suggestion/suggestion.scss

@@ -43,6 +43,14 @@
   line-height: 1.6;
 }
 
+#suggestion-details {
+  display: none;
+}
+
+#suggestion-details.show {
+  display: block;
+}
+
 .cwe-list {
   display: inline-block;
   margin: 0;
@@ -231,4 +239,4 @@
 
 .report-fp-actions {
   margin-left: auto;
-}
+}

src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts

@@ -1,5 +1,6 @@
 import he from 'he';
 import _ from 'lodash';
+import { marked } from 'marked';
 import * as vscode from 'vscode';
 import {
   SNYK_IGNORE_ISSUE_COMMAND,
@@ -155,18 +156,20 @@
   }
 
   private mapToModel(issue: Issue<CodeIssueData>): Suggestion {
+    const parsedDetails = marked.parse(issue.additionalData.text) as string;
     return {
       id: issue.id,
       title: issue.title,
       uri: issue.filePath,
       severity: _.capitalize(issue.severity),
       ...issue.additionalData,
+      text: parsedDetails,
     };
   }
 
   private async handleMessage(message: any) {
     try {
       const { type, args } = message;
       switch (type) {
         case 'openLocal': {
           const { uri, cols, rows, suggestionUri } = args as {
@@ -292,6 +295,8 @@
             </div>
           </div>
         </section>
+        <section id="suggestion-details" class="delimiter-top">
+        </section>
         <section class="delimiter-top">
           <div id="info-top" class="font-light">
             This <span class="issue-type">issue</span> was fixed by <span id="dataset-number"></span> projects. Here are <span id="example-number"></span> examples:

src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts

@@ -186,11 +186,14 @@ declare const acquireVsCodeApi: any;
     }
 
     exampleCount = 0;
+
     const currentSeverity = getCurrentSeverity();
     const severity = document.getElementById('severity')!;
     const title = document.getElementById('title')!;
     const description = document.getElementById('description')!;
+    const suggestionDetails = document.querySelector('#suggestion-details');
     const meta = document.getElementById('meta')!;
+
     let type = '';
 
     // Set issue type: vulnerability or issue
@@ -245,6 +248,9 @@ declare const acquireVsCodeApi: any;
 
     description.querySelectorAll('*').forEach(n => n.remove());
     description.innerHTML = '';
+
+    showSuggestionDetails(suggestion);
+
     if (suggestion.markers && suggestion.markers.length) {
       let i = 0;
       for (const m of suggestion.markers) {
@@ -314,6 +320,15 @@ declare const acquireVsCodeApi: any;
       example.className = 'hidden';
       noExamples.className = 'font-light';
     }
+
+    function showSuggestionDetails(suggestion: Suggestion) {
+      if (!suggestion.text) {
+        return;
+      }
+
+      suggestionDetails!.className = 'show';
+      suggestionDetails!.innerHTML = suggestion.text;
+    }
   }
 
   function sendMessage(message: {