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>

Author: 4 people

.env

@@ -99,7 +99,7 @@ SENTRY_ENVIRONMENT=local
 SENTRY_RELEASE=local
 
 #### Prowler release version ####
-NEXT_PUBLIC_PROWLER_RELEASE_VERSION=v5.10.0
+NEXT_PUBLIC_PROWLER_RELEASE_VERSION=v5.12.2
 
 # Social login credentials
 SOCIAL_GOOGLE_OAUTH_CALLBACK_URL="${AUTH_URL}/api/auth/callback/google"

Makefile

@@ -45,3 +45,7 @@ pypi-upload: ## Upload package
 help:     ## Show this help.
 	@echo "Prowler Makefile"
 	@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n"} /^[a-zA-Z_-]+:.*?##/ { printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
+
+##@ Development Environment
+run-api-dev: ## Start development environment with API, PostgreSQL, Valkey, and workers 
+	docker compose -f docker-compose-dev.yml up api-dev postgres valkey worker-dev worker-beat --build

ui/.eslintignore

@@ -12,6 +12,7 @@ node_modules
 coverage
 .next
 build
+next-env.d.ts
 !.commitlintrc.cjs
 !.lintstagedrc.cjs
 !jest.config.js

ui/CHANGELOG.md

@@ -9,11 +9,18 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Support for Markdown and AdditionalURLs in findings detail page [(#8704)](https://github.com/prowler-cloud/prowler/pull/8704)
 - `Prowler Hub` menu item with tooltip [(#8692)] (https://github.com/prowler-cloud/prowler/pull/8692)
 - Copy link button to finding detail page [(#8685)] (https://github.com/prowler-cloud/prowler/pull/8685)
+- React Compiler support for automatic optimization [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
+- Turbopack support for faster development builds [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
 - Add compliance name in compliance detail view [(#8775)](https://github.com/prowler-cloud/prowler/pull/8775)
 
 ### 🔄 Changed
 
-### 🐞 Fixed
+- Upgraded React to version 19.1.1 with async components support [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
+- Upgraded Next.js to version 15.5.3 with enhanced App Router [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
+- Updated from NextUI to HeroUI [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
+- Updated LangChain to latest versions with API improvements [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
+- Migrated all page components to async `params`/`searchParams` API [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
+- Migrated from `useFormState` to `useActionState` for React 19 compatibility [(#8748)](https://github.com/prowler-cloud/prowler/pull/8748)
 
 ---
 

ui/actions/compliances/compliances.ts

@@ -1,6 +1,7 @@
 "use server";
 
-import { apiBaseUrl, getAuthHeaders, handleApiResponse } from "@/lib";
+import { apiBaseUrl, getAuthHeaders } from "@/lib";
+import { handleApiResponse } from "@/lib/server-actions-helper";
 
 export const getCompliancesOverview = async ({
   scanId,
@@ -28,7 +29,7 @@ export const getCompliancesOverview = async ({
       headers,
     });
 
-    return handleApiResponse(response, "/compliance");
+    return handleApiResponse(response);
   } catch (error) {
     console.error("Error fetching providers:", error);
     return undefined;

ui/actions/findings/findings.ts

@@ -2,7 +2,8 @@
 
 import { redirect } from "next/navigation";
 
-import { apiBaseUrl, getAuthHeaders, handleApiResponse } from "@/lib";
+import { apiBaseUrl, getAuthHeaders } from "@/lib";
+import { handleApiResponse } from "@/lib/server-actions-helper";
 
 export const getFindings = async ({
   page = 1,
@@ -32,7 +33,7 @@ export const getFindings = async ({
     const findings = await fetch(url.toString(), {
       headers,
     });
-    return handleApiResponse(findings, "/findings");
+    return handleApiResponse(findings);
   } catch (error) {
     console.error("Error fetching findings:", error);
     return undefined;
@@ -69,7 +70,7 @@ export const getLatestFindings = async ({
     const findings = await fetch(url.toString(), {
       headers,
     });
-    return handleApiResponse(findings, "/findings");
+    return handleApiResponse(findings);
   } catch (error) {
     console.error("Error fetching findings:", error);
     return undefined;

ui/actions/integrations/integrations.ts

@@ -3,13 +3,8 @@
 import { revalidatePath } from "next/cache";
 
 import { pollTaskUntilSettled } from "@/actions/task/poll";
-import {
-  apiBaseUrl,
-  getAuthHeaders,
-  handleApiError,
-  handleApiResponse,
-  parseStringify,
-} from "@/lib";
+import { apiBaseUrl, getAuthHeaders, parseStringify } from "@/lib";
+import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
 import { IntegrationType } from "@/types/integrations";
 import type { TaskState } from "@/types/tasks";
 

ui/actions/integrations/jira-dispatch.ts

@@ -1,7 +1,8 @@
 "use server";
 
 import { pollTaskUntilSettled } from "@/actions/task/poll";
-import { apiBaseUrl, getAuthHeaders, handleApiError } from "@/lib";
+import { apiBaseUrl, getAuthHeaders } from "@/lib";
+import { handleApiError } from "@/lib/server-actions-helper";
 import type {
   IntegrationProps,
   JiraDispatchRequest,

ui/actions/integrations/saml.ts

@@ -2,7 +2,8 @@
 
 import { revalidatePath } from "next/cache";
 
-import { apiBaseUrl, getAuthHeaders, handleApiResponse } from "@/lib/helper";
+import { apiBaseUrl, getAuthHeaders } from "@/lib/helper";
+import { handleApiResponse } from "@/lib/server-actions-helper";
 import { samlConfigFormSchema } from "@/types/formSchemas";
 
 export const createSamlConfig = async (_prevState: any, formData: FormData) => {

ui/actions/invitations/invitation.ts

@@ -3,12 +3,8 @@
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 
-import {
-  apiBaseUrl,
-  getAuthHeaders,
-  handleApiError,
-  handleApiResponse,
-} from "@/lib";
+import { apiBaseUrl, getAuthHeaders } from "@/lib";
+import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
 
 export const getInvitations = async ({
   page = 1,
@@ -40,7 +36,7 @@ export const getInvitations = async ({
       headers,
     });
 
-    return handleApiResponse(response, "/invitations");
+    return handleApiResponse(response);
   } catch (error) {
     console.error("Error fetching invitations:", error);
     return undefined;