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
snyk · Jun 10, 2024 · bfcce11 · bfcce11
1 parent 85c66ff
commit bfcce11
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
 }