awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-21 01:16:49 +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
frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
+28 -21
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>
);
})}
frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
+19 -8
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}