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

fix(ui): replace HeroUI dropdowns with Radix ActionDropdown to fix overlay conflict (#9996)

Browse Source
This commit is contained in:
Alejandro Bailo
2026-02-10 10:28:03 +01:00
committed by GitHub
parent dd730eec94
commit 71220b2696
13 changed files with 257 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/components/users/profile/api-keys/data-table-row-actions.tsx
+26 -58
View File
@@ -1,21 +1,15 @@
"use client";
import {
Dropdown,
DropdownItem,
DropdownMenu,
DropdownSection,
DropdownTrigger,
} from "@heroui/dropdown";
import {
DeleteDocumentBulkIcon,
EditDocumentBulkIcon,
} from "@heroui/shared-icons";
import { Row } from "@tanstack/react-table";
import clsx from "clsx";
import { Pencil, Trash2 } from "lucide-react";
import { VerticalDotsIcon } from "@/components/icons";
import { Button } from "@/components/shadcn";
import {
ActionDropdown,
ActionDropdownDangerZone,
ActionDropdownItem,
} from "@/components/shadcn/dropdown";
import { EnrichedApiKey } from "./types";
@@ -25,8 +19,6 @@ interface DataTableRowActionsProps {
onRevoke: (apiKey: EnrichedApiKey) => void;
}
const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
export function DataTableRowActions({
row,
onEdit,
@@ -39,53 +31,29 @@ export function DataTableRowActions({
return (
<div className="relative flex items-center justify-end gap-2">
<Dropdown
className="border-border-neutral-secondary bg-bg-neutral-secondary border shadow-xl"
placement="bottom"
>
<DropdownTrigger>
<ActionDropdown
trigger={
<Button variant="ghost" size="icon-sm" className="rounded-full">
<VerticalDotsIcon className="text-slate-400" />
</Button>
</DropdownTrigger>
<DropdownMenu
closeOnSelect
aria-label="API Key actions"
color="default"
variant="flat"
>
<DropdownSection title="Actions">
<DropdownItem
key="edit"
description="Edit the API key name"
textValue="Edit name"
startContent={<EditDocumentBulkIcon className={iconClasses} />}
onPress={() => onEdit(apiKey)}
>
Edit name
</DropdownItem>
</DropdownSection>
{canRevoke ? (
<DropdownSection title="Danger zone">
<DropdownItem
key="revoke"
className="text-text-error"
color="danger"
description="Revoke this API key permanently"
textValue="Revoke"
startContent={
<DeleteDocumentBulkIcon
className={clsx(iconClasses, "!text-text-error")}
/>
}
onPress={() => onRevoke(apiKey)}
>
Revoke
</DropdownItem>
</DropdownSection>
) : null}
</DropdownMenu>
</Dropdown>
}
>
<ActionDropdownItem
icon={<Pencil />}
label="Edit API Key"
onSelect={() => onEdit(apiKey)}
/>
{canRevoke && (
<ActionDropdownDangerZone>
<ActionDropdownItem
icon={<Trash2 />}
label="Revoke API Key"
destructive
onSelect={() => onRevoke(apiKey)}
/>
</ActionDropdownDangerZone>
)}
</ActionDropdown>
</div>
);
}
ui/components/users/table/data-table-row-actions.tsx
+24 -55
View File
@@ -1,22 +1,16 @@
"use client";
import {
Dropdown,
DropdownItem,
DropdownMenu,
DropdownSection,
DropdownTrigger,
} from "@heroui/dropdown";
import {
DeleteDocumentBulkIcon,
EditDocumentBulkIcon,
} from "@heroui/shared-icons";
import { Row } from "@tanstack/react-table";
import clsx from "clsx";
import { Pencil, Trash2 } from "lucide-react";
import { useState } from "react";
import { VerticalDotsIcon } from "@/components/icons";
import { Button } from "@/components/shadcn";
import {
ActionDropdown,
ActionDropdownDangerZone,
ActionDropdownItem,
} from "@/components/shadcn/dropdown";
import { Modal } from "@/components/shadcn/modal";
import { DeleteForm, EditForm } from "../forms";
@@ -25,7 +19,6 @@ interface DataTableRowActionsProps<UserProps> {
row: Row<UserProps>;
roles?: { id: string; name: string }[];
}
const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
export function DataTableRowActions<UserProps>({
row,
@@ -66,51 +59,27 @@ export function DataTableRowActions<UserProps>({
</Modal>
<div className="relative flex items-center justify-end gap-2">
<Dropdown
className="border-border-neutral-secondary bg-bg-neutral-secondary border shadow-xl"
placement="bottom"
>
<DropdownTrigger>
<ActionDropdown
trigger={
<Button variant="ghost" size="icon-sm" className="rounded-full">
<VerticalDotsIcon className="text-slate-400" />
</Button>
</DropdownTrigger>
<DropdownMenu
closeOnSelect
aria-label="Actions"
color="default"
variant="flat"
>
<DropdownSection title="Actions">
<DropdownItem
key="edit"
description="Allows you to edit the user"
textValue="Edit User"
startContent={<EditDocumentBulkIcon className={iconClasses} />}
onPress={() => setIsEditOpen(true)}
>
Edit User
</DropdownItem>
</DropdownSection>
<DropdownSection title="Danger zone">
<DropdownItem
key="delete"
className="text-text-error"
color="danger"
description="Delete the user permanently"
textValue="Delete User"
startContent={
<DeleteDocumentBulkIcon
className={clsx(iconClasses, "!text-text-error")}
/>
}
onPress={() => setIsDeleteOpen(true)}
>
Delete User
</DropdownItem>
</DropdownSection>
</DropdownMenu>
</Dropdown>
}
>
<ActionDropdownItem
icon={<Pencil />}
label="Edit User"
onSelect={() => setIsEditOpen(true)}
/>
<ActionDropdownDangerZone>
<ActionDropdownItem
icon={<Trash2 />}
label="Delete User"
destructive
onSelect={() => setIsDeleteOpen(true)}
/>
</ActionDropdownDangerZone>
</ActionDropdown>
</div>
</>
);