awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-06 16:27:46 +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"> <div className="mt-4 text-sm text-mineshaft-400">
The following members will be removed: The following members will be removed:
</div> </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"> <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="ml-4 list-disc"> <ul className="list-disc">
{(popUp.removeMembers.data?.selectedOrgMemberships as OrgUser[])?.map((member) => { {(popUp.removeMembers.data?.selectedOrgMemberships as OrgUser[])?.map((member) => {
const email = member.user.email ?? member.user.username ?? member.inviteEmail; const email = member.user.email ?? member.user.username ?? member.inviteEmail;
return ( return (
<li key={member.id} className="flex items-center"> <li key={member.id}>
<span className={userId === member.user.id ? "line-through" : ""}> <div className="flex items-center">
{member.user.firstName || member.user.lastName <p className={userId === member.user.id ? "line-through" : ""}>
? `${`${member.user.firstName} ${member.user.lastName}`.trim()} (${email})` {member.user.firstName || member.user.lastName ? (
: email} <>
</span> {`${`${member.user.firstName} ${member.user.lastName}`.trim()} `}(
{userId === member.user.id && ( <span className="break-all">{email}</span>)
<Tooltip content="You cannot remove yourself from this organization"> </>
<div className="inline-block"> ) : (
<Badge <span className="break-all">{email}</span>
variant="danger" )}{" "}
className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap" </p>
> {userId === member.user.id && (
<FontAwesomeIcon icon={faBan} /> <Tooltip content="You cannot remove yourself from this organization">
<span>Ignored</span> <div className="inline-block">
</Badge> <Badge
</div> variant="danger"
</Tooltip> 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> </li>
); );
})} })}
frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
+19 -8
View File
@@ -10,6 +10,7 @@ import {
faMagnifyingGlass, faMagnifyingGlass,
faSearch, faSearch,
faUsers, faUsers,
faUserShield,
faUserSlash, faUserSlash,
faUserXmark faUserXmark
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
@@ -44,6 +45,7 @@ import {
Td, Td,
Th, Th,
THead, THead,
Tooltip,
Tr Tr
} from "@app/components/v2"; } from "@app/components/v2";
import { import {
@@ -499,15 +501,24 @@ export const OrgMembersTable = ({
}} }}
/> />
</Td> </Td>
<Td className={isActive ? "" : "text-mineshaft-400"}> <Td className={twMerge("max-w-0", isActive ? "" : "text-mineshaft-400")}>
{name ?? <span className="text-mineshaft-400">Not Set</span>} <div className="flex items-center">
{u.superAdmin && ( <p className="truncate">
<Badge variant="primary" className="ml-2"> {name ?? <span className="text-mineshaft-400">Not Set</span>}
Server Admin </p>
</Badge> {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>
<Td className={isActive ? "" : "text-mineshaft-400"}>{username}</Td>
<Td> <Td>
<OrgPermissionCan <OrgPermissionCan
I={OrgPermissionActions.Edit} I={OrgPermissionActions.Edit}
frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx
+17 -14
View File
@@ -120,7 +120,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
<div className="mb-4"> <div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Username</p> <p className="text-sm font-semibold text-mineshaft-300">Username</p>
<div className="group flex align-top"> <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"> <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextUsername}> <Tooltip content={copyTextUsername}>
<IconButton <IconButton
@@ -141,19 +141,22 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
<div className="mb-4"> <div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Email</p> <p className="text-sm font-semibold text-mineshaft-300">Email</p>
<div className="flex items-center"> <div className="flex items-center">
<p className="mr-2 text-sm text-mineshaft-300">{membership.user.email ?? "-"}</p> <p className="mr-2 break-all text-sm text-mineshaft-300">
<Tooltip {membership.user.email ?? "-"}{" "}
content={ <Tooltip
membership.user.isEmailVerified content={
? "Email has been verified" membership.user.isEmailVerified
: "Email has not been verified" ? "Email has been verified"
} : "Email has not been verified"
> }
<FontAwesomeIcon >
size="sm" <FontAwesomeIcon
icon={membership.user.isEmailVerified ? faCheckCircle : faCircleXmark} size="sm"
/> icon={membership.user.isEmailVerified ? faCheckCircle : faCircleXmark}
</Tooltip> className={membership.user.isEmailVerified ? "text-green" : "text-red"}
/>
</Tooltip>
</p>
</div> </div>
</div> </div>
<div className="mb-4"> <div className="mb-4">