feat(scans): add new component - alert bar

ui/app/(prowler)/compliance/page.tsx

@@ -40,6 +40,7 @@ export default async function Compliance({
           progress: scan.attributes.progress,
         })) || [];
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.error("Error fetching scans data:", error);
   }
 
@@ -72,6 +73,7 @@ export default async function Compliance({
         )
       : [];
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.error("Error fetching compliance data:", error);
   }
 
@@ -104,6 +106,7 @@ const SSRComplianceGrid = async ({
       region: regionFilter,
     });
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.error("Error fetching compliances overview:", error);
     return (
       <div className="flex h-full items-center justify-center">

ui/app/(prowler)/scans/page.tsx

@@ -8,6 +8,7 @@ import {
   ButtonRefreshData,
   NoProvidersAdded,
   NoProvidersConnected,
+  ScanWarningBar,
 } from "@/components/scans";
 import { LaunchScanWorkflow } from "@/components/scans/launch-workflow";
 import { SkeletonTableScans } from "@/components/scans/table";
@@ -72,9 +73,10 @@ export default async function Scans({
               <Spacer y={8} />
             </>
           )}
-          <Spacer y={8} />
           <div className="grid grid-cols-12 items-start gap-4">
             <div className="col-span-12">
+              <ScanWarningBar />
+              <Spacer y={4} />
               <div className="flex flex-row items-center justify-between">
                 <DataTableFilterCustom filters={filterScans || []} />
                 <ButtonRefreshData

ui/components/filters/custom-region-selection.tsx

@@ -38,7 +38,9 @@ export const CustomRegionSelection: React.FC = () => {
       className="w-full"
       size="sm"
       selectedKeys={selectedKeys}
-      onSelectionChange={(keys) => applyRegionFilter(Array.from(keys))}
+      onSelectionChange={(keys) =>
+        applyRegionFilter(Array.from(keys) as string[])
+      }
     >
       {regions.map((region) => (
         <SelectItem key={region.key}>{region.label}</SelectItem>

ui/components/scans/index.ts

@@ -2,3 +2,4 @@ export * from "./button-refresh-data";
 export * from "./link-to-findings-from-scan";
 export * from "./no-providers-added";
 export * from "./no-providers-connected";
+export * from "./scan-warning-bar";

ui/components/scans/scan-warning-bar.tsx

@@ -0,0 +1,19 @@
+import { Alert, cn } from "@nextui-org/react";
+
+export const ScanWarningBar = () => {
+  return (
+    <Alert
+      color="warning"
+      title="Waiting for Your Scan to Show Up?"
+      description="Your scan is being processed and may take a few minutes to appear on the table. It will show up shortly."
+      variant="faded"
+      isClosable
+      classNames={{
+        base: cn([
+          "border-1 border-default-200 dark:border-default-100",
+          "gap-x-4",
+        ]),
+      }}
+    />
+  );
+};

ui/components/ui/custom/custom-radio.tsx

@@ -1,9 +1,9 @@
-import { UseRadioProps } from "@nextui-org/radio/dist/use-radio";
 import { cn, useRadio, VisuallyHidden } from "@nextui-org/react";
 import React from "react";
 
-interface CustomRadioProps extends UseRadioProps {
+interface CustomRadioProps {
   description?: string;
+  value?: string;
   children?: React.ReactNode;
 }
 
@@ -18,7 +18,7 @@ export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
     getLabelProps,
     getLabelWrapperProps,
     getControlProps,
-  } = useRadio(props);
+  } = useRadio({ ...props, value: props.value || "" });
 
   return (
     <Component

ui/components/ui/custom/custom-textarea.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Textarea } from "@nextui-org/input";
+import { Textarea } from "@nextui-org/react";
 import React from "react";
 import { Control, FieldPath, FieldValues } from "react-hook-form";