feat: ui changes for secret approval group

Infisical · Jul 3, 2024 · ef3cdd1 · ef3cdd1
1 parent 612cf4f
commit ef3cdd1
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 102 deletions.
diff --git a/frontend/src/hooks/api/secretApproval/mutation.tsx b/frontend/src/hooks/api/secretApproval/mutation.tsx
@@ -9,12 +9,12 @@ export const useCreateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TCreateSecretPolicyDTO>({
-    mutationFn: async ({ environment, workspaceId, approvals, approvers, secretPath, name }) => {
+    mutationFn: async ({ environment, workspaceId, approvals, approverUserIds, secretPath, name }) => {
       const { data } = await apiRequest.post("/api/v1/secret-approvals", {
         environment,
         workspaceId,
         approvals,
-        approvers,
+        approverUserIds,
         secretPath,
         name
       });
@@ -30,10 +30,10 @@ export const useUpdateSecretApprovalPolicy = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, TUpdateSecretPolicyDTO>({
-    mutationFn: async ({ id, approvers, approvals, secretPath, name }) => {
+    mutationFn: async ({ id, approverUserIds, approvals, secretPath, name }) => {
       const { data } = await apiRequest.patch(`/api/v1/secret-approvals/${id}`, {
         approvals,
-        approvers,
+        approverUserIds,
         secretPath,
         name
       });

diff --git a/frontend/src/hooks/api/secretApproval/types.ts b/frontend/src/hooks/api/secretApproval/types.ts
@@ -7,8 +7,8 @@ export type TSecretApprovalPolicy = {
   envId: string;
   environment: WorkspaceEnv;
   secretPath?: string;
-  approvers: string[];
   approvals: number;
+  userApprovers: { userId: string }[];
 };
 
 export type TGetSecretApprovalPoliciesDTO = {
@@ -26,14 +26,14 @@ export type TCreateSecretPolicyDTO = {
   name?: string;
   environment: string;
   secretPath?: string | null;
-  approvers?: string[];
+  approverUserIds?: string[];
   approvals?: number;
 };
 
 export type TUpdateSecretPolicyDTO = {
   id: string;
   name?: string;
-  approvers?: string[];
+  approverUserIds?: string[];
   secretPath?: string | null;
   approvals?: number;
   // for invalidating list

diff --git a/frontend/src/hooks/api/secretApprovalRequest/types.ts b/frontend/src/hooks/api/secretApprovalRequest/types.ts
@@ -47,19 +47,45 @@ export type TSecretApprovalRequest<J extends unknown = EncryptedSecret> = {
   isReplicated?: boolean;
   slug: string;
   createdAt: string;
-  committerId: string;
+  committerUserId: string;
   reviewers: {
-    member: string;
+    userId: string;
     status: ApprovalStatus;
+    email: string;
+    firstName: string;
+    lastName: string;
+    username: string;
   }[];
   workspace: string;
   environment: string;
   folderId: string;
   secretPath: string;
   hasMerged: boolean;
   status: "open" | "close";
-  policy: TSecretApprovalPolicy;
-  statusChangeBy: string;
+  policy: Omit<TSecretApprovalPolicy, "approvers"> & {
+    approvers: {
+      userId: string;
+      email: string;
+      firstName: string;
+      lastName: string;
+      username: string;
+    }[];
+  };
+  statusChangedByUserId: string;
+  statusChangedByUser?: {
+    userId: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    username: string;
+  };
+  committerUser: {
+    userId: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    username: string;
+  };
   conflicts: Array<{ secretId: string; op: CommitType.UPDATE }>;
   commits: ({
     // if there is no secret means it was creation

diff --git a/...views/SecretApprovalPage/components/SecretApprovalPolicyList/SecretApprovalPolicyList.tsx b/...views/SecretApprovalPage/components/SecretApprovalPolicyList/SecretApprovalPolicyList.tsx
@@ -7,6 +7,8 @@ import {
   Button,
   DeleteActionModal,
   EmptyState,
+  Modal,
+  ModalContent,
   Table,
   TableContainer,
   TableSkeleton,
@@ -145,13 +147,20 @@ export const SecretApprovalPolicyList = ({ workspaceId }: Props) => {
           </TBody>
         </Table>
       </TableContainer>
-      <SecretPolicyForm
-        workspaceId={workspaceId}
+      <Modal
         isOpen={popUp.secretPolicyForm.isOpen}
-        onToggle={(isOpen) => handlePopUpToggle("secretPolicyForm", isOpen)}
-        members={members}
-        editValues={popUp.secretPolicyForm.data as TSecretApprovalPolicy}
-      />
+        onOpenChange={(isOpen) => handlePopUpToggle("secretPolicyForm", isOpen)}
+      >
+        <ModalContent title={popUp.secretPolicyForm.data ? "Edit policy" : "Create policy"}>
+          <SecretPolicyForm
+            workspaceId={workspaceId}
+            isOpen={popUp.secretPolicyForm.isOpen}
+            onToggle={(isOpen) => handlePopUpToggle("secretPolicyForm", isOpen)}
+            members={members}
+            editValues={popUp.secretPolicyForm.data as TSecretApprovalPolicy}
+          />
+        </ModalContent>
+      </Modal>
       <DeleteActionModal
         isOpen={popUp.deletePolicy.isOpen}
         deleteKey="remove"

diff --git a/...etApprovalPage/components/SecretApprovalPolicyList/components/SecretApprovalPolicyRow.tsx b/...etApprovalPage/components/SecretApprovalPolicyList/components/SecretApprovalPolicyRow.tsx
@@ -51,7 +51,7 @@ export const SecretApprovalPolicyRow = ({
                 {
                   workspaceId,
                   id: policy.id,
-                  approvers: selectedApprovers
+                  approverUserIds: selectedApprovers
                 },
                 {
                   onSettled: () => {
@@ -60,7 +60,7 @@ export const SecretApprovalPolicyRow = ({
                 }
               );
             } else {
-              setSelectedApprovers(policy.approvers);
+              setSelectedApprovers(policy.userApprovers.map(({ userId }) => userId));
             }
           }}
         >
@@ -73,7 +73,9 @@ export const SecretApprovalPolicyRow = ({
           >
             <Input
               isReadOnly
-              value={policy.approvers?.length ? `${policy.approvers.length} selected` : "None"}
+              value={
+                policy?.userApprovers.length ? `${policy.userApprovers.length} selected` : "None"
+              }
               className="text-left"
             />
           </DropdownMenuTrigger>
@@ -84,17 +86,17 @@ export const SecretApprovalPolicyRow = ({
             <DropdownMenuLabel>
               Select members that are allowed to approve changes
             </DropdownMenuLabel>
-            {members?.map(({ id, user }) => {
-              const isChecked = selectedApprovers.includes(id);
+            {members?.map(({ user }) => {
+              const isChecked = selectedApprovers.includes(user.id);
               return (
                 <DropdownMenuItem
                   onClick={(evt) => {
                     evt.preventDefault();
                     setSelectedApprovers((state) =>
-                      isChecked ? state.filter((el) => el !== id) : [...state, id]
+                      isChecked ? state.filter((el) => el !== user.id) : [...state, user.id]
                     );
                   }}
-                  key={`create-policy-members-${id}`}
+                  key={`create-policy-members-${user.id}`}
                   iconPos="right"
                   icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
                 >

diff --git a/...ws/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretPolicyForm.tsx b/...ws/SecretApprovalPage/components/SecretApprovalPolicyList/components/SecretPolicyForm.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -15,8 +14,6 @@ import {
   DropdownMenuTrigger,
   FormControl,
   Input,
-  Modal,
-  ModalContent,
   Select,
   SelectItem
 } from "@app/components/v2";
@@ -40,17 +37,16 @@ const formSchema = z
     name: z.string().optional(),
     secretPath: z.string().optional().nullable(),
     approvals: z.number().min(1),
-    approvers: z.string().array().min(1)
+    approverUserIds: z.string().array().min(1)
   })
-  .refine((data) => data.approvals <= data.approvers.length, {
+  .refine((data) => data.approvals <= data.approverUserIds.length, {
     path: ["approvals"],
     message: "The number of approvals should be lower than the number of approvers."
   });
 
 type TFormSchema = z.infer<typeof formSchema>;
 
 export const SecretPolicyForm = ({
-  isOpen,
   onToggle,
   members = [],
   workspaceId,
@@ -59,20 +55,22 @@ export const SecretPolicyForm = ({
   const {
     control,
     handleSubmit,
-    reset,
     watch,
     formState: { isSubmitting }
   } = useForm<TFormSchema>({
     resolver: zodResolver(formSchema),
-    values: editValues ? { ...editValues, environment: editValues.environment.slug } : undefined
+    values: editValues
+      ? {
+        ...editValues,
+        approverUserIds: editValues.userApprovers.map(({ userId }) => userId),
+        environment: editValues.environment.slug
+      }
+      : undefined
   });
   const { currentWorkspace } = useWorkspace();
   const selectedEnvironment = watch("environment");
 
   const environments = currentWorkspace?.environments || [];
-  useEffect(() => {
-    if (!isOpen) reset({});
-  }, [isOpen]);
 
   const isEditMode = Boolean(editValues);
 
@@ -131,8 +129,6 @@ export const SecretPolicyForm = ({
   };
 
   return (
-    <Modal isOpen={isOpen} onOpenChange={onToggle}>
-      <ModalContent title={isEditMode ? "Edit policy" : "Create policy"}>
         <form onSubmit={handleSubmit(handleFormSubmit)}>
           <Controller
             control={control}
@@ -155,6 +151,7 @@ export const SecretPolicyForm = ({
                 errorText={error?.message}
               >
                 <Select
+                  isDisabled={isEditMode}
                   value={value}
                   onValueChange={(val) => onChange(val)}
                   className="w-full border border-mineshaft-500"
@@ -186,7 +183,7 @@ export const SecretPolicyForm = ({
           />
           <Controller
             control={control}
-            name="approvers"
+            name="approverUserIds"
             render={({ field: { value, onChange }, fieldState: { error } }) => (
               <FormControl
                 label="Approvers Required"
@@ -208,17 +205,19 @@ export const SecretPolicyForm = ({
                     <DropdownMenuLabel>
                       Select members that are allowed to approve changes
                     </DropdownMenuLabel>
-                    {members.map(({ id, user }) => {
-                      const isChecked = value?.includes(id);
+                    {members.map(({ user }) => {
+                      const isChecked = value?.includes(user.id);
                       return (
                         <DropdownMenuItem
                           onClick={(evt) => {
                             evt.preventDefault();
                             onChange(
-                              isChecked ? value?.filter((el) => el !== id) : [...(value || []), id]
+                              isChecked
+                                ? value?.filter((el) => el !== user.id)
+                                : [...(value || []), user.id]
                             );
                           }}
-                          key={`create-policy-members-${id}`}
+                          key={`create-policy-members-${user.id}`}
                           iconPos="right"
                           icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
                         >
@@ -258,7 +257,6 @@ export const SecretPolicyForm = ({
             </Button>
           </div>
         </form>
-      </ModalContent>
-    </Modal>
+
   );
 };