fix: used new apis on frontend

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

@@ -6,6 +6,7 @@ import { kmsKeys } from "./queries";
 import {
   AddExternalKmsType,
   ExternalKmsGcpSchemaType,
+  ExternalKmsProvider,
   KmsGcpKeyFetchAuthType,
   KmsType,
   UpdateExternalKmsType
@@ -15,10 +16,11 @@ export const useAddExternalKms = (orgId: string) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({ name, description, provider }: AddExternalKmsType) => {
-      const { data } = await apiRequest.post("/api/v1/external-kms", {
+      const providerPath = provider.type === ExternalKmsProvider.Aws ? "aws" : "gcp";
+      const { data } = await apiRequest.post(`/api/v1/external-kms/${providerPath}`, {
         name,
         description,
-        provider
+        provider: provider.inputs
       });
 
       return data;
@@ -40,10 +42,11 @@ export const useUpdateExternalKms = (orgId: string) => {
     }: {
       kmsId: string;
     } & UpdateExternalKmsType) => {
-      const { data } = await apiRequest.patch(`/api/v1/external-kms/${kmsId}`, {
+      const providerPath = provider.type === ExternalKmsProvider.Aws ? "aws" : "gcp";
+      const { data } = await apiRequest.patch(`/api/v1/external-kms/${providerPath}/${kmsId}`, {
         name,
         description,
-        provider
+        provider: provider.inputs
       });
 
       return data;
@@ -58,8 +61,8 @@ export const useUpdateExternalKms = (orgId: string) => {
 export const useRemoveExternalKms = (orgId: string) => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (kmsId: string) => {
+    mutationFn: async ({ kmsId, provider }: { kmsId: string; provider: ExternalKmsProvider }) => {
-      const { data } = await apiRequest.delete(`/api/v1/external-kms/${kmsId}`);
+      const { data } = await apiRequest.delete(`/api/v1/external-kms/${provider}/${kmsId}`);
 
       return data;
     },
@@ -130,11 +133,19 @@ export const useExternalKmsFetchGcpKeys = (orgId: string) => {
         );
       }
 
-      const { data } = await apiRequest.post("/api/v1/external-kms/gcp/keys", {
+      const requestBody = credential
-        authMethod: credential ? KmsGcpKeyFetchAuthType.Credential : KmsGcpKeyFetchAuthType.Kms,
+        ? {
-        region: gcpRegion,
+            authMethod: KmsGcpKeyFetchAuthType.Credential,
-        ...rest
+            region: gcpRegion,
-      });
+            credential
+          }
+        : {
+            authMethod: KmsGcpKeyFetchAuthType.Kms,
+            region: gcpRegion,
+            kmsId
+          };
+
+      const { data } = await apiRequest.post("/api/v1/external-kms/gcp/keys", requestBody);
 
       return data;
     },

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

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { Kms, KmsListEntry } from "./types";
+import { ExternalKmsProvider, Kms, KmsListEntry } from "./types";
 
 export const kmsKeys = {
   getExternalKmsList: (orgId: string) => ["get-all-external-kms", { orgId }],
@@ -23,14 +23,20 @@ export const useGetExternalKmsList = (orgId: string, { enabled }: { enabled?: bo
   });
 };
 
-export const useGetExternalKmsById = (kmsId: string) => {
+export const useGetExternalKmsById = ({
+  kmsId,
+  provider
+}: {
+  kmsId: string;
+  provider: ExternalKmsProvider;
+}) => {
   return useQuery({
     queryKey: kmsKeys.getExternalKmsById(kmsId),
     enabled: Boolean(kmsId),
     queryFn: async () => {
       const {
         data: { externalKms }
-      } = await apiRequest.get<{ externalKms: Kms }>(`/api/v1/external-kms/${kmsId}`);
+      } = await apiRequest.get<{ externalKms: Kms }>(`/api/v1/external-kms/${provider}/${kmsId}`);
       return externalKms;
     }
   });

frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx

@@ -119,7 +119,8 @@ export const ExternalKmsItem = ({ kms, handlePopUpOpen, subscription }: Props) =
                     }
 
                     handlePopUpOpen("editExternalKms", {
-                      kmsId: kms.id
+                      kmsId: kms.id,
+                      provider: kms.externalKms.provider
                     });
                   }}
                 >

frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx

@@ -25,6 +25,7 @@ import {
 import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useGetExternalKmsList, useRemoveExternalKms } from "@app/hooks/api";
+import { ExternalKmsProvider } from "@app/hooks/api/kms/types";
 
 import { AddExternalKmsForm } from "./AddExternalKmsForm";
 import { ExternalKmsItem } from "./ExternalKmsItem";
@@ -47,11 +48,12 @@ export const OrgEncryptionTab = withPermission(
     const { mutateAsync: removeExternalKms } = useRemoveExternalKms(currentOrg.id);
 
     const handleRemoveExternalKms = async () => {
-      const { kmsId } = popUp?.removeExternalKms?.data as {
+      const { kmsId, provider } = popUp?.removeExternalKms?.data as {
         kmsId: string;
+        provider: ExternalKmsProvider;
       };
 
-      await removeExternalKms(kmsId);
+      await removeExternalKms({ kmsId, provider });
 
       createNotification({
         text: "Successfully deleted external KMS",
@@ -131,6 +133,7 @@ export const OrgEncryptionTab = withPermission(
         <UpdateExternalKmsForm
           isOpen={popUp.editExternalKms.isOpen}
           kmsId={(popUp.editExternalKms.data as { kmsId: string })?.kmsId}
+          provider={(popUp.editExternalKms.data as { provider: ExternalKmsProvider })?.provider}
           onOpenChange={(state) => handlePopUpToggle("editExternalKms", state)}
         />
         <DeleteActionModal

frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/UpdateExternalKmsForm.tsx

@@ -8,11 +8,12 @@ import { GcpKmsForm } from "./GcpKmsForm";
 type Props = {
   isOpen: boolean;
   kmsId: string;
+  provider: ExternalKmsProvider;
   onOpenChange: (state: boolean) => void;
 };
 
-export const UpdateExternalKmsForm = ({ isOpen, kmsId, onOpenChange }: Props) => {
+export const UpdateExternalKmsForm = ({ isOpen, kmsId, provider, onOpenChange }: Props) => {
-  const { data: externalKms, isPending } = useGetExternalKmsById(kmsId);
+  const { data: externalKms, isPending } = useGetExternalKmsById({ kmsId, provider });
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent title="Edit configuration" bodyClassName="overflow-visible">