Merge pull request #2333 from Infisical/daniel/secret-change-emails

Feat: Email notification on secret change requests

frontend/src/hooks/api/secretApproval/mutation.tsx

@@ -9,7 +9,15 @@ export const useCreateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TCreateSecretPolicyDTO>({
-    mutationFn: async ({ environment, workspaceId, approvals, approvers, secretPath, name, enforcementLevel }) => {
+    mutationFn: async ({
+      environment,
+      workspaceId,
+      approvals,
+      approvers,
+      secretPath,
+      name,
+      enforcementLevel
+    }) => {
       const { data } = await apiRequest.post("/api/v1/secret-approvals", {
         environment,
         workspaceId,

frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -45,11 +45,11 @@ const formSchema = z
     name: z.string().optional(),
     secretPath: z.string().optional(),
     approvals: z.number().min(1),
-    approverUserIds: z.string().array().min(1),
+    approvers: z.string().array().min(1),
     policyType: z.nativeEnum(PolicyType),
     enforcementLevel: z.nativeEnum(EnforcementLevel)
   })
-  .refine((data) => data.approvals <= data.approverUserIds.length, {
+  .refine((data) => data.approvals <= data.approvers.length, {
     path: ["approvals"],
     message: "The number of approvals should be lower than the number of approvers."
   });
@@ -75,8 +75,7 @@ export const AccessPolicyForm = ({
       ? {
           ...editValues,
           environment: editValues.environment.slug,
-          approverUserIds:
-            editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
+          approvers: editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
         }
       : undefined
   });
@@ -264,7 +263,7 @@ export const AccessPolicyForm = ({
             />
             <Controller
               control={control}
-              name="approverUserIds"
+              name="approvers"
               render={({ field: { value, onChange }, fieldState: { error } }) => (
                 <FormControl
                   label="Required Approvers"

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx

@@ -1,4 +1,5 @@
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
+import { useRouter } from "next/router";
 import {
   faCheck,
   faCheckCircle,
@@ -31,7 +32,7 @@ import {
   useGetSecretApprovalRequests,
   useGetWorkspaceUsers
 } from "@app/hooks/api";
-import { ApprovalStatus, TSecretApprovalRequest } from "@app/hooks/api/types";
+import { ApprovalStatus } from "@app/hooks/api/types";
 
 import {
   generateCommitText,
@@ -41,12 +42,13 @@ import {
 export const SecretApprovalRequest = () => {
   const { currentWorkspace } = useWorkspace();
   const workspaceId = currentWorkspace?.id || "";
-  const [selectedApproval, setSelectedApproval] = useState<TSecretApprovalRequest | null>(null);
+  const [selectedApprovalId, setSelectedApprovalId] = useState<string | null>(null);
 
   // filters
   const [statusFilter, setStatusFilter] = useState<"open" | "close">("open");
   const [envFilter, setEnvFilter] = useState<string>();
   const [committerFilter, setCommitterFilter] = useState<string>();
+  const [usingUrlRequestId, setUsingUrlRequestId] = useState(false);
 
   const {
     data: secretApprovalRequests,
@@ -64,12 +66,21 @@ export const SecretApprovalRequest = () => {
   const { data: secretApprovalRequestCount, isSuccess: isSecretApprovalReqCountSuccess } =
     useGetSecretApprovalRequestCount({ workspaceId });
   const { user: userSession } = useUser();
+  const router = useRouter();
   const { permission } = useProjectPermission();
   const { data: members } = useGetWorkspaceUsers(workspaceId);
-  const isSecretApprovalScreen = Boolean(selectedApproval);
+  const isSecretApprovalScreen = Boolean(selectedApprovalId);
+  const { requestId } = router.query;
+
+  useEffect(() => {
+    if (!requestId || usingUrlRequestId) return;
+
+    setSelectedApprovalId(requestId as string);
+    setUsingUrlRequestId(true);
+  }, [requestId]);
 
   const handleGoBackSecretRequestDetail = () => {
-    setSelectedApproval(null);
+    setSelectedApprovalId(null);
     refetch({ refetchPage: (_page, index) => index === 0 });
   };
 
@@ -88,7 +99,7 @@ export const SecretApprovalRequest = () => {
         >
           <SecretApprovalRequestChanges
             workspaceId={workspaceId}
-            approvalRequestId={selectedApproval?.id || ""}
+            approvalRequestId={selectedApprovalId || ""}
             onGoBack={handleGoBackSecretRequestDetail}
           />
         </motion.div>
@@ -219,9 +230,9 @@ export const SecretApprovalRequest = () => {
                       className="flex flex-col px-8 py-4 hover:bg-mineshaft-700"
                       role="button"
                       tabIndex={0}
-                      onClick={() => setSelectedApproval(secretApproval)}
+                      onClick={() => setSelectedApprovalId(secretApproval.id)}
                       onKeyDown={(evt) => {
-                        if (evt.key === "Enter") setSelectedApproval(secretApproval);
+                        if (evt.key === "Enter") setSelectedApprovalId(secretApproval.id);
                       }}
                     >
                       <div className="mb-1">