Merge branch 'main' into feat/secretsBatchUI

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx

@@ -255,6 +255,11 @@ export const ReviewAccessRequestModal = ({
     return "You are not the reviewer in this step.";
   };
 
+  // users can always reject (cancel) their own request
+  const isRejectionDisabled = request.isRequestedByCurrentUser
+    ? false
+    : !(request.isApprover && request.isSelfApproveAllowed) && !bypassApproval;
+
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
@@ -445,7 +450,7 @@ export const ReviewAccessRequestModal = ({
                     onCheckedChange={(checked) => setBypassApproval(checked === true)}
                     isChecked={bypassApproval}
                     id="byPassApproval"
-                    className={twMerge("mr-2", bypassApproval ? "!border-red/30 !bg-red/10" : "")}
+                    className={twMerge("mr-2", bypassApproval ? "!border-red/50 !bg-red/30" : "")}
                   >
                     <span className="text-xs text-red">
                       Approve without waiting for requirements to be met (bypass policy protection)
@@ -489,14 +494,7 @@ export const ReviewAccessRequestModal = ({
                 </Button>
                 <Button
                   isLoading={isLoading === "rejected"}
-                  isDisabled={
-                    !!isLoading ||
-                    (!(
-                      request.isApprover &&
-                      (!request.isRequestedByCurrentUser || request.isSelfApproveAllowed)
-                    ) &&
-                      !bypassApproval)
-                  }
+                  isDisabled={!!isLoading || isRejectionDisabled}
                   onClick={() => handleReview("rejected")}
                   className="mt-4 border-transparent bg-transparent text-mineshaft-200 hover:border-red hover:bg-red/20 hover:text-mineshaft-200"
                   size="sm"

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -21,6 +21,7 @@ import {
   Tag,
   Tooltip
 } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useWorkspace } from "@app/context";
 import { getMemberLabel } from "@app/helpers/members";
 import { policyDetails } from "@app/helpers/policies";
@@ -203,6 +204,7 @@ const Form = ({
 
   const formUserBypassers = watch("userBypassers");
   const formGroupBypassers = watch("groupBypassers");
+  const formEnvironment = watch("environment")?.slug;
   const bypasserCount = (formUserBypassers || []).length + (formGroupBypassers || []).length;
 
   const handleCreatePolicy = async ({
@@ -474,7 +476,11 @@ const Form = ({
                 errorText={error?.message}
                 className="flex-1"
               >
-                <Input {...field} value={field.value || ""} />
+                <SecretPathInput
+                  {...field}
+                  value={field.value || ""}
+                  environment={formEnvironment}
+                />
               </FormControl>
             )}
           />

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx

@@ -6,16 +6,19 @@ import {
   faCheckCircle,
   faChevronDown,
   faCodeBranch,
+  faCodeMerge,
   faMagnifyingGlass,
-  faSearch
+  faSearch,
+  faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSearch } from "@tanstack/react-router";
-import { formatDistance } from "date-fns";
+import { format, formatDistance } from "date-fns";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import {
+  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -25,7 +28,8 @@ import {
   EmptyState,
   Input,
   Pagination,
-  Skeleton
+  Skeleton,
+  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
@@ -308,7 +312,9 @@ export const SecretApprovalRequest = () => {
                   createdAt,
                   reviewers,
                   status,
-                  committerUser
+                  committerUser,
+                  hasMerged,
+                  updatedAt
                 } = secretApproval;
                 const isReviewed = reviewers.some(
                   ({ status: reviewStatus, userId }) =>
@@ -317,7 +323,7 @@ export const SecretApprovalRequest = () => {
                 return (
                   <div
                     key={reqId}
-                    className="flex flex-col border-b border-mineshaft-600 px-8 py-3 last:border-b-0 hover:bg-mineshaft-700"
+                    className="flex border-b border-mineshaft-600 px-8 py-3 last:border-b-0 hover:bg-mineshaft-700"
                     role="button"
                     tabIndex={0}
                     onClick={() => setSelectedApprovalId(secretApproval.id)}
@@ -325,23 +331,46 @@ export const SecretApprovalRequest = () => {
                       if (evt.key === "Enter") setSelectedApprovalId(secretApproval.id);
                     }}
                   >
-                    <div className="mb-1 text-sm">
-                      <FontAwesomeIcon
-                        icon={faCodeBranch}
-                        size="sm"
-                        className="mr-1.5 text-mineshaft-300"
-                      />
-                      {secretApproval.isReplicated
-                        ? `${commits.length} secret pending import`
-                        : generateCommitText(commits)}
-                      <span className="text-xs text-bunker-300"> #{secretApproval.slug}</span>
+                    <div className="flex flex-col">
+                      <div className="mb-1 text-sm">
+                        <FontAwesomeIcon
+                          icon={faCodeBranch}
+                          size="sm"
+                          className="mr-1.5 text-mineshaft-300"
+                        />
+                        {secretApproval.isReplicated
+                          ? `${commits.length} secret pending import`
+                          : generateCommitText(commits)}
+                        <span className="text-xs text-bunker-300"> #{secretApproval.slug}</span>
+                      </div>
+                      <span className="text-xs leading-3 text-gray-500">
+                        Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
+                        {committerUser ? (
+                          <>
+                            {committerUser?.firstName || ""} {committerUser?.lastName || ""} (
+                            {committerUser?.email})
+                          </>
+                        ) : (
+                          <span className="text-gray-600">Deleted User</span>
+                        )}
+                        {!isReviewed && status === "open" && " - Review required"}
+                      </span>
                     </div>
-                    <span className="text-xs leading-3 text-gray-500">
-                      Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
-                      {committerUser?.firstName || ""} {committerUser?.lastName || ""} (
-                      {committerUser?.email})
-                      {!isReviewed && status === "open" && " - Review required"}
-                    </span>
+                    {status === "close" && (
+                      <Tooltip
+                        content={updatedAt ? format(new Date(updatedAt), "M/dd/yyyy h:mm a") : ""}
+                      >
+                        <div className="my-auto ml-auto">
+                          <Badge
+                            variant={hasMerged ? "success" : "danger"}
+                            className="flex h-min items-center gap-1"
+                          >
+                            <FontAwesomeIcon icon={hasMerged ? faCodeMerge : faXmark} />
+                            {hasMerged ? "Merged" : "Rejected"}
+                          </Badge>
+                        </div>
+                      </Tooltip>
+                    )}
                   </div>
                 );
               })}

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx

@@ -168,7 +168,7 @@ export const SecretApprovalRequestAction = ({
                 isChecked={byPassApproval}
                 id="byPassApproval"
                 checkIndicatorBg="text-white"
-                className={twMerge("mr-2", byPassApproval ? "!border-red/30 !bg-red/10" : "")}
+                className={twMerge("mr-2", byPassApproval ? "!border-red/50 !bg-red/30" : "")}
               >
                 <span className="text-sm">
                   Merge without waiting for approval (bypass secret change policy)

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -250,10 +250,17 @@ export const SecretApprovalRequestChanges = ({
                 secretApprovalRequestDetails.isReplicated
               )}
             </div>
-            <span className="-mt-1 flex items-center space-x-2 text-xs text-gray-400">
-              By {secretApprovalRequestDetails?.committerUser?.firstName} (
-              {secretApprovalRequestDetails?.committerUser?.email})
-            </span>
+            <p className="-mt-1 text-xs text-gray-400">
+              By{" "}
+              {secretApprovalRequestDetails?.committerUser ? (
+                <>
+                  {secretApprovalRequestDetails?.committerUser?.firstName} (
+                  {secretApprovalRequestDetails?.committerUser?.email})
+                </>
+              ) : (
+                <span className="text-gray-500">Deleted User</span>
+              )}
+            </p>
           </div>
           {!hasMerged &&
             secretApprovalRequestDetails.status === "open" &&