From d3cb0de60b1a04f477263d0dfbe8a2b77e2ea4a6 Mon Sep 17 00:00:00 2001 From: Teodora Sandu Date: Fri, 31 May 2024 09:00:01 +0100 Subject: [PATCH] feat: ai fix html --- infrastructure/code/code_html.go | 1 + infrastructure/code/template/details.html | 541 ++++++++++++++++++---- 2 files changed, 447 insertions(+), 95 deletions(-) diff --git a/infrastructure/code/code_html.go b/infrastructure/code/code_html.go index fc6816883..49d6b8597 100644 --- a/infrastructure/code/code_html.go +++ b/infrastructure/code/code_html.go @@ -88,6 +88,7 @@ func getCodeDetailsHtml(issue snyk.Issue) string { data := map[string]interface{}{ "IssueTitle": additionalData.Title, + "IssueMessage": additionalData.Message, "IssueType": getIssueType(additionalData), "SeverityIcon": getSeverityIconSvg(issue), "CWEs": issue.CWEs, diff --git a/infrastructure/code/template/details.html b/infrastructure/code/template/details.html index 60944f88e..0db9d47c1 100644 --- a/infrastructure/code/template/details.html +++ b/infrastructure/code/template/details.html @@ -39,16 +39,6 @@ background: #595a5c; } - html, - body { - height: 100%; - font-size: 16px; - display: flex; - flex-direction: column; - margin: 0; - padding: 0; - } - *, *:before, *:after { @@ -57,8 +47,6 @@ body { font-family: var(--default-font); - font-weight: 400; - font-size: 0.875rem; overflow-y: auto; overflow-x: hidden; } @@ -87,8 +75,8 @@ .issue-overview-header, .ignore-details-header, .data-flow-header, + .ai-fix-header, .example-fixes-header { - font-size: 0.75rem; line-height: 1.25rem; } @@ -108,7 +96,6 @@ align-items: center; margin-bottom: 1em; line-height: 1em; - font-size: 0.85rem; } .lesson-container { @@ -127,6 +114,10 @@ align-items: center; } + .is-external { + padding-right: 12px; + } + .styled-link { text-decoration: none; } @@ -156,7 +147,6 @@ display: flex; align-items: center; justify-content: flex-start; - font-size: 0.85rem; line-height: 1.125rem; padding: 0.5em; border-radius: 0.25em; @@ -165,12 +155,15 @@ } .ignore-badge { - font-size: 0.75rem; padding: 0.35em 0.35em; border-radius: 0.25em; margin-left: 1em; } + .position-line:hover{ + cursor: pointer; + } + .data-flow-body { border-collapse: collapse; font-family: 'Courier New', Courier, monospace; @@ -226,7 +219,6 @@ } .tab-item { - font-size: 0.75rem; font-weight: 500; float: left; display: block; @@ -238,6 +230,10 @@ transition: background-color 0.3s, border-color 0.3s; } + .tab-item-icon { + color: inherit; + } + .example-repo-link { text-decoration: none; color: inherit; @@ -251,7 +247,6 @@ .example-line { display: block; - padding: 2px 0 18px 0; } .example-line-number { @@ -346,6 +341,278 @@ text-align: left; align-self: stretch; } + + button, + .button { + border-radius: 3px; + } + + /*AI fix tab */ + .row.between { + justify-content: space-between; + } + .row { + display: flex; + flex-direction: row; + width: 100%; + } + + .suggestion-text { + padding: 0.4rem 0; + margin-bottom: 0.8rem; + line-height: 2.4rem; + } + + .suggestion-text { + line-height: 1.6; + } + + .suggestion-links { + display: flex; + width: 100%; + line-height: 1; + } + + .ai-fix { + padding-bottom: 0; + } + + .ai-fix p { + margin-bottom: 0; + } + + .sn-fix-wrapper { + padding: 2rem; + margin-top:1rem; + border-radius: .8rem; + overflow: hidden; + } + + .generate-ai-fix { + width: auto; + padding: 8px 16px; + } + + .sn-apply-fix {} + + .sn-readmore { + margin-top: 1.6rem; + } + + .sn-loading { + display: flex; + } + + .sn-loading svg { + inline-size: 6rem; + block-size: auto + } + + .sn-loading-wrapper { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + } + + .sn-loading-message { + opacity: 0; + position: absolute; + width: 100%; + padding-left: 16px; + margin-bottom: 8px; + font-size: 14px; + } + + .sn-loading-title { + font-weight: 600; + line-height: 1.5; + } + + .sn-loading-description { + margin-bottom: 0; + opacity: .75 + } + + .sn-msg-1 { + animation: reduce 4s ease-in; + } + + .sn-msg-2 { + animation: reduce 4s ease-in; + animation-delay: 4s; + } + + .sn-msg-3 { + animation: reduce 4s ease-in; + animation-delay: 8s; + } + + .sn-msg-4 { + animation: inference 4s ease-in infinite; + animation-delay: 12s; + } + + #s0 { + animation: s0ani 3000ms linear infinite; + } + + #l1 { + animation: l1ani 3000ms linear infinite; + } + + #l2 { + animation: l2ani 3000ms linear infinite; + } + + #l3 { + animation: l3ani 3000ms linear infinite; + } + + #b1 { + animation: b1ani 3000ms linear infinite; + } + + #b2 { + animation: b2ani 3000ms linear infinite; + } + + #b3 { + animation: b3ani 3000ms linear infinite; + } + + @keyframes s0ani { + 0% { + transform: translate(50%, -15%); + } + + 100% { + transform: translate(50%, 115%); + } + } + + @keyframes l1ani { + + 0%, + 23% { + fill: rgba(255, 255, 255, 0.2); + } + + 40%, + 100% { + fill: rgba(249, 122, 153, 0.6); + } + } + + @keyframes l2ani { + + 0%, + 40% { + fill: rgba(255, 255, 255, 0.2); + } + + 56%, + 100% { + fill: rgba(249, 122, 153, 0.6); + } + } + + @keyframes l3ani { + + 0%, + 56% { + fill: rgba(255, 255, 255, 0.2); + } + + 72%, + 100% { + fill: rgba(67, 181, 154, 0.6); + } + } + + @keyframes b1ani { + + 0%, + 8% { + opacity: 0; + transform: scale(1, 1); + } + + 33% { + transform: translate(-10%, -18%) scale(1.6, 1.6); + } + + 53%, + 100% { + opacity: 1; + transform: scale(1, 1); + } + } + + @keyframes b2ani { + + 0%, + 36% { + opacity: 0; + transform: scale(1, 1); + } + + 50% { + transform: translate(-20%, -18%) scale(1.4, 1.4); + } + + 60%, + 100% { + opacity: 1; + transform: scale(1, 1); + } + } + + @keyframes b3ani { + + 0%, + 54% { + opacity: 0; + transform: scale(1, 1); + } + + 66% { + transform: translate(-10%, -27%) scale(1.4, 1.4); + } + + 76%, + 100% { + opacity: 1; + transform: scale(1, 1); + } + } + + + @keyframes reduce { + + 15%, + 85% { + opacity: 1 + } + + 86%, + 100%, + 0% { + opacity: 0; + } + } + + @keyframes inference { + 0%, + 25%, + 100% { + opacity: 1 + } + } + + .hidden { + display: none; + } ${ideStyle} @@ -381,7 +648,7 @@

{{.IssueTitle}}

{{end}} {{if .IgnoreLineAction}} -
Position line: {{.IgnoreLineAction}}
+
Position line: {{.IgnoreLineAction}}
{{end}} {{if ge .PriorityScore 0}} @@ -396,6 +663,12 @@

{{.IssueTitle}}

Learn about this vulnerability +
+ + + + +
{{end}} @@ -408,21 +681,13 @@

{{.IssueTitle}}

Ignore Details - - Fix Analysis - - - Vulnerability Overview - - {{else}} - + {{end}} + Fix Analysis Vulnerability Overview - {{end}} @@ -451,84 +716,169 @@

{{.IssueTitle}}

- - {{if .HasAIFix }} - -
-
Unsanitized input from cookies flows into send, where it is used to - render an HTML page returned to the - user. This may result in a Cross-Site Scripting attack (XSS).
-

- DeepCode AI Fixes -

- ⚡️ Fix this issue by generating a solution using Snyk DeepCode AI - -
- {{else}} - - -
-

- Data Flow - {{len .DataFlow}} {{if gt (len .DataFlow) 1}}steps{{else}}step{{end}} -

-
- - - {{range .DataFlowTable}} - - - - - - - {{end}} - -
{{.Number}} - {{.FileName}}:{{.StartLineValue}} - |{{.Content}}
+
+
{{.IssueMessage}}
+
+
- -
-

Fixed Code Examples

-
- {{if gt (len .ExampleCommitFixes) 0}} - This issue was fixed by {{.RepoCount}} projects. Here are {{.ExampleCount}} example fixes. -
- {{range $index, $fix := .ExampleCommitFixes}} - - {{$fix.IconSVG}} - {{$fix.RepoName}} - - {{end}} + +
+ +
+

+ DeepCode AI Fixes +

+ +

⚡ Fix this issue by generating a solution using Snyk DeepCode AI

+ +
+ + + +
+
+ + + + + + +
+ + +
+ +
+

+ Data Flow - {{len .DataFlow}} {{if gt (len .DataFlow) 1}}steps{{else}}step{{end}} +

+
+ + + {{range .DataFlowTable}} + + + + + + + {{end}} + +
{{.Number}} + {{.FileName}}:{{.StartLineValue}} + |{{.Content}}
+
+
+ + +
+

Fixed Code Examples

+
+ {{if gt (len .ExampleCommitFixes) 0}} + This issue was fixed by {{.RepoCount}} projects. Here are {{.ExampleCount}} example fixes. +
+ {{range $index, $fix := .ExampleCommitFixes}} + + {{$fix.IconSVG}} + {{$fix.RepoName}} + + {{end}} +
+
+ {{range $index, $fix := .ExampleCommitFixes}} +
+ {{range $fix.ExampleLines}} +
+ {{.LineNumber}} + {{.Line}} +
+ {{end}}
{{end}}
+ {{else}} + No example fixes are available. {{end}}
- {{else}} - No example fixes are available. - {{end}} -
-
- {{end}} +
+
-
@@ -600,8 +950,9 @@

Fixed Code Examples

}; // Event listeners for main and nested tabs + // TODO: move this into the HTML as an onclick document.querySelector(MAIN_TAB_NAV_SELECTOR).addEventListener('click', onMainTabClicked); - document.querySelector(EXAMPLE_TAB_NAV_SELECTOR).addEventListener('click', onExampleTabClicked); + document.querySelector(EXAMPLE_TAB_NAV_SELECTOR)?.addEventListener('click', onExampleTabClicked); });