awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 18:28:12 +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
+57 -25
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,13 +184,26 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
</Tooltip> </Tooltip>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
<DropdownMenu>
<Tooltip asChild content="More options">
<DropdownMenuTrigger asChild className="rounded-lg">
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
<FontAwesomeIcon size="lg" icon={faEllipsis} />
</div>
</DropdownMenuTrigger>
</Tooltip>
<DropdownMenuContent align="start" className="p-1">
<OrgPermissionCan <OrgPermissionCan
I={OrgPermissionActions.Edit} I={OrgPermissionActions.Edit}
a={OrgPermissionSubjects.Identity} a={OrgPermissionSubjects.Identity}
> >
{(isAllowed) => ( {(isAllowed) => (
<IconButton <DropdownMenuItem
className={twMerge(
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={async () => { onClick={async () => {
if (!isAllowed) return;
handlePopUpOpen("identity", { handlePopUpOpen("identity", {
identityId: id, identityId: id,
name, name,
@@ -190,15 +211,11 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
customRole customRole
}); });
}} }}
size="lg" disabled={!isAllowed}
colorSchema="primary" icon={<FontAwesomeIcon icon={faPencil} />}
variant="plain"
ariaLabel="update"
className="ml-4"
isDisabled={!isAllowed}
> >
<FontAwesomeIcon icon={faPencil} /> Update identity
</IconButton> </DropdownMenuItem>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
<OrgPermissionCan <OrgPermissionCan
@@ -206,24 +223,39 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
a={OrgPermissionSubjects.Identity} a={OrgPermissionSubjects.Identity}
> >
{(isAllowed) => ( {(isAllowed) => (
<IconButton <DropdownMenuItem
className={twMerge(
isAllowed
? "hover:!bg-red-500 hover:!text-white"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={() => { onClick={() => {
if (!isAllowed) return;
handlePopUpOpen("deleteIdentity", { handlePopUpOpen("deleteIdentity", {
identityId: id, identityId: id,
name name
}); });
}} }}
size="lg" icon={<FontAwesomeIcon icon={faXmark} />}
colorSchema="danger"
variant="plain"
ariaLabel="update"
className="ml-4"
isDisabled={!isAllowed}
> >
<FontAwesomeIcon icon={faXmark} /> Delete identity
</IconButton> </DropdownMenuItem>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
<DropdownMenuItem
onClick={() => {
navigator.clipboard.writeText(id);
createNotification({
text: "Copied identity internal ID to clipboard",
type: "success"
});
}}
icon={<FontAwesomeIcon icon={faCopy} />}
>
Copy internal ID
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div> </div>
</Td> </Td>
</Tr> </Tr>