feat: upgrade to React 19, Next.js 15, React Compiler, HeroUI and Tailwind 4 (#8748)

Co-authored-by: Alan Buscaglia <alanbuscaglia@MacBook-Pro.local>
Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>
Co-authored-by: César Arroba <cesar@prowler.com>
Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>

ui/components/scans/forms/edit-scan-form.tsx

@@ -27,7 +27,7 @@ export const EditScanForm = ({
     resolver: zodResolver(formSchema),
     defaultValues: {
       scanId: scanId,
-      scanName: scanName,
+      scanName: scanName || "",
     },
   });
 
@@ -66,10 +66,11 @@ export const EditScanForm = ({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmitClient)}
-        className="flex flex-col space-y-4"
+        className="flex flex-col gap-4"
       >
         <div className="text-md">
-          Current name: <span className="font-bold">{scanName}</span>
+          Current name:{" "}
+          <span className="font-bold">{scanName || "Unnamed"}</span>
         </div>
         <div>
           <CustomInput
@@ -78,7 +79,7 @@ export const EditScanForm = ({
             type="text"
             label="Name"
             labelPlacement="outside"
-            placeholder={scanName}
+            placeholder={scanName || "Enter scan name"}
             variant="bordered"
             isRequired={false}
             isInvalid={!!form.formState.errors.scanName}
@@ -86,7 +87,7 @@ export const EditScanForm = ({
         </div>
         <input type="hidden" name="scanId" value={scanId} />
 
-        <div className="flex w-full justify-center sm:space-x-6">
+        <div className="flex w-full justify-center sm:gap-6">
           <CustomButton
             type="button"
             ariaLabel="Cancel"

ui/components/scans/forms/schedule-form.tsx

@@ -65,7 +65,7 @@ export const ScheduleForm = ({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmitClient)}
-        className="flex flex-col space-y-4"
+        className="flex flex-col gap-4"
       >
         <input type="hidden" name="providerId" value={providerId} />
         <CustomInput
@@ -79,7 +79,7 @@ export const ScheduleForm = ({
           isInvalid={!!form.formState.errors.scheduleDate}
         />
 
-        <div className="flex w-full justify-center sm:space-x-6">
+        <div className="flex w-full justify-center sm:gap-6">
           <CustomButton
             type="button"
             ariaLabel="Cancel"

ui/components/scans/launch-workflow/launch-scan-workflow-form.tsx

@@ -1,7 +1,8 @@
 "use client";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AnimatePresence, motion } from "framer-motion";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import * as z from "zod";
 
 import { scanOnDemand } from "@/actions/scans";
@@ -48,6 +49,9 @@ export const LaunchScanWorkflow = ({
     },
   });
 
+  const providerId = useWatch({ control: form.control, name: "providerId" });
+  const hasProviderSelected = Boolean(providerId);
+
   const isLoading = form.formState.isSubmitting;
 
   const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
@@ -97,7 +101,7 @@ export const LaunchScanWorkflow = ({
           />
         </div>
         <AnimatePresence>
-          {form.watch("providerId") && (
+          {hasProviderSelected && (
             <>
               <div className="flex flex-wrap gap-6 md:gap-4">
                 <motion.div

ui/components/scans/launch-workflow/select-scan-provider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Select, SelectItem } from "@nextui-org/react";
+import { Select, SelectItem } from "@heroui/select";
 import { Control, FieldPath, FieldValues } from "react-hook-form";
 
 import { EntityInfoShort } from "@/components/ui/entities";
@@ -43,7 +43,7 @@ export const SelectScanProvider = <
               classNames={{
                 selectorIcon: "right-2",
                 label:
-                  "tracking-tight font-light !text-default-700 text-xs !z-0",
+                  "tracking-tight font-light !text-default-700 text-xs z-0!",
                 value: "text-default-500 text-small",
               }}
               label="Select a cloud provider to launch a scan"

ui/components/scans/no-providers-added.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, CardBody } from "@nextui-org/react";
+import { Card, CardBody } from "@heroui/card";
 import React from "react";
 
 import { InfoIcon } from "../icons/Icons";
@@ -10,15 +10,15 @@ export const NoProvidersAdded = () => {
   return (
     <div className="flex min-h-screen items-center justify-center">
       <div className="mx-auto w-full max-w-7xl px-4">
-        <Card className="mx-auto w-full max-w-3xl rounded-lg dark:bg-prowler-blue-400">
-          <CardBody className="flex flex-col items-center space-y-4 p-6 text-center sm:p-8">
-            <div className="flex flex-col items-center space-y-4">
+        <Card className="dark:bg-prowler-blue-400 mx-auto w-full max-w-3xl rounded-lg">
+          <CardBody className="flex flex-col items-center gap-4 p-6 text-center sm:p-8">
+            <div className="flex flex-col items-center gap-4">
               <InfoIcon className="h-10 w-10 text-gray-800 dark:text-white" />
               <h2 className="text-2xl font-bold text-gray-800 dark:text-white">
                 No Cloud Providers Configured
               </h2>
             </div>
-            <div className="flex flex-col items-center space-y-3">
+            <div className="flex flex-col items-center gap-3">
               <p className="text-md leading-relaxed text-gray-600 dark:text-gray-300">
                 No cloud providers have been configured. Start by setting up a
                 cloud provider.

ui/components/scans/no-providers-connected.tsx

@@ -7,9 +7,9 @@ import { CustomButton } from "../ui/custom";
 
 export const NoProvidersConnected = () => {
   return (
-    <div className="flex items-center justify-start rounded-lg border-1 border-system-warning-light px-4 py-6 shadow-box dark:bg-prowler-blue-400">
+    <div className="border-system-warning-light shadow-box dark:bg-prowler-blue-400 flex items-center justify-start rounded-lg border px-4 py-6">
       <div className="flex w-full flex-col items-start gap-6 md:flex-row md:items-center md:justify-between md:gap-8">
-        <div className="flex flex-col space-y-3">
+        <div className="flex flex-col gap-3">
           <div className="flex items-center justify-start gap-3">
             <InfoIcon className="h-6 w-6 text-gray-800 dark:text-white" />
             <h2 className="text-lg font-bold text-gray-800 dark:text-white">
@@ -25,7 +25,7 @@ export const NoProvidersConnected = () => {
             disappear, and on-demand scans can be launched.
           </p>
         </div>
-        <div className="w-full md:w-auto md:flex-shrink-0">
+        <div className="w-full md:w-auto md:shrink-0">
           <CustomButton
             asLink="/providers"
             className="w-full justify-center md:w-fit"

ui/components/scans/table/scan-detail.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Snippet } from "@nextui-org/react";
+import { Snippet } from "@heroui/snippet";
 
 import {
   DateWithTime,
@@ -35,8 +35,8 @@ const Section = ({
   title: string;
   children: React.ReactNode;
 }) => (
-  <div className="flex flex-col gap-4 rounded-lg p-4 shadow dark:bg-prowler-blue-400">
-    <h3 className="text-md font-medium text-gray-800 dark:text-prowler-theme-pale/90">
+  <div className="dark:bg-prowler-blue-400 flex flex-col gap-4 rounded-lg p-4 shadow">
+    <h3 className="text-md dark:text-prowler-theme-pale/90 font-medium text-gray-800">
       {title}
     </h3>
     {children}
@@ -108,7 +108,7 @@ export const ScanDetail = ({
                   className="bg-gray-50 py-1 dark:bg-slate-800"
                   hideSymbol
                 >
-                  <span className="whitespace-pre-line text-xs">
+                  <span className="text-xs whitespace-pre-line">
                     {taskDetails.attributes.result.exc_message.join("\n")}
                   </span>
                 </Snippet>

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Tooltip } from "@nextui-org/react";
+import { Tooltip } from "@heroui/tooltip";
 import { ColumnDef } from "@tanstack/react-table";
 import { useSearchParams } from "next/navigation";
 
@@ -139,7 +139,7 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
           content="Download a ZIP file that includes the JSON (OCSF), CSV, and HTML scan reports, along with the compliance report."
         >
           <div className="flex items-center gap-2">
-            <InfoIcon className="mb-1 text-primary" size={12} />
+            <InfoIcon className="text-primary mb-1" size={12} />
           </div>
         </Tooltip>
       </div>

ui/components/scans/table/scans/data-table-row-actions.tsx

@@ -1,17 +1,17 @@
 "use client";
 
+import { Button } from "@heroui/button";
 import {
-  Button,
   Dropdown,
   DropdownItem,
   DropdownMenu,
   DropdownSection,
   DropdownTrigger,
-} from "@nextui-org/react";
+} from "@heroui/dropdown";
 import {
   // DeleteDocumentBulkIcon,
   EditDocumentBulkIcon,
-} from "@nextui-org/shared-icons";
+} from "@heroui/shared-icons";
 import { Row } from "@tanstack/react-table";
 import { DownloadIcon } from "lucide-react";
 import { useState } from "react";
@@ -26,8 +26,7 @@ import { EditScanForm } from "../../forms";
 interface DataTableRowActionsProps<ScanProps> {
   row: Row<ScanProps>;
 }
-const iconClasses =
-  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
 
 export function DataTableRowActions<ScanProps>({
   row,
@@ -54,7 +53,7 @@ export function DataTableRowActions<ScanProps>({
 
       <div className="relative flex items-center justify-end gap-2">
         <Dropdown
-          className="shadow-xl dark:bg-prowler-blue-800"
+          className="dark:bg-prowler-blue-800 shadow-xl"
           placement="bottom"
         >
           <DropdownTrigger>

ui/components/scans/table/scans/data-table-row-details.tsx

@@ -77,7 +77,7 @@ export const DataTableRowDetails = ({ entityId }: { entityId: string }) => {
 
   if (isLoading) {
     return (
-      <Alert className="text-center text-small font-bold text-gray-500">
+      <Alert className="text-small text-center font-bold text-gray-500">
         Scan details are loading and will be available once the scan is
         completed.
       </Alert>

ui/components/scans/table/skeleton-table-scans.tsx

@@ -1,61 +1,62 @@
-import { Card, Skeleton } from "@nextui-org/react";
+import { Card } from "@heroui/card";
+import { Skeleton } from "@heroui/skeleton";
 import React from "react";
 
 export const SkeletonTableScans = () => {
   return (
-    <Card className="h-full w-full space-y-5 p-4" radius="sm">
+    <Card className="flex h-full w-full flex-col gap-5 p-4" radius="sm">
       {/* Table headers */}
       <div className="hidden justify-between md:flex">
         <Skeleton className="w-1/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-2/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-2/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-2/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-2/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-1/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
         <Skeleton className="w-1/12 rounded-lg">
-          <div className="h-8 bg-default-200"></div>
+          <div className="bg-default-200 h-8"></div>
         </Skeleton>
       </div>
 
       {/* Table body */}
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {[...Array(3)].map((_, index) => (
           <div
             key={index}
-            className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
+            className="flex flex-col items-center justify-between md:flex-row md:gap-4"
           >
             <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-1/12">
-              <div className="h-12 bg-default-300"></div>
+              <div className="bg-default-300 h-12"></div>
             </Skeleton>
             <Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
-              <div className="h-12 bg-default-300"></div>
+              <div className="bg-default-300 h-12"></div>
             </Skeleton>
             <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
-              <div className="h-12 bg-default-300"></div>
+              <div className="bg-default-300 h-12"></div>
             </Skeleton>
             <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
-              <div className="h-12 bg-default-300"></div>
+              <div className="bg-default-300 h-12"></div>
             </Skeleton>
             <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
-              <div className="h-12 bg-default-300"></div>
+              <div className="bg-default-300 h-12"></div>
             </Skeleton>
             <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
-              <div className="h-12 bg-default-300"></div>
+              <div className="bg-default-300 h-12"></div>
             </Skeleton>
             <Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
-              <div className="h-12 bg-default-300"></div>
+              <div className="bg-default-300 h-12"></div>
             </Skeleton>
           </div>
         ))}

ui/components/scans/trigger-icon.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from "@nextui-org/react";
+import { Tooltip } from "@heroui/tooltip";
 
 import { ManualIcon, ScheduleIcon } from "@/components/icons";