diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md index 86089b12e6f..dd6daa3969d 100644 --- a/ui/CHANGELOG.md +++ b/ui/CHANGELOG.md @@ -2,6 +2,14 @@ All notable changes to the **Prowler UI** are documented in this file. +## [1.25.1] (Prowler v5.25.1) + +### 🐞 Fixed + +- Compliance page export menu now scales on small screens, and frameworks load on first render without requiring a manual scan re-selection [(#10918)](https://github.com/prowler-cloud/prowler/pull/10918) + +--- + ## [1.25.0] (Prowler v5.25.0) ### 🚀 Added diff --git a/ui/app/(prowler)/compliance/page.tsx b/ui/app/(prowler)/compliance/page.tsx index 995973823e1..a67509bed15 100644 --- a/ui/app/(prowler)/compliance/page.tsx +++ b/ui/app/(prowler)/compliance/page.tsx @@ -166,6 +166,7 @@ export default async function Compliance({ > @@ -179,12 +180,13 @@ export default async function Compliance({ const SSRComplianceGrid = async ({ searchParams, + scanId, selectedScan, }: { searchParams: SearchParamsProps; + scanId: string | null; selectedScan?: ScanEntity; }) => { - const scanId = searchParams.scanId?.toString() || ""; const regionFilter = searchParams["filter[region__in]"]?.toString() || ""; // Only fetch compliance data if we have a valid scanId @@ -247,7 +249,7 @@ const SSRComplianceGrid = async ({ diff --git a/ui/components/compliance/compliance-card.tsx b/ui/components/compliance/compliance-card.tsx index 2a0cce7879c..c94b7ef63ec 100644 --- a/ui/components/compliance/compliance-card.tsx +++ b/ui/components/compliance/compliance-card.tsx @@ -89,12 +89,38 @@ export const ComplianceCard: React.FC = ({ +
e.stopPropagation()} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.stopPropagation(); + } + }} + role="group" + tabIndex={0} + > + +
-
+
{getComplianceIcon(title) && ( = ({ className="h-10 w-10 min-w-10 self-start rounded-md border border-gray-300 bg-white object-contain p-1" /> )} -
e.stopPropagation()} - onKeyDown={(e) => { - if (e.key === "Enter" || e.key === " ") { - e.stopPropagation(); - } - }} - role="group" - tabIndex={0} - > - -
-

+

{formatTitle(title)} {version ? ` - ${version}` : ""}

diff --git a/ui/components/compliance/compliance-download-container.test.tsx b/ui/components/compliance/compliance-download-container.test.tsx index cc4cdcd4420..81774b686f0 100644 --- a/ui/components/compliance/compliance-download-container.test.tsx +++ b/ui/components/compliance/compliance-download-container.test.tsx @@ -70,7 +70,7 @@ describe("ComplianceDownloadContainer", () => { const trigger = screen.getByRole("button", { name: "Open compliance export actions", }); - expect(trigger.className).toContain("border-text-neutral-secondary"); + expect(trigger.className).toContain("rounded-md"); }); it("should open export actions from the compact trigger", async () => { diff --git a/ui/components/shadcn/dropdown/action-dropdown.tsx b/ui/components/shadcn/dropdown/action-dropdown.tsx index 6a17e1f368c..9acb84515a7 100644 --- a/ui/components/shadcn/dropdown/action-dropdown.tsx +++ b/ui/components/shadcn/dropdown/action-dropdown.tsx @@ -15,8 +15,7 @@ import { const ACTION_TRIGGER_STYLES = { table: "hover:bg-bg-neutral-tertiary rounded-full p-1 transition-colors", - bordered: - "hover:bg-bg-neutral-tertiary rounded-full border border-text-neutral-secondary p-2 transition-colors", + bordered: "hover:bg-bg-neutral-tertiary rounded-md p-1.5 transition-colors", } as const; type ActionDropdownVariant = keyof typeof ACTION_TRIGGER_STYLES; @@ -24,7 +23,7 @@ type ActionDropdownVariant = keyof typeof ACTION_TRIGGER_STYLES; interface ActionDropdownProps { /** The dropdown trigger element. Defaults to a vertical dots icon button */ trigger?: ReactNode; - /** Trigger style variant. "table" = no border, "bordered" = circular border */ + /** Trigger style variant. "table" = compact pill, "bordered" = card action */ variant?: ActionDropdownVariant; /** Alignment of the dropdown content */ align?: "start" | "center" | "end"; @@ -62,7 +61,12 @@ export function ActionDropdown({ aria-label={ariaLabel} className={ACTION_TRIGGER_STYLES[variant]} > - + )}