refactor(ui): attack paths restyling and component migrations (#10310)

Author: alejandrobailo

ui/app/(prowler)/attack-paths/(workflow)/_components/workflow-attack-paths.tsx

@@ -12,7 +12,7 @@ export const WorkflowAttackPaths = () => {
   const pathname = usePathname();
 
   // Determine current step based on pathname
-  const isQueryBuilderStep = pathname.includes("query-builder");
+  const isQueryBuilderStep = pathname.includes("/attack-paths");
 
   const currentStep = isQueryBuilderStep ? 1 : 0; // 0-indexed
 

ui/app/(prowler)/attack-paths/(workflow)/layout.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { GraphLoading } from "./graph-loading";
+
+describe("GraphLoading", () => {
+  it("uses the provider wizard loading pattern", () => {
+    render(<GraphLoading />);
+
+    expect(screen.getByTestId("graph-loading")).toHaveClass(
+      "flex",
+      "min-h-[320px]",
+      "items-center",
+      "justify-center",
+      "gap-4",
+      "text-center",
+    );
+    expect(screen.getByLabelText("Loading")).toHaveClass(
+      "size-6",
+      "animate-spin",
+    );
+    expect(screen.getByText("Loading Attack Paths graph...")).toHaveClass(
+      "text-muted-foreground",
+      "text-sm",
+    );
+  });
+});

ui/app/(prowler)/attack-paths/(workflow)/query-builder/_components/graph/graph-loading.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { describe, expect, it } from "vitest";
+
+import type { AttackPathQuery } from "@/types/attack-paths";
+
+import { QueryParametersForm } from "./query-parameters-form";
+
+const mockQuery: AttackPathQuery = {
+  type: "attack-paths-scans",
+  id: "query-with-string-parameter",
+  attributes: {
+    name: "Query With String Parameter",
+    short_description: "Requires a tag key",
+    description: "Returns buckets filtered by tag",
+    provider: "aws",
+    attribution: null,
+    parameters: [
+      {
+        name: "tag_key",
+        label: "Tag key",
+        data_type: "string",
+        description: "Tag key to filter the S3 bucket.",
+        placeholder: "DataClassification",
+        required: true,
+      },
+    ],
+  },
+};
+
+function TestForm() {
+  const form = useForm({
+    defaultValues: {
+      tag_key: "",
+    },
+  });
+
+  return (
+    <FormProvider {...form}>
+      <QueryParametersForm selectedQuery={mockQuery} />
+    </FormProvider>
+  );
+}
+
+describe("QueryParametersForm", () => {
+  it("uses the field description as the placeholder instead of rendering helper text below", () => {
+    // Given
+    render(<TestForm />);
+
+    // When
+    const input = screen.getByRole("textbox", { name: /tag key/i });
+
+    // Then
+    expect(input).toHaveAttribute("data-slot", "input");
+    expect(input).toHaveAttribute(
+      "placeholder",
+      "Tag key to filter the S3 bucket.",
+    );
+    expect(screen.getByTestId("query-parameters-grid")).toHaveClass(
+      "grid",
+      "grid-cols-1",
+      "md:grid-cols-2",
+    );
+    expect(screen.getByText("Tag key")).toHaveClass(
+      "text-text-neutral-tertiary",
+      "text-xs",
+      "font-medium",
+    );
+    expect(
+      screen.queryByText("Tag key to filter the S3 bucket."),
+    ).not.toBeInTheDocument();
+  });
+});

ui/app/(prowler)/attack-paths/(workflow)/query-builder/_components/query-parameters-form.test.tsx

@@ -27,7 +27,7 @@ export const QuerySelector = ({
   return (
     <Select value={selectedQueryId || ""} onValueChange={onQueryChange}>
       <SelectTrigger className="w-full text-left">
-        <SelectValue placeholder="Choose a query..." />
+        <SelectValue placeholder="Choose a query" />
       </SelectTrigger>
       <SelectContent>
         {queries.map((query) => (

ui/app/(prowler)/attack-paths/(workflow)/query-builder/_components/query-selector.tsx

@@ -0,0 +1,165 @@
+import { flexRender } from "@tanstack/react-table";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { AttackPathScan } from "@/types/attack-paths";
+
+import { ScanListTable } from "./scan-list-table";
+
+const { pushMock, navigationState } = vi.hoisted(() => ({
+  pushMock: vi.fn(),
+  navigationState: {
+    pathname: "/attack-paths",
+    searchParams: new URLSearchParams("scanPage=1&scanPageSize=5"),
+  },
+}));
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => navigationState.pathname,
+  useRouter: () => ({
+    push: pushMock,
+  }),
+  useSearchParams: () => navigationState.searchParams,
+}));
+
+vi.mock("@/components/ui/entities/entity-info", () => ({
+  EntityInfo: ({
+    entityAlias,
+    entityId,
+  }: {
+    entityAlias?: string;
+    entityId?: string;
+  }) => <div>{entityAlias ?? entityId}</div>,
+}));
+
+vi.mock("@/components/ui/entities/date-with-time", () => ({
+  DateWithTime: ({ dateTime }: { dateTime: string }) => <span>{dateTime}</span>,
+}));
+
+vi.mock("@/components/ui/table", () => ({
+  DataTableColumnHeader: ({ title }: { title: string }) => <span>{title}</span>,
+  DataTable: ({
+    columns,
+    data,
+    metadata,
+    controlledPage,
+  }: {
+    columns: Array<{
+      id?: string;
+      header?:
+        | string
+        | ((context: { column: { getCanSort: () => boolean } }) => ReactNode);
+      cell?: (context: { row: { original: AttackPathScan } }) => ReactNode;
+    }>;
+    data: AttackPathScan[];
+    metadata: {
+      pagination: {
+        count: number;
+        pages: number;
+      };
+    };
+    controlledPage: number;
+  }) => (
+    <div>
+      <span>{metadata.pagination.count} Total Entries</span>
+      <span>
+        Page {controlledPage} of {metadata.pagination.pages}
+      </span>
+      <table>
+        <thead>
+          <tr>
+            {columns.map((column, index) => (
+              <th key={column.id ?? index}>
+                {typeof column.header === "function"
+                  ? flexRender(column.header, {
+                      column: { getCanSort: () => false },
+                    })
+                  : column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row) => (
+            <tr key={row.id}>
+              {columns.map((column, index) => (
+                <td key={column.id ?? index}>
+                  {column.cell
+                    ? flexRender(column.cell, { row: { original: row } })
+                    : null}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  ),
+}));
+
+const createScan = (id: number): AttackPathScan => ({
+  type: "attack-paths-scans",
+  id: `scan-${id}`,
+  attributes: {
+    state: "completed",
+    progress: 100,
+    graph_data_ready: true,
+    provider_alias: `Provider ${id}`,
+    provider_type: "aws",
+    provider_uid: `1234567890${id}`,
+    inserted_at: "2026-03-11T10:00:00Z",
+    started_at: "2026-03-11T10:00:00Z",
+    completed_at: "2026-03-11T10:05:00Z",
+    duration: 300,
+  },
+  relationships: {
+    provider: {
+      data: {
+        type: "providers",
+        id: `provider-${id}`,
+      },
+    },
+    scan: {
+      data: {
+        type: "scans",
+        id: `base-scan-${id}`,
+      },
+    },
+    task: {
+      data: {
+        type: "tasks",
+        id: `task-${id}`,
+      },
+    },
+  },
+});
+
+describe("ScanListTable", () => {
+  beforeEach(() => {
+    pushMock.mockReset();
+    navigationState.searchParams = new URLSearchParams(
+      "scanPage=1&scanPageSize=5",
+    );
+  });
+
+  it("uses the shared data table chrome and preserves query params when selecting a scan", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ScanListTable
+        scans={Array.from({ length: 12 }, (_, index) => createScan(index + 1))}
+      />,
+    );
+
+    expect(screen.getByText("12 Total Entries")).toBeInTheDocument();
+    expect(screen.getByText("Page 1 of 3")).toBeInTheDocument();
+
+    await user.click(screen.getAllByRole("button", { name: "Select scan" })[0]);
+
+    expect(pushMock).toHaveBeenCalledWith(
+      "/attack-paths?scanPage=1&scanPageSize=5&scanId=scan-1",
+    );
+  });
+});