Merge branch 'master' into PRWLR-7732-add-mutelist-menu-item

ui/actions/roles/roles.ts

@@ -120,8 +120,7 @@ export const addRole = async (formData: FormData) => {
         manage_providers: formData.get("manage_providers") === "true",
         manage_scans: formData.get("manage_scans") === "true",
         manage_account: formData.get("manage_account") === "true",
-        // TODO: Add back when we have integrations ready
-        // manage_integrations: formData.get("manage_integrations") === "true",
+        manage_integrations: formData.get("manage_integrations") === "true",
         unlimited_visibility: formData.get("unlimited_visibility") === "true",
       },
       relationships: {},

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

@@ -11,7 +11,6 @@ export default async function Integrations() {
     <ContentLayout title="Integrations" icon="lucide:puzzle">
       <div className="space-y-6">
         <div className="space-y-4">
-          <h2 className="text-xl font-semibold">Available Integrations</h2>
           <p className="text-sm text-gray-600 dark:text-gray-300">
             Connect external services to enhance your security workflow and
             automatically export your scan results.

ui/app/(prowler)/integrations/s3/page.tsx

@@ -36,7 +36,7 @@ export default async function S3Integrations() {
               </li>
               <li className="flex items-center gap-2">
                 <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
-                Multiple bucket support
+                Multi-Cloud support
               </li>
               <li className="flex items-center gap-2">
                 <span className="h-1.5 w-1.5 rounded-full bg-green-500" />

ui/components/integrations/s3/s3-integration-card.tsx

@@ -2,10 +2,10 @@
 
 import { Card, CardBody, CardHeader, Chip } from "@nextui-org/react";
 import { SettingsIcon } from "lucide-react";
-import Link from "next/link";
 
 import { AmazonS3Icon } from "@/components/icons/services/IconServices";
 import { CustomButton } from "@/components/ui/custom";
+import { CustomLink } from "@/components/ui/custom/custom-link";
 import { IntegrationProps } from "@/types/integrations";
 
 import { S3IntegrationCardSkeleton } from "./skeleton-s3-integration-card";
@@ -40,31 +40,28 @@ export const S3IntegrationCard = ({
   return (
     <Card className="dark:bg-gray-800">
       <CardHeader className="gap-2">
-        <div className="flex w-full items-center justify-between">
+        <div className="flex w-full flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex items-center gap-3">
             <AmazonS3Icon size={40} />
             <div className="flex flex-col gap-1">
               <h4 className="text-lg font-bold text-gray-900 dark:text-gray-100">
                 Amazon S3
               </h4>
-              <div className="flex items-center gap-2">
-                <p className="text-xs text-gray-500 dark:text-gray-300">
+              <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
+                <p className="text-nowrap text-xs text-gray-500 dark:text-gray-300">
                   Export security findings to Amazon S3 buckets.
                 </p>
-                {/* Todo: add real DOCS, use CustomLink when available */}
-                <Link
-                  href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-xs text-primary"
+                <CustomLink
+                  href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-s3-integration/"
                   aria-label="Learn more about S3 integration"
+                  size="xs"
                 >
                   Learn more
-                </Link>
+                </CustomLink>
               </div>
             </div>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 self-end sm:self-center">
             {isConfigured && (
               <Chip
                 size="sm"

ui/components/integrations/s3/s3-integration-form.tsx

@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Divider } from "@nextui-org/react";
-import { ArrowRightIcon } from "lucide-react";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 import { Control, useForm } from "react-hook-form";
@@ -66,7 +66,7 @@ export const S3IntegrationForm = ({
         integration?.attributes.configuration.output_directory || "",
       providers:
         integration?.relationships?.providers?.data?.map((p) => p.id) || [],
-      credentials_type: "aws-sdk-default" as const,
+      credentials_type: "access-secret-key" as const,
       aws_access_key_id: "",
       aws_secret_access_key: "",
       aws_session_token: "",
@@ -372,6 +372,7 @@ export const S3IntegrationForm = ({
         submitText="Create Integration"
         cancelText="Back"
         loadingText="Creating..."
+        leftIcon={<ArrowLeftIcon size={24} />}
         isDisabled={isLoading}
       />
     );
@@ -392,16 +393,18 @@ export const S3IntegrationForm = ({
         className="flex flex-col space-y-6"
       >
         <div className="flex flex-col space-y-4">
-          <p className="flex items-center gap-2 text-sm text-default-500">
-            Need help connecting your AWS account?
+          <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
+            <p className="flex items-center gap-2 text-sm text-default-500">
+              Need help configuring your Amazon S3 integrations?
+            </p>
             <CustomLink
-              href="https://goto.prowler.com/provider-aws"
+              href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-s3-integration/"
               target="_blank"
               size="sm"
             >
               Read the docs
             </CustomLink>
-          </p>
+          </div>
           {renderStepContent()}
         </div>
         {renderStepButtons()}

ui/components/integrations/s3/s3-integrations-manager.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Card, CardBody, CardHeader, Chip } from "@nextui-org/react";
+import { format } from "date-fns";
 import {
   PlusIcon,
   Power,
@@ -314,9 +315,12 @@ export const S3IntegrationsManager = ({
                       {integration.attributes.connection_last_checked_at && (
                         <p>
                           <span className="font-medium">Last checked:</span>{" "}
-                          {new Date(
-                            integration.attributes.connection_last_checked_at,
-                          ).toLocaleDateString()}
+                          {format(
+                            new Date(
+                              integration.attributes.connection_last_checked_at,
+                            ),
+                            "yyyy/MM/dd",
+                          )}
                         </p>
                       )}
                     </div>

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

@@ -36,6 +36,7 @@ export const AddRoleForm = ({
       name: "",
       manage_users: false,
       manage_providers: false,
+      manage_integrations: false,
       manage_scans: false,
       unlimited_visibility: false,
       groups: [],
@@ -68,7 +69,7 @@ export const AddRoleForm = ({
       "manage_account",
       "manage_billing",
       "manage_providers",
-      // "manage_integrations",
+      "manage_integrations",
       "manage_scans",
       "unlimited_visibility",
     ];
@@ -87,6 +88,7 @@ export const AddRoleForm = ({
     formData.append("name", values.name);
     formData.append("manage_users", String(values.manage_users));
     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("manage_account", String(values.manage_account));
     formData.append(

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

@@ -99,7 +99,7 @@ export const EditRoleForm = ({
       updatedFields.manage_users = values.manage_users;
       updatedFields.manage_providers = values.manage_providers;
       updatedFields.manage_account = values.manage_account;
-      // updatedFields.manage_integrations = values.manage_integrations;
+      updatedFields.manage_integrations = values.manage_integrations;
       updatedFields.manage_scans = values.manage_scans;
       updatedFields.unlimited_visibility = values.unlimited_visibility;
 

ui/components/ui/custom/custom-link.tsx

@@ -34,7 +34,7 @@ export const CustomLink = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
         href={href}
         scroll={scroll}
         className={cn(
-          `text-${size} break-all font-medium text-primary decoration-1 hover:underline`,
+          `text-${size} text-nowrap break-all font-medium text-primary decoration-1 hover:underline`,
           className,
         )}
         aria-label={ariaLabel}

ui/components/ui/sidebar/menu.tsx

@@ -33,6 +33,10 @@ const MENU_HIDE_RULES: MenuHideRule[] = [
     label: "Billing",
     condition: (permissions) => permissions?.manage_billing === false,
   },
+  {
+    label: "Integrations",
+    condition: (permissions) => permissions?.manage_integrations === false,
+  },
   // Add more rules as needed:
   // {
   //   label: "Users",

ui/hooks/use-credentials-form.ts

@@ -66,7 +66,7 @@ export const useCredentialsForm = ({
     if (providerType === "aws" && via === "role") {
       return {
         ...baseDefaults,
-        [ProviderCredentialFields.CREDENTIALS_TYPE]: "aws-sdk-default",
+        [ProviderCredentialFields.CREDENTIALS_TYPE]: "access-secret-key",
         [ProviderCredentialFields.ROLE_ARN]: "",
         [ProviderCredentialFields.EXTERNAL_ID]: session?.tenantId || "",
         [ProviderCredentialFields.AWS_ACCESS_KEY_ID]: "",

ui/lib/helper.ts

@@ -322,12 +322,12 @@ export const permissionFormFields: PermissionInfo[] = [
     description:
       "Allows configuration and management of cloud provider connections",
   },
-  // {
-  //   field: "manage_integrations",
-  //   label: "Manage Integrations",
-  //   description:
-  //     "Controls the setup and management of third-party integrations",
-  // },
+  {
+    field: "manage_integrations",
+    label: "Manage Integrations",
+    description:
+      "Allows configuration and management of third-party integrations",
+  },
   {
     field: "manage_scans",
     label: "Manage Scans",

ui/middleware.ts

@@ -29,6 +29,13 @@ export default auth((req: NextRequest & { auth: any }) => {
     if (pathname.startsWith("/billing") && !permissions.manage_billing) {
       return NextResponse.redirect(new URL("/profile", req.url));
     }
+
+    if (
+      pathname.startsWith("/integrations") &&
+      !permissions.manage_integrations
+    ) {
+      return NextResponse.redirect(new URL("/profile", req.url));
+    }
   }
 
   return NextResponse.next();

ui/types/formSchemas.ts

@@ -11,7 +11,7 @@ export const addRoleFormSchema = z.object({
   manage_account: z.boolean().default(false),
   manage_billing: z.boolean().default(false),
   manage_providers: z.boolean().default(false),
-  // manage_integrations: z.boolean().default(false),
+  manage_integrations: z.boolean().default(false),
   manage_scans: z.boolean().default(false),
   unlimited_visibility: z.boolean().default(false),
   groups: z.array(z.string()).optional(),
@@ -23,7 +23,7 @@ export const editRoleFormSchema = z.object({
   manage_account: z.boolean().default(false),
   manage_billing: z.boolean().default(false),
   manage_providers: z.boolean().default(false),
-  // manage_integrations: z.boolean().default(false),
+  manage_integrations: z.boolean().default(false),
   manage_scans: z.boolean().default(false),
   unlimited_visibility: z.boolean().default(false),
   groups: z.array(z.string()).optional(),