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

style changes

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2024-05-07 17:30:35 +02:00
committed by Daniel Hougaard
parent 8c256bd9c8
commit 299653528c
3 changed files with 42 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx
+4 -4
View File
@@ -47,11 +47,11 @@ export const SecretApprovalPage = () => {
</div> </div>
<Tabs defaultValue={TabSection.SecretApprovalRequests}> <Tabs defaultValue={TabSection.SecretApprovalRequests}>
<TabList> <TabList>
<Tab value={TabSection.SecretApprovalRequests}>Secret Approvals</Tab> <Tab value={TabSection.SecretApprovalRequests}>Change Requests</Tab>
<Tab value={TabSection.SecretPolicies}>Secret Policies</Tab> <Tab value={TabSection.SecretPolicies}>Change Request Policies</Tab>
<Divider /> <Divider />
<Tab value={TabSection.ResourceApprovalRequests}>Access Approvals</Tab> <Tab value={TabSection.ResourceApprovalRequests}>Access Requests</Tab>
<Tab value={TabSection.ResourcePolicies}>Access Policies</Tab> <Tab value={TabSection.ResourcePolicies}>Access Request Policies</Tab>
</TabList> </TabList>
<TabPanel value={TabSection.SecretApprovalRequests}> <TabPanel value={TabSection.SecretApprovalRequests}>
<SecretApprovalRequest /> <SecretApprovalRequest />
frontend/src/views/SecretApprovalPage/components/AccessApprovalPolicyList/AccessApprovalPolicyList.tsx
+3 -3
View File
@@ -83,11 +83,11 @@ export const AccessApprovalPolicyList = ({ workspaceId }: IProps) => {
return ( return (
<div> <div>
<div className="mb-6 flex justify-between"> <div className="mb-6 flex justify-between items-end">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-xl font-semibold text-mineshaft-100">Access Approval Policies</span> <span className="text-xl font-semibold text-mineshaft-100">Access Request Policies</span>
<div className="mt-2 text-sm text-bunker-300"> <div className="mt-2 text-sm text-bunker-300">
Implement policies to prevent unauthorized secret changes. Implement secret request policies for specific secrets and environments.
</div> </div>
</div> </div>
<div> <div>
frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
+23 -26
View File
@@ -5,7 +5,8 @@ import {
faCheck, faCheck,
faCheckCircle, faCheckCircle,
faChevronDown, faChevronDown,
faLockOpen faLock,
faPlus
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { formatDistance } from "date-fns"; import { formatDistance } from "date-fns";
@@ -25,6 +26,7 @@ import {
EmptyState, EmptyState,
Modal, Modal,
ModalContent, ModalContent,
Tooltip,
UpgradePlanModal UpgradePlanModal
} from "@app/components/v2"; } from "@app/components/v2";
import { import {
@@ -51,7 +53,7 @@ const DisplayBadge = ({ text, className }: { text: string; className?: string })
return ( return (
<div <div
className={twMerge( className={twMerge(
"ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100", "ml-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-xs text-yellow opacity-80 hover:opacity-100",
className className
)} )}
> >
@@ -155,28 +157,28 @@ const ReviewRequestModal = ({
<ModalContent <ModalContent
className="max-w-4xl" className="max-w-4xl"
title="Review Request" title="Review Request"
subTitle="Review the request and approve or deny access" subTitle="Review the request and approve or deny access."
> >
<div className="text-sm"> <div className="text-sm">
<span> <span>
<span className="font-bold"> <span className="font-bold">
{request.user?.firstName} {request.user?.lastName} ({request.user?.email}) {request.user?.firstName} {request.user?.lastName} ({request.user?.email})
</span>{" "} </span>{" "}
is requesting access to the following resource is requesting access to the following resource:
</span> </span>
<div className="mt-4"> <div className="mt-4 mb-2 bg-blue-500/20 px-3 py-2 border-l border-blue-500 text-mineshaft-200">
<div className="mb-2 lowercase"> <div className="mb-1 lowercase">
<span className="font-bold capitalize">Requested path: </span> <span className="font-bold capitalize">Requested path: </span>
<DisplayBadge text={accessDetails.env + accessDetails.secretPath || ""} /> <DisplayBadge text={accessDetails.env + accessDetails.secretPath || ""} />
</div> </div>
<div className="mb-2"> <div className="mb-1">
<span className="font-bold">Permissions: </span> <span className="font-bold">Permissions: </span>
<DisplayBadge text={requestedAccess} /> <DisplayBadge text={requestedAccess} />
</div> </div>
<div className="mb-2"> <div>
<span className="font-bold">Access Type: </span> <span className="font-bold">Access Type: </span>
<span>{getAccessLabel()}</span> <span>{getAccessLabel()}</span>
</div> </div>
@@ -188,7 +190,7 @@ const ReviewRequestModal = ({
isDisabled={!!isLoading} isDisabled={!!isLoading}
onClick={() => handleReview("approved")} onClick={() => handleReview("approved")}
className="mt-4" className="mt-4"
size="xs" size="sm"
> >
Approve Request Approve Request
</Button> </Button>
@@ -196,9 +198,8 @@ const ReviewRequestModal = ({
isLoading={isLoading === "rejected"} isLoading={isLoading === "rejected"}
isDisabled={!!isLoading} isDisabled={!!isLoading}
onClick={() => handleReview("rejected")} onClick={() => handleReview("rejected")}
className="mt-4" className="mt-4 bg-transparent border-transparent hover:bg-red/20 hover:border-red text-mineshaft-200 hover:text-mineshaft-200"
size="xs" size="sm"
colorSchema="danger"
> >
Reject Request Reject Request
</Button> </Button>
@@ -237,11 +238,11 @@ const generateRequestText = (request: TAccessApprovalRequest) => {
return ( return (
<span className="text-sm"> <span className="text-sm">
Requested {isTemporary ? "temporary" : "permanent"} access to{" "} Requested {isTemporary ? "temporary" : "permanent"} access to{" "}
<code className="mx-1 rounded-sm bg-primary-500 px-1.5 py-0.5 font-mono text-xs text-black"> <code className="mx-1 rounded-sm bg-primary-500/20 px-1.5 py-0.5 font-mono text-xs text-primary">
{request.policy.secretPath} {request.policy.secretPath}
</code> </code>
in in
<code className="mx-1 rounded-sm bg-primary-500 px-1.5 py-0.5 font-mono text-xs text-black"> <code className="mx-1 rounded-sm bg-primary-500/20 px-1.5 py-0.5 font-mono text-xs text-primary">
{request.environmentName} {request.environmentName}
</code> </code>
</span> </span>
@@ -362,9 +363,9 @@ export const AccessApprovalRequest = ({
return ( return (
<div> <div>
<div className="mb-6 flex justify-between"> <div className="mb-6 flex justify-between items-end">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-xl font-semibold text-mineshaft-100">Access Approval Requests</span> <span className="text-xl font-semibold text-mineshaft-100">Access Requests</span>
<div className="mt-2 text-sm text-bunker-300"> <div className="mt-2 text-sm text-bunker-300">
Request access to secrets in sensitive environments and folders. Request access to secrets in sensitive environments and folders.
</div> </div>
@@ -375,6 +376,7 @@ export const AccessApprovalRequest = ({
a={ProjectPermissionSub.SecretApproval} a={ProjectPermissionSub.SecretApproval}
> >
{(isAllowed) => ( {(isAllowed) => (
<Tooltip content="To submit Access Requests, your project needs to create Access Request policies first." isDisabled={!(!isAllowed || policiesLoading || !policies?.length)}>
<Button <Button
onClick={() => { onClick={() => {
if (subscription && !subscription?.secretApproval) { if (subscription && !subscription?.secretApproval) {
@@ -383,11 +385,12 @@ export const AccessApprovalRequest = ({
} }
handlePopUpOpen("requestAccess"); handlePopUpOpen("requestAccess");
}} }}
leftIcon={<FontAwesomeIcon icon={faLockOpen} />} leftIcon={<FontAwesomeIcon icon={faPlus} />}
isDisabled={!isAllowed || policiesLoading || !policies?.length} isDisabled={!isAllowed || policiesLoading || !policies?.length}
> >
Request access Request access
</Button> </Button>
</Tooltip>
)} )}
</ProjectPermissionCan> </ProjectPermissionCan>
</div> </div>
@@ -414,7 +417,7 @@ export const AccessApprovalRequest = ({
statusFilter === "close" ? "text-gray-500 duration-100 hover:text-gray-400" : "" statusFilter === "close" ? "text-gray-500 duration-100 hover:text-gray-400" : ""
} }
> >
<FontAwesomeIcon icon={faLockOpen} className="mr-2" /> <FontAwesomeIcon icon={faLock} className="mr-2" />
{!!requestCount && requestCount?.pendingCount} Pending {!!requestCount && requestCount?.pendingCount} Pending
</div> </div>
<div <div
@@ -493,7 +496,7 @@ export const AccessApprovalRequest = ({
</div> </div>
)} )}
{!!filteredRequests?.length && {!!filteredRequests?.length &&
filteredRequests?.map((request) => { requests?.map((request) => {
const details = generateRequestDetails(request); const details = generateRequestDetails(request);
return ( return (
@@ -524,7 +527,7 @@ export const AccessApprovalRequest = ({
> >
<div> <div>
<div className="mb-1"> <div className="mb-1">
<FontAwesomeIcon icon={faLockOpen} className="mr-2" /> <FontAwesomeIcon icon={faLock} className="mr-2" />
{generateRequestText(request)} {generateRequestText(request)}
</div> </div>
<span className="text-xs text-gray-500"> <span className="text-xs text-gray-500">
@@ -532,12 +535,6 @@ export const AccessApprovalRequest = ({
{membersGroupById?.[request.requestedBy]?.user?.firstName}{" "} {membersGroupById?.[request.requestedBy]?.user?.firstName}{" "}
{membersGroupById?.[request.requestedBy]?.user?.lastName} ( {membersGroupById?.[request.requestedBy]?.user?.lastName} (
{membersGroupById?.[request.requestedBy]?.user?.email}){" "} {membersGroupById?.[request.requestedBy]?.user?.email}){" "}
<span className="font-bold">
{details.isApprover &&
!details.isReviewedByUser &&
!details.isAccepted &&
"- Review required"}
</span>
</span> </span>
{details.isApprover && ( {details.isApprover && (