feat: add Code Issue panel styles [IDE-215] (#479)

snyk · Apr 4, 2024 · 6ac1779 · 6ac1779
1 parent a375bf2
commit 6ac1779
Show file tree

Hide file tree

Showing 4 changed files with 317 additions and 24 deletions.
diff --git a/infrastructure/code/code_html.go b/infrastructure/code/code_html.go
@@ -19,6 +19,7 @@ package code
 import (
 	_ "embed"
 	"fmt"
+	"html"
 	"path/filepath"
 	"regexp"
 	"strings"
@@ -46,27 +47,29 @@ func getDataFlowHeadingHtml(issue snyk.CodeIssueData) string {
 }
 
 func getDataFlowHtml(issue snyk.CodeIssueData) string {
-	dataFlowHtml := ""
+	dataFlowHtml := `<table class="data-flow-body"><tbody>`
+
 	for i, flow := range issue.DataFlow {
 		fileName := filepath.Base(flow.FilePath)
 		dataFlowHtml += fmt.Sprintf(`
-		<div class="data-flow-row">
-		  <span class="data-flow-number">%d</span>
-		  <span class="data-flow-blank"> </span>
-		  <span class="data-flow-filepath" file-path="%s" start-line="%d" end-line="%d" start-character="%d" end-character="%d">%s:%d</span>
-		  <span class="data-flow-delimiter">|</span>
-		  <span class="data-flow-text">%s</span>
-		</div>`,
+		  <tr class="data-flow-row">
+		    <td class="data-flow-number">%d</td>
+		    <td class="data-flow-clickable-row" file-path="%s" start-line="%d" end-line="%d" start-character="%d" end-character="%d">%s:%d</td>
+		    <td class="data-flow-delimiter">|</td>
+		    <td class="data-flow-text">%s</td>
+		  </tr>`,
 			i+1,
-			flow.FilePath,
+			html.EscapeString(flow.FilePath),
 			flow.FlowRange.Start.Line,
 			flow.FlowRange.End.Line,
 			flow.FlowRange.Start.Character,
 			flow.FlowRange.End.Character,
-			fileName,
+			html.EscapeString(fileName),
 			flow.FlowRange.Start.Line+1,
-			flow.Content)
+			html.EscapeString(flow.Content))
 	}
+
+	dataFlowHtml += `</tbody></table>`
 	return dataFlowHtml
 }
 
@@ -92,7 +95,7 @@ func getTabsHtml(fixes []snyk.ExampleCommitFix) string {
 		tabsHtml += fmt.Sprintf(`<span class="tab-item %s" id="tab-link-%d">%s</span>`, isSelectedClass, i, getRepoName(fix.CommitURL))
 	}
 
-	tabsHtml += "</div>"
+	tabsHtml += `</div><div class="tab-container">`
 
 	// Generate the contents for each tab
 	for i, fix := range fixes {
@@ -106,6 +109,8 @@ func getTabsHtml(fixes []snyk.ExampleCommitFix) string {
 		tabsHtml += fmt.Sprintf(`<div id="tab-content-%d" class="tab-content %s">%s</div>`, i, isSelectedClass, contentHtml)
 	}
 
+	tabsHtml += `</div>`
+
 	return tabsHtml
 }
 
@@ -136,6 +141,8 @@ func getDetailsHtml(issue snyk.Issue) string {
 	html = replaceVariableInHtml(html, "exampleCount", fmt.Sprintf("%d", len(additionalData.ExampleCommitFixes)))
 	html = replaceVariableInHtml(html, "tabsNav", getTabsHtml(additionalData.ExampleCommitFixes))
 
+	log.Debug().Msgf("Details HTML: %s", html)
+
 	return html
 }
 

diff --git a/infrastructure/code/code_html_test.go b/infrastructure/code/code_html_test.go
@@ -50,14 +50,12 @@ func Test_CodeDetailsPanel_html_getDetailsHtml(t *testing.T) {
 	codePanelHtml := getDetailsHtml(issue)
 
 	// assert Data Flow section
-	expectedDataFlowHeading := fmt.Sprintf("<h2>Data Flow - %d steps</h2>", len(dataFlow))
+	expectedDataFlowHeading := fmt.Sprintf(`<h2 class="data-flow-header">Data Flow - %d steps</h2>`, len(dataFlow))
 
 	assert.Contains(t, codePanelHtml, expectedDataFlowHeading)
-	assert.Contains(t, codePanelHtml, "<h2>Data Flow - 4 steps</h2>")
-	assert.Contains(t, codePanelHtml, "class=\"data-flow-section\"")
-	assert.Contains(t, codePanelHtml, "class=\"data-flow-row\"")
-	assert.Contains(t, codePanelHtml, "if (!vulnLines.every(e => selectedLines.includes(e))) return false")
-	assert.Contains(t, codePanelHtml, `<span class="data-flow-filepath" file-path="juice-shop/routes/vulnCodeSnippet.ts" start-line="67" end-line="67" start-character="28" end-character="42">vulnCodeSnippet.ts:68</span>`)
+	assert.Contains(t, codePanelHtml, `<table class="data-flow-body"><tbody>`)
+	assert.Contains(t, codePanelHtml, `<td class="data-flow-clickable-row" file-path="juice-shop/routes/vulnCodeSnippet.ts" start-line="67" end-line="67" start-character="28" end-character="42">vulnCodeSnippet.ts:68</td>`)
+	assert.Contains(t, codePanelHtml, `<td class="data-flow-text">if (!vulnLines.every(e =&gt; selectedLines.includes(e))) return false</td>`)
 
 	assert.NotContains(t, codePanelHtml, "${dataFlow}")
 	assert.NotContains(t, codePanelHtml, "${dataFlowCount}")

diff --git a/infrastructure/code/convert_test.go b/infrastructure/code/convert_test.go
@@ -645,7 +645,10 @@ func TestSnykCodeBackendService_convert_shouldConvertIssues(t *testing.T) {
 	assert.Equal(t, resp.Sarif.Runs[0].Tool.Driver.Rules[0].Properties.Cwe, issue.CWEs)
 	assert.Nil(t, issues[0].IgnoreDetails)
 	assert.False(t, issues[0].IsIgnored)
-	assert.Contains(t, (issues[0].AdditionalData).(snyk.CodeIssueData).Details, "<h2>Data Flow - 4 steps</h2>")
+
+	codeIssueData, _ := issues[0].AdditionalData.(snyk.CodeIssueData)
+	dataFlowSteps := fmt.Sprintf(`<h2 class="data-flow-header">Data Flow - %d steps</h2>`, len(codeIssueData.DataFlow))
+	assert.Contains(t, codeIssueData.Details, dataFlowSteps)
 }
 
 func referencesForSampleSarifResponse() []snyk.Reference {