misc: finalized ui

This commit is contained in:
Sheen Capadngan
2025-01-08 20:50:20 +08:00
parent 2819c8519e
commit c2453f0c84
@@ -511,7 +511,15 @@ export const SecretDetailSidebar = ({
</div> </div>
</div> </div>
<div className="dark mb-4 flex-grow text-sm text-bunker-300"> <div className="dark mb-4 flex-grow text-sm text-bunker-300">
<div className="mb-2">Access List</div> <div className="mb-2">
Access List
<Tooltip
content="Lists all users, machine identities, and groups that have been granted any permission level (read, create, edit, or delete) for this secret."
className="z-[100]"
>
<FontAwesomeIcon icon={faCircleQuestion} className="ml-1" size="sm" />
</Tooltip>
</div>
{isPending && ( {isPending && (
<Button className="w-full px-2 py-1" variant="outline_bg" isDisabled> <Button className="w-full px-2 py-1" variant="outline_bg" isDisabled>
Analyze Access Analyze Access
@@ -536,6 +544,7 @@ export const SecretDetailSidebar = ({
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{secretAccessList.users.map((user) => ( {secretAccessList.users.map((user) => (
<div className="rounded-md bg-bunker-500 px-1"> <div className="rounded-md bg-bunker-500 px-1">
<Tooltip content={user.allowedActions.join(", ")} className="z-[100]">
<Link <Link
to={ to={
`/${ProjectType.SecretManager}/$projectId/members/$membershipId` as const `/${ProjectType.SecretManager}/$projectId/members/$membershipId` as const
@@ -547,17 +556,8 @@ export const SecretDetailSidebar = ({
className="text-secondary/80 text-sm hover:text-primary" className="text-secondary/80 text-sm hover:text-primary"
> >
{user.name} {user.name}
<Tooltip
content={user.allowedActions.join(", ")}
className="z-[100]"
>
<FontAwesomeIcon
icon={faCircleQuestion}
className="ml-1"
size="sm"
/>
</Tooltip>
</Link> </Link>
</Tooltip>
</div> </div>
))} ))}
</div> </div>
@@ -569,6 +569,10 @@ export const SecretDetailSidebar = ({
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{secretAccessList.identities.map((identity) => ( {secretAccessList.identities.map((identity) => (
<div className="rounded-md bg-bunker-500 px-1"> <div className="rounded-md bg-bunker-500 px-1">
<Tooltip
content={identity.allowedActions.join(", ")}
className="z-[100]"
>
<Link <Link
to={ to={
`/${ProjectType.SecretManager}/$projectId/identities/$identityId` as const `/${ProjectType.SecretManager}/$projectId/identities/$identityId` as const
@@ -580,17 +584,8 @@ export const SecretDetailSidebar = ({
className="text-secondary/80 text-sm hover:text-primary" className="text-secondary/80 text-sm hover:text-primary"
> >
{identity.name} {identity.name}
<Tooltip
content={identity.allowedActions.join(", ")}
className="z-[100]"
>
<FontAwesomeIcon
icon={faCircleQuestion}
className="ml-1"
size="sm"
/>
</Tooltip>
</Link> </Link>
</Tooltip>
</div> </div>
))} ))}
</div> </div>
@@ -602,6 +597,10 @@ export const SecretDetailSidebar = ({
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{secretAccessList.groups.map((group) => ( {secretAccessList.groups.map((group) => (
<div className="rounded-md bg-bunker-500 px-1"> <div className="rounded-md bg-bunker-500 px-1">
<Tooltip
content={group.allowedActions.join(", ")}
className="z-[100]"
>
<Link <Link
to={"/organization/groups/$groupId" as const} to={"/organization/groups/$groupId" as const}
params={{ params={{
@@ -610,17 +609,8 @@ export const SecretDetailSidebar = ({
className="text-secondary/80 text-sm hover:text-primary" className="text-secondary/80 text-sm hover:text-primary"
> >
{group.name} {group.name}
<Tooltip
content={group.allowedActions.join(", ")}
className="z-[100]"
>
<FontAwesomeIcon
icon={faCircleQuestion}
className="ml-1"
size="sm"
/>
</Tooltip>
</Link> </Link>
</Tooltip>
</div> </div>
))} ))}
</div> </div>