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

Fix: Improve user experience for machine identities

Browse Source
This commit is contained in:
Daniel Hougaard
2024-04-22 22:00:37 +02:00
parent 6874bff302
commit a85c59e3e2
1 changed files with 82 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
+82 -50
View File
@@ -1,9 +1,22 @@
import { faKey, faLock, faPencil, faServer, faXmark } from "@fortawesome/free-solid-svg-icons"; import {
faCopy,
faEllipsis,
faKey,
faLock,
faPencil,
faServer,
faXmark
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions"; import { OrgPermissionCan } from "@app/components/permissions";
import { import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
EmptyState, EmptyState,
IconButton, IconButton,
Select, Select,
@@ -44,7 +57,6 @@ type Props = {
}; };
export const IdentityTable = ({ handlePopUpOpen }: Props) => { export const IdentityTable = ({ handlePopUpOpen }: Props) => {
const { currentOrg } = useOrganization(); const { currentOrg } = useOrganization();
const orgId = currentOrg?.id || ""; const orgId = currentOrg?.id || "";
@@ -83,7 +95,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
<THead> <THead>
<Tr> <Tr>
<Th>Name</Th> <Th>Name</Th>
<Th>ID</Th>
<Th>Role</Th> <Th>Role</Th>
<Th>Auth Method</Th> <Th>Auth Method</Th>
<Th className="w-5" /> <Th className="w-5" />
@@ -98,7 +109,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
return ( return (
<Tr className="h-10" key={`identity-${id}`}> <Tr className="h-10" key={`identity-${id}`}>
<Td>{name}</Td> <Td>{name}</Td>
<Td>{id}</Td>
<Td> <Td>
<OrgPermissionCan <OrgPermissionCan
I={OrgPermissionActions.Edit} I={OrgPermissionActions.Edit}
@@ -130,7 +140,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
</Td> </Td>
<Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td> <Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
<Td> <Td>
<div className="flex items-center justify-end"> <div className="flex items-center justify-end space-x-4">
{authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && ( {authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
<Tooltip content="Manage client ID/secrets"> <Tooltip content="Manage client ID/secrets">
<IconButton <IconButton
@@ -144,7 +154,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
colorSchema="primary" colorSchema="primary"
variant="plain" variant="plain"
ariaLabel="update" ariaLabel="update"
// isDisabled={!isAllowed}
> >
<FontAwesomeIcon icon={faKey} /> <FontAwesomeIcon icon={faKey} />
</IconButton> </IconButton>
@@ -168,7 +177,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
colorSchema="primary" colorSchema="primary"
variant="plain" variant="plain"
ariaLabel="update" ariaLabel="update"
className="ml-4"
isDisabled={!isAllowed} isDisabled={!isAllowed}
> >
<FontAwesomeIcon icon={faLock} /> <FontAwesomeIcon icon={faLock} />
@@ -176,54 +184,78 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
</Tooltip> </Tooltip>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
<OrgPermissionCan <DropdownMenu>
I={OrgPermissionActions.Edit} <Tooltip asChild content="More options">
a={OrgPermissionSubjects.Identity} <DropdownMenuTrigger asChild className="rounded-lg">
> <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
{(isAllowed) => ( <FontAwesomeIcon size="lg" icon={faEllipsis} />
<IconButton </div>
onClick={async () => { </DropdownMenuTrigger>
handlePopUpOpen("identity", { </Tooltip>
identityId: id, <DropdownMenuContent align="start" className="p-1">
name, <OrgPermissionCan
role, I={OrgPermissionActions.Edit}
customRole a={OrgPermissionSubjects.Identity}
});
}}
size="lg"
colorSchema="primary"
variant="plain"
ariaLabel="update"
className="ml-4"
isDisabled={!isAllowed}
> >
<FontAwesomeIcon icon={faPencil} /> {(isAllowed) => (
</IconButton> <DropdownMenuItem
)} className={twMerge(
</OrgPermissionCan> !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
<OrgPermissionCan )}
I={OrgPermissionActions.Delete} onClick={async () => {
a={OrgPermissionSubjects.Identity} if (!isAllowed) return;
> handlePopUpOpen("identity", {
{(isAllowed) => ( identityId: id,
<IconButton name,
role,
customRole
});
}}
disabled={!isAllowed}
icon={<FontAwesomeIcon icon={faPencil} />}
>
Update identity
</DropdownMenuItem>
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Delete}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
isAllowed
? "hover:!bg-red-500 hover:!text-white"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={() => {
if (!isAllowed) return;
handlePopUpOpen("deleteIdentity", {
identityId: id,
name
});
}}
icon={<FontAwesomeIcon icon={faXmark} />}
>
Delete identity
</DropdownMenuItem>
)}
</OrgPermissionCan>
<DropdownMenuItem
onClick={() => { onClick={() => {
handlePopUpOpen("deleteIdentity", { navigator.clipboard.writeText(id);
identityId: id, createNotification({
name text: "Copied identity internal ID to clipboard",
type: "success"
}); });
}} }}
size="lg" icon={<FontAwesomeIcon icon={faCopy} />}
colorSchema="danger"
variant="plain"
ariaLabel="update"
className="ml-4"
isDisabled={!isAllowed}
> >
<FontAwesomeIcon icon={faXmark} /> Copy internal ID
</IconButton> </DropdownMenuItem>
)} </DropdownMenuContent>
</OrgPermissionCan> </DropdownMenu>
</div> </div>
</Td> </Td>
</Tr> </Tr>