Skip to content

Commit

Permalink
style changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@vmatsiiako
vmatsiiako committed Apr 4, 2024
1 parent 20caca7 commit b9a9542
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 45 deletions.
8 changes: 4 additions & 4 deletions frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,11 @@ export const SecretApprovalPage = () => {
</div>
<Tabs defaultValue={TabSection.SecretApprovalRequests}>
<TabList>
<Tab value={TabSection.SecretApprovalRequests}>Secret Approvals</Tab>
<Tab value={TabSection.SecretPolicies}>Secret Policies</Tab>
<Tab value={TabSection.SecretApprovalRequests}>Change Requests</Tab>
<Tab value={TabSection.SecretPolicies}>Change Request Policies</Tab>
<Divider />
<Tab value={TabSection.ResourceApprovalRequests}>Access Approvals</Tab>
<Tab value={TabSection.ResourcePolicies}>Access Policies</Tab>
<Tab value={TabSection.ResourceApprovalRequests}>Access Requests</Tab>
<Tab value={TabSection.ResourcePolicies}>Access Request Policies</Tab>
</TabList>
<TabPanel value={TabSection.SecretApprovalRequests}>
<SecretApprovalRequest />
Expand Down
6 changes: 3 additions & 3 deletions ...views/SecretApprovalPage/components/AccessApprovalPolicyList/AccessApprovalPolicyList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,11 @@ export const AccessApprovalPolicyList = ({ workspaceId }: IProps) => {

return (
<div>
<div className="mb-6 flex justify-between">
<div className="mb-6 flex justify-between items-end">
<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">
Implement policies to prevent unauthorized secret changes.
Implement secret request policies for specific secrets and environments.
</div>
</div>
<div>
Expand Down
73 changes: 35 additions & 38 deletions ...d/src/views/SecretApprovalPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
faCheck,
faCheckCircle,
faChevronDown,
faLockOpen
faLock,
faPlus
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { formatDistance } from "date-fns";
Expand All @@ -25,6 +26,7 @@ import {
EmptyState,
Modal,
ModalContent,
Tooltip,
UpgradePlanModal
} from "@app/components/v2";
import {
Expand All @@ -51,7 +53,7 @@ const DisplayBadge = ({ text, className }: { text: string; className?: string })
return (
<div
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
)}
>
Expand Down Expand Up @@ -155,28 +157,28 @@ const ReviewRequestModal = ({
<ModalContent
className="max-w-4xl"
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">
<span>
<span className="font-bold">
{request.user?.firstName} {request.user?.lastName} ({request.user?.email})
</span>{" "}
is requesting access to the following resource
is requesting access to the following resource:
</span>

<div className="mt-4">
<div className="mb-2 lowercase">
<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-1 lowercase">
<span className="font-bold capitalize">Requested path: </span>
<DisplayBadge text={accessDetails.env + accessDetails.secretPath || ""} />
</div>

<div className="mb-2">
<div className="mb-1">
<span className="font-bold">Permissions: </span>
<DisplayBadge text={requestedAccess} />
</div>

<div className="mb-2">
<div>
<span className="font-bold">Access Type: </span>
<span>{getAccessLabel()}</span>
</div>
Expand All @@ -188,17 +190,16 @@ const ReviewRequestModal = ({
isDisabled={!!isLoading}
onClick={() => handleReview("approved")}
className="mt-4"
size="xs"
size="sm"
>
Approve Request
</Button>
<Button
isLoading={isLoading === "rejected"}
isDisabled={!!isLoading}
onClick={() => handleReview("rejected")}
className="mt-4"
size="xs"
colorSchema="danger"
className="mt-4 bg-transparent border-transparent hover:bg-red/20 hover:border-red text-mineshaft-200 hover:text-mineshaft-200"
size="sm"
>
Reject Request
</Button>
Expand Down Expand Up @@ -237,11 +238,11 @@ const generateRequestText = (request: TAccessApprovalRequest) => {
return (
<span className="text-sm">
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}
</code>
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}
</code>
</span>
Expand Down Expand Up @@ -362,9 +363,9 @@ export const AccessApprovalRequest = ({

return (
<div>
<div className="mb-6 flex justify-between">
<div className="mb-6 flex justify-between items-end">
<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">
Request access to secrets in sensitive environments and folders.
</div>
Expand All @@ -375,19 +376,21 @@ export const AccessApprovalRequest = ({
a={ProjectPermissionSub.SecretApproval}
>
{(isAllowed) => (
<Button
onClick={() => {
if (subscription && !subscription?.secretApproval) {
handlePopUpOpen("upgradePlan");
return;
}
handlePopUpOpen("requestAccess");
}}
leftIcon={<FontAwesomeIcon icon={faLockOpen} />}
isDisabled={!isAllowed || policiesLoading || !policies?.length}
>
Request access
</Button>
<Tooltip content="To submit Access Requests, your project needs to create Access Request policies first." isDisabled={!(!isAllowed || policiesLoading || !policies?.length)}>
<Button
onClick={() => {
if (subscription && !subscription?.secretApproval) {
handlePopUpOpen("upgradePlan");
return;
}
handlePopUpOpen("requestAccess");
}}
leftIcon={<FontAwesomeIcon icon={faPlus} />}
isDisabled={!isAllowed || policiesLoading || !policies?.length}
>
Request access
</Button>
</Tooltip>
)}
</ProjectPermissionCan>
</div>
Expand All @@ -414,7 +417,7 @@ export const AccessApprovalRequest = ({
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
</div>
<div
Expand Down Expand Up @@ -493,7 +496,7 @@ export const AccessApprovalRequest = ({
</div>
)}
{!!filteredRequests?.length &&
filteredRequests?.map((request) => {
requests?.map((request) => {
const details = generateRequestDetails(request);

return (
Expand Down Expand Up @@ -524,20 +527,14 @@ export const AccessApprovalRequest = ({
>
<div>
<div className="mb-1">
<FontAwesomeIcon icon={faLockOpen} className="mr-2" />
<FontAwesomeIcon icon={faLock} className="mr-2" />
{generateRequestText(request)}
</div>
<span className="text-xs text-gray-500">
Requested {formatDistance(new Date(request.createdAt), new Date())} ago by{" "}
{membersGroupById?.[request.requestedBy]?.user?.firstName}{" "}
{membersGroupById?.[request.requestedBy]?.user?.lastName} (
{membersGroupById?.[request.requestedBy]?.user?.email}){" "}
<span className="font-bold">
{details.isApprover &&
!details.isReviewedByUser &&
!details.isAccepted &&
"- Review required"}
</span>
</span>

{details.isApprover && (
Expand Down

0 comments on commit b9a9542

Please sign in to comment.