mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-10-09 21:14:22 +00:00
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>
This commit is contained in:
Alan Buscaglia
co-authored by
Alan Buscaglia
alejandrobailo
César Arroba
Alejandro Bailo
Alan Buscaglia
alejandrobailo
César Arroba
Alejandro Bailo
parent
2a4b62527a
commit
4d5676f00e
@@ -1,7 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { Checkbox } from "@heroui/checkbox";
|
||||
import { Divider } from "@heroui/divider";
|
||||
import { Tooltip } from "@heroui/tooltip";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Checkbox, Divider, Tooltip } from "@nextui-org/react";
|
||||
import clsx from "clsx";
|
||||
import { InfoIcon, SaveIcon } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -149,7 +151,7 @@ export const AddRoleForm = ({
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmitClient)}
|
||||
className="flex flex-col space-y-6"
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<CustomInput
|
||||
control={form.control}
|
||||
@@ -163,7 +165,7 @@ export const AddRoleForm = ({
|
||||
isInvalid={!!form.formState.errors.name}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">Admin Permissions</span>
|
||||
|
||||
{/* Select All Checkbox */}
|
||||
@@ -204,7 +206,7 @@ export const AddRoleForm = ({
|
||||
<div className="flex w-fit items-center justify-center">
|
||||
<InfoIcon
|
||||
className={clsx(
|
||||
"cursor-pointer text-default-400 group-data-[selected=true]:text-foreground",
|
||||
"text-default-400 group-data-[selected=true]:text-foreground cursor-pointer",
|
||||
)}
|
||||
aria-hidden={"true"}
|
||||
width={16}
|
||||
@@ -218,12 +220,12 @@ export const AddRoleForm = ({
|
||||
<Divider className="my-4" />
|
||||
|
||||
{!unlimitedVisibility && (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">
|
||||
Groups and Account Visibility
|
||||
</span>
|
||||
|
||||
<p className="text-small font-medium text-default-700">
|
||||
<p className="text-small text-default-700 font-medium">
|
||||
Select the groups this role will have access to. If no groups are
|
||||
selected and unlimited visibility is not enabled, the role will
|
||||
not have access to any accounts.
|
||||
@@ -251,7 +253,7 @@ export const AddRoleForm = ({
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex w-full justify-end sm:space-x-6">
|
||||
<div className="flex w-full justify-end sm:gap-6">
|
||||
<CustomButton
|
||||
type="submit"
|
||||
ariaLabel="Add Role"
|
||||
|
||||
@@ -54,7 +54,7 @@ export const DeleteRoleForm = ({
|
||||
<Form {...form}>
|
||||
<form action={onSubmitClient}>
|
||||
<input type="hidden" name="id" value={roleId} />
|
||||
<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"
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { Checkbox } from "@heroui/checkbox";
|
||||
import { Divider } from "@heroui/divider";
|
||||
import { Tooltip } from "@heroui/tooltip";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Checkbox, Divider, Tooltip } from "@nextui-org/react";
|
||||
import { clsx } from "clsx";
|
||||
import { InfoIcon, SaveIcon } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -169,7 +171,7 @@ export const EditRoleForm = ({
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmitClient)}
|
||||
className="flex flex-col space-y-6"
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<CustomInput
|
||||
control={form.control}
|
||||
@@ -183,7 +185,7 @@ export const EditRoleForm = ({
|
||||
isInvalid={!!form.formState.errors.name}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">Admin Permissions</span>
|
||||
|
||||
{/* Select All Checkbox */}
|
||||
@@ -224,7 +226,7 @@ export const EditRoleForm = ({
|
||||
<div className="flex w-fit items-center justify-center">
|
||||
<InfoIcon
|
||||
className={clsx(
|
||||
"cursor-pointer text-default-400 group-data-[selected=true]:text-foreground",
|
||||
"text-default-400 group-data-[selected=true]:text-foreground cursor-pointer",
|
||||
)}
|
||||
aria-hidden={"true"}
|
||||
width={16}
|
||||
@@ -238,10 +240,10 @@ export const EditRoleForm = ({
|
||||
<Divider className="my-4" />
|
||||
|
||||
{!unlimitedVisibility && (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">Groups visibility</span>
|
||||
|
||||
<p className="text-small font-medium text-default-700">
|
||||
<p className="text-small text-default-700 font-medium">
|
||||
Select the groups this role will have access to. If no groups are
|
||||
selected and unlimited visibility is not enabled, the role will
|
||||
not have access to any accounts.
|
||||
@@ -270,7 +272,7 @@ export const EditRoleForm = ({
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex w-full justify-end sm:space-x-6">
|
||||
<div className="flex w-full justify-end sm:gap-6">
|
||||
<CustomButton
|
||||
type="submit"
|
||||
ariaLabel="Update Role"
|
||||
|
||||
@@ -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 SkeletonRoleForm = () => {
|
||||
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>
|
||||
))}
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -34,7 +35,7 @@ export const WorkflowAddEditRole = () => {
|
||||
<h1 className="mb-2 text-xl font-medium" id="getting-started">
|
||||
Manage Role Permissions
|
||||
</h1>
|
||||
<p className="mb-5 text-small text-default-500">
|
||||
<p className="text-small text-default-500 mb-5">
|
||||
Define a new role with customized permissions or modify an existing one
|
||||
to meet your needs.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user