diff --git a/infrastructure/code/code_html.go b/infrastructure/code/code_html.go index 4d3361c44..a7ebaa4d2 100644 --- a/infrastructure/code/code_html.go +++ b/infrastructure/code/code_html.go @@ -110,6 +110,22 @@ func getCodeDetailsHtml(issue snyk.Issue) string { "LessonUrl": issue.LessonUrl, "LessonIcon": getLessonIconSvg(), "IgnoreLineAction": getLineToIgnoreAction(issue), + "ShowAIFix": additionalData.HasAIFix, + "ArrowLeftDarkIcon": template.HTML(` + +`), + "ArrowLeftLightIcon": template.HTML(` + + +`), + "ArrowRightDarkIcon": template.HTML(` + + +`), + "ArrowRightLightIcon": template.HTML(` + + +`), } if issue.IsIgnored { @@ -236,6 +252,7 @@ func generateNonce() (string, error) { } 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 f676dae0f..0fd3acda7 100644 --- a/infrastructure/code/template/details.html +++ b/infrastructure/code/template/details.html @@ -385,6 +385,252 @@ border-color: var(--vscode-button-hoverBackground); color: var(--vscode-button-foreground); } + + /* TODO: CSS extract once we have approval of https://github.com/snyk/snyk-intellij-plugin/pull/535 */ + .ide-ai-fix-visibility { + display: none; + } + + .sn-ai-fix-hidden { + display: none; + } + + .ai-fix { + padding-bottom: 0; + } + + .ai-fix p { + margin-bottom: 0; + } + + .sn-fix-wrapper { + padding: 2rem; + margin-top:1rem; + background-color: var(--vscode-editor-background); + border-radius: .8rem; + overflow: auto; + } + + .generate-ai-fix { + width: auto; + padding: 8px 16px; + } + + .sn-apply-fix {} + + + .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 + } + } @@ -496,6 +742,7 @@

+ {{if not .ShowAIFix}}

External example fixes

@@ -525,6 +772,75 @@

External example fixes

{{end}}
+ {{end} + + + {{if .ShowAIFix}} +
+

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

+ +
+ + + +
+
+ +
+
+ There are no fix diffs for this issue. +
+
+
Here are AI-generated solutions:
+
+ + + + + + AI solution 1/ + + + + + +
+
+
+ +
+ +
+
+ ⚠️ There was an issue generating the fix +
+
+ +
+
+ {{end}}