refactor: restructures the html and css so it can look good in intellij

snyk · Jul 9, 2024 · 96d5b69 · 96d5b69
1 parent 489bec9
commit 96d5b69
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 25 deletions.
diff --git a/infrastructure/oss/issue_html.go b/infrastructure/oss/issue_html.go
@@ -134,19 +134,6 @@ func getIntroducedThroughs(issue snyk.OssIssueData) []IntroducedThrough {
 	return introducedThroughs
 }
 
-func getOutdatedDependencyMessage(issue snyk.OssIssueData) string {
-	remediationAdvice := fmt.Sprintf("Your dependencies are out of date, "+
-		"otherwise you would be using a newer %s than %s@%s. ", issue.Name, issue.Name, issue.Version)
-
-	if issue.PackageManager == "npm" || issue.PackageManager == "yarn" || issue.PackageManager == "yarn-workspace" {
-		remediationAdvice += "Try relocking your lockfile or deleting node_modules and reinstalling" +
-			" your dependencies. If the problem persists, one of your dependencies may be bundling outdated modules."
-	} else {
-		remediationAdvice += "Try reinstalling your dependencies. If the problem persists, one of your dependencies may be bundling outdated modules."
-	}
-	return remediationAdvice
-}
-
 type DetailedPath struct {
 	From        []string
 	Remediation string
@@ -188,3 +175,16 @@ func getRemediationAdvice(issue snyk.OssIssueData) string {
 	}
 	return remediationAdvice
 }
+
+func getOutdatedDependencyMessage(issue snyk.OssIssueData) string {
+	remediationAdvice := fmt.Sprintf("Your dependencies are out of date, "+
+		"otherwise you would be using a newer %s than %s@%s. ", issue.Name, issue.Name, issue.Version)
+
+	if issue.PackageManager == "npm" || issue.PackageManager == "yarn" || issue.PackageManager == "yarn-workspace" {
+		remediationAdvice += "Try relocking your lockfile or deleting node_modules and reinstalling" +
+			" your dependencies. If the problem persists, one of your dependencies may be bundling outdated modules."
+	} else {
+		remediationAdvice += "Try reinstalling your dependencies. If the problem persists, one of your dependencies may be bundling outdated modules."
+	}
+	return remediationAdvice
+}
diff --git a/infrastructure/oss/template/details.html b/infrastructure/oss/template/details.html
@@ -23,6 +23,46 @@
         content="default-src 'self' ${cspSource}; style-src 'self' 'nonce-${nonce}' ${cspSource}; script-src 'nonce-${nonce}' ${cspSource};">
 
   <style nonce="${nonce}">
+    :root {
+      --default-font: "SF Pro Text", "Segoe UI", "Ubuntu", Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: #595a5c;
+    }
+
+    body {
+      font-family: var(--default-font);
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    h2 {
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+
+    section {
+      padding: 0px 20px 5px 20px;
+    }
+
+    .styled-link {
+      text-decoration: none;
+    }
+
+    .styled-link:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
     .suggestion {
       position: relative;
       display: flex;
@@ -32,7 +72,6 @@
     }
 
     .suggestion .suggestion-text {
-      padding: 0.4rem 0;
       margin-bottom: 0.8rem;
       font-size: 1.8rem;
       font-weight: 500;
@@ -59,25 +98,48 @@
       height: 16px;
     }
 
-    .identifiers {
-      font-size: 1.3rem;
-      line-height: 2rem;
+    .clickable:hover {
+      cursor: pointer;
+    }
+
+    .delimiter {
+      width: 0;
+      height: 1.3rem;
+      margin: 0 0.8rem 0 0.8rem;
+      line-height: 1rem;
+    }
+
+    .summary .summary-item {
+      display: flex;
+      margin: 0.3em 0 0.3em 0;
     }
 
-    /*TODO: move to vscode*/
-    .vscode-dark .light-only {
-      display: none;
+    .summary .label {
+      width: 160px;
     }
 
-    .vscode-light .dark-only {
-      display: none;
+    .summary .content {
+      flex: 70%;
+    }
+
+    .summary .remediation {
+      margin-bottom: 1.6rem
+    }
+
+    .summary .detailed-path:last-child .remediation {
+      margin-bottom: 0
+    }
+
+    .vulnerability-overview pre {
+      padding: 8px 16px;
+      overflow-x: auto;
+      border-radius: 4px;
     }
 
     .learn {
       opacity: 0;
       height: 0;
       margin-top: 0;
-      font-size: 1.3rem;
     }
 
     .learn.show {
@@ -130,7 +192,7 @@
       {{end}}
 
       {{if gt (len .CvssScore) 0}}
-      <span class="delimiter">|</span>
+      <span class="delimiter"> </span>
       <span>CVSS {{.CvssScore}}</span>
       {{end}}
 

diff --git a/internal/html/html.go b/internal/html/html.go
@@ -61,7 +61,7 @@ func GetSeverityIconSvg(issue snyk.Issue) template.HTML {
 			 <path d="M3 3h2l2.997 7.607L11 3h2L9 13H7L3 3Zm0 0h2v10l-2-.001V3.001Zm8 0h2V13h-2V3Z" fill="#fff"/>
 		 </svg>`)
 	case snyk.Low:
-		return template.HTML(`<svg id="severity-icon" class="icon low" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32"	viewBox="0 0 16 16">
+		return template.HTML(`<svg id="severity-icon" class="icon low" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
 			 <rect width="16" height="16" rx="2" fill="#88879E"/>
 			 <path d="M11 11v2H6.705v-2H11ZM7 3v10H5V3h2Z" fill="#fff"/>
 		 </svg>`)