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

Merge pull request #1718 from Infisical/daniel/mi-ux-fix-2

Browse Source 
Fix: Machine Identities user experience improvement
This commit is contained in:
Daniel Hougaard
2024-05-28 00:34:17 +02:00
committed by GitHub
parent c344330c93 f23056bcbc
commit c894a18797
1 changed files with 82 additions and 49 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 -49
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 { twMerge } from "tailwind-merge";
import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
EmptyState,
IconButton,
Select,
@@ -80,7 +93,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
<THead>
<Tr>
<Th>Name</Th>
<Th>ID</Th>
<Th>Role</Th>
<Th>Auth Method</Th>
<Th className="w-5" />
@@ -95,7 +107,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
return (
<Tr className="h-10" key={`identity-${id}`}>
<Td>{name}</Td>
<Td>{id}</Td>
<Td>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
@@ -127,7 +138,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
</Td>
<Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
<Td>
<div className="flex items-center justify-end">
<div className="flex items-center justify-end space-x-4">
{authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
<Tooltip content="Manage client ID/secrets">
<IconButton
@@ -141,7 +152,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
colorSchema="primary"
variant="plain"
ariaLabel="update"
// isDisabled={!isAllowed}
>
<FontAwesomeIcon icon={faKey} />
</IconButton>
@@ -165,7 +175,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
colorSchema="primary"
variant="plain"
ariaLabel="update"
className="ml-4"
isDisabled={!isAllowed}
>
<FontAwesomeIcon icon={faLock} />
@@ -173,54 +182,78 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
</Tooltip>
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<IconButton
onClick={async () => {
handlePopUpOpen("identity", {
identityId: id,
name,
role,
customRole
});
}}
size="lg"
colorSchema="primary"
variant="plain"
ariaLabel="update"
className="ml-4"
isDisabled={!isAllowed}
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
<Tooltip content="More options">
<FontAwesomeIcon size="lg" icon={faEllipsis} />
</Tooltip>
</div>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="p-1">
<OrgPermissionCan
I={OrgPermissionActions.Edit}
a={OrgPermissionSubjects.Identity}
>
<FontAwesomeIcon icon={faPencil} />
</IconButton>
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Delete}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<IconButton
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={async () => {
if (!isAllowed) return;
handlePopUpOpen("identity", {
identityId: id,
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={() => {
handlePopUpOpen("deleteIdentity", {
identityId: id,
name
navigator.clipboard.writeText(id);
createNotification({
text: "Copied identity internal ID to clipboard",
type: "success"
});
}}
size="lg"
colorSchema="danger"
variant="plain"
ariaLabel="update"
className="ml-4"
isDisabled={!isAllowed}
icon={<FontAwesomeIcon icon={faCopy} />}
>
<FontAwesomeIcon icon={faXmark} />
</IconButton>
)}
</OrgPermissionCan>
Copy Identity ID
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</Td>
</Tr>