misc: partial project kms switch

frontend/src/hooks/api/kms/index.tsx

@@ -1,2 +1,7 @@
-export { useAddAwsExternalKms, useRemoveExternalKms, useUpdateAwsExternalKms } from "./mutations";
-export { useGetExternalKmsById, useGetExternalKmsList } from "./queries";
+export {
+  useAddAwsExternalKms,
+  useRemoveExternalKms,
+  useUpdateAwsExternalKms,
+  useUpdateProjectKms
+} from "./mutations";
+export { useGetActiveProjectKms, useGetExternalKmsById, useGetExternalKmsList } from "./queries";

frontend/src/hooks/api/kms/mutations.tsx

@@ -126,3 +126,17 @@ export const useRemoveExternalKms = (orgId: string) => {
     }
   });
 };
+
+export const useUpdateProjectKms = (projectId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (updatedData: { secretManagerKmsKeyId: string }) => {
+      const { data } = await apiRequest.patch(`/api/v1/workspace/${projectId}/kms`, updatedData);
+
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(kmsKeys.getActiveProjectKms(projectId));
+    }
+  });
+};

frontend/src/hooks/api/kms/queries.tsx

@@ -6,7 +6,8 @@ import { Kms, KmsListEntry } from "./types";
 
 export const kmsKeys = {
   getExternalKmsList: (orgId: string) => ["get-all-external-kms", { orgId }],
-  getExternalKmsById: (id: string) => ["get-external-kms", { id }]
+  getExternalKmsById: (id: string) => ["get-external-kms", { id }],
+  getActiveProjectKms: (projectId: string) => ["get-active-project-kms", { projectId }]
 };
 
 export const useGetExternalKmsList = (orgId: string) => {
@@ -33,3 +34,22 @@ export const useGetExternalKmsById = (kmsId: string) => {
     }
   });
 };
+
+export const useGetActiveProjectKms = (projectId: string) => {
+  return useQuery({
+    queryKey: kmsKeys.getActiveProjectKms(projectId),
+    enabled: Boolean(projectId),
+    queryFn: async () => {
+      const {
+        data: { secretManagerKmsKey }
+      } = await apiRequest.get<{
+        secretManagerKmsKey: {
+          id: string;
+          slug: string;
+          isExternal: string;
+        };
+      }>(`/api/v1/workspace/${projectId}/kms`);
+      return secretManagerKmsKey;
+    }
+  });
+};

frontend/src/views/Settings/ProjectSettingsPage/components/EncryptionTab/EncryptionTab.tsx

@@ -1,19 +1,62 @@
 import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
 
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, ContentLoader, FormControl, Select, SelectItem } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useOrganization } from "@app/context";
-import { useGetExternalKmsList } from "@app/hooks/api";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useOrganization,
+  useWorkspace
+} from "@app/context";
+import { useGetActiveProjectKms, useGetExternalKmsList, useUpdateProjectKms } from "@app/hooks/api";
+
+const formSchema = z.object({
+  kmsKeyId: z.string()
+});
+
+type TForm = z.infer<typeof formSchema>;
 
 export const EncryptionTab = () => {
-  const { handleSubmit, control } = useForm();
   const { currentOrg } = useOrganization();
+  const { currentWorkspace } = useWorkspace();
 
   const { data: externalKmsList, isLoading: isExternalKmsListLoading } = useGetExternalKmsList(
     currentOrg?.id!
   );
+  const { data: activeKms, isLoading: isActiveKmsLoading } = useGetActiveProjectKms(
+    currentWorkspace?.id!
+  );
 
-  const onFormSubmit = () => {};
+  const { mutateAsync: updateProjectKms } = useUpdateProjectKms(currentWorkspace?.id!);
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting }
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      kmsKeyId: activeKms?.isExternal ? activeKms?.id : "internal"
+    }
+  });
+
+  const onFormSubmit = async (data: TForm) => {
+    try {
+      await updateProjectKms({
+        secretManagerKmsKeyId: data.kmsKeyId
+      });
+
+      createNotification({
+        text: "Successfully updated project KMS",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
 
   return (
     <form
@@ -22,24 +65,25 @@ export const EncryptionTab = () => {
     >
       <h2 className="mb-2 flex-1 text-xl font-semibold text-mineshaft-100">Key Management</h2>
       <p className="mb-4 text-gray-400">
-        Select which Key Management System to use for encrypting project data
+        Select which Key Management System to use for encrypting your project data
       </p>
       <div className="mb-6 max-w-md">
-        {isExternalKmsListLoading ? (
+        {isExternalKmsListLoading || isActiveKmsLoading ? (
           <ContentLoader />
         ) : (
           <Controller
-            defaultValue=""
             render={({ field: { onChange, ...field }, fieldState: { error } }) => (
               <FormControl errorText={error?.message} isError={Boolean(error)}>
                 <Select
-                  defaultValue={field.value}
                   {...field}
                   onValueChange={(e) => {
                     onChange(e);
                   }}
                   className="w-3/4 bg-mineshaft-600"
                 >
+                  <SelectItem value="internal" key="kms-internal">
+                    Default Infisical KMS
+                  </SelectItem>
                   {externalKmsList?.map((kms) => (
                     <SelectItem value={kms.id} key={`kms-${kms.id}`}>
                       {kms.slug}
@@ -49,13 +93,18 @@ export const EncryptionTab = () => {
               </FormControl>
             )}
             control={control}
-            name="name"
+            name="kmsKeyId"
           />
         )}
       </div>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Workspace}>
         {(isAllowed) => (
-          <Button colorSchema="secondary" type="submit" isDisabled={!isAllowed}>
+          <Button
+            colorSchema="secondary"
+            type="submit"
+            isDisabled={!isAllowed || isSubmitting}
+            isLoading={isSubmitting}
+          >
             Save
           </Button>
         )}