feat: render findings first iteration

components/findings/table/column-findings.tsx

@@ -2,18 +2,25 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 
-import { DateWithTime } from "@/components/ui/entities";
 import {
   DataTableColumnHeader,
   SeverityBadge,
+  Status,
   StatusBadge,
 } from "@/components/ui/table";
 import { FindingProps } from "@/types";
 
 import { DataTableRowActions } from "./data-table-row-actions";
 
+const statusMap: Record<"PASS" | "FAIL" | "MANUAL" | "MUTED", Status> = {
+  PASS: "completed",
+  FAIL: "failed",
+  MANUAL: "completed",
+  MUTED: "cancelled",
+};
+
 const getFindingsData = (row: { original: FindingProps }) => {
-  // console.log(row.original);
+  console.log(row.original);
   return row.original;
 };
 
@@ -26,7 +33,6 @@ const getResourceData = (
   field: keyof FindingProps["relationships"]["resource"]["attributes"],
 ) => {
   return (
-    // eslint-disable-next-line security/detect-object-injection
     row.original.relationships?.resource?.attributes?.[field] ||
     `No ${field} found in resource`
   );
@@ -37,7 +43,6 @@ const getProviderData = (
   field: keyof FindingProps["relationships"]["provider"]["attributes"],
 ) => {
   return (
-    // eslint-disable-next-line security/detect-object-injection
     row.original.relationships?.provider?.attributes?.[field] ||
     `No ${field} found in provider`
   );
@@ -48,72 +53,38 @@ const getScanData = (
   field: keyof FindingProps["relationships"]["scan"]["attributes"],
 ) => {
   return (
-    // eslint-disable-next-line security/detect-object-injection
     row.original.relationships?.scan?.attributes?.[field] ||
     `No ${field} found in scan`
   );
 };
 
 export const ColumnFindings: ColumnDef<FindingProps>[] = [
-  // {
-  //   header: " ",
-  //   cell: ({ row }) => <p className="text-medium">{row.index + 1}</p>,
-  // },
   {
     accessorKey: "check",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title={"Check"} param="check" />
-    ),
+    header: "Check",
     cell: ({ row }) => {
       const { checktitle } = getFindingsMetadata(row);
       return <p className="max-w-96 truncate text-medium">{checktitle}</p>;
     },
   },
   {
-    accessorKey: "region",
-    header: "Region",
+    accessorKey: "scanName",
+    header: "Scan Name",
     cell: ({ row }) => {
-      const region = getResourceData(row, "region");
+      const name = getScanData(row, "name");
 
       return (
-        <>
-          <div>{region}</div>
-        </>
+        <p className="max-w-96 truncate text-medium">
+          {typeof name === "string" || typeof name === "number"
+            ? name
+            : "Invalid data"}
+        </p>
       );
     },
   },
-
-  // {
-  //   accessorKey: "uid",
-  //   header: ({ column }) => (
-  //     <DataTableColumnHeader column={column} title={"Id"} param="uid" />
-  //   ),
-  //   cell: ({ row }) => {
-  //     const {
-  //       attributes: { uid },
-  //     } = getFindingsData(row);
-  //     return <SnippetId className="h-7 max-w-48" entityId={uid} />;
-  //   },
-  // },
-  // {
-  //   accessorKey: "provider",
-  //   header: "Provider Alias",
-  //   cell: ({ row }) => {
-  //     const {
-  //       attributes: { alias },
-  //     } = getProviderData(row, "alias");
-  //     return <p className="max-w-96 truncate text-medium">{alias}</p>;
-  //   },
-  // },
   {
     accessorKey: "severity",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title={"Severity"}
-        param="severity"
-      />
-    ),
+    header: "Severity",
     cell: ({ row }) => {
       const {
         attributes: { severity },
@@ -128,38 +99,44 @@ export const ColumnFindings: ColumnDef<FindingProps>[] = [
       const {
         attributes: { status },
       } = getFindingsData(row);
-      // Temporarily overwriting the value until the API is functional.
-      return <StatusBadge status={status} />;
+
+      const mappedStatus = statusMap[status];
+
+      return <StatusBadge status={mappedStatus} />;
+    },
+  },
+  {
+    accessorKey: "region",
+    header: "Region",
+    cell: ({ row }) => {
+      const region = getResourceData(row, "region");
+
+      return (
+        <>
+          <div>{typeof region === "string" ? region : "Invalid region"}</div>
+        </>
+      );
     },
   },
   {
     accessorKey: "service",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title={"Service"}
-        param="service"
-      />
-    ),
+    header: "Service",
     cell: ({ row }) => {
       const { servicename } = getFindingsMetadata(row);
       return <p className="max-w-96 truncate text-medium">{servicename}</p>;
     },
   },
   {
-    accessorKey: "added",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title={"Added"}
-        param="inserted_at"
-      />
-    ),
+    accessorKey: "account",
+    header: "Account",
     cell: ({ row }) => {
-      const {
-        attributes: { inserted_at },
-      } = getFindingsData(row);
-      return <DateWithTime dateTime={inserted_at} showTime={false} />;
+      const account = getProviderData(row, "uid");
+
+      return (
+        <>
+          <div>{typeof account === "string" ? account : "Invalid account"}</div>
+        </>
+      );
     },
   },
   {

components/findings/table/data-table-row-actions.tsx

@@ -14,7 +14,6 @@ import {
   EditDocumentBulkIcon,
 } from "@nextui-org/shared-icons";
 import { Row } from "@tanstack/react-table";
-import clsx from "clsx";
 
 // import { useState } from "react";
 import { VerticalDotsIcon } from "@/components/icons";
@@ -74,30 +73,22 @@ export function DataTableRowActions<FindingProps>({
           >
             <DropdownSection title="Actions">
               <DropdownItem
-                key="edit"
-                description="Allows you to edit the provider"
-                textValue="Edit Provider"
+                key="jira"
+                description="Allows you to send the finding to Jira"
+                textValue="Send to Jira"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
                 // onClick={() => setIsEditOpen(true)}
               >
-                Edit Finding
+                Send to Jira
               </DropdownItem>
-            </DropdownSection>
-            <DropdownSection title="Danger zone">
               <DropdownItem
-                key="delete"
-                className="text-danger"
-                color="danger"
-                description="Delete the provider permanently"
-                textValue="Delete Provider"
-                startContent={
-                  <DeleteDocumentBulkIcon
-                    className={clsx(iconClasses, "!text-danger")}
-                  />
-                }
-                // onClick={() => setIsDeleteOpen(true)}
+                key="slack"
+                description="Allows you to send the finding to Slack"
+                textValue="Send to Slack"
+                startContent={<EditDocumentBulkIcon className={iconClasses} />}
+                // onClick={() => setIsEditOpen(true)}
               >
-                Delete Finding
+                Send to Slack
               </DropdownItem>
             </DropdownSection>
           </DropdownMenu>

components/ui/table/status-badge.tsx

@@ -1,7 +1,7 @@
 import { Chip } from "@nextui-org/react";
 import React from "react";
 
-type Status =
+export type Status =
   | "available"
   | "scheduled"
   | "executing"