ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-10-09 21:14:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade to React 19, Next.js 15, React Compiler, HeroUI and Tailwind 4 (#8748)

Browse Source 
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>
This commit is contained in:
Alan Buscaglia
2025-09-30 09:59:51 +02:00
committed by GitHub
co-authored by Alan Buscaglia alejandrobailo César Arroba Alejandro Bailo
parent 2a4b62527a
commit 4d5676f00e
261 changed files with 6339 additions and 6126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/components/providers/enhanced-provider-selector.tsx
+12 -10
View File
@@ -1,6 +1,8 @@
"use client";
import { Button, Input, Select, SelectItem } from "@nextui-org/react";
import { Button } from "@heroui/button";
import { Input } from "@heroui/input";
import { Select, SelectItem } from "@heroui/select";
import { CheckSquare, Search, Square } from "lucide-react";
import { useMemo, useState } from "react";
import { Control } from "react-hook-form";
@@ -116,10 +118,10 @@ export const EnhancedProviderSelector = ({
return (
<>
<FormControl>
<div className="space-y-2">
<div className="flex flex-col gap-2">
{isMultiple && filteredProviders.length > 1 && (
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-default-700">
<span className="text-default-700 text-sm font-medium">
{label}
</span>
<Button
@@ -158,7 +160,7 @@ export const EnhancedProviderSelector = ({
listboxWrapper: "max-h-[300px] dark:bg-gray-800",
listbox: "gap-0",
label:
"tracking-tight font-light !text-default-500 text-xs !z-0",
"tracking-tight font-light !text-default-500 text-xs z-0!",
value: "text-default-500 text-small dark:text-gray-300",
}}
renderValue={(items) => {
@@ -210,7 +212,7 @@ export const EnhancedProviderSelector = ({
}}
listboxProps={{
topContent: enableSearch ? (
<div className="sticky top-0 z-10 bg-content1 py-2 dark:bg-gray-800">
<div className="bg-content1 sticky top-0 z-10 py-2 dark:bg-gray-800">
<Input
isClearable
placeholder="Search providers..."
@@ -249,20 +251,20 @@ export const EnhancedProviderSelector = ({
<div className="flex w-full items-center justify-between">
<div className="flex min-w-0 flex-1 items-center gap-3">
<div className="min-w-0 flex-1">
<div className="truncate text-small font-medium">
<div className="text-small truncate font-medium">
{displayName}
</div>
<div className="truncate text-tiny text-default-500">
<div className="text-tiny text-default-500 truncate">
{typeLabel}
{isDisabled && (
<span className="ml-2 text-danger">
<span className="text-danger ml-2">
(Already used)
</span>
)}
</div>
</div>
</div>
<div className="ml-2 flex flex-shrink-0 items-center gap-2">
<div className="ml-2 flex shrink-0 items-center gap-2">
<div
className={`h-2 w-2 rounded-full ${
provider.attributes.connection.connected
@@ -284,7 +286,7 @@ export const EnhancedProviderSelector = ({
</div>
</FormControl>
{showFormMessage && (
<FormMessage className="max-w-full text-xs text-system-error dark:text-system-error" />
<FormMessage className="text-system-error dark:text-system-error max-w-full text-xs" />
)}
</>
);
ui/components/providers/forms/delete-form.tsx
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+20 -15
View File
@@ -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}
ui/components/providers/provider-info.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import { Tooltip } from "@nextui-org/react";
import { Tooltip } from "@heroui/tooltip";
import React from "react";
import { ProviderType } from "@/types";
@@ -23,7 +23,7 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
case true:
return (
<Tooltip content="Provider connected" className="text-xs">
<div className="flex items-center justify-center rounded-medium border-2 border-system-success bg-system-success-lighter p-1">
<div className="rounded-medium border-system-success bg-system-success-lighter flex items-center justify-center border-2 p-1">
<ConnectionTrue className="text-system-success" size={24} />
</div>
</Tooltip>
@@ -31,7 +31,7 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
case false:
return (
<Tooltip content="Provider connection failed" className="text-xs">
<div className="flex items-center justify-center rounded-medium border-2 border-danger bg-system-error-lighter p-1">
<div className="rounded-medium border-danger bg-system-error-lighter flex items-center justify-center border-2 p-1">
<ConnectionFalse className="text-danger" size={24} />
</div>
</Tooltip>
@@ -39,7 +39,7 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
case null:
return (
<Tooltip content="Provider not connected" className="text-xs">
<div className="bg-info-lighter border-info-lighter flex items-center justify-center rounded-medium border p-1">
<div className="bg-info-lighter border-info-lighter rounded-medium flex items-center justify-center border p-1">
<ConnectionPending className="text-info" size={24} />
</div>
</Tooltip>
@@ -51,7 +51,7 @@ export const ProviderInfo: React.FC<ProviderInfoProps> = ({
return (
<div className="flex items-center text-sm">
<div className="flex items-center space-x-4">
<div className="flex items-center gap-4">
{getProviderLogo(provider)}
{getIcon()}
<span className="font-medium">{providerAlias || providerUID}</span>
ui/components/providers/radio-group-provider.tsx
+1 -1
View File
@@ -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";
import { z } from "zod";
ui/components/providers/table/column-providers.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
"use client";
import { Chip } from "@nextui-org/react";
import { Chip } from "@heroui/chip";
import { ColumnDef } from "@tanstack/react-table";
import { DateWithTime, SnippetChip } from "@/components/ui/entities";
ui/components/providers/table/data-table-row-actions.tsx
+18 -8
View File
@@ -1,18 +1,18 @@
"use client";
import { Button } from "@heroui/button";
import {
Button,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownSection,
DropdownTrigger,
} from "@nextui-org/react";
} from "@heroui/dropdown";
import {
AddNoteBulkIcon,
DeleteDocumentBulkIcon,
EditDocumentBulkIcon,
} from "@nextui-org/shared-icons";
} from "@heroui/shared-icons";
import { Row } from "@tanstack/react-table";
import clsx from "clsx";
import { useRouter } from "next/navigation";
@@ -28,8 +28,7 @@ import { DeleteForm } from "../forms/delete-form";
interface DataTableRowActionsProps<ProviderProps> {
row: Row<ProviderProps>;
}
const iconClasses =
"text-2xl text-default-500 pointer-events-none flex-shrink-0";
const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
export function DataTableRowActions<ProviderProps>({
row,
@@ -54,6 +53,12 @@ export function DataTableRowActions<ProviderProps>({
const hasSecret = (row.original as any).relationships?.secret?.data;
// Calculate disabled keys based on conditions
const disabledKeys = [];
if (!hasSecret || loading) {
disabledKeys.push("new");
}
return (
<>
<CustomAlertModal
@@ -78,7 +83,7 @@ export function DataTableRowActions<ProviderProps>({
<div className="relative flex items-center justify-end gap-2">
<Dropdown
className="shadow-xl dark:bg-prowler-blue-800"
className="dark:bg-prowler-blue-800 shadow-xl"
placement="bottom"
>
<DropdownTrigger>
@@ -86,7 +91,13 @@ export function DataTableRowActions<ProviderProps>({
<VerticalDotsIcon className="text-default-400" />
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Actions" color="default" variant="flat">
<DropdownMenu
aria-label="Actions"
color="default"
variant="flat"
disabledKeys={disabledKeys}
closeOnSelect={false}
>
<DropdownSection title="Actions">
<DropdownItem
key={hasSecret ? "update" : "add"}
@@ -118,7 +129,6 @@ export function DataTableRowActions<ProviderProps>({
textValue="Check Connection"
startContent={<AddNoteBulkIcon className={iconClasses} />}
onPress={handleTestConnection}
isDisabled={!hasSecret || loading}
closeOnSelect={false}
>
{loading ? "Testing..." : "Test Connection"}
ui/components/providers/table/skeleton-table-provider.tsx
+19 -18
View File
@@ -1,61 +1,62 @@
import { Card, Skeleton } from "@nextui-org/react";
import { Card } from "@heroui/card";
import { Skeleton } from "@heroui/skeleton";
import React from "react";
export const SkeletonTableProviders = () => {
return (
<Card className="h-full w-full space-y-5 p-4" radius="sm">
<Card className="flex h-full w-full flex-col gap-5 p-4" radius="sm">
{/* Table headers */}
<div className="hidden justify-between md:flex">
<Skeleton className="w-1/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
<div className="bg-default-200 h-8"></div>
</Skeleton>
<Skeleton className="w-2/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
<div className="bg-default-200 h-8"></div>
</Skeleton>
<Skeleton className="w-2/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
<div className="bg-default-200 h-8"></div>
</Skeleton>
<Skeleton className="w-2/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
<div className="bg-default-200 h-8"></div>
</Skeleton>
<Skeleton className="w-2/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
<div className="bg-default-200 h-8"></div>
</Skeleton>
<Skeleton className="w-1/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
<div className="bg-default-200 h-8"></div>
</Skeleton>
<Skeleton className="w-1/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
<div className="bg-default-200 h-8"></div>
</Skeleton>
</div>
{/* Table body */}
<div className="space-y-3">
<div className="flex flex-col gap-3">
{[...Array(3)].map((_, index) => (
<div
key={index}
className="flex flex-col items-center justify-between space-x-0 md:flex-row md:space-x-4"
className="flex flex-col items-center justify-between md:flex-row md:gap-4"
>
<Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-1/12">
<div className="h-12 bg-default-300"></div>
<div className="bg-default-300 h-12"></div>
</Skeleton>
<Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
<div className="h-12 bg-default-300"></div>
<div className="bg-default-300 h-12"></div>
</Skeleton>
<Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
<div className="h-12 bg-default-300"></div>
<div className="bg-default-300 h-12"></div>
</Skeleton>
<Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
<div className="h-12 bg-default-300"></div>
<div className="bg-default-300 h-12"></div>
</Skeleton>
<Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-2/12">
<div className="h-12 bg-default-300"></div>
<div className="bg-default-300 h-12"></div>
</Skeleton>
<Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
<div className="h-12 bg-default-300"></div>
<div className="bg-default-300 h-12"></div>
</Skeleton>
<Skeleton className="mb-2 hidden rounded-lg sm:flex md:mb-0 md:w-1/12">
<div className="h-12 bg-default-300"></div>
<div className="bg-default-300 h-12"></div>
</Skeleton>
</div>
))}
ui/components/providers/workflow/credentials-role-helper.tsx
+1 -1
View File
@@ -76,7 +76,7 @@ export const CredentialsRoleHelper = ({
</div>
<div className="flex items-center gap-2">
<span className="block text-xs font-medium text-default-500">
<span className="text-default-500 block text-xs font-medium">
External ID:
</span>
<SnippetChip value={externalId} icon={<IdIcon size={16} />} />
ui/components/providers/workflow/forms/base-credentials-form.tsx
+3 -3
View File
@@ -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
+2 -2
View File
@@ -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
+9 -6
View File
@@ -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
+2 -2
View File
@@ -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
+3 -3
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+3 -3
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+4 -4
View File
@@ -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
+13 -13
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+6 -6
View File
@@ -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"
ui/components/providers/workflow/provider-title-docs.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ export const ProviderTitleDocs = ({
}) => {
return (
<div className="flex flex-col gap-y-2">
<div className="flex space-x-4">
<div className="flex gap-4">
{providerType && getProviderLogo(providerType as ProviderType)}
<span className="text-lg font-semibold">
{providerType
@@ -22,7 +22,7 @@ export const ProviderTitleDocs = ({
</span>
</div>
<div className="flex items-end gap-x-2">
<p className="text-sm text-default-500">
<p className="text-default-500 text-sm">
{getProviderHelpText(providerType as string).text}
</p>
<CustomLink
ui/components/providers/workflow/skeleton-provider-workflow.tsx
+11 -10
View File
@@ -1,30 +1,31 @@
import { Card, CardBody, CardHeader, Skeleton } from "@nextui-org/react";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { Skeleton } from "@heroui/skeleton";
export const SkeletonProviderWorkflow = () => {
return (
<Card>
<CardHeader className="flex flex-col items-start space-y-2">
<CardHeader className="flex flex-col items-start gap-2">
<Skeleton className="h-6 w-2/3 rounded-lg">
<div className="h-6 bg-default-200"></div>
<div className="bg-default-200 h-6"></div>
</Skeleton>
<Skeleton className="h-4 w-1/2 rounded-lg">
<div className="h-4 bg-default-200"></div>
<div className="bg-default-200 h-4"></div>
</Skeleton>
</CardHeader>
<CardBody className="flex flex-col items-start space-y-6">
<div className="flex space-x-4">
<CardBody className="flex flex-col items-start gap-6">
<div className="flex gap-4">
<Skeleton className="h-12 w-12 rounded-lg">
<div className="h-12 w-12 bg-default-200"></div>
<div className="bg-default-200 h-12 w-12"></div>
</Skeleton>
<Skeleton className="h-12 w-12 rounded-lg">
<div className="h-12 w-12 bg-default-200"></div>
<div className="bg-default-200 h-12 w-12"></div>
</Skeleton>
</div>
<Skeleton className="h-5 w-3/4 rounded-lg">
<div className="h-5 bg-default-200"></div>
<div className="bg-default-200 h-5"></div>
</Skeleton>
<Skeleton className="h-12 w-40 self-end rounded-lg">
<div className="h-12 bg-default-200"></div>
<div className="bg-default-200 h-12"></div>
</Skeleton>
</CardBody>
</Card>
ui/components/providers/workflow/vertical-steps.tsx
+27 -27
View File
@@ -1,7 +1,7 @@
"use client";
import type { ButtonProps } from "@nextui-org/react";
import { cn } from "@nextui-org/react";
import type { ButtonProps } from "@heroui/button";
import { cn } from "@heroui/theme";
import { useControlledState } from "@react-stately/utils";
import { domAnimation, LazyMotion, m } from "framer-motion";
import type { ComponentProps } from "react";
@@ -117,38 +117,38 @@ export const VerticalSteps = React.forwardRef<
"[--active-color:var(--step-color)]",
"[--complete-background-color:var(--step-color)]",
"[--complete-border-color:var(--step-color)]",
"[--inactive-border-color:hsl(var(--nextui-default-300))]",
"[--inactive-color:hsl(var(--nextui-default-300))]",
"[--inactive-border-color:hsl(var(--heroui-default-300))]",
"[--inactive-color:hsl(var(--heroui-default-300))]",
];
switch (color) {
case "primary":
userColor = "[--step-color:hsl(var(--nextui-primary))]";
fgColor = "[--step-fg-color:hsl(var(--nextui-primary-foreground))]";
userColor = "[--step-color:hsl(var(--heroui-primary))]";
fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
break;
case "secondary":
userColor = "[--step-color:hsl(var(--nextui-secondary))]";
fgColor = "[--step-fg-color:hsl(var(--nextui-secondary-foreground))]";
userColor = "[--step-color:hsl(var(--heroui-secondary))]";
fgColor = "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]";
break;
case "success":
userColor = "[--step-color:hsl(var(--nextui-success))]";
fgColor = "[--step-fg-color:hsl(var(--nextui-success-foreground))]";
userColor = "[--step-color:hsl(var(--heroui-success))]";
fgColor = "[--step-fg-color:hsl(var(--heroui-success-foreground))]";
break;
case "warning":
userColor = "[--step-color:hsl(var(--nextui-warning))]";
fgColor = "[--step-fg-color:hsl(var(--nextui-warning-foreground))]";
userColor = "[--step-color:hsl(var(--heroui-warning))]";
fgColor = "[--step-fg-color:hsl(var(--heroui-warning-foreground))]";
break;
case "danger":
userColor = "[--step-color:hsl(var(--nextui-error))]";
fgColor = "[--step-fg-color:hsl(var(--nextui-error-foreground))]";
userColor = "[--step-color:hsl(var(--heroui-error))]";
fgColor = "[--step-fg-color:hsl(var(--heroui-error-foreground))]";
break;
case "default":
userColor = "[--step-color:hsl(var(--nextui-default))]";
fgColor = "[--step-fg-color:hsl(var(--nextui-default-foreground))]";
userColor = "[--step-color:hsl(var(--heroui-default))]";
fgColor = "[--step-fg-color:hsl(var(--heroui-default-foreground))]";
break;
default:
userColor = "[--step-color:hsl(var(--nextui-primary))]";
fgColor = "[--step-fg-color:hsl(var(--nextui-primary-foreground))]";
userColor = "[--step-color:hsl(var(--heroui-primary))]";
fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
break;
}
@@ -156,7 +156,7 @@ export const VerticalSteps = React.forwardRef<
if (!className?.includes("--step-color")) colorsVars.unshift(userColor);
if (!className?.includes("--inactive-bar-color"))
colorsVars.push(
"[--inactive-bar-color:hsl(var(--nextui-default-300))]",
"[--inactive-bar-color:hsl(var(--heroui-default-300))]",
);
return colorsVars;
@@ -181,7 +181,7 @@ export const VerticalSteps = React.forwardRef<
ref={ref}
aria-current={status === "active" ? "step" : undefined}
className={cn(
"group flex w-full cursor-pointer items-center justify-center gap-4 rounded-large px-3 py-2.5",
"group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5",
stepClassName,
)}
onClick={() => setCurrentStep(stepIdx)}
@@ -193,7 +193,7 @@ export const VerticalSteps = React.forwardRef<
<m.div
animate={status}
className={cn(
"relative flex h-[34px] w-[34px] items-center justify-center rounded-full border-medium text-large font-semibold text-default-foreground",
"border-medium text-large text-default-foreground relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold",
{
"shadow-lg": status === "complete",
},
@@ -221,7 +221,7 @@ export const VerticalSteps = React.forwardRef<
>
<div className="flex items-center justify-center">
{status === "complete" ? (
<CheckIcon className="h-6 w-6 text-[var(--active-fg-color)]" />
<CheckIcon className="h-6 w-6 text-(--active-fg-color)" />
) : (
<span>{stepIdx + 1}</span>
)}
@@ -234,7 +234,7 @@ export const VerticalSteps = React.forwardRef<
<div>
<div
className={cn(
"text-medium font-medium text-default-foreground transition-[color,opacity] duration-300 group-active:opacity-70",
"text-medium text-default-foreground font-medium transition-[color,opacity] duration-300 group-active:opacity-70",
{
"text-default-500": status === "inactive",
},
@@ -244,7 +244,7 @@ export const VerticalSteps = React.forwardRef<
</div>
<div
className={cn(
"text-tiny text-default-600 transition-[color,opacity] duration-300 group-active:opacity-70 lg:text-small",
"text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70",
{
"text-default-500": status === "inactive",
},
@@ -260,7 +260,7 @@ export const VerticalSteps = React.forwardRef<
<div
aria-hidden="true"
className={cn(
"pointer-events-none absolute left-3 top-[calc(64px_*_var(--idx)_+_1)] flex h-1/2 -translate-y-1/3 items-center px-4",
"pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4",
)}
style={{
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -270,8 +270,8 @@ export const VerticalSteps = React.forwardRef<
>
<div
className={cn(
"relative h-full w-0.5 bg-[var(--inactive-bar-color)] transition-colors duration-300",
"after:absolute after:block after:h-0 after:w-full after:bg-[var(--active-border-color)] after:transition-[height] after:duration-300 after:content-['']",
"relative h-full w-0.5 bg-(--inactive-bar-color) transition-colors duration-300",
"after:absolute after:block after:h-0 after:w-full after:bg-(--active-border-color) after:transition-[height] after:duration-300 after:content-['']",
{
"after:h-full": stepIdx < currentStep,
},
ui/components/providers/workflow/workflow-add-provider.tsx
+3 -2
View File
@@ -1,6 +1,7 @@
"use client";
import { Progress, Spacer } from "@nextui-org/react";
import { Progress } from "@heroui/progress";
import { Spacer } from "@heroui/spacer";
import { usePathname } from "next/navigation";
import React from "react";
@@ -65,7 +66,7 @@ export const WorkflowAddProvider = () => {
<h1 className="mb-2 text-xl font-medium" id="getting-started">
Add a Cloud Provider
</h1>
<p className="mb-5 text-small text-default-500">
<p className="text-small text-default-500 mb-5">
Complete these steps to configure your cloud provider and initiate your
first scan.
</p>