From 2357af912dd54d0c0e401fc085b98d076e9501fb Mon Sep 17 00:00:00 2001 From: Hugo Pereira Brito <101209179+HugoPBrito@users.noreply.github.com> Date: Wed, 6 May 2026 14:04:49 +0100 Subject: [PATCH] fix(ui): hide line numbers in CLI command remediation block (#11059) --- ui/CHANGELOG.md | 8 +++++ .../resource-detail-drawer-content.test.tsx | 35 +++++++++++++++---- .../resource-detail-drawer-content.tsx | 4 +++ ui/components/shared/query-code-editor.tsx | 10 +++--- 4 files changed, 46 insertions(+), 11 deletions(-) diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md index 994c5c9116..109fc46bfb 100644 --- a/ui/CHANGELOG.md +++ b/ui/CHANGELOG.md @@ -10,6 +10,14 @@ All notable changes to the **Prowler UI** are documented in this file. --- +## [1.25.3] (Prowler UNRELEASED) + +### 🐞 Fixed + +- CLI command in the finding drawer no longer renders the line-number gutter, matching the original styled block while removing the leading `1` [(#11059)](https://github.com/prowler-cloud/prowler/pull/11059) + +--- + ## [1.25.2] (Prowler v5.25.2) ### 🔄 Changed diff --git a/ui/components/findings/table/resource-detail-drawer/resource-detail-drawer-content.test.tsx b/ui/components/findings/table/resource-detail-drawer/resource-detail-drawer-content.test.tsx index 2004402607..cd68b2d34b 100644 --- a/ui/components/findings/table/resource-detail-drawer/resource-detail-drawer-content.test.tsx +++ b/ui/components/findings/table/resource-detail-drawer/resource-detail-drawer-content.test.tsx @@ -219,21 +219,25 @@ vi.mock("@/components/shared/query-code-editor", () => ({ language, value, copyValue, + showLineNumbers = true, }: { ariaLabel: string; language?: string; value: string; copyValue?: string; + showLineNumbers?: boolean; }) => (
{ariaLabel} {value} +
+ ), })); vi.mock("@/components/ui/custom/custom-link", () => ({ @@ -592,7 +611,7 @@ describe("ResourceDetailDrawerContent — Fix 2: Remediation heading labels", () expect(allText).toContain("CLI Command"); }); - it("should render remediation snippets with the shared code editor and copy CLI without the visual prompt", async () => { + it("should render CLI remediation in the code editor without line numbers and copy without the visual prompt", async () => { // Given const user = userEvent.setup(); render( @@ -612,17 +631,19 @@ describe("ResourceDetailDrawerContent — Fix 2: Remediation heading labels", () // When const editors = screen.getAllByTestId("query-code-editor"); - await user.click( - within(editors[0]).getByRole("button", { name: "Copy editor code" }), - ); + await user.click(screen.getByRole("button", { name: "Copy CLI Command" })); // Then expect(editors).toHaveLength(3); + expect(editors[0]).toHaveAttribute("data-aria-label", "CLI Command"); + expect(editors[0]).toHaveAttribute("data-show-line-numbers", "false"); + expect(editors[1]).toHaveAttribute("data-show-line-numbers", "true"); + expect(editors[2]).toHaveAttribute("data-show-line-numbers", "true"); expect(mockClipboardWriteText).toHaveBeenCalledWith("aws s3 ..."); expect(screen.getByText("$ aws s3 ...")).toBeInTheDocument(); }); - it("should pass syntax highlighting languages to each remediation editor", () => { + it("should pass syntax highlighting languages to all remediation editors", () => { // Given render( {}} /> ); @@ -889,6 +892,7 @@ export function ResourceDetailDrawerContent({ copyValue: stripCodeFences( checkMeta.remediation.code.cli, ), + showLineNumbers: false, })} )} diff --git a/ui/components/shared/query-code-editor.tsx b/ui/components/shared/query-code-editor.tsx index b379781b05..d6ec599e4f 100644 --- a/ui/components/shared/query-code-editor.tsx +++ b/ui/components/shared/query-code-editor.tsx @@ -10,8 +10,6 @@ import { EditorState } from "@codemirror/state"; import { tags } from "@lezer/highlight"; import CodeMirror, { EditorView, - highlightActiveLineGutter, - lineNumbers, placeholder as codeEditorPlaceholder, } from "@uiw/react-codemirror"; import { Check, Copy } from "lucide-react"; @@ -1177,6 +1175,7 @@ interface QueryCodeEditorProps editable?: boolean; minHeight?: number; showCopyButton?: boolean; + showLineNumbers?: boolean; onChange: (value: string) => void; onBlur?: () => void; } @@ -1195,6 +1194,7 @@ export const QueryCodeEditor = ({ editable = true, minHeight = 320, showCopyButton = false, + showLineNumbers = true, onChange, onBlur, ...props @@ -1208,8 +1208,6 @@ export const QueryCodeEditor = ({ : lightHighlightStyle; const extensions = [ - lineNumbers(), - highlightActiveLineGutter(), EditorView.lineWrapping, codeEditorPlaceholder(placeholder ?? ""), EditorView.contentAttributes.of({ @@ -1260,6 +1258,7 @@ export const QueryCodeEditor = ({