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

improvement: address feedback

Browse Source
This commit is contained in:
Scott Wilson
2025-06-30 18:09:50 -07:00
parent 447e28511c
commit 20366a8c07
2 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
+36 -12
View File
@@ -96,7 +96,7 @@ export const SecretApprovalRequestChangeItem = ({
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Key</div> <div className="text-sm font-medium text-mineshaft-300">Key</div>
<div className="text-sm">{secretVersion?.secretKey} </div> <p className="max-w-lg break-words text-sm">{secretVersion?.secretKey}</p>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Value</div> <div className="text-sm font-medium text-mineshaft-300">Value</div>
@@ -148,7 +148,7 @@ export const SecretApprovalRequestChangeItem = ({
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Comment</div> <div className="text-sm font-medium text-mineshaft-300">Comment</div>
<div className="max-h-[5rem] overflow-y-auto text-sm"> <div className="thin-scrollbar max-h-[5rem] max-w-[34rem] overflow-y-auto break-words text-sm xl:max-w-[28rem]">
{secretVersion?.secretComment || ( {secretVersion?.secretComment || (
<span className="text-sm text-mineshaft-300">-</span> <span className="text-sm text-mineshaft-300">-</span>
)}{" "} )}{" "}
@@ -187,15 +187,27 @@ export const SecretApprovalRequestChangeItem = ({
className="mr-0 flex items-center rounded-r-none border border-mineshaft-500" className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
> >
<FontAwesomeIcon icon={faKey} size="xs" className="mr-1" /> <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
<div>{el.key}</div> <Tooltip
className="max-w-lg whitespace-normal break-words"
content={el.key}
>
<div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
{el.key}
</div>
</Tooltip>
</Tag> </Tag>
<Tag <Tag
size="xs" size="xs"
className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1" className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
> >
<div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap"> <Tooltip
{el.value} className="max-w-lg whitespace-normal break-words"
</div> content={el.value}
>
<div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
{el.value}
</div>
</Tooltip>
</Tag> </Tag>
</div> </div>
))} ))}
@@ -222,7 +234,7 @@ export const SecretApprovalRequestChangeItem = ({
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Key</div> <div className="text-sm font-medium text-mineshaft-300">Key</div>
<div className="text-sm">{newVersion?.secretKey} </div> <div className="max-w-md break-words text-sm">{newVersion?.secretKey} </div>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Value</div> <div className="text-sm font-medium text-mineshaft-300">Value</div>
@@ -274,7 +286,7 @@ export const SecretApprovalRequestChangeItem = ({
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Comment</div> <div className="text-sm font-medium text-mineshaft-300">Comment</div>
<div className="max-h-[5rem] overflow-y-auto text-sm"> <div className="thin-scrollbar max-h-[5rem] max-w-[34rem] overflow-y-auto break-words text-sm xl:max-w-[28rem]">
{newVersion?.secretComment || ( {newVersion?.secretComment || (
<span className="text-sm text-mineshaft-300">-</span> <span className="text-sm text-mineshaft-300">-</span>
)}{" "} )}{" "}
@@ -312,15 +324,27 @@ export const SecretApprovalRequestChangeItem = ({
className="mr-0 flex items-center rounded-r-none border border-mineshaft-500" className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
> >
<FontAwesomeIcon icon={faKey} size="xs" className="mr-1" /> <FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
<div>{el.key}</div> <Tooltip
className="max-w-lg whitespace-normal break-words"
content={el.key}
>
<div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
{el.key}
</div>
</Tooltip>
</Tag> </Tag>
<Tag <Tag
size="xs" size="xs"
className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1" className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
> >
<div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap"> <Tooltip
{el.value} className="max-w-lg whitespace-normal break-words"
</div> content={el.value}
>
<div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
{el.value}
</div>
</Tooltip>
</Tag> </Tag>
</div> </div>
))} ))}
frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
+6 -6
View File
@@ -225,7 +225,7 @@ export const SecretApprovalRequestChanges = ({
return ( return (
<div className="flex space-x-6"> <div className="flex space-x-6">
<div className="flex-grow"> <div className="max-w-[calc(100%-17rem)] flex-1">
<div className="sticky top-0 z-20 flex items-center space-x-4 bg-bunker-800 pb-6 pt-2"> <div className="sticky top-0 z-20 flex items-center space-x-4 bg-bunker-800 pb-6 pt-2">
<IconButton variant="outline_bg" ariaLabel="go-back" onClick={onGoBack}> <IconButton variant="outline_bg" ariaLabel="go-back" onClick={onGoBack}>
<FontAwesomeIcon icon={faArrowLeft} /> <FontAwesomeIcon icon={faArrowLeft} />
@@ -493,7 +493,7 @@ export const SecretApprovalRequestChanges = ({
. .
</div> </div>
{reviewer?.comment && ( {reviewer?.comment && (
<GenericFieldLabel label="Comment" className="mt-2"> <GenericFieldLabel label="Comment" className="mt-2 max-w-4xl break-words">
{reviewer?.comment && reviewer.comment} {reviewer?.comment && reviewer.comment}
</GenericFieldLabel> </GenericFieldLabel>
)} )}
@@ -516,7 +516,7 @@ export const SecretApprovalRequestChanges = ({
/> />
</div> </div>
</div> </div>
<div className="sticky top-0 w-1/5 cursor-default pt-2" style={{ minWidth: "240px" }}> <div className="sticky top-0 z-[51] w-1/5 cursor-default pt-2" style={{ minWidth: "240px" }}>
<div className="text-sm text-bunker-300">Reviewers</div> <div className="text-sm text-bunker-300">Reviewers</div>
<div className="mt-2 flex flex-col space-y-2 text-sm"> <div className="mt-2 flex flex-col space-y-2 text-sm">
{secretApprovalRequestDetails?.policy?.approvers {secretApprovalRequestDetails?.policy?.approvers
@@ -537,17 +537,17 @@ export const SecretApprovalRequestChanges = ({
requiredApprover.lastName || "" requiredApprover.lastName || ""
}`} }`}
> >
<span>{requiredApprover?.email} </span> <span>{requiredApprover?.email}</span>
</Tooltip> </Tooltip>
<span className="text-red">*</span> <span className="text-red">*</span>
</div> </div>
<div> <div>
{reviewer?.comment && ( {reviewer?.comment && (
<Tooltip content={reviewer.comment}> <Tooltip className="max-w-lg break-words" content={reviewer.comment}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faComment} icon={faComment}
size="xs" size="xs"
className="mr-1 text-mineshaft-300" className="mr-1.5 text-mineshaft-300"
/> />
</Tooltip> </Tooltip>
)} )}