From f643ef276b0d74bca5d77db0afc81e4f3661af0e 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 | 359 +++++++++++++++++++++- 2 files changed, 349 insertions(+), 11 deletions(-) diff --git a/infrastructure/code/code_html.go b/infrastructure/code/code_html.go index fc6816883..3ddcaac6c 100644 --- a/infrastructure/code/code_html.go +++ b/infrastructure/code/code_html.go @@ -229,6 +229,7 @@ func formatDate(date time.Time) string { } func getSeverityIconSvg(issue snyk.Issue) template.HTML { + // TODO: move these to actual icons switch issue.Severity { case snyk.Critical: return template.HTML(` diff --git a/infrastructure/code/template/details.html b/infrastructure/code/template/details.html index 60944f88e..aa4b44816 100644 --- a/infrastructure/code/template/details.html +++ b/infrastructure/code/template/details.html @@ -346,6 +346,264 @@ text-align: left; align-self: stretch; } + + /* AI FIX STUFF TODO: REFACTOR */ + /* TODO: CSS extract once we have approval of https://github.com/snyk/snyk-intellij-plugin/pull/535 */ + .ide-ai-fix-visibility { + display: none; + } + + button, + .button { + border-radius: 3px; + } + + .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: auto; + } + + .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} @@ -404,6 +662,7 @@

{{.IssueTitle}}

+ {{if .IsIgnored}} Ignore Details @@ -451,19 +710,96 @@

{{.IssueTitle}}

+
+
+
+ +
+
- {{if .HasAIFix }} + {{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 - +
+

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

+ +
+ + + +
+
+ + + + {{else}} @@ -600,8 +936,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); });