mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-10-09 21:14:22 +00:00
feat(ui): migrate from HeroUI to shadcn/ui (#11532)
This commit is contained in:
Alejandro Bailo
@@ -72,7 +72,8 @@ vi.mock("@/components/shadcn/select/enhanced-multi-select", () => ({
|
||||
EnhancedMultiSelect: () => <div data-testid="group-select" />,
|
||||
}));
|
||||
|
||||
vi.mock("@/components/ui", () => ({
|
||||
vi.mock("@/components/shadcn", async (importOriginal) => ({
|
||||
...(await importOriginal<Record<string, unknown>>()),
|
||||
useToast: () => ({ toast: vi.fn() }),
|
||||
}));
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
|
||||
import { DefaultValues } from "react-hook-form";
|
||||
|
||||
import { addRole } from "@/actions/roles/roles";
|
||||
import { useToast } from "@/components/ui";
|
||||
import { useToast } from "@/components/shadcn";
|
||||
import { getErrorMessage } from "@/lib";
|
||||
import { RoleFormValues } from "@/types";
|
||||
|
||||
|
||||
@@ -8,8 +8,8 @@ import * as z from "zod";
|
||||
import { deleteRole } from "@/actions/roles";
|
||||
import { DeleteIcon } from "@/components/icons";
|
||||
import { Button } from "@/components/shadcn";
|
||||
import { useToast } from "@/components/ui";
|
||||
import { Form } from "@/components/ui/form";
|
||||
import { useToast } from "@/components/shadcn";
|
||||
import { Form } from "@/components/shadcn/form";
|
||||
|
||||
const formSchema = z.object({
|
||||
roleId: z.string(),
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
|
||||
import { DefaultValues } from "react-hook-form";
|
||||
|
||||
import { updateRole } from "@/actions/roles/roles";
|
||||
import { useToast } from "@/components/ui";
|
||||
import { useToast } from "@/components/shadcn";
|
||||
import { getErrorMessage } from "@/lib";
|
||||
import { RoleFormValues } from "@/types";
|
||||
|
||||
|
||||
@@ -8,17 +8,10 @@ import {
|
||||
DefaultValues,
|
||||
useForm,
|
||||
UseFormReturn,
|
||||
useWatch,
|
||||
} from "react-hook-form";
|
||||
|
||||
import { Checkbox } from "@/components/shadcn/checkbox/checkbox";
|
||||
import { Input } from "@/components/shadcn/input/input";
|
||||
import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
|
||||
import { Separator } from "@/components/shadcn/separator/separator";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/shadcn/tooltip";
|
||||
import {
|
||||
Form,
|
||||
FormButtons,
|
||||
@@ -27,7 +20,15 @@ import {
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
} from "@/components/shadcn/form";
|
||||
import { Input } from "@/components/shadcn/input/input";
|
||||
import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
|
||||
import { Separator } from "@/components/shadcn/separator/separator";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/shadcn/tooltip";
|
||||
import { useFormServerErrors } from "@/hooks/use-form-server-errors";
|
||||
import { useManageProvidersUnlimitedVisibility } from "@/hooks/use-manage-providers-unlimited-visibility";
|
||||
import {
|
||||
@@ -84,7 +85,10 @@ export const RoleForm = ({
|
||||
"/data/attributes/name": "name",
|
||||
});
|
||||
|
||||
const unlimitedVisibility = !!form.watch("unlimited_visibility");
|
||||
// useWatch instead of form.watch: React Compiler can keep memoized JSX stale
|
||||
// when getter reads happen during render.
|
||||
const formValues = useWatch({ control: form.control });
|
||||
const unlimitedVisibility = !!formValues.unlimited_visibility;
|
||||
const isLoading = form.formState.isSubmitting;
|
||||
|
||||
const onSelectAllChange = (checked: boolean) => {
|
||||
@@ -132,7 +136,7 @@ export const RoleForm = ({
|
||||
id="select-all"
|
||||
size="sm"
|
||||
checked={visiblePermissionFormFields.every((perm) =>
|
||||
form.watch(perm.field as keyof RoleFormValues),
|
||||
Boolean(formValues[perm.field as keyof RoleFormValues]),
|
||||
)}
|
||||
onCheckedChange={(checked) => onSelectAllChange(Boolean(checked))}
|
||||
/>
|
||||
@@ -149,7 +153,7 @@ export const RoleForm = ({
|
||||
<Checkbox
|
||||
id={field}
|
||||
size="sm"
|
||||
checked={!!form.watch(field as keyof RoleFormValues)}
|
||||
checked={!!formValues[field as keyof RoleFormValues]}
|
||||
onCheckedChange={(checked) =>
|
||||
setPermissionValue(field, Boolean(checked))
|
||||
}
|
||||
|
||||
@@ -1,33 +1,17 @@
|
||||
import { Card } from "@heroui/card";
|
||||
import { Skeleton } from "@heroui/skeleton";
|
||||
import React from "react";
|
||||
import { Card, Skeleton } from "@/components/shadcn";
|
||||
|
||||
export const SkeletonRoleForm = () => {
|
||||
return (
|
||||
<Card className="flex h-full w-full flex-col gap-5 p-4" radius="sm">
|
||||
<Card className="flex h-full w-full flex-col gap-5 rounded-lg p-4">
|
||||
{/* Table headers */}
|
||||
<div className="hidden justify-between md:flex">
|
||||
<Skeleton className="w-1/12 rounded-lg">
|
||||
<div className="bg-default-200 h-8"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="w-2/12 rounded-lg">
|
||||
<div className="bg-default-200 h-8"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="w-2/12 rounded-lg">
|
||||
<div className="bg-default-200 h-8"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="w-2/12 rounded-lg">
|
||||
<div className="bg-default-200 h-8"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="w-2/12 rounded-lg">
|
||||
<div className="bg-default-200 h-8"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="w-1/12 rounded-lg">
|
||||
<div className="bg-default-200 h-8"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="w-1/12 rounded-lg">
|
||||
<div className="bg-default-200 h-8"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="h-8 w-1/12 rounded-lg" />
|
||||
<Skeleton className="h-8 w-2/12 rounded-lg" />
|
||||
<Skeleton className="h-8 w-2/12 rounded-lg" />
|
||||
<Skeleton className="h-8 w-2/12 rounded-lg" />
|
||||
<Skeleton className="h-8 w-2/12 rounded-lg" />
|
||||
<Skeleton className="h-8 w-1/12 rounded-lg" />
|
||||
<Skeleton className="h-8 w-1/12 rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Table body */}
|
||||
@@ -37,27 +21,13 @@ export const SkeletonRoleForm = () => {
|
||||
key={index}
|
||||
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="bg-default-300 h-12"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="mb-2 w-full rounded-lg md:mb-0 md:w-2/12">
|
||||
<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="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="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="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="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="bg-default-300 h-12"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="mb-2 h-12 w-full rounded-lg md:mb-0 md:w-1/12" />
|
||||
<Skeleton className="mb-2 h-12 w-full rounded-lg md:mb-0 md:w-2/12" />
|
||||
<Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-2/12" />
|
||||
<Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-2/12" />
|
||||
<Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-2/12" />
|
||||
<Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-1/12" />
|
||||
<Skeleton className="mb-2 hidden h-12 rounded-lg sm:flex md:mb-0 md:w-1/12" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@heroui/theme";
|
||||
import { useControlledState } from "@react-stately/utils";
|
||||
import { domAnimation, LazyMotion, m } from "framer-motion";
|
||||
import type { ComponentProps } from "react";
|
||||
import React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type VerticalStepProps = {
|
||||
className?: string;
|
||||
description?: React.ReactNode;
|
||||
@@ -122,38 +123,37 @@ 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(--heroui-default-300))]",
|
||||
"[--inactive-color:hsl(var(--heroui-default-300))]",
|
||||
"[--inactive-border-color:var(--border-neutral-tertiary)]",
|
||||
"[--inactive-color:var(--border-neutral-tertiary)]",
|
||||
];
|
||||
|
||||
switch (color) {
|
||||
case "primary":
|
||||
userColor = "[--step-color:hsl(var(--heroui-primary))]";
|
||||
fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
|
||||
break;
|
||||
case "secondary":
|
||||
userColor = "[--step-color:hsl(var(--heroui-secondary))]";
|
||||
fgColor = "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]";
|
||||
userColor =
|
||||
"[--step-color:var(--color-violet-600)] dark:[--step-color:var(--color-violet-400)]";
|
||||
fgColor = "[--step-fg-color:var(--color-white)]";
|
||||
break;
|
||||
case "success":
|
||||
userColor = "[--step-color:hsl(var(--heroui-success))]";
|
||||
fgColor = "[--step-fg-color:hsl(var(--heroui-success-foreground))]";
|
||||
userColor = "[--step-color:var(--bg-pass-primary)]";
|
||||
fgColor = "[--step-fg-color:var(--color-black)]";
|
||||
break;
|
||||
case "warning":
|
||||
userColor = "[--step-color:hsl(var(--heroui-warning))]";
|
||||
fgColor = "[--step-fg-color:hsl(var(--heroui-warning-foreground))]";
|
||||
userColor = "[--step-color:var(--bg-warning-primary)]";
|
||||
fgColor = "[--step-fg-color:var(--color-black)]";
|
||||
break;
|
||||
case "danger":
|
||||
userColor = "[--step-color:hsl(var(--heroui-error))]";
|
||||
fgColor = "[--step-fg-color:hsl(var(--heroui-error-foreground))]";
|
||||
userColor = "[--step-color:var(--bg-fail-primary)]";
|
||||
fgColor = "[--step-fg-color:var(--color-white)]";
|
||||
break;
|
||||
case "default":
|
||||
userColor = "[--step-color:hsl(var(--heroui-default))]";
|
||||
fgColor = "[--step-fg-color:hsl(var(--heroui-default-foreground))]";
|
||||
userColor =
|
||||
"[--step-color:var(--color-zinc-300)] dark:[--step-color:var(--color-zinc-600)]";
|
||||
fgColor = "[--step-fg-color:var(--text-neutral-primary)]";
|
||||
break;
|
||||
case "primary":
|
||||
default:
|
||||
userColor = "[--step-color:hsl(var(--heroui-primary))]";
|
||||
fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
|
||||
userColor = "[--step-color:var(--bg-button-primary)]";
|
||||
fgColor = "[--step-fg-color:var(--color-black)]";
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -161,7 +161,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(--heroui-default-300))]",
|
||||
"[--inactive-bar-color:var(--border-neutral-tertiary)]",
|
||||
);
|
||||
|
||||
return colorsVars;
|
||||
@@ -186,7 +186,7 @@ export const VerticalSteps = React.forwardRef<
|
||||
ref={ref}
|
||||
aria-current={status === "active" ? "step" : undefined}
|
||||
className={cn(
|
||||
"group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5",
|
||||
"group flex w-full cursor-pointer items-center justify-center gap-4 rounded-[14px] px-3 py-2.5",
|
||||
stepClassName,
|
||||
)}
|
||||
onClick={() => setCurrentStep(stepIdx)}
|
||||
@@ -197,12 +197,9 @@ export const VerticalSteps = React.forwardRef<
|
||||
<div className="relative">
|
||||
<m.div
|
||||
animate={status}
|
||||
className={cn(
|
||||
"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",
|
||||
},
|
||||
)}
|
||||
className={`text-text-neutral-primary relative flex h-[34px] w-[34px] items-center justify-center rounded-full border-2 text-lg font-semibold ${
|
||||
status === "complete" ? "shadow-lg" : ""
|
||||
}`}
|
||||
data-status={status}
|
||||
initial={false}
|
||||
transition={{ duration: 0.25 }}
|
||||
@@ -238,22 +235,20 @@ export const VerticalSteps = React.forwardRef<
|
||||
<div className="flex-1 text-left">
|
||||
<div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-medium text-default-foreground font-medium transition-[color,opacity] duration-300 group-active:opacity-70",
|
||||
{
|
||||
"text-default-500": status === "inactive",
|
||||
},
|
||||
)}
|
||||
className={`text-base font-medium transition-[color,opacity] duration-300 group-active:opacity-70 ${
|
||||
status === "inactive"
|
||||
? "text-text-neutral-tertiary"
|
||||
: "text-text-neutral-primary"
|
||||
}`}
|
||||
>
|
||||
{step.title}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70",
|
||||
{
|
||||
"text-default-500": status === "inactive",
|
||||
},
|
||||
)}
|
||||
className={`text-xs transition-[color,opacity] duration-300 group-active:opacity-70 lg:text-sm ${
|
||||
status === "inactive"
|
||||
? "text-text-neutral-tertiary"
|
||||
: "text-text-neutral-secondary"
|
||||
}`}
|
||||
>
|
||||
{step.description}
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { Progress } from "@heroui/progress";
|
||||
import { Spacer } from "@heroui/spacer";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React from "react";
|
||||
|
||||
import { Progress } from "@/components/shadcn/progress";
|
||||
|
||||
import { VerticalSteps } from "./vertical-steps";
|
||||
|
||||
const steps = [
|
||||
@@ -35,31 +35,29 @@ export const WorkflowAddEditRole = () => {
|
||||
<h1 className="mb-2 text-xl font-medium" id="getting-started">
|
||||
Manage Role Permissions
|
||||
</h1>
|
||||
<p className="text-small text-default-500 mb-5">
|
||||
<p className="text-text-neutral-tertiary mb-5 text-sm">
|
||||
Define a new role with customized permissions or modify an existing one
|
||||
to meet your needs.
|
||||
</p>
|
||||
<Progress
|
||||
classNames={{
|
||||
base: "px-0.5 mb-5",
|
||||
label: "text-small",
|
||||
value: "text-small text-default-400",
|
||||
}}
|
||||
label="Steps"
|
||||
maxValue={steps.length - 1}
|
||||
minValue={0}
|
||||
showValueLabel={true}
|
||||
size="md"
|
||||
value={currentStep}
|
||||
valueLabel={`${currentStep + 1} of ${steps.length}`}
|
||||
/>
|
||||
<div className="mb-5 flex flex-col gap-2 px-0.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Steps</span>
|
||||
<span className="text-text-neutral-tertiary text-sm">
|
||||
{`${currentStep + 1} of ${steps.length}`}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
aria-label="Steps"
|
||||
value={(currentStep / (steps.length - 1)) * 100}
|
||||
/>
|
||||
</div>
|
||||
<VerticalSteps
|
||||
hideProgressBars
|
||||
currentStep={currentStep}
|
||||
stepClassName="border border-border-neutral-primary aria-[current]:border-button-primary aria-[current]:text-text-neutral-primary cursor-default"
|
||||
steps={steps}
|
||||
/>
|
||||
<Spacer y={4} />
|
||||
<div className="h-4" />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user