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/workflow/forms/base-credentials-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Divider } from "@nextui-org/react";
+import { Divider } from "@heroui/divider";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { Control } from "react-hook-form";
 
@@ -68,7 +68,7 @@ export const BaseCredentialsForm = ({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(handleSubmit)}
-        className="flex flex-col space-y-4"
+        className="flex flex-col gap-4"
       >
         <input
           type="hidden"
@@ -134,7 +134,7 @@ export const BaseCredentialsForm = ({
           />
         )}
 
-        <div className="flex w-full justify-end sm:space-x-6">
+        <div className="flex w-full justify-end sm:gap-6">
           {showBackButton && requiresBackButton(searchParamsObj.get("via")) && (
             <CustomButton
               type="button"

ui/components/providers/workflow/forms/connect-account-form.tsx

@@ -167,7 +167,7 @@ export const ConnectAccountForm = () => {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmitClient)}
-        className="flex flex-col space-y-4"
+        className="flex flex-col gap-4"
       >
         {/* Step 1: Provider selection */}
         {prevStep === 1 && (
@@ -206,7 +206,7 @@ export const ConnectAccountForm = () => {
           </>
         )}
         {/* Navigation buttons */}
-        <div className="flex w-full justify-end sm:space-x-6">
+        <div className="flex w-full justify-end sm:gap-6">
           {/* Show "Back" button only in Step 2 */}
           {prevStep === 2 && (
             <CustomButton

ui/components/providers/workflow/forms/select-credentials-type/aws/credentials-type/aws-role-credentials-form.tsx

@@ -1,4 +1,7 @@
-import { Chip, Divider, Select, SelectItem, Switch } from "@nextui-org/react";
+import { Chip } from "@heroui/chip";
+import { Divider } from "@heroui/divider";
+import { Select, SelectItem } from "@heroui/select";
+import { Switch } from "@heroui/switch";
 import { useEffect, useState } from "react";
 import { Control, UseFormSetValue, useWatch } from "react-hook-form";
 
@@ -64,13 +67,13 @@ export const AWSRoleCredentialsForm = ({
     <>
       <div className="flex flex-col">
         {type === "providers" && (
-          <div className="text-md font-bold leading-9 text-default-foreground">
+          <div className="text-md text-default-foreground leading-9 font-bold">
             Connect assuming IAM Role
           </div>
         )}
       </div>
 
-      <span className="text-xs font-bold text-default-500">
+      <span className="text-default-500 text-xs font-bold">
         Specify which AWS credentials to use
       </span>
 
@@ -168,10 +171,10 @@ export const AWSRoleCredentialsForm = ({
       <Divider className="" />
 
       {type === "providers" ? (
-        <span className="text-xs font-bold text-default-500">Assume Role</span>
+        <span className="text-default-500 text-xs font-bold">Assume Role</span>
       ) : (
         <div className="flex items-center justify-between">
-          <span className="text-xs font-bold text-default-500">
+          <span className="text-default-500 text-xs font-bold">
             {isCloudEnv && credentialsType === "aws-sdk-default"
               ? "Adding a role is required"
               : "Optionally add a role"}
@@ -224,7 +227,7 @@ export const AWSRoleCredentialsForm = ({
             }
           />
 
-          <span className="text-xs text-default-500">Optional fields</span>
+          <span className="text-default-500 text-xs">Optional fields</span>
           <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
             <CustomInput
               control={control}

ui/components/providers/workflow/forms/select-credentials-type/aws/credentials-type/aws-static-credentials-form.tsx

@@ -12,10 +12,10 @@ export const AWSStaticCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
+        <div className="text-md text-default-foreground leading-9 font-bold">
           Connect via Credentials
         </div>
-        <div className="text-sm text-default-500">
+        <div className="text-default-500 text-sm">
           Please provide the information for your AWS credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/aws/radio-group-aws-via-credentials-type-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { RadioGroup } from "@nextui-org/react";
+import { RadioGroup } from "@heroui/radio";
 import React from "react";
 import { Control, Controller } from "react-hook-form";
 
@@ -39,13 +39,13 @@ export const RadioGroupAWSViaCredentialsTypeForm = ({
             }}
           >
             <div className="flex flex-col gap-4">
-              <span className="text-sm text-default-500">Using IAM Role</span>
+              <span className="text-default-500 text-sm">Using IAM Role</span>
               <CustomRadio description="Connect assuming IAM Role" value="role">
                 <div className="flex items-center">
                   <span className="ml-2">Connect assuming IAM Role</span>
                 </div>
               </CustomRadio>
-              <span className="text-sm text-default-500">
+              <span className="text-default-500 text-sm">
                 Using Credentials
               </span>
               <CustomRadio

ui/components/providers/workflow/forms/select-credentials-type/gcp/credentials-type/gcp-default-credentials-form.tsx

@@ -11,10 +11,10 @@ export const GCPDefaultCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
+        <div className="text-md text-default-foreground leading-9 font-bold">
           Connect via Credentials
         </div>
-        <div className="text-sm text-default-500">
+        <div className="text-default-500 text-sm">
           Please provide the information for your GCP credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/gcp/credentials-type/gcp-service-account-key-form.tsx

@@ -11,10 +11,10 @@ export const GCPServiceAccountKeyForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
+        <div className="text-md text-default-foreground leading-9 font-bold">
           Connect via Service Account Key
         </div>
-        <div className="text-sm text-default-500">
+        <div className="text-default-500 text-sm">
           Please provide the service account key for your GCP credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/gcp/radio-group-gcp-via-credentials-type-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { RadioGroup } from "@nextui-org/react";
+import { RadioGroup } from "@heroui/radio";
 import React from "react";
 import { Control, Controller } from "react-hook-form";
 
@@ -39,7 +39,7 @@ export const RadioGroupGCPViaCredentialsTypeForm = ({
             }}
           >
             <div className="flex flex-col gap-4">
-              <span className="text-sm text-default-500">
+              <span className="text-default-500 text-sm">
                 Using Service Account
               </span>
               <CustomRadio
@@ -50,7 +50,7 @@ export const RadioGroupGCPViaCredentialsTypeForm = ({
                   <span className="ml-2">Connect via Service Account Key</span>
                 </div>
               </CustomRadio>
-              <span className="text-sm text-default-500">
+              <span className="text-default-500 text-sm">
                 Using Application Default Credentials
               </span>
               <CustomRadio

ui/components/providers/workflow/forms/select-credentials-type/github/credentials-type/github-app-form.tsx

@@ -9,10 +9,10 @@ export const GitHubAppForm = ({ control }: { control: Control<any> }) => {
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
+        <div className="text-md text-default-foreground leading-9 font-bold">
           Connect via GitHub App
         </div>
-        <div className="text-sm text-default-500">
+        <div className="text-default-500 text-sm">
           Please provide your GitHub App ID and private key.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/github/credentials-type/github-oauth-app-form.tsx

@@ -9,10 +9,10 @@ export const GitHubOAuthAppForm = ({ control }: { control: Control<any> }) => {
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
+        <div className="text-md text-default-foreground leading-9 font-bold">
           Connect via OAuth App
         </div>
-        <div className="text-sm text-default-500">
+        <div className="text-default-500 text-sm">
           Please provide your GitHub OAuth App token.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/github/credentials-type/github-personal-access-token-form.tsx

@@ -13,10 +13,10 @@ export const GitHubPersonalAccessTokenForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
+        <div className="text-md text-default-foreground leading-9 font-bold">
           Connect via Personal Access Token
         </div>
-        <div className="text-sm text-default-500">
+        <div className="text-default-500 text-sm">
           Please provide your GitHub personal access token.
         </div>
       </div>

ui/components/providers/workflow/forms/select-credentials-type/github/radio-group-github-via-credentials-type-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { RadioGroup } from "@nextui-org/react";
+import { RadioGroup } from "@heroui/radio";
 import React from "react";
 import { Control, Controller } from "react-hook-form";
 
@@ -39,7 +39,7 @@ export const RadioGroupGitHubViaCredentialsTypeForm = ({
             }}
           >
             <div className="flex flex-col gap-4">
-              <span className="text-sm text-default-500">
+              <span className="text-default-500 text-sm">
                 Personal Access Token
               </span>
               <CustomRadio
@@ -51,7 +51,7 @@ export const RadioGroupGitHubViaCredentialsTypeForm = ({
                 </div>
               </CustomRadio>
 
-              <span className="text-sm text-default-500">OAuth App</span>
+              <span className="text-default-500 text-sm">OAuth App</span>
               <CustomRadio
                 description="Use OAuth App token for authentication"
                 value="oauth_app"
@@ -61,7 +61,7 @@ export const RadioGroupGitHubViaCredentialsTypeForm = ({
                 </div>
               </CustomRadio>
 
-              <span className="text-sm text-default-500">GitHub App</span>
+              <span className="text-default-500 text-sm">GitHub App</span>
               <CustomRadio
                 description="Use GitHub App ID and private key for authentication"
                 value="github_app"

ui/components/providers/workflow/forms/test-connection-form.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Checkbox } from "@heroui/checkbox";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Icon } from "@iconify/react";
-import { Checkbox } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -201,16 +201,16 @@ export const TestConnectionForm = ({
 
   if (isRedirecting) {
     return (
-      <div className="flex flex-col items-center justify-center space-y-6 py-12">
+      <div className="flex flex-col items-center justify-center gap-6 py-12">
         <div className="relative">
-          <div className="h-24 w-24 animate-pulse rounded-full bg-primary/20" />
-          <div className="absolute inset-0 h-24 w-24 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+          <div className="bg-primary/20 h-24 w-24 animate-pulse rounded-full" />
+          <div className="border-primary absolute inset-0 h-24 w-24 animate-spin rounded-full border-4 border-t-transparent" />
         </div>
         <div className="text-center">
-          <p className="text-xl font-medium text-primary">
+          <p className="text-primary text-xl font-medium">
             Scan initiated successfully
           </p>
-          <p className="mt-2 text-small font-bold text-gray-500">
+          <p className="text-small mt-2 font-bold text-gray-500">
             Redirecting to scans job details...
           </p>
         </div>
@@ -222,7 +222,7 @@ export const TestConnectionForm = ({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmitClient)}
-        className="flex flex-col space-y-4"
+        className="flex flex-col gap-4"
       >
         <div className="text-left">
           <div className="mb-2 text-xl font-medium">
@@ -230,7 +230,7 @@ export const TestConnectionForm = ({
               ? "Check connection and launch scan"
               : "Check connection"}
           </div>
-          <p className="py-2 text-small text-default-500">
+          <p className="text-small text-default-500 py-2">
             {!isUpdated
               ? "After a successful connection, a scan will automatically run every 24 hours. To run a single scan instead, select the checkbox below."
               : "A successful connection will redirect you to the providers page."}
@@ -238,7 +238,7 @@ export const TestConnectionForm = ({
         </div>
 
         {apiErrorMessage && (
-          <div className="mt-4 rounded-md bg-red-100 p-3 text-danger">
+          <div className="text-danger mt-4 rounded-md bg-red-100 p-3">
             <p>{`Provider ID ${apiErrorMessage?.toLowerCase()}. Please check and try again.`}</p>
           </div>
         )}
@@ -249,7 +249,7 @@ export const TestConnectionForm = ({
               <div className="flex items-center">
                 <Icon
                   icon="heroicons:exclamation-circle"
-                  className="h-5 w-5 text-danger"
+                  className="text-danger h-5 w-5"
                 />
               </div>
               <div className="flex items-center">
@@ -286,19 +286,19 @@ export const TestConnectionForm = ({
         )}
 
         {isUpdated && !connectionStatus?.error && (
-          <p className="py-2 text-small text-default-500">
+          <p className="text-small text-default-500 py-2">
             Check the new credentials and test the connection.
           </p>
         )}
 
         <input type="hidden" name="providerId" value={providerId} />
 
-        <div className="flex w-full justify-end sm:space-x-6">
+        <div className="flex w-full justify-end sm:gap-6">
           {apiErrorMessage ? (
             <CustomLink
               href="/providers"
               target="_self"
-              className="mr-3 flex w-fit items-center justify-center space-x-2 rounded-lg border border-solid border-gray-200 px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
+              className="mr-3 flex w-fit items-center justify-center gap-2 rounded-lg border border-solid border-gray-200 px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
             >
               <Icon
                 icon="icon-park-outline:close-small"

ui/components/providers/workflow/forms/via-credentials/azure-credentials-form.tsx

@@ -11,10 +11,10 @@ export const AzureCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
+        <div className="text-md text-default-foreground leading-9 font-bold">
           Connect via Credentials
         </div>
-        <div className="text-sm text-default-500">
+        <div className="text-default-500 text-sm">
           Please provide the information for your Azure credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/via-credentials/k8s-credentials-form.tsx

@@ -11,10 +11,10 @@ export const KubernetesCredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
+        <div className="text-md text-default-foreground leading-9 font-bold">
           Connect via Credentials
         </div>
-        <div className="text-sm text-default-500">
+        <div className="text-default-500 text-sm">
           Please provide the kubeconfig content for your Kubernetes credentials.
         </div>
       </div>

ui/components/providers/workflow/forms/via-credentials/m365-credentials-form.tsx

@@ -13,10 +13,10 @@ export const M365CredentialsForm = ({
   return (
     <>
       <div className="flex flex-col">
-        <div className="text-md font-bold leading-9 text-default-foreground">
+        <div className="text-md text-default-foreground leading-9 font-bold">
           Connect via Credentials
         </div>
-        <div className="text-sm text-default-500">
+        <div className="text-default-500 text-sm">
           Please provide the information for your Microsoft 365 credentials.
         </div>
       </div>
@@ -53,7 +53,7 @@ export const M365CredentialsForm = ({
         isRequired
         isInvalid={!!control._formState.errors.tenant_id}
       />
-      <p className="text-sm text-default-500">
+      <p className="text-default-500 text-sm">
         {" "}
         User and password authentication is being deprecated due to
         Microsoft&apos;s on-going MFA enforcement across all tenants (see{" "}
@@ -66,13 +66,13 @@ export const M365CredentialsForm = ({
         ).
       </p>
 
-      <div className="flex items-center rounded-lg border border-system-warning bg-system-warning-medium p-2 text-sm dark:text-default-300">
-        <InfoIcon className="mr-2 inline h-4 w-4 flex-shrink-0" />
+      <div className="border-system-warning bg-system-warning-medium dark:text-default-300 flex items-center rounded-lg border p-2 text-sm">
+        <InfoIcon className="mr-2 inline h-4 w-4 shrink-0" />
         <p className="text-xs font-extrabold">
           By October 2025, MFA will be mandatory.
         </p>
       </div>
-      <p className="text-sm text-default-500">
+      <p className="text-default-500 text-sm">
         Due to that change, you must only{" "}
         <CustomLink
           href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/microsoft365/getting-started-m365/#step-3-configure-your-m365-account"