fix(ui): hide line numbers in CLI command remediation block (#11061)

Co-authored-by: Hugo Pereira Brito <101209179+HugoPBrito@users.noreply.github.com>

ui/CHANGELOG.md

@@ -2,6 +2,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

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;
   }) => (
     <div
       data-testid="query-code-editor"
       data-aria-label={ariaLabel}
       data-language={language}
+      data-show-line-numbers={String(showLineNumbers)}
     >
       <span>{ariaLabel}</span>
       <span>{value}</span>
       <button
         type="button"
+        aria-label={`Copy ${ariaLabel}`}
         onClick={() => mockClipboardWriteText(copyValue ?? value)}
       >
         Copy editor code
@@ -255,7 +259,22 @@ vi.mock("@/components/icons/services/IconServices", () => ({
 }));
 
 vi.mock("@/components/ui/code-snippet/code-snippet", () => ({
-  CodeSnippet: ({ value }: { value: string }) => <span>{value}</span>,
+  CodeSnippet: ({
+    value,
+    formatter,
+    ariaLabel = "Copy to clipboard",
+  }: {
+    value: string;
+    formatter?: (value: string) => string;
+    ariaLabel?: string;
+  }) => (
+    <div data-testid="code-snippet">
+      <span>{formatter ? formatter(value) : value}</span>
+      <button type="button" onClick={() => mockClipboardWriteText(value)}>
+        {ariaLabel}
+      </button>
+    </div>
+  ),
 }));
 
 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(
       <ResourceDetailDrawerContent
@@ -643,10 +664,12 @@ describe("ResourceDetailDrawerContent — Fix 2: Remediation heading labels", ()
     const editors = screen.getAllByTestId("query-code-editor");
 
     // Then
+    expect(editors).toHaveLength(3);
     expect(editors[0]).toHaveAttribute("data-language", "shell");
     expect(editors[1]).toHaveAttribute("data-language", "hcl");
     expect(editors[2]).toHaveAttribute("data-language", "yaml");
     expect(editors[0]).toHaveAttribute("data-aria-label", "CLI Command");
+    expect(editors[1]).toHaveAttribute("data-aria-label", "Terraform");
     expect(editors[2]).toHaveAttribute("data-aria-label", "CloudFormation");
   });
 });

ui/components/findings/table/resource-detail-drawer/resource-detail-drawer-content.tsx

@@ -120,11 +120,13 @@ function renderRemediationCodeBlock({
   value,
   copyValue,
   language = QUERY_EDITOR_LANGUAGE.PLAIN_TEXT,
+  showLineNumbers = true,
 }: {
   label: string;
   value: string;
   copyValue?: string;
   language?: QueryEditorLanguage;
+  showLineNumbers?: boolean;
 }) {
   return (
     <QueryCodeEditor
@@ -135,6 +137,7 @@ function renderRemediationCodeBlock({
       editable={false}
       minHeight={96}
       showCopyButton
+      showLineNumbers={showLineNumbers}
       onChange={() => {}}
     />
   );
@@ -889,6 +892,7 @@ export function ResourceDetailDrawerContent({
                           copyValue: stripCodeFences(
                             checkMeta.remediation.code.cli,
                           ),
+                          showLineNumbers: false,
                         })}
                       </div>
                     )}

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 = ({
     <div
       data-testid="query-code-editor"
       data-language={language}
+      data-show-line-numbers={String(showLineNumbers)}
       className={cn(
         "border-border-neutral-secondary bg-bg-neutral-primary overflow-hidden rounded-xl border",
         invalid && "border-border-error-primary",
@@ -1307,8 +1306,9 @@ export const QueryCodeEditor = ({
         basicSetup={{
           foldGutter: false,
           highlightActiveLine: false,
-          highlightActiveLineGutter: false,
+          highlightActiveLineGutter: showLineNumbers,
           searchKeymap: false,
+          lineNumbers: showLineNumbers,
         }}
         editable={editable}
         onChange={onChange}