awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-02 19:25:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix type and lint issues

Browse Source
This commit is contained in:
carlosmonastyrski
2025-05-26 09:16:10 -03:00
parent 8d5e7406c3
commit e5f475e8d6
3 changed files with 200 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
+22 -17
View File
@@ -1,13 +1,9 @@
import { useState } from "react"; import { useState } from "react";
import { import {
faCheck, faCheck,
faCircleCheck,
faCircleXmark,
faClose, faClose,
faLandMineOn, faLandMineOn,
faLockOpen, faLockOpen,
faSquareCheck,
faSquareXmark,
faTriangleExclamation, faTriangleExclamation,
faUserLock, faUserLock,
faXmark faXmark
@@ -115,25 +111,34 @@ export const SecretApprovalRequestAction = ({
if (!hasMerged && status === "open") { if (!hasMerged && status === "open") {
return ( return (
<div className="flex flex-col w-full items-start justify-between transition-all py-4"> <div className="flex w-full flex-col items-start justify-between py-4 transition-all">
<div className="flex items-center space-x-4 px-4"> <div className="flex items-center space-x-4 px-4">
<div className={`flex items-center justify-center rounded-full ${isMergable ? "bg-green w-10 h-10" : "bg-red-600 w-11 h-11"}`}> <div
className={`flex items-center justify-center rounded-full ${isMergable ? "h-10 w-10 bg-green" : "h-11 w-11 bg-red-600"}`}
>
<FontAwesomeIcon <FontAwesomeIcon
icon={isMergable ? faCheck : faXmark} icon={isMergable ? faCheck : faXmark}
className={isMergable ? "text-black text-lg" : "text-white text-2xl"} className={isMergable ? "text-lg text-black" : "text-2xl text-white"}
/> />
</div> </div>
<span className="flex flex-col"> <span className="flex flex-col">
<p className={`text-md font-medium ${isMergable && "text-lg"}`}>{isMergable ? "Good to merge" : "Merging is blocked"}</p> <p className={`text-md font-medium ${isMergable && "text-lg"}`}>
{!isMergable && <span className="inline-block text-xs text-bunker-200"> {isMergable ? "Good to merge" : "Merging is blocked"}
At least {approvals} approving review{`${approvals > 1 ? "s" : ""}`} required by eligible reviewers. </p>
{Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`} {!isMergable && (
</span>} <span className="inline-block text-xs text-bunker-200">
At least {approvals} approving review{`${approvals > 1 ? "s" : ""}`} required by
eligible reviewers.
{Boolean(statusChangeByEmail) && `. Reopened by ${statusChangeByEmail}`}
</span>
)}
</span> </span>
</div> </div>
<div className={`w-full px-5 border-mineshaft-600 mt-4 ${isMergable ? "border-t pb-2" : "border-y pb-4"}`}> <div
className={`mt-4 w-full border-mineshaft-600 px-5 ${isMergable ? "border-t pb-2" : "border-y pb-4"}`}
>
{isSoftEnforcement && !isMergable && canBypassApprovalPermission && ( {isSoftEnforcement && !isMergable && canBypassApprovalPermission && (
<div className="mt-2 pt-2 flex flex-col space-y-2"> <div className="mt-2 flex flex-col space-y-2 pt-2">
<Checkbox <Checkbox
onCheckedChange={(checked) => setByPassApproval(checked === true)} onCheckedChange={(checked) => setByPassApproval(checked === true)}
isChecked={byPassApproval} isChecked={byPassApproval}
@@ -166,7 +171,7 @@ export const SecretApprovalRequestAction = ({
</div> </div>
)} )}
</div> </div>
<div className="flex items-center justify-end w-full space-x-2 px-4 mt-2"> <div className="mt-2 flex w-full items-center justify-end space-x-2 px-4">
{canApprove || isSoftEnforcement ? ( {canApprove || isSoftEnforcement ? (
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<Button <Button
@@ -175,7 +180,7 @@ export const SecretApprovalRequestAction = ({
variant="outline_bg" variant="outline_bg"
colorSchema="primary" colorSchema="primary"
leftIcon={<FontAwesomeIcon icon={faClose} />} leftIcon={<FontAwesomeIcon icon={faClose} />}
className="hover:bg-red/10 hover:border-red/60" className="hover:border-red/60 hover:bg-red/10"
> >
Close request Close request
</Button> </Button>
@@ -205,7 +210,7 @@ export const SecretApprovalRequestAction = ({
if (hasMerged && status === "close") if (hasMerged && status === "close")
return ( return (
<div className="flex w-full items-center justify-between bg-primary/10 border border-primary/60 rounded-md"> <div className="flex w-full items-center justify-between rounded-md border border-primary/60 bg-primary/10">
<div className="flex items-start space-x-4 p-4"> <div className="flex items-start space-x-4 p-4">
<FontAwesomeIcon icon={faCheck} className="pt-1 text-2xl text-primary" /> <FontAwesomeIcon icon={faCheck} className="pt-1 text-2xl text-primary" />
<span className="flex flex-col"> <span className="flex flex-col">
frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
+165 -94
View File
@@ -1,12 +1,19 @@
import { faCircleXmark, faExclamationTriangle, faEye, faEyeSlash, faInfo, faKey } from "@fortawesome/free-solid-svg-icons"; /* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-nested-ternary */
import { useState } from "react";
import {
faCircleXmark,
faExclamationTriangle,
faEye,
faEyeSlash,
faInfo,
faKey
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { import { Tag, Tooltip } from "@app/components/v2";
Tag,
Tooltip
} from "@app/components/v2";
import { CommitType, SecretV3Raw, TSecretApprovalSecChange, WsTag } from "@app/hooks/api/types"; import { CommitType, SecretV3Raw, TSecretApprovalSecChange, WsTag } from "@app/hooks/api/types";
import { useState } from "react";
export type Props = { export type Props = {
op: CommitType; op: CommitType;
@@ -27,7 +34,7 @@ const generateItemTitle = (op: CommitType) => {
else text = { label: "deletion", color: "#F83030" }; else text = { label: "deletion", color: "#F83030" };
return ( return (
<div className="text-md font-medium pb-2"> <div className="text-md pb-2 font-medium">
Request for <span style={{ color: text.color }}>secret {text.label}</span> Request for <span style={{ color: text.color }}>secret {text.label}</span>
</div> </div>
); );
@@ -56,7 +63,7 @@ export const SecretApprovalRequestChangeItem = ({
const [isNewSecretValueVisible, setIsNewSecretValueVisible] = useState(false); const [isNewSecretValueVisible, setIsNewSecretValueVisible] = useState(false);
return ( return (
<div className="rounded-lg bg-mineshaft-900 px-4 pb-4 pt-2 border border-mineshaft-600"> <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 pb-4 pt-2">
<div className="flex items-center px-1 py-1"> <div className="flex items-center px-1 py-1">
<div className="flex-grow">{generateItemTitle(op)}</div> <div className="flex-grow">{generateItemTitle(op)}</div>
{!hasMerged && isStale && ( {!hasMerged && isStale && (
@@ -75,57 +82,84 @@ export const SecretApprovalRequestChangeItem = ({
)} )}
</div> </div>
<div> <div>
<div className="flex flex-col xl:flex-row space-y-4 xl:space-y-0 space-x-0 xl:space-x-4"> <div className="flex flex-col space-x-0 space-y-4 xl:flex-row xl:space-x-4 xl:space-y-0">
{op === CommitType.UPDATE || op === CommitType.DELETE ? ( {op === CommitType.UPDATE || op === CommitType.DELETE ? (
<div className="flex flex-col border border-red-600/60 bg-red-600/10 p-4 w-full xl:w-1/2 rounded-md cursor-default"> <div className="flex w-full cursor-default flex-col rounded-md border border-red-600/60 bg-red-600/10 p-4 xl:w-1/2">
<div className="flex flex-row justify-between mb-4"> <div className="mb-4 flex flex-row justify-between">
<span className="text-md font-medium">Legacy Secret</span> <span className="text-md font-medium">Legacy Secret</span>
<div className="pt-[0.2rem] pb-[0.14rem] px-2 bg-red text-xs rounded-full font-medium"> <div className="rounded-full bg-red px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
<FontAwesomeIcon icon={faCircleXmark} className="text-white pr-1" /> <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
Deprecated Deprecated
</div> </div>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Key</div> <div className="text-sm font-medium text-mineshaft-300">Key</div>
<div className="text-sm">{secretVersion?.secretKey} </div> <div className="text-sm">{secretVersion?.secretKey} </div>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Value</div> <div className="text-sm font-medium text-mineshaft-300">Value</div>
<div className="text-sm">{newVersion?.isRotatedSecret ? ( <div className="text-sm">
<span className="text-mineshaft-400"> {newVersion?.isRotatedSecret ? (
Rotated Secret value will not be affected <span className="text-mineshaft-400">
</span> Rotated Secret value will not be affected
) : ( </span>
<div onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)} className="pl-2 border border-mineshaft-500 bg-mineshaft-900 rounded-md flex flex-row justify-between items-center"> ) : (
<div className={`flex font-mono ${isOldSecretValueVisible || !secretVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}>{isOldSecretValueVisible ? (secretVersion?.secretValue || "EMPTY") : (secretVersion?.secretValue ? secretVersion?.secretValue?.split('').map((_, index) => "•") : "EMPTY")} </div> <div
{secretVersion?.secretValue && <div className="flex items-center w-10 h-10 justify-center"><FontAwesomeIcon icon={isOldSecretValueVisible ? faEyeSlash : faEye} className="text-mineshaft-300 p-1.5 border border-mineshaft-500 rounded-md bg-mineshaft-800 hover:bg-mineshaft-700 cursor-pointer" /></div>} onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
</div> className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2"
)}
</div>
</div>
<div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Comment</div>
<div className="text-sm">{secretVersion?.secretComment || <span className="text-sm text-mineshaft-300">-</span>} </div>
</div>
<div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Tags</div>
<div className="flex flex-wrap gap-2">
{secretVersion?.tags?.length ?? 0 ? secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
<Tag
className="flex w-min items-center space-x-2"
key={`${secretVersion.id}-${tagId}`}
> >
<div <div
className="h-3 w-3 rounded-full" className={`flex font-mono ${isOldSecretValueVisible || !secretVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
style={{ backgroundColor: color || "#bec2c8" }} >
/> {isOldSecretValueVisible
<div className="text-sm">{slug}</div> ? secretVersion?.secretValue || "EMPTY"
</Tag> : secretVersion?.secretValue
)) : <span className="text-sm text-mineshaft-300">-</span>} ? secretVersion?.secretValue?.split("").map(() => "•")
: "EMPTY"}{" "}
</div>
{secretVersion?.secretValue && (
<div className="flex h-10 w-10 items-center justify-center">
<FontAwesomeIcon
icon={isOldSecretValueVisible ? faEyeSlash : faEye}
className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
/>
</div>
)}
</div>
)}
</div> </div>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Metadata</div> <div className="text-sm font-medium text-mineshaft-300">Comment</div>
<div className="text-sm">
{secretVersion?.secretComment || (
<span className="text-sm text-mineshaft-300">-</span>
)}{" "}
</div>
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Tags</div>
<div className="flex flex-wrap gap-2">
{(secretVersion?.tags?.length ?? 0) ? (
secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
<Tag
className="flex w-min items-center space-x-2"
key={`${secretVersion.id}-${tagId}`}
>
<div
className="h-3 w-3 rounded-full"
style={{ backgroundColor: color || "#bec2c8" }}
/>
<div className="text-sm">{slug}</div>
</Tag>
))
) : (
<span className="text-sm text-mineshaft-300">-</span>
)}
</div>
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Metadata</div>
<div> <div>
{secretVersion?.secretMetadata?.length ? ( {secretVersion?.secretMetadata?.length ? (
<div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300"> <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
@@ -153,59 +187,91 @@ export const SecretApprovalRequestChangeItem = ({
<p className="text-sm text-mineshaft-300">-</p> <p className="text-sm text-mineshaft-300">-</p>
)} )}
</div> </div>
</div> </div>
</div>) </div>
: <div className="w-full xl:w-1/2 bg-mineshaft-800 border border-mineshaft-600 rounded-md flex items-center justify-center text-md text-mineshaft-300"> Secret not existent in the previous version.</div>} ) : (
{op === CommitType.UPDATE || op === CommitType.CREATE ? ( <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
<div className="flex flex-col border border-green-600/60 bg-green-600/10 p-4 w-full xl:w-1/2 rounded-md cursor-default"> {" "}
<div className="flex flex-row justify-between mb-4"> Secret not existent in the previous version.
</div>
)}
{op === CommitType.UPDATE || op === CommitType.CREATE ? (
<div className="flex w-full cursor-default flex-col rounded-md border border-green-600/60 bg-green-600/10 p-4 xl:w-1/2">
<div className="mb-4 flex flex-row justify-between">
<span className="text-md font-medium">New Secret</span> <span className="text-md font-medium">New Secret</span>
<div className="pt-[0.2rem] pb-[0.14rem] px-2 bg-green-600 text-xs rounded-full font-medium"> <div className="rounded-full bg-green-600 px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
<FontAwesomeIcon icon={faCircleXmark} className="text-white pr-1" /> <FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
Current Current
</div> </div>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Key</div> <div className="text-sm font-medium text-mineshaft-300">Key</div>
<div className="text-sm">{newVersion?.secretKey} </div> <div className="text-sm">{newVersion?.secretKey} </div>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Value</div> <div className="text-sm font-medium text-mineshaft-300">Value</div>
<div className="text-sm">{newVersion?.isRotatedSecret ? ( <div className="text-sm">
<span className="text-mineshaft-400"> {newVersion?.isRotatedSecret ? (
Rotated Secret value will not be affected <span className="text-mineshaft-400">
</span> Rotated Secret value will not be affected
) : ( </span>
<div onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)} className="pl-2 border border-mineshaft-500 bg-mineshaft-900 rounded-md flex flex-row justify-between items-center"> ) : (
<div className={`flex font-mono ${isNewSecretValueVisible || !newVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}>{isNewSecretValueVisible ? (newVersion?.secretValue || "EMPTY") : (newVersion?.secretValue ? newVersion?.secretValue?.split('').map((_, index) => "•") : "EMPTY")} </div> <div
{newVersion?.secretValue && <div className="flex items-center w-10 h-10 justify-center"><FontAwesomeIcon icon={isNewSecretValueVisible ? faEyeSlash : faEye} className="text-mineshaft-300 p-1.5 border border-mineshaft-500 rounded-md bg-mineshaft-800 hover:bg-mineshaft-700 cursor-pointer" /></div>} onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
</div> className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2"
)}
</div>
</div>
<div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Comment</div>
<div className="text-sm">{newVersion?.secretComment || <span className="text-sm text-mineshaft-300">-</span>} </div>
</div>
<div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Tags</div>
<div className="flex flex-wrap gap-2">
{newVersion?.tags?.length ?? 0 ? newVersion?.tags?.map(({ slug, id: tagId, color }) => (
<Tag
className="flex w-min items-center space-x-2"
key={`${newVersion.id}-${tagId}`}
> >
<div <div
className="h-3 w-3 rounded-full" className={`flex font-mono ${isNewSecretValueVisible || !newVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
style={{ backgroundColor: color || "#bec2c8" }} >
/> {isNewSecretValueVisible
<div className="text-sm">{slug}</div> ? newVersion?.secretValue || "EMPTY"
</Tag> : newVersion?.secretValue
)) : <span className="text-sm text-mineshaft-300">-</span>} ? newVersion?.secretValue?.split("").map(() => "•")
: "EMPTY"}{" "}
</div>
{newVersion?.secretValue && (
<div className="flex h-10 w-10 items-center justify-center">
<FontAwesomeIcon
icon={isNewSecretValueVisible ? faEyeSlash : faEye}
className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
/>
</div>
)}
</div>
)}
</div> </div>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm text-mineshaft-300 font-medium">Metadata</div> <div className="text-sm font-medium text-mineshaft-300">Comment</div>
<div className="text-sm">
{newVersion?.secretComment || (
<span className="text-sm text-mineshaft-300">-</span>
)}{" "}
</div>
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Tags</div>
<div className="flex flex-wrap gap-2">
{(newVersion?.tags?.length ?? 0) ? (
newVersion?.tags?.map(({ slug, id: tagId, color }) => (
<Tag
className="flex w-min items-center space-x-2"
key={`${newVersion.id}-${tagId}`}
>
<div
className="h-3 w-3 rounded-full"
style={{ backgroundColor: color || "#bec2c8" }}
/>
<div className="text-sm">{slug}</div>
</Tag>
))
) : (
<span className="text-sm text-mineshaft-300">-</span>
)}
</div>
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Metadata</div>
{newVersion?.secretMetadata?.length ? ( {newVersion?.secretMetadata?.length ? (
<div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300"> <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
{newVersion.secretMetadata?.map((el) => ( {newVersion.secretMetadata?.map((el) => (
@@ -232,9 +298,14 @@ export const SecretApprovalRequestChangeItem = ({
<p className="text-sm text-mineshaft-300">-</p> <p className="text-sm text-mineshaft-300">-</p>
)} )}
</div> </div>
</div>) </div>
: <div className="w-full xl:w-1/2 bg-mineshaft-800 border border-mineshaft-600 rounded-md flex items-center justify-center text-md text-mineshaft-300"> Secret not existent in the new version.</div>} ) : (
</div> <div className="text-md flex w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 text-mineshaft-300 xl:w-1/2">
{" "}
Secret not existent in the new version.
</div>
)}
</div>
</div> </div>
</div> </div>
); );
frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
+13 -12
View File
@@ -13,6 +13,7 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "@radix-ui/react-radio-group"; import { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "@radix-ui/react-radio-group";
import { format } from "date-fns";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import z from "zod"; import z from "zod";
@@ -40,7 +41,6 @@ import { formatReservedPaths } from "@app/lib/fn/string";
import { SecretApprovalRequestAction } from "./SecretApprovalRequestAction"; import { SecretApprovalRequestAction } from "./SecretApprovalRequestAction";
import { SecretApprovalRequestChangeItem } from "./SecretApprovalRequestChangeItem"; import { SecretApprovalRequestChangeItem } from "./SecretApprovalRequestChangeItem";
import { format } from "date-fns";
export const generateCommitText = (commits: { op: CommitType }[] = []) => { export const generateCommitText = (commits: { op: CommitType }[] = []) => {
const score: Record<string, number> = {}; const score: Record<string, number> = {};
@@ -235,14 +235,17 @@ export const SecretApprovalRequestChanges = ({
{secretApprovalRequestDetails?.committerUser?.email}) wants to change{" "} {secretApprovalRequestDetails?.committerUser?.email}) wants to change{" "}
{secretApprovalRequestDetails.commits.length} secret values in {secretApprovalRequestDetails.commits.length} secret values in
</p> </p>
<p className="inline rounded bg-primary-600/40 mx-1 px-1 py-1 text-primary-300"> <p className="mx-1 inline rounded bg-primary-600/40 px-1 py-1 text-primary-300">
{secretApprovalRequestDetails.environment} {secretApprovalRequestDetails.environment}
</p> </p>
<div className="inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2"> <div className="inline-flex w-min items-center rounded border border-mineshaft-500 pl-1 pr-2">
<p className="border-r border-mineshaft-500 pr-1 cursor-default"> <p className="cursor-default border-r border-mineshaft-500 pr-1">
<FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" /> <FontAwesomeIcon icon={faFolder} className="text-primary" size="sm" />
</p> </p>
<p className="truncate pb-0.5 pl-2 text-sm cursor-default" style={{ maxWidth: "10rem" }}> <p
className="cursor-default truncate pb-0.5 pl-2 text-sm"
style={{ maxWidth: "10rem" }}
>
{formatReservedPaths(secretApprovalRequestDetails.secretPath)} {formatReservedPaths(secretApprovalRequestDetails.secretPath)}
</p> </p>
</div> </div>
@@ -256,10 +259,7 @@ export const SecretApprovalRequestChanges = ({
onOpenChange={(isOpen) => handlePopUpToggle("reviewChanges", isOpen)} onOpenChange={(isOpen) => handlePopUpToggle("reviewChanges", isOpen)}
> >
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}>
variant="primary"
rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
>
Review Review
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@@ -397,7 +397,8 @@ export const SecretApprovalRequestChanges = ({
> >
{reviewer?.status === ApprovalStatus.APPROVED ? "approved" : "rejected"} {reviewer?.status === ApprovalStatus.APPROVED ? "approved" : "rejected"}
</span>{" "} </span>{" "}
the request on {format(new Date(secretApprovalRequestDetails.createdAt), "PPpp zzz")}. the request on{" "}
{format(new Date(secretApprovalRequestDetails.createdAt), "PPpp zzz")}.
</div> </div>
{reviewer?.comment && ( {reviewer?.comment && (
<FormControl label="Comment" className="mb-0 mt-4"> <FormControl label="Comment" className="mb-0 mt-4">
@@ -410,7 +411,7 @@ export const SecretApprovalRequestChanges = ({
); );
})} })}
</div> </div>
<div className="flex items-center space-x-6 mt-2 rounded-lg bg-mineshaft-800 border border-mineshaft-600"> <div className="mt-2 flex items-center space-x-6 rounded-lg border border-mineshaft-600 bg-mineshaft-800">
<SecretApprovalRequestAction <SecretApprovalRequestAction
canApprove={canApprove} canApprove={canApprove}
approvalRequestId={secretApprovalRequestDetails.id} approvalRequestId={secretApprovalRequestDetails.id}
@@ -424,7 +425,7 @@ export const SecretApprovalRequestChanges = ({
/> />
</div> </div>
</div> </div>
<div className="sticky top-0 w-1/5 pt-4 cursor-default" style={{ minWidth: "240px" }}> <div className="sticky top-0 w-1/5 cursor-default pt-4" 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
@@ -436,7 +437,7 @@ export const SecretApprovalRequestChanges = ({
const reviewer = reviewedUsers?.[requiredApprover.userId]; const reviewer = reviewedUsers?.[requiredApprover.userId];
return ( return (
<div <div
className="flex justify-between flex-nowrap items-center space-x-2 rounded bg-mineshaft-800 border border-mineshaft-600 px-2 py-1" className="flex flex-nowrap items-center justify-between space-x-2 rounded border border-mineshaft-600 bg-mineshaft-800 px-2 py-1"
key={`required-approver-${requiredApprover.userId}`} key={`required-approver-${requiredApprover.userId}`}
> >
<div className="flex text-sm"> <div className="flex text-sm">