feat: updated ui based on review

This commit is contained in:
=
2025-06-12 15:31:41 +05:30
parent 2d4476f99c
commit e5fb1ac808
8 changed files with 102 additions and 35 deletions

View File

@@ -14,6 +14,17 @@ export async function up(knex: Knex): Promise<void> {
if (!hasApprovalRequiredColumn) t.integer("approvalsRequired").nullable();
});
}
// set rejected status for all access request that was rejected and still has status pending
await knex(TableName.AccessApprovalRequest)
.leftJoin(
TableName.AccessApprovalRequestReviewer,
`${TableName.AccessApprovalRequest}.id`,
`${TableName.AccessApprovalRequestReviewer}.requestId`
)
.where(`${TableName.AccessApprovalRequest}.status` as "status", "pending")
.where(`${TableName.AccessApprovalRequestReviewer}.status` as "status", "rejected")
.update(`${TableName.AccessApprovalRequest}.status` as "status", "rejected");
}
export async function down(knex: Knex): Promise<void> {

View File

@@ -42,7 +42,7 @@ type TAccessApprovalPolicyServiceFactoryDep = {
projectMembershipDAL: Pick<TProjectMembershipDALFactory, "find">;
groupDAL: TGroupDALFactory;
userDAL: Pick<TUserDALFactory, "find">;
accessApprovalRequestDAL: Pick<TAccessApprovalRequestDALFactory, "update" | "find">;
accessApprovalRequestDAL: Pick<TAccessApprovalRequestDALFactory, "update" | "find" | "resetReviewByPolicyId">;
additionalPrivilegeDAL: Pick<TProjectUserAdditionalPrivilegeDALFactory, "delete">;
accessApprovalRequestReviewerDAL: Pick<TAccessApprovalRequestReviewerDALFactory, "update" | "delete">;
orgMembershipDAL: Pick<TOrgMembershipDALFactory, "find">;
@@ -481,6 +481,8 @@ export const accessApprovalPolicyServiceFactory = ({
);
}
await accessApprovalRequestDAL.resetReviewByPolicyId(doc.id, tx);
return doc;
});
return {

View File

@@ -173,8 +173,7 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
permissions: doc.privilegePermissions
}
: null,
isApproved: !!doc.policyDeletedAt || !!doc.privilegeId || doc.status !== ApprovalStatus.PENDING
isApproved: doc.status === ApprovalStatus.APPROVED
}),
childrenMapper: [
{
@@ -556,5 +555,27 @@ export const accessApprovalRequestDALFactory = (db: TDbClient) => {
}
};
return { ...accessApprovalRequestOrm, findById, findRequestsWithPrivilegeByPolicyIds, getCount };
const resetReviewByPolicyId = async (policyId: string, tx?: Knex) => {
try {
await (tx || db)(TableName.AccessApprovalRequestReviewer)
.leftJoin(
TableName.AccessApprovalRequest,
`${TableName.AccessApprovalRequest}.id`,
`${TableName.AccessApprovalRequestReviewer}.requestId`
)
.where(`${TableName.AccessApprovalRequest}.status` as "status", ApprovalStatus.PENDING)
.where(`${TableName.AccessApprovalRequest}.policyId` as "policyId", policyId)
.del();
} catch (error) {
throw new DatabaseError({ error, name: "ResetReviewByPolicyId" });
}
};
return {
...accessApprovalRequestOrm,
findById,
findRequestsWithPrivilegeByPolicyIds,
getCount,
resetReviewByPolicyId
};
};

View File

@@ -380,9 +380,10 @@ export const accessApprovalRequestServiceFactory = ({
}
const existingReviews = await accessApprovalRequestReviewerDAL.find({ requestId: accessApprovalRequest.id });
if (existingReviews.some((review) => review.status === ApprovalStatus.REJECTED)) {
throw new BadRequestError({ message: "The request has already been rejected by another reviewer" });
if (accessApprovalRequest.status !== ApprovalStatus.PENDING) {
throw new BadRequestError({ message: "The request has been closed" });
}
const reviewsGroupById = groupBy(
existingReviews.filter((review) => review.status === ApprovalStatus.APPROVED),
(i) => i.reviewerUserId

View File

@@ -14,8 +14,8 @@ This functionality works in the following way:
A step policy enables a sequential approval workflow in which approvals
must follow the designated chain.
</Note>
![Access Request
Policies](/images/platform/access-controls/access-request-policies.png)
![Access Request Policies](/images/platform/access-controls/access-request-policies.png)
2. When a developer requests access to one of such sensitive resources, the request is visible in the dashboard, and the corresponding eligible approvers get an email notification about it.
![Access Request Create](/images/platform/access-controls/request-access.png)

View File

@@ -1,5 +1,6 @@
import { EnforcementLevel, PolicyType } from "../policies/enums";
import { TProjectPermission } from "../roles/types";
import { ApprovalStatus } from "../secretApprovalRequest/types";
import { WorkspaceEnv } from "../workspace/types";
export type TAccessApprovalPolicy = {
@@ -75,7 +76,7 @@ export type TAccessApprovalRequest = {
permissions: TProjectPermission[];
isApproved: boolean;
} | null;
status: ApprovalStatus;
policy: {
id: string;
name: string;

View File

@@ -398,11 +398,9 @@ export const AccessApprovalRequest = ({
)}
</div>
<div>
{details.isApprover && (
<Badge variant={details.displayData.type}>
{details.displayData.label}
</Badge>
)}
<Badge variant={details.displayData.type}>
{details.displayData.label}
</Badge>
</div>
</div>
</div>

View File

@@ -212,15 +212,40 @@ export const ReviewAccessRequestModal = ({
(approverChain?.approvals || 1);
const hasRejected = reviewers.filter((el) => el.status === ApprovalStatus.REJECTED).length;
return { ...approverChain, reviewers, hasApproved, hasRejected };
});
return { approvers, membersGroupById, projectGroupsGroupById };
const currentSequenceApprover = approvers?.find((el) => !el.hasApproved);
const currentSequence = currentSequenceApprover?.sequence || 1;
const isMyReviewInThisSequence = currentSequenceApprover?.reviewers.find(
(i) => i.userId === user.id
);
return {
approvers,
membersGroupById,
projectGroupsGroupById,
currentSequence,
isMyReviewInThisSequence
};
}, [request, policies]);
const hasRejected = request.reviewers.find((el) => el.status === ApprovalStatus.REJECTED);
const hasRejected = request.status === ApprovalStatus.REJECTED;
const hasApproved = request.status === ApprovalStatus.APPROVED;
const isReviewedByMe = request.reviewers.find((i) => i.userId === user.id);
const shouldBlockRequestActions =
hasRejected ||
hasApproved ||
isReviewedByMe ||
(!approverSequence?.isMyReviewInThisSequence && !canBypass);
const renderCompletedMessages = () => {
if (hasRejected) return "This request has been rejected.";
if (hasApproved) return "This request has been approved.";
if (isReviewedByMe) return "You have reviewed this request.";
return "You are not the reviewer in this step.";
};
return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<ModalContent
@@ -270,22 +295,27 @@ export const ReviewAccessRequestModal = ({
{approverSequence?.approvers?.map((approver, index) => (
<div
key={`approval-list-${index + 1}`}
className="relative mb-2 flex rounded border border-mineshaft-500 bg-mineshaft-700 p-4"
className={twMerge(
"relative mb-2 flex items-center rounded border border-mineshaft-500 bg-mineshaft-700 p-4",
approverSequence?.currentSequence !== approver.sequence &&
!hasApproved &&
"text-mineshaft-400"
)}
>
<div>
<div
className={twMerge(
"mr-8 flex h-8 w-8 items-center justify-center border border-bunker-300 bg-bunker-800 text-white",
"mr-8 flex h-8 w-8 items-center justify-center text-3xl font-medium",
approver.hasApproved && "border-green-400 text-green-400",
approver.hasRejected && "border-red-500 text-red-500"
)}
>
<div className="text-lg">{index + 1}</div>
{index + 1}
</div>
{index !== (approverSequence?.approvers?.length || 0) - 1 && (
<div
className={twMerge(
"absolute bottom-0 left-8 h-6 border-r border-gray-400",
"absolute bottom-0 left-8 h-5 border-r-2 border-gray-400",
approver.hasApproved && "border-green-400",
approver.hasRejected && "border-red-500"
)}
@@ -294,7 +324,7 @@ export const ReviewAccessRequestModal = ({
{index !== 0 && (
<div
className={twMerge(
"absolute left-8 top-0 h-4 border-r border-gray-400",
"absolute left-8 top-0 h-5 border-r-2 border-gray-400",
approver.hasApproved && "border-green-400",
approver.hasRejected && "border-red-500"
)}
@@ -331,20 +361,17 @@ export const ReviewAccessRequestModal = ({
<div className="ml-16">
<Popover>
<PopoverTrigger>
<FontAwesomeIcon
icon={faUsers}
className={twMerge(
approver.hasApproved && "border-green-400 text-green-400",
approver.hasRejected && "border-red-500 text-red-500"
)}
/>
<FontAwesomeIcon icon={faUsers} />
</PopoverTrigger>
<PopoverContent hideCloseBtn className="pt-3">
<div>
<div className="mb-1 text-sm text-bunker-300">Reviewers</div>
<div className="thin-scrollbar flex max-h-64 flex-col gap-1 overflow-y-auto rounded">
{approver.reviewers.map((el, idx) => (
<div key={`reviewer-${idx}`} className="flex items-center gap-2 bg-mineshaft-700 p-1 text-sm">
<div
key={`reviewer-${idx + 1}`}
className="flex items-center gap-2 bg-mineshaft-700 p-1 text-sm"
>
<div className="flex-grow">{el.username}</div>
<Tooltip
content={`Status: ${el?.status || ApprovalStatus.PENDING}`}
@@ -363,16 +390,22 @@ export const ReviewAccessRequestModal = ({
</div>
))}
</div>
{hasRejected || isReviewedByMe ? (
{approverSequence.isMyReviewInThisSequence &&
request.status === ApprovalStatus.PENDING && (
<div className="mb-4 rounded-r border-l-2 border-l-primary-400 bg-mineshaft-300/5 px-4 py-2.5 text-sm">
Awaiting review from you.
</div>
)}
{shouldBlockRequestActions ? (
<div
className={twMerge(
"mb-4 rounded-r border-l-2 border-l-red-500 bg-mineshaft-300/5 px-4 py-2.5 text-sm",
isReviewedByMe && "border-l-green-400"
isReviewedByMe && "border-l-green-400",
!approverSequence.isMyReviewInThisSequence && "border-l-primary-400",
hasRejected && "border-l-red-500"
)}
>
{isReviewedByMe
? "You have reviewed this request."
: "This request has been rejected."}
{renderCompletedMessages()}
</div>
) : (
<>