diff --git a/infrastructure/code/code_html.go b/infrastructure/code/code_html.go index 65b78e373..be31123cf 100644 --- a/infrastructure/code/code_html.go +++ b/infrastructure/code/code_html.go @@ -103,6 +103,30 @@ func getCodeDetailsHtml(issue snyk.Issue) string { "LessonIcon": getLessonIconSvg(), "IgnoreLineAction": getLineToIgnoreAction(issue), "HasAIFix": additionalData.HasAIFix, + "MoreInfoIcon": template.HTML(` + + + +`), + "ArrowLeftDarkIcon": template.HTML(` + +`), + "ArrowLeftLightIcon": template.HTML(` + + +`), + "ArrowRightDarkIcon": template.HTML(` + + +`), + "ArrowRightLightIcon": template.HTML(` + + +`), } if issue.IsIgnored { @@ -227,6 +251,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 42e01f242..6f7b769b8 100644 --- a/infrastructure/code/template/details.html +++ b/infrastructure/code/template/details.html @@ -335,6 +335,252 @@ text-align: left; align-self: stretch; } + + /* 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 + } + } ${ideStyle} @@ -440,19 +686,81 @@

{{.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}}