Allow project approval workflows to set if a reviewer can or can not review their own requests

2026-10-14 22:51:53 +00:00 · 2025-03-24 18:08:07 -03:00
parent f9a5b46365
commit 871be7132a
22 changed files with 316 additions and 182 deletions
@@ -23,7 +23,8 @@ export const useCreateAccessApprovalPolicy = () => {
      approvers,
      name,
      secretPath,
-      enforcementLevel
+      enforcementLevel,
+      selfApprovals
    }) => {
      const { data } = await apiRequest.post("/api/v1/access-approvals/policies", {
        environment,
@@ -32,7 +33,8 @@ export const useCreateAccessApprovalPolicy = () => {
        approvers,
        secretPath,
        name,
-        enforcementLevel
+        enforcementLevel,
+        selfApprovals
      });
      return data;
    },
@@ -48,13 +50,22 @@ export const useUpdateAccessApprovalPolicy = () => {
  const queryClient = useQueryClient();

  return useMutation<object, object, TUpdateAccessPolicyDTO>({
-    mutationFn: async ({ id, approvers, approvals, name, secretPath, enforcementLevel }) => {
+    mutationFn: async ({
+      id,
+      approvers,
+      approvals,
+      name,
+      secretPath,
+      enforcementLevel,
+      selfApprovals
+    }) => {
      const { data } = await apiRequest.patch(`/api/v1/access-approvals/policies/${id}`, {
        approvals,
        approvers,
        secretPath,
        name,
-        enforcementLevel
+        enforcementLevel,
+        selfApprovals
      });
      return data;
    },
@@ -16,6 +16,7 @@ export type TAccessApprovalPolicy = {
  enforcementLevel: EnforcementLevel;
  updatedAt: Date;
  approvers?: Approver[];
+  selfApprovals: boolean;
 };

 export enum ApproverType {
@@ -71,6 +72,7 @@ export type TAccessApprovalRequest = {
    envId: string;
    enforcementLevel: EnforcementLevel;
    deletedAt: Date | null;
+    selfApprovals: boolean;
  };

  reviewers: {
@@ -144,6 +146,7 @@ export type TCreateAccessPolicyDTO = {
  approvals?: number;
  secretPath?: string;
  enforcementLevel?: EnforcementLevel;
+  selfApprovals: boolean;
 };

 export type TUpdateAccessPolicyDTO = {
@@ -154,6 +157,7 @@ export type TUpdateAccessPolicyDTO = {
  environment?: string;
  approvals?: number;
  enforcementLevel?: EnforcementLevel;
+  selfApprovals: boolean;
  // for invalidating list
  projectSlug: string;
 };
@@ -16,7 +16,8 @@ export const useCreateSecretApprovalPolicy = () => {
      approvers,
      secretPath,
      name,
-      enforcementLevel
+      enforcementLevel,
+      selfApprovals
    }) => {
      const { data } = await apiRequest.post("/api/v1/secret-approvals", {
        environment,
@@ -25,7 +26,8 @@ export const useCreateSecretApprovalPolicy = () => {
        approvers,
        secretPath,
        name,
-        enforcementLevel
+        enforcementLevel,
+        selfApprovals
      });
      return data;
    },
@@ -41,13 +43,22 @@ export const useUpdateSecretApprovalPolicy = () => {
  const queryClient = useQueryClient();

  return useMutation<object, object, TUpdateSecretPolicyDTO>({
-    mutationFn: async ({ id, approvers, approvals, secretPath, name, enforcementLevel }) => {
+    mutationFn: async ({
+      id,
+      approvers,
+      approvals,
+      secretPath,
+      name,
+      enforcementLevel,
+      selfApprovals
+    }) => {
      const { data } = await apiRequest.patch(`/api/v1/secret-approvals/${id}`, {
        approvals,
        approvers,
        secretPath,
        name,
-        enforcementLevel
+        enforcementLevel,
+        selfApprovals
      });
      return data;
    },
@@ -12,6 +12,7 @@ export type TSecretApprovalPolicy = {
  approvers: Approver[];
  updatedAt: Date;
  enforcementLevel: EnforcementLevel;
+  selfApprovals: boolean;
 };

 export enum ApproverType {
@@ -42,6 +43,7 @@ export type TCreateSecretPolicyDTO = {
  approvers?: Approver[];
  approvals?: number;
  enforcementLevel: EnforcementLevel;
+  selfApprovals: boolean;
 };

 export type TUpdateSecretPolicyDTO = {
@@ -50,6 +52,7 @@ export type TUpdateSecretPolicyDTO = {
  approvers?: Approver[];
  secretPath?: string | null;
  approvals?: number;
+  selfApprovals?: boolean;
  enforcementLevel?: EnforcementLevel;
  // for invalidating list
  workspaceId: string;
@@ -152,7 +152,7 @@ export const AccessApprovalRequest = ({
    const isAccepted = request.isApproved;
    const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
    const isRequestedByCurrentUser = request.requestedByUserId === user.id;
-
+    const isSelfApproveAllowed = request.policy.selfApprovals;
    const userReviewStatus = request.reviewers.find(({ member }) => member === user.id)?.status;

    let displayData: { label: string; type: "primary" | "danger" | "success" } = {
@@ -189,7 +189,8 @@ export const AccessApprovalRequest = ({
      userReviewStatus,
      isAccepted,
      isSoftEnforcement,
-      isRequestedByCurrentUser
+      isRequestedByCurrentUser,
+      isSelfApproveAllowed
    };
  };

@@ -342,15 +343,16 @@ export const AccessApprovalRequest = ({
                    tabIndex={0}
                    onClick={() => {
                      if (
-                        (!details.isApprover ||
+                        ((!details.isApprover ||
                          details.isReviewedByUser ||
                          details.isRejectedByAnyone ||
                          details.isAccepted) &&
-                        !(
-                          details.isSoftEnforcement &&
-                          details.isRequestedByCurrentUser &&
-                          !details.isAccepted
-                        )
+                          !(
+                            details.isSoftEnforcement &&
+                            details.isRequestedByCurrentUser &&
+                            !details.isAccepted
+                          )) ||
+                        (request.requestedByUserId === user.id && !details.isSelfApproveAllowed)
                      )
                        return;
                      if (membersGroupById?.[request.requestedByUserId].user) {
@@ -12,7 +12,8 @@ import {
  Modal,
  ModalContent,
  Select,
-  SelectItem
+  SelectItem,
+  Switch
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { getMemberLabel } from "@app/helpers/members";
@@ -54,7 +55,8 @@ const formSchema = z
      .array()
      .default([]),
    policyType: z.nativeEnum(PolicyType),
-    enforcementLevel: z.nativeEnum(EnforcementLevel)
+    enforcementLevel: z.nativeEnum(EnforcementLevel),
+    selfApprovals: z.boolean().default(true)
  })
  .superRefine((data, ctx) => {
    if (!(data.groupApprovers.length || data.userApprovers.length)) {
@@ -101,7 +103,8 @@ export const AccessPolicyForm = ({
            editValues?.approvers
              ?.filter((approver) => approver.type === ApproverType.Group)
              .map(({ id, type }) => ({ id, type: type as ApproverType.Group })) || [],
-          approvals: editValues?.approvals
+          approvals: editValues?.approvals,
+          selfApprovals: editValues?.selfApprovals
        }
      : undefined
  });
@@ -441,6 +444,27 @@ export const AccessPolicyForm = ({
                </FormControl>
              )}
            />
+            <Controller
+              control={control}
+              name="selfApprovals"
+              defaultValue
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Self Approvals"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Switch
+                    id="self-approvals"
+                    thumbClassName="bg-mineshaft-800"
+                    isChecked={value}
+                    onCheckedChange={onChange}
+                  >
+                    Allow approvers to review their own requests
+                  </Switch>
+                </FormControl>
+              )}
+            />
            <div className="mt-8 flex items-center space-x-4">
              <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
                Save
@@ -127,7 +127,9 @@ export const SecretApprovalRequestChanges = ({
  } = useForm<TReviewFormSchema>({
    resolver: zodResolver(reviewFormSchema)
  });
-
+  const shouldBlockSelfReview =
+    secretApprovalRequestDetails?.policy?.selfApprovals === false &&
+    secretApprovalRequestDetails?.committerUserId === userSession.id;
  const isApproving = variables?.status === ApprovalStatus.APPROVED && isUpdatingRequestStatus;
  const isRejecting = variables?.status === ApprovalStatus.REJECTED && isUpdatingRequestStatus;

@@ -245,117 +247,119 @@ export const SecretApprovalRequestChanges = ({
              </div>
            </div>
          </div>
-          {!hasMerged && secretApprovalRequestDetails.status === "open" && (
-            <DropdownMenu
-              open={popUp.reviewChanges.isOpen}
-              onOpenChange={(isOpen) => handlePopUpToggle("reviewChanges", isOpen)}
-            >
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline_bg"
-                  rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
-                >
-                  Review
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" asChild className="mt-3">
-                <form onSubmit={handleSubmit(handleSubmitReview)}>
-                  <div className="flex w-[400px] flex-col space-y-2 p-5">
-                    <div className="text-lg font-medium">Finish your review</div>
-                    <Controller
-                      control={control}
-                      name="comment"
-                      render={({ field, fieldState: { error } }) => (
-                        <FormControl errorText={error?.message} isError={Boolean(error)}>
-                          <TextArea
-                            {...field}
-                            placeholder="Leave a comment..."
-                            reSize="none"
-                            className="text-md mt-2 h-48 border border-mineshaft-600 bg-bunker-800"
-                          />
-                        </FormControl>
-                      )}
-                    />
-                    <Controller
-                      control={control}
-                      name="status"
-                      defaultValue={ApprovalStatus.APPROVED}
-                      render={({ field, fieldState: { error } }) => (
-                        <FormControl errorText={error?.message} isError={Boolean(error)}>
-                          <RadioGroup
-                            value={field.value}
-                            onValueChange={field.onChange}
-                            className="mb-4 space-y-2"
-                            aria-label="Status"
-                          >
-                            <div className="flex items-center gap-2">
-                              <RadioGroupItem
-                                id="approve"
-                                className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
-                                value={ApprovalStatus.APPROVED}
-                                aria-labelledby="approve-label"
-                              >
-                                <RadioGroupIndicator className="flex h-full w-full items-center justify-center after:h-2 after:w-2 after:rounded-full after:bg-current" />
-                              </RadioGroupItem>
-                              <span
-                                id="approve-label"
-                                className="cursor-pointer"
-                                onClick={() => field.onChange(ApprovalStatus.APPROVED)}
-                                onKeyDown={(e) => {
-                                  if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
-                                    field.onChange(ApprovalStatus.APPROVED);
-                                  }
-                                }}
-                                tabIndex={0}
-                                role="button"
-                              >
-                                Approve
-                              </span>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              <RadioGroupItem
-                                id="reject"
-                                className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
-                                value={ApprovalStatus.REJECTED}
-                                aria-labelledby="reject-label"
-                              >
-                                <RadioGroupIndicator className="flex h-full w-full items-center justify-center after:h-2 after:w-2 after:rounded-full after:bg-current" />
-                              </RadioGroupItem>
-                              <span
-                                id="reject-label"
-                                className="cursor-pointer"
-                                onClick={() => field.onChange(ApprovalStatus.REJECTED)}
-                                onKeyDown={(e) => {
-                                  if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
-                                    field.onChange(ApprovalStatus.REJECTED);
-                                  }
-                                }}
-                                tabIndex={0}
-                                role="button"
-                              >
-                                Reject
-                              </span>
-                            </div>
-                          </RadioGroup>
-                        </FormControl>
-                      )}
-                    />
-                    <div className="flex justify-end">
-                      <Button
-                        type="submit"
-                        isLoading={isApproving || isRejecting || isSubmitting}
-                        variant="outline_bg"
-                      >
-                        Submit Review
-                      </Button>
+          {!hasMerged &&
+            secretApprovalRequestDetails.status === "open" &&
+            !shouldBlockSelfReview && (
+              <DropdownMenu
+                open={popUp.reviewChanges.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("reviewChanges", isOpen)}
+              >
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline_bg"
+                    rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
+                  >
+                    Review
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" asChild className="mt-3">
+                  <form onSubmit={handleSubmit(handleSubmitReview)}>
+                    <div className="flex w-[400px] flex-col space-y-2 p-5">
+                      <div className="text-lg font-medium">Finish your review</div>
+                      <Controller
+                        control={control}
+                        name="comment"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl errorText={error?.message} isError={Boolean(error)}>
+                            <TextArea
+                              {...field}
+                              placeholder="Leave a comment..."
+                              reSize="none"
+                              className="text-md mt-2 h-48 border border-mineshaft-600 bg-bunker-800"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="status"
+                        defaultValue={ApprovalStatus.APPROVED}
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl errorText={error?.message} isError={Boolean(error)}>
+                            <RadioGroup
+                              value={field.value}
+                              onValueChange={field.onChange}
+                              className="mb-4 space-y-2"
+                              aria-label="Status"
+                            >
+                              <div className="flex items-center gap-2">
+                                <RadioGroupItem
+                                  id="approve"
+                                  className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
+                                  value={ApprovalStatus.APPROVED}
+                                  aria-labelledby="approve-label"
+                                >
+                                  <RadioGroupIndicator className="flex h-full w-full items-center justify-center after:h-2 after:w-2 after:rounded-full after:bg-current" />
+                                </RadioGroupItem>
+                                <span
+                                  id="approve-label"
+                                  className="cursor-pointer"
+                                  onClick={() => field.onChange(ApprovalStatus.APPROVED)}
+                                  onKeyDown={(e) => {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                      e.preventDefault();
+                                      field.onChange(ApprovalStatus.APPROVED);
+                                    }
+                                  }}
+                                  tabIndex={0}
+                                  role="button"
+                                >
+                                  Approve
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <RadioGroupItem
+                                  id="reject"
+                                  className="h-4 w-4 rounded-full border border-gray-300 text-primary focus:ring-2 focus:ring-mineshaft-500"
+                                  value={ApprovalStatus.REJECTED}
+                                  aria-labelledby="reject-label"
+                                >
+                                  <RadioGroupIndicator className="flex h-full w-full items-center justify-center after:h-2 after:w-2 after:rounded-full after:bg-current" />
+                                </RadioGroupItem>
+                                <span
+                                  id="reject-label"
+                                  className="cursor-pointer"
+                                  onClick={() => field.onChange(ApprovalStatus.REJECTED)}
+                                  onKeyDown={(e) => {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                      e.preventDefault();
+                                      field.onChange(ApprovalStatus.REJECTED);
+                                    }
+                                  }}
+                                  tabIndex={0}
+                                  role="button"
+                                >
+                                  Reject
+                                </span>
+                              </div>
+                            </RadioGroup>
+                          </FormControl>
+                        )}
+                      />
+                      <div className="flex justify-end">
+                        <Button
+                          type="submit"
+                          isLoading={isApproving || isRejecting || isSubmitting}
+                          variant="outline_bg"
+                        >
+                          Submit Review
+                        </Button>
+                      </div>
                    </div>
-                  </div>
-                </form>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
+                  </form>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
        </div>
        <div className="flex flex-col space-y-4">
          {secretApprovalRequestDetails.commits.map(
@@ -422,40 +426,45 @@ export const SecretApprovalRequestChanges = ({
      <div className="sticky top-0 w-1/5 pt-4" style={{ minWidth: "240px" }}>
        <div className="text-sm text-bunker-300">Reviewers</div>
        <div className="mt-2 flex flex-col space-y-2 text-sm">
-          {secretApprovalRequestDetails?.policy?.approvers.map((requiredApprover) => {
-            const reviewer = reviewedUsers?.[requiredApprover.userId];
-            return (
-              <div
-                className="flex flex-nowrap items-center space-x-2 rounded bg-mineshaft-800 px-2 py-1"
-                key={`required-approver-${requiredApprover.userId}`}
-              >
-                <div className="flex-grow text-sm">
-                  <Tooltip
-                    content={`${requiredApprover.firstName || ""} ${
-                      requiredApprover.lastName || ""
-                    }`}
-                  >
-                    <span>{requiredApprover?.email} </span>
-                  </Tooltip>
-                  <span className="text-red">*</span>
-                </div>
-                <div>
-                  {reviewer?.comment && (
-                    <Tooltip content={reviewer.comment}>
-                      <FontAwesomeIcon
-                        icon={faComment}
-                        size="xs"
-                        className="mr-1 text-mineshaft-300"
-                      />
+          {secretApprovalRequestDetails?.policy?.approvers
+            .filter(
+              (requiredApprover) =>
+                !(shouldBlockSelfReview && requiredApprover.userId === userSession.id)
+            )
+            .map((requiredApprover) => {
+              const reviewer = reviewedUsers?.[requiredApprover.userId];
+              return (
+                <div
+                  className="flex flex-nowrap items-center space-x-2 rounded bg-mineshaft-800 px-2 py-1"
+                  key={`required-approver-${requiredApprover.userId}`}
+                >
+                  <div className="flex-grow text-sm">
+                    <Tooltip
+                      content={`${requiredApprover.firstName || ""} ${
+                        requiredApprover.lastName || ""
+                      }`}
+                    >
+                      <span>{requiredApprover?.email} </span>
                    </Tooltip>
-                  )}
-                  <Tooltip content={reviewer?.status || ApprovalStatus.PENDING}>
-                    {getReviewedStatusSymbol(reviewer?.status)}
-                  </Tooltip>
+                    <span className="text-red">*</span>
+                  </div>
+                  <div>
+                    {reviewer?.comment && (
+                      <Tooltip content={reviewer.comment}>
+                        <FontAwesomeIcon
+                          icon={faComment}
+                          size="xs"
+                          className="mr-1 text-mineshaft-300"
+                        />
+                      </Tooltip>
+                    )}
+                    <Tooltip content={reviewer?.status || ApprovalStatus.PENDING}>
+                      {getReviewedStatusSymbol(reviewer?.status)}
+                    </Tooltip>
+                  </div>
                </div>
-              </div>
-            );
-          })}
+              );
+            })}
          {secretApprovalRequestDetails?.reviewers
            .filter(
              (reviewer) =>