From c0a9bd14aa7cb8b38ff3d88b85d621af4f22ae41 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Sun, 13 Oct 2024 08:56:03 +0200
Subject: [PATCH] feat: integrate Sheet component with ScanDetail view via
 getScan

---
 app/(prowler)/scans/page.tsx                  |   6 +-
 components/scans/table/index.ts               |   1 -
 components/scans/table/scan-detail.tsx        | 139 ++++++++++++------
 .../column-get-scans-schedule.tsx             |   9 +-
 .../data-table-row-details.tsx                |   2 -
 .../scans/table/schedule-scans/index.ts       |   2 +
 components/ui/sheet/sheet.tsx                 |   4 +-
 components/ui/sheet/trigger-sheet.tsx         |   6 +-
 components/ui/table/index.ts                  |   1 -
 9 files changed, 103 insertions(+), 67 deletions(-)
 rename components/scans/table/{ => schedule-scans}/column-get-scans-schedule.tsx (92%)
 rename components/{ui/table => scans/table/schedule-scans}/data-table-row-details.tsx (93%)
 create mode 100644 components/scans/table/schedule-scans/index.ts

diff --git a/app/(prowler)/scans/page.tsx b/app/(prowler)/scans/page.tsx
index 71ed291d70..fc914afd65 100644
--- a/app/(prowler)/scans/page.tsx
+++ b/app/(prowler)/scans/page.tsx
@@ -8,12 +8,10 @@ import {
   filterProviders,
   filterScans,
 } from "@/components/filters";
-import {
-  ColumnGetScansSchedule,
-  SkeletonTableScans,
-} from "@/components/scans/table";
+import { SkeletonTableScans } from "@/components/scans/table";
 import { ColumnProviderScans } from "@/components/scans/table/provider-scans";
 import { ColumnGetScans } from "@/components/scans/table/scans";
+import { ColumnGetScansSchedule } from "@/components/scans/table/schedule-scans";
 import { Header } from "@/components/ui";
 import { DataTable } from "@/components/ui/table";
 import { SearchParamsProps } from "@/types";
diff --git a/components/scans/table/index.ts b/components/scans/table/index.ts
index c11dfa5d4e..0a8aee6de4 100644
--- a/components/scans/table/index.ts
+++ b/components/scans/table/index.ts
@@ -1,3 +1,2 @@
-export * from "./column-get-scans-schedule";
 export * from "./scan-detail";
 export * from "./skeleton-table-scans";
diff --git a/components/scans/table/scan-detail.tsx b/components/scans/table/scan-detail.tsx
index d765a063f8..7124a11943 100644
--- a/components/scans/table/scan-detail.tsx
+++ b/components/scans/table/scan-detail.tsx
@@ -6,62 +6,105 @@ import { ScanProps } from "@/types";
 
 export const ScanDetail = ({ scanDetails }: { scanDetails: ScanProps }) => {
   return (
-    <Card className="mx-auto max-w-xl">
-      <CardHeader className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold">Scan Details</h2>
-        <Chip
-          color={
-            scanDetails.attributes.state === "failed" ? "danger" : "success"
-          }
-        >
-          {scanDetails.attributes.state}
-        </Chip>
-      </CardHeader>
-      <Divider />
-      <CardBody>
-        <div className="space-y-4">
-          <DetailItem label="ID" value={scanDetails.id} />
-          <DetailItem label="Type" value={scanDetails.type} />
-          <DetailItem label="Trigger" value={scanDetails.attributes.trigger} />
-          <DetailItem
-            label="Resource Count"
-            value={scanDetails.attributes.unique_resource_count.toString()}
-          />
-          <DetailItem
-            label="Progress"
-            value={`${scanDetails.attributes.progress}%`}
-          />
-          <DetailItem
-            label="Duration"
-            value={`${scanDetails.attributes.duration} seconds`}
-          />
-          <DetailItem
-            label="Started At"
-            value={new Date(scanDetails.attributes.started_at).toLocaleString()}
-          />
-          <DetailItem
-            label="Completed At"
-            value={new Date(
-              scanDetails.attributes.completed_at,
-            ).toLocaleString()}
-          />
+    <div className="space-y-4">
+      <Card className="relative w-full border-small border-default-100 p-3 shadow-lg">
+        <CardHeader className="flex items-center justify-between py-2">
+          <h2 className="text-2xl font-bold">Scan Details</h2>
+          <Chip
+            color={
+              scanDetails.attributes.state === "failed" ? "danger" : "success"
+            }
+            variant="faded"
+          >
+            {scanDetails.attributes.state}
+          </Chip>
+        </CardHeader>
+
+        <Divider />
+
+        <CardBody className="p-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="space-y-4">
+              <DetailItem label="ID" value={scanDetails.id} />
+              <DetailItem label="Name" value={scanDetails.attributes.name} />
+              <DetailItem
+                label="Trigger"
+                value={scanDetails.attributes.trigger}
+              />
+              <DetailItem
+                label="Resource Count"
+                value={scanDetails.attributes.unique_resource_count.toString()}
+              />
+              <DetailItem
+                label="Progress"
+                value={`${scanDetails.attributes.progress}%`}
+              />
+              <DetailItem
+                label="Duration"
+                value={`${scanDetails.attributes.duration} seconds`}
+              />
+            </div>
+            <div className="space-y-4">
+              <DetailItem
+                label="Started At"
+                value={new Date(
+                  scanDetails.attributes.started_at,
+                ).toLocaleString()}
+              />
+              <DetailItem
+                label="Completed At"
+                value={new Date(
+                  scanDetails.attributes.completed_at,
+                ).toLocaleString()}
+              />
+              <DetailItem
+                label="Scheduled At"
+                value={
+                  scanDetails.attributes.scheduled_at
+                    ? new Date(
+                        scanDetails.attributes.scheduled_at,
+                      ).toLocaleString()
+                    : "Not Scheduled"
+                }
+              />
+              <DetailItem
+                label="Provider ID"
+                value={scanDetails.relationships.provider.data.id}
+              />
+              <DetailItem
+                label="Task ID"
+                value={scanDetails.relationships.task.data.id}
+              />
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      <Card className="relative w-full border-small border-default-100 p-3 shadow-lg">
+        <CardHeader className="py-2">
+          <h2 className="text-2xl font-bold">Scan Arguments</h2>
+        </CardHeader>
+
+        <Divider />
+
+        <CardBody className="p-4">
           <DetailItem
             label="Checks"
             value={
-              scanDetails.attributes.scanner_args?.excluded_checks?.join(
-                ", ",
-              ) || ""
+              (
+                scanDetails.attributes.scanner_args as any
+              )?.checks_to_execute?.join(", ") || "N/A"
             }
           />
-        </div>
-      </CardBody>
-    </Card>
+        </CardBody>
+      </Card>
+    </div>
   );
 };
 
 const DetailItem = ({ label, value }: { label: string; value: string }) => (
-  <div className="flex justify-between">
-    <span className="font-semibold">{label}:</span>
-    <span>{value}</span>
+  <div className="flex items-center justify-between">
+    <span className="font-semibold text-default-500">{label}:</span>
+    <span className="text-default-700">{value}</span>
   </div>
 );
diff --git a/components/scans/table/column-get-scans-schedule.tsx b/components/scans/table/schedule-scans/column-get-scans-schedule.tsx
similarity index 92%
rename from components/scans/table/column-get-scans-schedule.tsx
rename to components/scans/table/schedule-scans/column-get-scans-schedule.tsx
index 768fc05341..583a9cdd16 100644
--- a/components/scans/table/column-get-scans-schedule.tsx
+++ b/components/scans/table/schedule-scans/column-get-scans-schedule.tsx
@@ -5,14 +5,11 @@ import { ColumnDef } from "@tanstack/react-table";
 import { PlusIcon } from "@/components/icons";
 import { DateWithTime, EntityInfoShort } from "@/components/ui/entities";
 import { TriggerSheet } from "@/components/ui/sheet";
-import {
-  DataTableColumnHeader,
-  DataTableRowDetails,
-  StatusBadge,
-} from "@/components/ui/table";
+import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
 import { ScanProps } from "@/types";
 
-import { DataTableRowActions } from "./scans/data-table-row-actions";
+import { DataTableRowActions } from "../scans/data-table-row-actions";
+import { DataTableRowDetails } from ".";
 
 const getScanData = (row: { original: ScanProps }) => {
   return row.original;
diff --git a/components/ui/table/data-table-row-details.tsx b/components/scans/table/schedule-scans/data-table-row-details.tsx
similarity index 93%
rename from components/ui/table/data-table-row-details.tsx
rename to components/scans/table/schedule-scans/data-table-row-details.tsx
index 73407250f7..997fa0e5d9 100644
--- a/components/ui/table/data-table-row-details.tsx
+++ b/components/scans/table/schedule-scans/data-table-row-details.tsx
@@ -35,5 +35,3 @@ export const DataTableRowDetails = ({ entityId }: { entityId: string }) => {
 
   return <ScanDetail scanDetails={scanDetails} />;
 };
-
-// Remove the SSRDataRowDetails component as it's no longer needed
diff --git a/components/scans/table/schedule-scans/index.ts b/components/scans/table/schedule-scans/index.ts
new file mode 100644
index 0000000000..e93f00f4c5
--- /dev/null
+++ b/components/scans/table/schedule-scans/index.ts
@@ -0,0 +1,2 @@
+export * from "./column-get-scans-schedule";
+export * from "./data-table-row-details";
diff --git a/components/ui/sheet/sheet.tsx b/components/ui/sheet/sheet.tsx
index 01e91f0e95..cf945c0f9d 100644
--- a/components/ui/sheet/sheet.tsx
+++ b/components/ui/sheet/sheet.tsx
@@ -38,9 +38,9 @@ const sheetVariants = cva(
         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom:
           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
         right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
       },
     },
     defaultVariants: {
diff --git a/components/ui/sheet/trigger-sheet.tsx b/components/ui/sheet/trigger-sheet.tsx
index dd0df60062..af8a2f988d 100644
--- a/components/ui/sheet/trigger-sheet.tsx
+++ b/components/ui/sheet/trigger-sheet.tsx
@@ -23,10 +23,10 @@ export function TriggerSheet({
   return (
     <Sheet>
       <SheetTrigger>{triggerComponent}</SheetTrigger>
-      <SheetContent className="w-[600px]">
+      <SheetContent className="max-w-[95vw] pt-10 md:max-w-[55vw]">
         <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-          <SheetDescription>{description}</SheetDescription>
+          <SheetTitle className="sr-only">{title}</SheetTitle>
+          <SheetDescription className="sr-only">{description}</SheetDescription>
         </SheetHeader>
         {children}
       </SheetContent>
diff --git a/components/ui/table/index.ts b/components/ui/table/index.ts
index 3f18621c91..a344b959de 100644
--- a/components/ui/table/index.ts
+++ b/components/ui/table/index.ts
@@ -2,7 +2,6 @@ export * from "./data-table";
 export * from "./data-table-column-header";
 export * from "./data-table-filter-custom";
 export * from "./data-table-pagination";
-export * from "./data-table-row-details";
 export * from "./severity-badge";
 export * from "./status-badge";
 export * from "./table";