awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvements: address feedback, improve org members table overflow handling, fix user details email/username overflow

Browse Source
This commit is contained in:
Scott Wilson
2025-07-30 10:43:10 -07:00
parent 2aa548c7dc
commit f53c39f65b
3 changed files with 64 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
View File

@@ -266,30 +266,37 @@ export const OrgMembersSection = () => {
<div className="mt-4 text-sm text-mineshaft-400">
The following members will be removed:
</div>
<div className="mt-2 max-h-[20rem] overflow-y-auto rounded border border-red/40 bg-red/10 p-4 text-sm text-red-200">
<ul className="ml-4 list-disc">
<div className="mt-2 max-h-[20rem] overflow-y-auto rounded border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
<ul className="list-disc">
{(popUp.removeMembers.data?.selectedOrgMemberships as OrgUser[])?.map((member) => {
const email = member.user.email ?? member.user.username ?? member.inviteEmail;
return (
<li key={member.id} className="flex items-center">
<span className={userId === member.user.id ? "line-through" : ""}>
{member.user.firstName || member.user.lastName
? `${`${member.user.firstName} ${member.user.lastName}`.trim()} (${email})`
: email}
</span>
{userId === member.user.id && (
<Tooltip content="You cannot remove yourself from this organization">
<div className="inline-block">
<Badge
variant="danger"
className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
>
<FontAwesomeIcon icon={faBan} />
<span>Ignored</span>
</Badge>
</div>
</Tooltip>
)}
<li key={member.id}>
<div className="flex items-center">
<p className={userId === member.user.id ? "line-through" : ""}>
{member.user.firstName || member.user.lastName ? (
<>
{`${`${member.user.firstName} ${member.user.lastName}`.trim()} `}(
<span className="break-all">{email}</span>)
</>
) : (
<span className="break-all">{email}</span>
)}{" "}
</p>
{userId === member.user.id && (
<Tooltip content="You cannot remove yourself from this organization">
<div className="inline-block">
<Badge
variant="danger"
className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
>
<FontAwesomeIcon icon={faBan} />
<span>Ignored</span>
</Badge>
</div>
</Tooltip>
)}
</div>
</li>
);
})}

27
frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
View File

@@ -10,6 +10,7 @@ import {
faMagnifyingGlass,
faSearch,
faUsers,
faUserShield,
faUserSlash,
faUserXmark
} from "@fortawesome/free-solid-svg-icons";
@@ -44,6 +45,7 @@ import {
Td,
Th,
THead,
Tooltip,
Tr
} from "@app/components/v2";
import {
@@ -499,15 +501,24 @@ export const OrgMembersTable = ({
}}
/>
</Td>
<Td className={isActive ? "" : "text-mineshaft-400"}>
{name ?? <span className="text-mineshaft-400">Not Set</span>}
{u.superAdmin && (
<Badge variant="primary" className="ml-2">
Server Admin
</Badge>
)}
<Td className={twMerge("max-w-0", isActive ? "" : "text-mineshaft-400")}>
<div className="flex items-center">
<p className="truncate">
{name ?? <span className="text-mineshaft-400">Not Set</span>}
</p>
{u.superAdmin && (
<Badge variant="primary" className="ml-2 w-min whitespace-nowrap">
<span className="hidden xl:inline">Server Admin</span>
<Tooltip content="Server Admin">
<FontAwesomeIcon className="xl:hidden" icon={faUserShield} />
</Tooltip>
</Badge>
)}
</div>
</Td>
<Td className={twMerge("max-w-0", isActive ? "" : "text-mineshaft-400")}>
<p className="truncate">{username}</p>
</Td>
<Td className={isActive ? "" : "text-mineshaft-400"}>{username}</Td>
<Td>
<OrgPermissionCan
I={OrgPermissionActions.Edit}

31
frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx
View File

@@ -120,7 +120,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Username</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{membership.user.username}</p>
<p className="break-all text-sm text-mineshaft-300">{membership.user.username}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextUsername}>
<IconButton
@@ -141,19 +141,22 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Email</p>
<div className="flex items-center">
<p className="mr-2 text-sm text-mineshaft-300">{membership.user.email ?? "-"}</p>
<Tooltip
content={
membership.user.isEmailVerified
? "Email has been verified"
: "Email has not been verified"
}
>
<FontAwesomeIcon
size="sm"
icon={membership.user.isEmailVerified ? faCheckCircle : faCircleXmark}
/>
</Tooltip>
<p className="mr-2 break-all text-sm text-mineshaft-300">
{membership.user.email ?? "-"}{" "}
<Tooltip
content={
membership.user.isEmailVerified
? "Email has been verified"
: "Email has not been verified"
}
>
<FontAwesomeIcon
size="sm"
icon={membership.user.isEmailVerified ? faCheckCircle : faCircleXmark}
className={membership.user.isEmailVerified ? "text-green" : "text-red"}
/>
</Tooltip>
</p>
</div>
</div>
<div className="mb-4">