fix(dep): address compatibility issues (#6557)

Co-authored-by: Pablo Lara <[email protected]>

ui/actions/roles/roles.ts

@@ -81,25 +81,32 @@ export const addRole = async (formData: FormData) => {
 
   const name = formData.get("name") as string;
   const groups = formData.getAll("groups[]") as string[];
-  // Prepare base payload
+
   const payload: any = {
     data: {
       type: "roles",
       attributes: {
         name,
         manage_users: formData.get("manage_users") === "true",
-        manage_account: formData.get("manage_account") === "true",
-        manage_billing: formData.get("manage_billing") === "true",
         manage_providers: formData.get("manage_providers") === "true",
-        manage_integrations: formData.get("manage_integrations") === "true",
         manage_scans: formData.get("manage_scans") === "true",
+        // TODO: Add back when we have integrations ready
+        // manage_integrations: formData.get("manage_integrations") === "true",
         unlimited_visibility: formData.get("unlimited_visibility") === "true",
       },
       relationships: {},
     },
   };
 
-  // Add relationships only if there are items
+  // Conditionally include manage_account and manage_billing for cloud environment
+  if (process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true") {
+    payload.data.attributes.manage_account =
+      formData.get("manage_account") === "true";
+    payload.data.attributes.manage_billing =
+      formData.get("manage_billing") === "true";
+  }
+
+  // Add provider groups relationships only if there are items
   if (groups.length > 0) {
     payload.data.relationships.provider_groups = {
       data: groups.map((groupId: string) => ({
@@ -147,19 +154,27 @@ export const updateRole = async (formData: FormData, roleId: string) => {
       type: "roles",
       id: roleId,
       attributes: {
-        ...(name && { name }),
+        ...(name && { name }), // Include name only if provided
         manage_users: formData.get("manage_users") === "true",
-        manage_account: formData.get("manage_account") === "true",
-        manage_billing: formData.get("manage_billing") === "true",
         manage_providers: formData.get("manage_providers") === "true",
-        manage_integrations: formData.get("manage_integrations") === "true",
         manage_scans: formData.get("manage_scans") === "true",
+        // TODO: Add back when we have integrations ready
+        // manage_integrations: formData.get("manage_integrations") === "true",
         unlimited_visibility: formData.get("unlimited_visibility") === "true",
       },
       relationships: {},
     },
   };
 
+  // Conditionally include manage_account and manage_billing for cloud environments
+  if (process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true") {
+    payload.data.attributes.manage_account =
+      formData.get("manage_account") === "true";
+    payload.data.attributes.manage_billing =
+      formData.get("manage_billing") === "true";
+  }
+
+  // Add provider groups relationships only if there are items
   if (groups.length > 0) {
     payload.data.relationships.provider_groups = {
       data: groups.map((groupId: string) => ({
@@ -182,6 +197,7 @@ export const updateRole = async (formData: FormData, roleId: string) => {
       },
       body,
     });
+
     const data = await response.json();
     revalidatePath("/roles");
     return data;

ui/app/(prowler)/providers/(set-up-provider)/update-credentials/page.tsx

@@ -1,6 +1,6 @@
-import { Alert, cn } from "@nextui-org/react";
 import React from "react";
 
+import { InfoIcon } from "@/components/icons";
 import {
   UpdateViaCredentialsForm,
   UpdateViaRoleForm,
@@ -17,33 +17,23 @@ export default function UpdateCredentialsPage({ searchParams }: Props) {
       {searchParams.type === "aws" && !searchParams.via && (
         <>
           <div className="flex flex-col gap-4">
-            <p className="text-sm text-default-500">
-              If the provider was set up with static credentials, updates must
-              use static credentials. If it was set up with a role, updates must
-              use a role.
+            <p className="text-sm text-default-700">
+              To update provider credentials,{" "}
+              <strong>
+                the same type that was originally configured must be used.
+              </strong>
             </p>
-
-            <Alert
-              color="warning"
-              variant="faded"
-              classNames={{
-                base: cn([
-                  "border-1 border-default-200 dark:border-default-100",
-                  "gap-x-4",
-                ]),
-              }}
-              description={
-                <>
-                  To update provider credentials,{" "}
-                  <strong>
-                    you must use the same type that was originally configured.
-                  </strong>{" "}
-                </>
-              }
-            />
-            <p className="text-sm text-default-500">
-              To switch from static credentials to a role (or vice versa), you
-              need to delete the provider and set it up again.
+            <div className="flex items-center rounded-lg border border-system-warning bg-system-warning-medium p-4 text-sm dark:text-default-300">
+              <InfoIcon className="mr-2 inline h-4 w-4 flex-shrink-0" />
+              <p>
+                If the provider was configured with static credentials, updates
+                must also use static credentials. If it was configured with a
+                role, updates must use a role.
+              </p>
+            </div>
+            <p className="text-sm text-default-700">
+              To switch from static credentials to a role (or vice versa), the
+              provider must be deleted and set up again.
             </p>
             <SelectViaAWS initialVia={searchParams.via} />
           </div>

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

@@ -66,17 +66,18 @@ export default async function Scans({
             <>
               <Spacer y={8} />
               <NoProvidersConnected />
+              <Spacer y={4} />
             </>
           ) : (
             <>
               <LaunchScanWorkflow providers={providerInfo} />
+              <Spacer y={4} />
+              <ScanWarningBar />
               <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/roles/workflow/forms/add-role-form.tsx

@@ -33,13 +33,14 @@ export const AddRoleForm = ({
     defaultValues: {
       name: "",
       manage_users: false,
-      manage_account: false,
-      manage_billing: false,
       manage_providers: false,
-      manage_integrations: false,
       manage_scans: false,
       unlimited_visibility: false,
       groups: [],
+      ...(process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true" && {
+        manage_account: false,
+        manage_billing: false,
+      }),
     },
   });
 
@@ -64,7 +65,7 @@ export const AddRoleForm = ({
       "manage_account",
       "manage_billing",
       "manage_providers",
-      "manage_integrations",
+      // "manage_integrations",
       "manage_scans",
       "unlimited_visibility",
     ];
@@ -79,18 +80,22 @@ export const AddRoleForm = ({
 
   const onSubmitClient = async (values: FormValues) => {
     const formData = new FormData();
+
     formData.append("name", values.name);
     formData.append("manage_users", String(values.manage_users));
-    formData.append("manage_account", String(values.manage_account));
-    formData.append("manage_billing", String(values.manage_billing));
     formData.append("manage_providers", String(values.manage_providers));
-    formData.append("manage_integrations", String(values.manage_integrations));
     formData.append("manage_scans", String(values.manage_scans));
     formData.append(
       "unlimited_visibility",
       String(values.unlimited_visibility),
     );
 
+    // Conditionally append manage_account and manage_billing
+    if (process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true") {
+      formData.append("manage_account", String(values.manage_account));
+      formData.append("manage_billing", String(values.manage_billing));
+    }
+
     if (values.groups && values.groups.length > 0) {
       values.groups.forEach((group) => {
         formData.append("groups[]", group);

ui/components/roles/workflow/forms/edit-role-form.tsx

@@ -95,16 +95,21 @@ export const EditRoleForm = ({
       }
 
       updatedFields.manage_users = values.manage_users;
-      updatedFields.manage_account = values.manage_account;
-      updatedFields.manage_billing = values.manage_billing;
       updatedFields.manage_providers = values.manage_providers;
-      updatedFields.manage_integrations = values.manage_integrations;
+      // updatedFields.manage_integrations = values.manage_integrations;
       updatedFields.manage_scans = values.manage_scans;
       updatedFields.unlimited_visibility = values.unlimited_visibility;
 
+      if (process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true") {
+        updatedFields.manage_account = values.manage_account;
+        updatedFields.manage_billing = values.manage_billing;
+      }
+
       if (
         JSON.stringify(values.groups) !==
-        JSON.stringify(roleData.data.relationships?.provider_groups?.data)
+        JSON.stringify(
+          roleData.data.relationships?.provider_groups?.data.map((g) => g.id),
+        )
       ) {
         updatedFields.groups = values.groups;
       }

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

@@ -1,19 +1,18 @@
-import { Alert, cn } from "@nextui-org/react";
+"use client";
+
+import { InfoIcon } from "../icons";
 
 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",
-        ]),
-      }}
-    />
+    <div className="flex items-center rounded-lg border border-system-warning bg-system-warning-medium p-4 text-sm dark:text-default-300">
+      <InfoIcon className="mr-4 inline h-4 w-4 flex-shrink-0" />
+      <div className="flex flex-col gap-1">
+        <strong>Waiting for Your Scan to Show Up?</strong>
+        <p>
+          It may take a few minutes for the scan to appear on the table and be
+          displayed.
+        </p>
+      </div>
+    </div>
   );
 };