From 77950fa561b0dba2bd9f971d907f65f0829e3c4c Mon Sep 17 00:00:00 2001 From: Ilya Siamionau Date: Tue, 17 Dec 2024 12:02:36 +0100 Subject: [PATCH] CM-42969 - Improve rendering of suggested AI fixes; fix extension state; fix code actions (#121) --- CHANGELOG.md | 10 +- package.json | 2 +- .../code-action/unique-diagnostics.ts | 12 +- src/services/state-service.ts | 9 + src/ui/panels/violation/card/iac.ts | 1 + src/ui/panels/violation/card/sast.ts | 1 + src/ui/panels/violation/content.ts | 9 + src/ui/panels/violation/js.ts | 29 +- .../violation/styles/diff2html/diff2html.ts | 741 ++++++++++++++++++ src/ui/panels/violation/violation-panel.ts | 33 +- 10 files changed, 837 insertions(+), 10 deletions(-) create mode 100644 src/ui/panels/violation/styles/diff2html/diff2html.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e50cdd..8b5f570 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 45a546f..d11df9b 100644 --- a/package.json +++ b/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": { diff --git a/src/providers/code-action/unique-diagnostics.ts b/src/providers/code-action/unique-diagnostics.ts index 542d35a..2100e5f 100644 --- a/src/providers/code-action/unique-diagnostics.ts +++ b/src/providers/code-action/unique-diagnostics.ts @@ -1,4 +1,5 @@ import * as vscode from 'vscode'; +import { extensionId } from '../../utils/texts'; export const aggregateDiagnosticsByCode = ( diagnostics: readonly vscode.Diagnostic[], @@ -6,13 +7,16 @@ export const aggregateDiagnosticsByCode = ( const aggregatedDiagnostics = new Map(); 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; diff --git a/src/services/state-service.ts b/src/services/state-service.ts index 3bedddf..38eae30 100644 --- a/src/services/state-service.ts +++ b/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 { diff --git a/src/ui/panels/violation/card/iac.ts b/src/ui/panels/violation/card/iac.ts index 12ceb3b..91b96e9 100644 --- a/src/ui/panels/violation/card/iac.ts +++ b/src/ui/panels/violation/card/iac.ts @@ -41,6 +41,7 @@ export default `
AI Remediation
None
+
None
diff --git a/src/ui/panels/violation/card/sast.ts b/src/ui/panels/violation/card/sast.ts index 7dc9583..689061b 100644 --- a/src/ui/panels/violation/card/sast.ts +++ b/src/ui/panels/violation/card/sast.ts @@ -49,6 +49,7 @@ export default `
AI Remediation
None
+
None
diff --git a/src/ui/panels/violation/content.ts b/src/ui/panels/violation/content.ts index 36b10d0..a21d0eb 100644 --- a/src/ui/panels/violation/content.ts +++ b/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) => ` Cycode: Detection Details + + + + ${mainStyles} ${isDarkTheme ? hljsGithubDarkThemeStyles : hljsGithubLightThemeStyles} + ${diff2htmlStyles} ${scanType == CliScanType.Sca ? scaCard : ''} ${scanType == CliScanType.Secret ? secretCard : ''} diff --git a/src/ui/panels/violation/js.ts b/src/ui/panels/violation/js.ts index 26f07e7..a336214 100644 --- a/src/ui/panels/violation/js.ts +++ b/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); } }; diff --git a/src/ui/panels/violation/styles/diff2html/diff2html.ts b/src/ui/panels/violation/styles/diff2html/diff2html.ts new file mode 100644 index 0000000..bd4462c --- /dev/null +++ b/src/ui/panels/violation/styles/diff2html/diff2html.ts @@ -0,0 +1,741 @@ +// only colors are changed to match vscode themes +export default ` + +`; diff --git a/src/ui/panels/violation/violation-panel.ts b/src/ui/panels/violation/violation-panel.ts index 174463f..32c374a 100644 --- a/src/ui/panels/violation/violation-panel.ts +++ b/src/ui/panels/violation/violation-panel.ts @@ -91,6 +91,27 @@ const _readyCommandHandler = (onLoadResolve: (value: boolean) => void) => { onLoadResolve(true); }; +const _extractAiRemediationParts = (remediation: string) => { + // this function was burn during quick win, it is not perfect and may fail in some cases + + const regex = /^([\s\S]*?)```\s*diff([\s\S]*?)```$/m; + const matches = regex.exec(remediation); + + if (matches) { + // Group 1: Remediation markdown + const remediationMarkdown = matches[1].trim(); + // Group 2: unify diff + const unifyDiff = matches[2].trim(); + + return { + remediationMarkdown, + unifyDiff, + }; + } + + return undefined; +}; + const _getAiRemediationHandler = async (panel: vscode.WebviewPanel, uniqueDetectionId: string) => { const scanResultsService = container.resolve(ScanResultsServiceSymbol); const detection = scanResultsService.getDetectionById(uniqueDetectionId); @@ -106,9 +127,19 @@ const _getAiRemediationHandler = async (panel: vscode.WebviewPanel, uniqueDetect return; } + let remediationMarkdown = aiRemediation.remediation; + let unifyDiff = undefined; + + const remediationParts = _extractAiRemediationParts(aiRemediation.remediation); + if (remediationParts) { + remediationMarkdown = remediationParts.remediationMarkdown; + unifyDiff = remediationParts.unifyDiff; + } + const sendRes = await panel.webview.postMessage({ aiRemediation: { - remediation: getMarkdownForRender(aiRemediation.remediation), + remediation: getMarkdownForRender(remediationMarkdown), + unifyDiff: unifyDiff, isFixAvailable: aiRemediation.isFixAvailable, }, });