chore: compliance card tweaks

prowler-cloud · Nov 29, 2024 · 2847ffd · 2847ffd
1 parent 33e8fd5
commit 2847ffd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/ui/app/(prowler)/compliance/page.tsx b/ui/app/(prowler)/compliance/page.tsx
@@ -140,13 +140,15 @@ const SSRComplianceGrid = async ({
         const { attributes } = compliance;
         const {
           framework,
+          version,
           requirements_status: { passed, total },
         } = attributes;
 
         return (
           <ComplianceCard
             key={compliance.id}
             title={framework}
+            version={version}
             passingRequirements={passed}
             totalRequirements={total}
             prevPassingRequirements={passed}

diff --git a/ui/components/compliance/compliance-card.tsx b/ui/components/compliance/compliance-card.tsx
@@ -6,6 +6,7 @@ import { getComplianceIcon } from "../icons";
 
 interface ComplianceCardProps {
   title: string;
+  version: string;
   passingRequirements: number;
   totalRequirements: number;
   prevPassingRequirements: number;
@@ -14,9 +15,14 @@ interface ComplianceCardProps {
 
 export const ComplianceCard: React.FC<ComplianceCardProps> = ({
   title,
+  version,
   passingRequirements,
   totalRequirements,
 }) => {
+  const formatTitle = (title: string) => {
+    return title.split("-").join(" ");
+  };
+
   const ratingPercentage = Math.floor(
     (passingRequirements / totalRequirements) * 100,
   );
@@ -47,7 +53,7 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
   };
 
   return (
-    <Card fullWidth isPressable isHoverable shadow="sm">
+    <Card fullWidth isHoverable shadow="sm">
       <CardBody className="flex flex-row items-center justify-between space-x-4 dark:bg-prowler-blue-800">
         <div className="flex w-full items-center space-x-4">
           <Image
@@ -56,7 +62,10 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
             className="h-10 w-10 min-w-10 rounded-md border-1 border-gray-300 bg-white object-contain p-1"
           />
           <div className="flex w-full flex-col">
-            <h4 className="text-md font-bold leading-5 3xl:text-lg">{title}</h4>
+            <h4 className="text-md font-bold leading-5 3xl:text-lg">
+              {formatTitle(title)}
+              {version ? ` - ${version}` : ""}
+            </h4>
             <Progress
               label="Your Rating:"
               size="sm"

diff --git a/ui/components/compliance/data-compliance/data-compliance.tsx b/ui/components/compliance/data-compliance/data-compliance.tsx
@@ -17,7 +17,15 @@ export const DataCompliance = ({ scans, regions }: DataComplianceProps) => {
   const searchParams = useSearchParams();
   const [showClearButton, setShowClearButton] = useState(false);
   const scanIdParam = searchParams.get("scanId");
-  const selectedScanId = scanIdParam || scans[0]?.id;
+  const selectedScanId = scanIdParam || (scans.length > 0 ? scans[0].id : "");
+
+  useEffect(() => {
+    if (!scanIdParam && scans.length > 0) {
+      const params = new URLSearchParams(searchParams);
+      params.set("scanId", scans[0].id);
+      router.push(`?${params.toString()}`);
+    }
+  }, [scans, scanIdParam, searchParams, router]);
 
   useEffect(() => {
     const hasFilters = Array.from(searchParams.keys()).some(