awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 02:27:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: change actions to elipses dropdown

Browse Source
This commit is contained in:
Alfonso Hernandez
2024-07-18 16:23:09 +02:00
parent 997d7f22fc
commit bcb657b81e
1 changed files with 51 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx
+51 -35
View File
@@ -1,6 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import { faCheckCircle, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons"; import { faCheckCircle, faEllipsis } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { ProjectPermissionCan } from "@app/components/permissions"; import { ProjectPermissionCan } from "@app/components/permissions";
import { import {
@@ -9,7 +10,6 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuTrigger, DropdownMenuTrigger,
IconButton,
Input, Input,
Td, Td,
Tr Tr
@@ -145,39 +145,55 @@ export const ApprovalPolicyRow = ({
</Badge> </Badge>
</Td> </Td>
<Td> <Td>
<div className="flex items-center justify-end space-x-4"> <DropdownMenu>
<ProjectPermissionCan <DropdownMenuTrigger asChild className="rounded-lg cursor-pointer">
I={ProjectPermissionActions.Edit} <div className="flex justify-center items-center hover:text-primary-400 data-[state=open]:text-primary-400 hover:scale-125 data-[state=open]:scale-125 transition-transform duration-300 ease-in-out">
a={ProjectPermissionSub.SecretApproval} <FontAwesomeIcon size="sm" icon={faEllipsis} />
renderTooltip </div>
allowedLabel="Edit" </DropdownMenuTrigger>
> <DropdownMenuContent align="center" className="p-1 min-w-[100%]">
{(isAllowed) => ( <ProjectPermissionCan
<IconButton variant="plain" ariaLabel="edit" onClick={onEdit} isDisabled={!isAllowed}> I={ProjectPermissionActions.Edit}
<FontAwesomeIcon icon={faPencil} size="lg" /> a={ProjectPermissionSub.SecretApproval}
</IconButton> >
)} {(isAllowed) => (
</ProjectPermissionCan> <DropdownMenuItem
<ProjectPermissionCan className={twMerge(
I={ProjectPermissionActions.Delete} !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
a={ProjectPermissionSub.SecretApproval} )}
renderTooltip onClick={(e) => {
allowedLabel="Delete" e.stopPropagation();
> onEdit();
{(isAllowed) => ( }}
<IconButton disabled={!isAllowed}
variant="plain" >
colorSchema="danger" Edit Policy
size="lg" </DropdownMenuItem>
ariaLabel="edit" )}
onClick={onDelete} </ProjectPermissionCan>
isDisabled={!isAllowed} <ProjectPermissionCan
> I={ProjectPermissionActions.Delete}
<FontAwesomeIcon icon={faTrash} /> a={ProjectPermissionSub.SecretApproval}
</IconButton> >
)} {(isAllowed) => (
</ProjectPermissionCan> <DropdownMenuItem
</div> className={twMerge(
isAllowed
? "hover:!bg-red-500 hover:!text-white"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={(e) => {
e.stopPropagation();
onDelete();
}}
disabled={!isAllowed}
>
Delete Policy
</DropdownMenuItem>
)}
</ProjectPermissionCan>
</DropdownMenuContent>
</DropdownMenu>
</Td> </Td>
</Tr> </Tr>
); );