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/providers/forms/delete-form.tsx

@@ -59,7 +59,7 @@ export const DeleteForm = ({
           name={ProviderCredentialFields.PROVIDER_ID}
           value={providerId}
         />
-        <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/providers/forms/edit-form.tsx

@@ -67,7 +67,7 @@ export const EditForm = ({
     <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 alias: <span className="font-bold">{providerAlias}</span>
@@ -89,7 +89,7 @@ export const EditForm = ({
         </div>
         <input type="hidden" name="providerId" value={providerId} />
 
-        <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/providers/forms/muted-findings-config-form.tsx

@@ -1,8 +1,13 @@
 "use client";
 
-import { Textarea } from "@nextui-org/react";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { useFormState } from "react-dom";
+import { Textarea } from "@heroui/input";
+import {
+  Dispatch,
+  SetStateAction,
+  useActionState,
+  useEffect,
+  useState,
+} from "react";
 
 import {
   createMutedFindingsConfig,
@@ -45,7 +50,7 @@ export const MutedFindingsConfigForm = ({
   }>({ isValid: true });
   const [hasUserStartedTyping, setHasUserStartedTyping] = useState(false);
 
-  const [state, formAction, isPending] = useFormState<
+  const [state, formAction, isPending] = useActionState<
     MutedFindingsConfigActionState,
     FormData
   >(config ? updateMutedFindingsConfig : createMutedFindingsConfig, null);
@@ -128,15 +133,15 @@ export const MutedFindingsConfigForm = ({
 
   if (showDeleteConfirmation) {
     return (
-      <div className="flex flex-col space-y-4">
-        <h3 className="text-lg font-semibold text-default-700">
+      <div className="flex flex-col gap-4">
+        <h3 className="text-default-700 text-lg font-semibold">
           Delete Mutelist Configuration
         </h3>
-        <p className="text-sm text-default-600">
+        <p className="text-default-600 text-sm">
           Are you sure you want to delete this configuration? This action cannot
           be undone.
         </p>
-        <div className="flex w-full justify-center space-x-6">
+        <div className="flex w-full justify-center gap-6">
           <CustomButton
             type="button"
             ariaLabel="Cancel"
@@ -167,12 +172,12 @@ export const MutedFindingsConfigForm = ({
   }
 
   return (
-    <form action={formAction} className="flex flex-col space-y-4">
+    <form action={formAction} className="flex flex-col gap-4">
       {config && <input type="hidden" name="id" value={config.id} />}
 
-      <div className="space-y-4">
+      <div className="flex flex-col gap-4">
         <div>
-          <ul className="mb-4 list-disc pl-5 text-sm text-default-600">
+          <ul className="text-default-600 mb-4 list-disc pl-5 text-sm">
             <li>
               <strong>
                 This Mutelist configuration will take effect on the next scan.
@@ -196,10 +201,10 @@ export const MutedFindingsConfigForm = ({
           </ul>
         </div>
 
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           <label
             htmlFor="configuration"
-            className="text-sm font-medium text-default-700"
+            className="text-default-700 text-sm font-medium"
           >
             Mutelist Configuration
           </label>
@@ -228,7 +233,7 @@ export const MutedFindingsConfigForm = ({
               }}
             />
             {yamlValidation.isValid && configText && hasUserStartedTyping && (
-              <div className="my-1 flex items-center px-1 text-tiny text-success">
+              <div className="text-tiny text-success my-1 flex items-center px-1">
                 <span>Valid YAML format</span>
               </div>
             )}
@@ -236,7 +241,7 @@ export const MutedFindingsConfigForm = ({
         </div>
       </div>
 
-      <div className="flex flex-col space-y-4">
+      <div className="flex flex-col gap-4">
         <FormButtons
           setIsOpen={setIsOpen}
           onCancel={onCancel}