feat(ui): add link in Scans view to navigate to Compliance overview (#8251)

Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>

ui/CHANGELOG.md

@@ -8,7 +8,8 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - Mutelist configuration form [(#8190)](https://github.com/prowler-cloud/prowler/pull/8190)
 - SAML login integration [(#8203)](https://github.com/prowler-cloud/prowler/pull/8203)
-- Status column to the findings table in the compliance detail view [(#8244)](https://github.com/prowler-cloud/prowler/pull/8244)
+- Navigation link in Scans view to access Compliance Overview [(#8251)](https://github.com/prowler-cloud/prowler/pull/8251)
+- Status column for findings table in the Compliance Detail view [(#8244)](https://github.com/prowler-cloud/prowler/pull/8244)
 - Allow to restrict routes access based on user permissions [(#8287)](https://github.com/prowler-cloud/prowler/pull/8287)
 
 ### Security

ui/components/scans/index.ts

@@ -1,5 +1,4 @@
 export * from "./auto-refresh";
-export * from "./link-to-findings-from-scan";
 export * from "./no-providers-added";
 export * from "./no-providers-connected";
 export * from "./scans-filters";

ui/components/scans/table/scans/column-get-scans.tsx

@@ -5,12 +5,12 @@ import { ColumnDef } from "@tanstack/react-table";
 import { useSearchParams } from "next/navigation";
 
 import { InfoIcon } from "@/components/icons";
+import { TableLink } from "@/components/ui/custom";
 import { DateWithTime, EntityInfoShort } from "@/components/ui/entities";
 import { TriggerSheet } from "@/components/ui/sheet";
 import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
 import { ProviderType, ScanProps } from "@/types";
 
-import { LinkToFindingsFromScan } from "../../link-to-findings-from-scan";
 import { TriggerIcon } from "../../trigger-icon";
 import { DataTableDownloadDetails } from "./data-table-download-details";
 import { DataTableRowActions } from "./data-table-row-actions";
@@ -106,9 +106,25 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
       const { id } = getScanData(row);
       const scanState = row.original.attributes?.state;
       return (
-        <LinkToFindingsFromScan
-          scanId={id}
+        <TableLink
+          href={`/findings?filter[scan__in]=${id}&filter[status__in]=FAIL`}
           isDisabled={!["completed", "executing"].includes(scanState)}
+          label="See Findings"
+        />
+      );
+    },
+  },
+  {
+    accessorKey: "compliance",
+    header: "Compliance",
+    cell: ({ row }) => {
+      const { id } = getScanData(row);
+      const scanState = row.original.attributes?.state;
+      return (
+        <TableLink
+          href={`/compliance?scanId=${id}`}
+          isDisabled={!["completed", "executing"].includes(scanState)}
+          label="See Compliance"
         />
       );
     },

ui/components/ui/custom/custom-table-link.tsx

@@ -2,25 +2,26 @@
 
 import { CustomButton } from "@/components/ui/custom";
 
-interface LinkToFindingsProps {
-  scanId?: string;
+interface TableLinkProps {
+  href: string;
+  label: string;
   isDisabled?: boolean;
 }
 
-export const LinkToFindingsFromScan = ({
-  scanId,
-  isDisabled,
-}: LinkToFindingsProps) => {
+export const TableLink = ({ href, label, isDisabled }: TableLinkProps) => {
   return (
+    // TODO: Replace CustomButton with CustomLink once the CustomLink component is merged.
     <CustomButton
-      asLink={`/findings?filter[scan__in]=${scanId}&filter[status__in]=FAIL`}
-      ariaLabel="Go to Findings page"
+      asLink={href}
+      ariaLabel={label}
       variant="ghost"
       className="text-xs font-medium text-default-500 hover:text-primary disabled:opacity-30"
       size="sm"
       isDisabled={isDisabled}
     >
-      See Findings
+      {label}
     </CustomButton>
   );
 };
+
+TableLink.displayName = "TableLink";

ui/components/ui/custom/index.ts

@@ -7,4 +7,5 @@ export * from "./custom-input";
 export * from "./custom-loader";
 export * from "./custom-radio";
 export * from "./custom-server-input";
+export * from "./custom-table-link";
 export * from "./custom-textarea";