From bfcce11a3ea6b50484b086a6b4d47484ec438145 Mon Sep 17 00:00:00 2001
From: Teodora Sandu <81559517+teodora-sandu@users.noreply.github.com>
Date: Mon, 10 Jun 2024 14:17:58 +0100
Subject: [PATCH] feat: hide ai fix panel and add more styling overrides
 [IDE-272] (#541)

* feat: hide ai fix panel and add more styling overrides

* feat: add position line interaction
---
 CHANGELOG.md                                  |  2 ++
 .../ui/jcef/OpenFileLoadHandlerGenerator.kt   | 24 ++++++++++----
 .../toolwindow/panels/JCEFDescriptionPanel.kt |  8 ++++-
 .../stylesheets/snyk_code_suggestion.scss     | 32 ++++++++++++++++---
 4 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a217bf52..2018cc714 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@
 ### Added
 - Inserts the IDE specific scripting.
 - Add information about the number of ignored and non-ignored vulnerabilities for consistent ignores.
+- Hides the AI Fix panel and adds more custom styling for IntelliJ.
+- Adds position line interaction.
 
 ## [2.8.1]
 
diff --git a/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt b/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt
index a32d77838..289bd9dd9 100644
--- a/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt
+++ b/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt
@@ -61,17 +61,29 @@ class OpenFileLoadHandlerGenerator(snykFile: SnykFile) {
                             return;
                         }
                         window.openFileQuery = function(value) { ${openFileQuery.inject("value")} };
+
+                        function navigateToIssue(e, target) {
+                            e.preventDefault();
+                            window.openFileQuery(target.getAttribute("file-path") + ":" +
+                                 target.getAttribute("start-line") + ":" +
+                                 target.getAttribute("end-line") + ":" +
+                                 target.getAttribute("start-character") + ":" +
+                                 target.getAttribute("end-character"));
+                        }
+
                         // Attach a single event listener to the document
                         document.addEventListener('click', function(e) {
                             // Find the nearest ancestor
                             var target = e.target.closest('.data-flow-clickable-row');
                             if (target) {
-                                e.preventDefault();
-                                window.openFileQuery(target.getAttribute("file-path") + ":" +
-                                     target.getAttribute("start-line") + ":" +
-                                     target.getAttribute("end-line") + ":" +
-                                     target.getAttribute("start-character") + ":" +
-                                     target.getAttribute("end-character"));
+                                navigateToIssue(e, target);
+                            }
+                        });
+                        document.getElementById('position-line').addEventListener('click', (e) => {
+                            // Find the first
+                            var target = document.getElementsByClassName('data-flow-clickable-row')[0];
+                            if (target) {
+                                navigateToIssue(e, target);
                             }
                         });
                     })();
diff --git a/src/main/kotlin/io/snyk/plugin/ui/toolwindow/panels/JCEFDescriptionPanel.kt b/src/main/kotlin/io/snyk/plugin/ui/toolwindow/panels/JCEFDescriptionPanel.kt
index 29076fb9d..5a11c26bb 100644
--- a/src/main/kotlin/io/snyk/plugin/ui/toolwindow/panels/JCEFDescriptionPanel.kt
+++ b/src/main/kotlin/io/snyk/plugin/ui/toolwindow/panels/JCEFDescriptionPanel.kt
@@ -127,7 +127,13 @@ class SuggestionDescriptionPanelFromLS(
             ideStyle = SnykStylesheets.SnykCodeSuggestion
         }
         html = html.replace("\${ideStyle}", "<style nonce=\${nonce}>$ideStyle</style>")
-        html = html.replace("\${ideScript}", "")
+        html = html.replace("\${ideScript}", "<script nonce=\${nonce}>" +
+            "    // Ensure the document is fully loaded before executing script to manipulate DOM.\n" +
+            "    document.addEventListener('DOMContentLoaded', () => {\n" +
+            "        document.getElementById(\"ai-fix-wrapper\").classList.add(\"hidden\");\n" +
+            "        document.getElementById(\"no-ai-fix-wrapper\").classList.remove(\"hidden\");\n" +
+            "    })" +
+            "</script>")
 
         val nonce = getNonce()
         html = html.replace("\${nonce}", nonce)
diff --git a/src/main/resources/stylesheets/snyk_code_suggestion.scss b/src/main/resources/stylesheets/snyk_code_suggestion.scss
index 88e525e25..832d10573 100644
--- a/src/main/resources/stylesheets/snyk_code_suggestion.scss
+++ b/src/main/resources/stylesheets/snyk_code_suggestion.scss
@@ -6,8 +6,19 @@
   background: #595a5c;
 }
 
+html,body {
+  height: 100%;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+}
+
 body {
   color: var(--text-color);
+  font-weight: 400;
+  font-size: 0.875rem;
 }
 
 a,
@@ -19,31 +30,38 @@ a,
   border: 1px solid #505254;
 }
 
-
 .ignore-warning {
   background: #FFF4ED;
   color: #B6540B;
   border: 1px solid #E27122;
+  font-size: 0.85rem;
 }
 
-
 .ignore-badge {
   background: #FFF4ED;
   color: #B6540B;
   border: 1px solid #E27122;
+  font-size: 0.75rem;
 }
 
 
-.data-flow-body {
-  background-color: var(--data-flow-body-color);
+.issue-overview-header,
+.ignore-details-header,
+.data-flow-header,
+.ai-fix-header,
+.example-fixes-header {
+  font-size: 0.75rem;
 }
 
+.severity-type-container {
+  font-size: 0.85rem;
+
+}
 
 .data-flow-clickable-row {
   color: var(--link-color);
 }
 
-
 .data-flow-delimiter {
   color: #BBBBBB;
 }
@@ -52,6 +70,10 @@ a,
   border-bottom: 1px solid var(--tabs-bottom-color);
 }
 
+.tab-item{
+  font-size: 0.75rem;
+}
+
 .tab-item-icon path {
   fill: var(--tab-item-github-icon-color);
 }