CM-42969 - Improve rendering of suggested AI fixes; fix extension state; fix code actions (#121)

Author: MarshalX

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## [Unreleased]
 
+## [v1.13.1]
+
+- Improve suggested AI fix rendering in violation cards
+- Fix extension state on startup
+- Fix Code Actions creation
+
 ## [v1.13.0]
 
 - Add AI remediations for IaC and SAST
@@ -124,6 +130,8 @@
 
 The first stable release with the support of Secrets, SCA, TreeView, Violation Card, and more.
 
+[v1.13.1]: https://github.com/cycodehq/vscode-extension/releases/tag/v1.13.1
+
 [v1.13.0]: https://github.com/cycodehq/vscode-extension/releases/tag/v1.13.0
 
 [v1.12.0]: https://github.com/cycodehq/vscode-extension/releases/tag/v1.12.0
@@ -170,4 +178,4 @@ The first stable release with the support of Secrets, SCA, TreeView, Violation C
 
 [v1.0.0]: https://github.com/cycodehq/vscode-extension/releases/tag/v1.0.0
 
-[Unreleased]: https://github.com/cycodehq/vscode-extension/compare/v1.13.0...HEAD
+[Unreleased]: https://github.com/cycodehq/vscode-extension/compare/v1.13.1...HEAD

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cycode",
   "displayName": "Cycode",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "publisher": "cycode",
   "description": "Boost security in your dev lifecycle via SAST, SCA, Secrets & IaC scanning.",
   "repository": {

src/providers/code-action/unique-diagnostics.ts

@@ -1,18 +1,22 @@
 import * as vscode from 'vscode';
+import { extensionId } from '../../utils/texts';
 
 export const aggregateDiagnosticsByCode = (
   diagnostics: readonly vscode.Diagnostic[],
 ): Map<string, vscode.Diagnostic[]> => {
   const aggregatedDiagnostics = new Map<string, vscode.Diagnostic[]>();
 
   diagnostics.forEach((diagnostic) => {
-    const diagnosticCode = diagnostic.code as string;
+    if (diagnostic.source !== extensionId || !diagnostic.code || typeof diagnostic.code !== 'string') {
+      // if diagnostics came from an external source or something wrong with code, we don't want to aggregate them
+      return;
+    }
 
-    if (!aggregatedDiagnostics.has(diagnosticCode)) {
-      aggregatedDiagnostics.set(diagnosticCode, []);
+    if (!aggregatedDiagnostics.has(diagnostic.code)) {
+      aggregatedDiagnostics.set(diagnostic.code, []);
     }
 
-    aggregatedDiagnostics.get(diagnosticCode)?.push(diagnostic);
+    aggregatedDiagnostics.get(diagnostic.code)?.push(diagnostic);
   });
 
   return aggregatedDiagnostics;

src/services/state-service.ts

@@ -118,6 +118,15 @@ export class StateService implements IStateService {
   load(): void {
     this.loadGlobalState();
     this.loadLocalState();
+
+    /*
+     * TODO(MarshalX): should not be persistent state
+     * reset the state to the default values on every extension initialization
+     */
+    this.globalState.CliInstalled = false;
+    this.globalState.CliAuthed = false;
+    this.globalState.IsAiLargeLanguageModelEnabled = false;
+    this.saveGlobalState();
   }
 
   private saveGlobalState(): void {

src/ui/panels/violation/card/iac.ts

@@ -41,6 +41,7 @@ export default `
   <section class="ai-remediation compact">
     <div class="section-header">AI Remediation</div>
     <div class="ai-remediation-text">None</div>
+    <div class="ai-remediation-diff">None</div>
   </section>
 
   <section class="hr section-footer">

src/ui/panels/violation/card/sast.ts

@@ -49,6 +49,7 @@ export default `
   <section class="ai-remediation compact">
     <div class="section-header">AI Remediation</div>
     <div class="ai-remediation-text">None</div>
+    <div class="ai-remediation-diff">None</div>
   </section>
 
   <section class="hr section-footer">

src/ui/panels/violation/content.ts

@@ -1,5 +1,6 @@
 import * as vscode from 'vscode';
 import mainStyles from './styles/main';
+import diff2htmlStyles from './styles/diff2html/diff2html';
 import hljsGithubLightThemeStyles from './styles/hljs/github-light-default';
 import hljsGithubDarkThemeStyles from './styles/hljs/github-dark-dimmed';
 import scaCard from './card/sca';
@@ -23,10 +24,18 @@ export default (scanType: CliScanType) => `
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Cycode: Detection Details</title>
+
+    <script 
+      type="text/javascript" 
+      src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"
+    ></script>
 </head>
 <body>
+    <script>const isDarkTheme = ${isDarkTheme};</script>
+
     ${mainStyles}
     ${isDarkTheme ? hljsGithubDarkThemeStyles : hljsGithubLightThemeStyles}
+    ${diff2htmlStyles}
 
     ${scanType == CliScanType.Sca ? scaCard : ''}
     ${scanType == CliScanType.Secret ? secretCard : ''}

src/ui/panels/violation/js.ts

@@ -76,18 +76,41 @@ export default (detectionType: CliScanType) => `
       hideElement('ai-apply-fix-btn');
       hideElement('ai-remediation');
       ge('ai-remediation-text').innerText = 'None';
+      ge('ai-remediation-diff').innerText = '';
     }
 
-    const renderAiRemediation = (remediation, isFixAvailable) => {
+    const renderAiRemediation = (remediation, unifyDiff, isFixAvailable) => {
       isFixAvailable = false;  // disable fix for now; not ready for production
 
       hideElement('ai-remediation-btn');
-      showElement('ai-remediation');
       ge('ai-remediation-text').innerHTML = remediation;
+      showElement('ai-remediation');
 
       if (isFixAvailable) {
         showElement('ai-apply-fix-btn');
       }
+
+      if (!unifyDiff) {
+        return;
+      }
+
+      const configuration = {
+        drawFileList: false,
+        fileListToggle: false,
+        fileListStartVisible: false,
+        fileContentToggle: false,
+        matching: 'words',
+        outputFormat: 'line-by-line',
+        synchronisedScroll: true,
+        highlight: true,
+        renderNothingWhenEmpty: false,
+        colorScheme: isDarkTheme ? 'dark' : 'light',
+      };
+      const diff2htmlUi = new Diff2HtmlUI(ge('ai-remediation-diff'), unifyDiff, configuration);
+
+      diff2htmlUi.draw();
+      diff2htmlUi.highlightCode();
+      showElement('ai-remediation-diff');
     };
 
     const registerAiButtonCallbacks = () => {
@@ -133,7 +156,7 @@ export default (detectionType: CliScanType) => `
         }
 
         if (aiRemediation) {
-            renderAiRemediation(aiRemediation.remediation, aiRemediation.isFixAvailable);
+            renderAiRemediation(aiRemediation.remediation, aiRemediation.unifyDiff, aiRemediation.isFixAvailable);
         }
     };