feat: change dataflow based on designs [IDE-382] (#542)

snyk · Jun 14, 2024 · 28ae1cc · 28ae1cc
1 parent 6f590f1
commit 28ae1cc
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 21 deletions.
diff --git a/infrastructure/code/code_html.go b/infrastructure/code/code_html.go
@@ -115,6 +115,7 @@ func getCodeDetailsHtml(issue snyk.Issue) string {
 		"ArrowLeftLight":     getArrowLeftLightSvg(),
 		"ArrowRightDark":     getArrowRightDarkSvg(),
 		"ArrowRightLight":    getArrowRightLightSvg(),
+		"FileIcon":           getFileIconSvg(),
 	}
 
 	if issue.IsIgnored {
@@ -171,18 +172,22 @@ func parseCategory(category string) string {
 	return category
 }
 
-func prepareDataFlowTable(issue snyk.CodeIssueData) []DataFlowItem {
-	items := make([]DataFlowItem, 0, len(issue.DataFlow))
+func prepareDataFlowTable(issue snyk.CodeIssueData) map[string][]DataFlowItem {
+	items := make(map[string][]DataFlowItem, 0)
 
 	for i, flow := range issue.DataFlow {
-		items = append(items, DataFlowItem{
+		fileName := filepath.Base(flow.FilePath)
+		if items[fileName] == nil {
+			items[fileName] = []DataFlowItem{}
+		}
+		items[fileName] = append(items[fileName], DataFlowItem{
 			Number:         i + 1,
 			FilePath:       flow.FilePath,
 			StartLine:      flow.FlowRange.Start.Line,
 			EndLine:        flow.FlowRange.End.Line,
 			StartCharacter: flow.FlowRange.Start.Character,
 			EndCharacter:   flow.FlowRange.End.Character,
-			FileName:       filepath.Base(flow.FilePath),
+			FileName:       fileName,
 			Content:        flow.Content,
 			StartLineValue: flow.FlowRange.Start.Line + 1,
 		})
@@ -260,6 +265,13 @@ func formatDate(date time.Time) string {
 	return fmt.Sprintf("%s %d, %d", month, date.Day(), date.Year())
 }
 
+func getFileIconSvg() template.HTML {
+	return template.HTML(`<svg class="data-flow-file-icon" width="16" height="16" viewBox="0 0 32 32" xmlns="http
+://www.w3.
+org/2000/svg" fill="none"">
+	<path d="M20.414,2H5V30H27V8.586ZM7,28V4H19v6h6V28Z" fill="#888"/></svg>`)
+}
+
 func getExternalIconSvg() template.HTML {
 	return template.HTML(` <svg class="is-external-icon" width="9" height="9" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg" fill="none">
 		<path d="M4.99998 0L6.64648 1.6465L3.14648 5.1465L3.85348 5.8535L7.35348 2.3535L8.99998 4V0H4.99998Z" fill="#888"/>

diff --git a/infrastructure/code/code_html_test.go b/infrastructure/code/code_html_test.go
@@ -66,8 +66,9 @@ func Test_Code_Html_getCodeDetailsHtml(t *testing.T) {
 	// assert Data Flow section
 	expectedDataFlowHeading := fmt.Sprintf(`Data Flow - %d steps`, len(dataFlow))
 	assert.Contains(t, codePanelHtml, expectedDataFlowHeading)
-	assert.Contains(t, codePanelHtml, `<table class="data-flow-body">`)
-	assert.Contains(t, codePanelHtml, `main.ts:5`)
+	assert.Contains(t, codePanelHtml, `<table class="data-flow-table">`)
+	assert.Contains(t, codePanelHtml, `main.ts`)
+	assert.Contains(t, codePanelHtml, `line:5`)
 	assert.Contains(t, codePanelHtml, `<td class="data-flow-text">import * as http from &#39;http&#39;;</td>`)
 
 	// assert Ignore Details section - Elements should not be present

diff --git a/infrastructure/code/template/details.html b/infrastructure/code/template/details.html
@@ -60,6 +60,10 @@
       overflow-y: auto;
     }
 
+    section {
+      padding: 10px;
+    }
+
     .ignore-warning-wrapper,
     header,
     article,
@@ -169,20 +173,40 @@
       cursor: pointer;
     }
 
+    .data-flow-file {
+      font-weight: bold;
+      font-size: 1em;
+      display: flex;
+      align-items: center;
+    }
+
+    .data-flow-file-icon {
+      margin-left: 4px;
+      margin-right: 4px;
+    }
+
     .data-flow-body {
+      margin-top: 5px;
+    }
+
+    .data-flow-table {
+      margin-top: 5px;
+      margin-left: 15px;
+    }
+
+    .data-flow-row {
       border-collapse: collapse;
       font-family: "Courier New", Courier, monospace;
     }
 
     .data-flow-number {
-      margin-right: 8px;
+      padding-left: 14px;
+      padding-right: 14px;
       width: 0.9375rem;
       text-align: right;
     }
 
     .data-flow-clickable-row {
-      display: block;
-      margin: 0px 16px;
       font-weight: 400;
     }
 
@@ -201,6 +225,13 @@
       font-weight: bold;
     }
 
+    .data-flow-number,
+    .data-flow-clickable-row,
+    .data-flow-delimiter,
+    .data-flow-text {
+      display: inline;
+    }
+
     .main-tabs-nav,
     .tabs-nav {
       display: flex;
@@ -842,21 +873,27 @@ <h2 class="data-flow-header">
                 Data Flow - {{len .DataFlow}} {{if gt (len .DataFlow) 1}}steps{{else}}step{{end}}
               </h2>
               <div class="data-flow-body">
-                <table class="data-flow-body">
+                {{range $fileName, $dataFlowItems := .DataFlowTable}}
+                <div class="data-flow-file">
+                  {{$.FileIcon}}
+                  <span class="data-flow-file-name">{{$fileName}}</span>
+                </div>
+                <table class="data-flow-table">
                   <tbody>
-                    {{range .DataFlowTable}}
-                    <tr class="data-flow-row">
-                      <td class="data-flow-number">{{.Number}}</td>
-                      <td class="data-flow-clickable-row" file-path="{{.FilePath}}" start-line="{{.StartLine}}"
-                        end-line="{{.EndLine}}" start-character="{{.StartCharacter}}" end-character="{{.EndCharacter}}">
-                        {{.FileName}}:{{.StartLineValue}}
-                      </td>
-                      <td class="data-flow-delimiter">|</td>
-                      <td class="data-flow-text">{{.Content}}</td>
-                    </tr>
-                    {{end}}
+                      {{range $dataFlowItems}}
+                      <tr class="data-flow-row">
+                        <td class="data-flow-number">{{.Number}}</td>
+                        <td class="data-flow-clickable-row" file-path="{{.FilePath}}" start-line="{{.StartLine}}"
+                          end-line="{{.EndLine}}" start-character="{{.StartCharacter}}" end-character="{{.EndCharacter}}">
+                          line:{{.StartLineValue}}
+                        </td>
+                        <td class="data-flow-delimiter">|</td>
+                        <td class="data-flow-text">{{.Content}}</td>
+                      </tr>
+                      {{end}}
                   </tbody>
                 </table>
+                {{end}}
               </div>
             </section>
 

diff --git a/internal/util/testdata/utf16le.csv b/internal/util/testdata/utf16le.csv