Move all integration queries/mutations to hooks

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

@@ -1,4 +1,5 @@
 export {
+  useAuthorizeIntegration,
   useDeleteIntegrationAuth,
   useGetIntegrationAuthApps,
   useGetIntegrationAuthBitBucketWorkspaces,
@@ -7,4 +8,6 @@ export {
   useGetIntegrationAuthRailwayEnvironments,
   useGetIntegrationAuthRailwayServices,
   useGetIntegrationAuthTeams,
-  useGetIntegrationAuthVercelBranches} from "./queries";
+  useGetIntegrationAuthVercelBranches,
+  useSaveIntegrationAccessToken
+} from "./queries";

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

@@ -312,6 +312,69 @@ export const useGetIntegrationAuthNorthflankSecretGroups = ({
   });
 };
 
+export const useAuthorizeIntegration = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      workspaceId,
+      code,
+      integration
+    }: {
+      workspaceId: string;
+      code: string;
+      integration: string;
+    }) => {
+      const { data: { integrationAuth } } = await apiRequest.post("/api/v1/integration-auth/oauth-token", {
+        workspaceId,
+        code,
+        integration
+      });
+
+      return integrationAuth;
+    },
+    onSuccess: (res) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceAuthorization(res.workspace));
+    }
+  });
+};
+
+export const useSaveIntegrationAccessToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      workspaceId,
+      integration,
+      accessId,
+      accessToken,
+      url,
+      namespace
+    }: {
+      workspaceId: string | null;
+      integration: string | undefined;
+      accessId: string | null;
+      accessToken: string;
+      url: string | null;
+      namespace: string | null;
+    }) => {
+      const { data: { integrationAuth } } = await apiRequest.post("/api/v1/integration-auth/access-token", {
+        workspaceId,
+        integration,
+        accessId,
+        accessToken,
+        url,
+        namespace
+      });
+
+      return integrationAuth;
+    },
+    onSuccess: (res) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceAuthorization(res.workspace));
+    }
+  });
+};
+
 export const useDeleteIntegrationAuth = () => {
   const queryClient = useQueryClient();
 

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

@@ -1 +1,5 @@
-export { useDeleteIntegration,useGetCloudIntegrations } from "./queries";
+export { 
+    useCreateIntegration,
+    useDeleteIntegration,
+    useGetCloudIntegrations 
+} from "./queries";

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

@@ -23,6 +23,63 @@ export const useGetCloudIntegrations = () =>
     queryFn: () => fetchIntegrations()
   });
 
+export const useCreateIntegration = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      integrationAuthId,
+      isActive,
+      app,
+      appId,
+      sourceEnvironment,
+      targetEnvironment,
+      targetEnvironmentId,
+      targetService,
+      targetServiceId,
+      owner,
+      path,
+      region,
+      secretPath
+    }: {
+      integrationAuthId: string;
+      isActive: boolean;
+      secretPath: string;
+      app: string | null;
+      appId: string | null;
+      sourceEnvironment: string;
+      targetEnvironment: string | null;
+      targetEnvironmentId: string | null;
+      targetService: string | null;
+      targetServiceId: string | null;
+      owner: string | null;
+      path: string | null;
+      region: string | null;
+    }) => {
+      const { data: { integration } } = await apiRequest.post("/api/v1/integration", {
+        integrationAuthId,
+        isActive,
+        app,
+        appId,
+        sourceEnvironment,
+        targetEnvironment,
+        targetEnvironmentId,
+        targetService,
+        targetServiceId,
+        owner,
+        path,
+        region,
+        secretPath
+      });
+
+      return integration;
+    },
+    onSuccess: (res) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceIntegrations(res.workspace));
+    }
+  });
+};
+
 export const useDeleteIntegration = () => {
   const queryClient = useQueryClient();
 

frontend/src/pages/api/integrations/ChangeHerokuConfigVars.ts

@@ -1,37 +0,0 @@
-import SecurityClient from "@app/components/utilities/SecurityClient";
-
-interface Props {
-  integrationId: string;
-  key: { encryptedKey: any; nonce: any };
-  secrets: {
-    ciphertextKey: any;
-    ivKey: any;
-    tagKey: any;
-    hashKey: any;
-    ciphertextValue: any;
-    ivValue: any;
-    tagValue: any;
-    hashValue: any;
-    type: string;
-  }[];
-}
-
-const changeHerokuConfigVars = ({ integrationId, key, secrets }: Props) =>
-  SecurityClient.fetchCall(`/api/v1/integration/${integrationId}/sync`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify({
-      key,
-      secrets
-    })
-  }).then(async (res) => {
-    if (res && res.status === 200) {
-      return res;
-    }
-    console.log("Failed to sync secrets to Heroku");
-    return undefined;
-  });
-
-export default changeHerokuConfigVars;

frontend/src/pages/api/integrations/authorizeIntegration.ts

@@ -1,35 +0,0 @@
-import SecurityClient from "@app/components/utilities/SecurityClient";
-
-interface Props {
-  workspaceId: string;
-  code: string;
-  integration: string;
-}
-/**
- * This is the first step of the change password process (pake)
- * @param {object} obj
- * @param {object} obj.workspaceId - project id for which we want to authorize the integration
- * @param {object} obj.code
- * @param {object} obj.integration - integration which a user is trying to turn on
- * @returns
- */
-const AuthorizeIntegration = ({ workspaceId, code, integration }: Props) =>
-  SecurityClient.fetchCall("/api/v1/integration-auth/oauth-token", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify({
-      workspaceId,
-      code,
-      integration
-    })
-  }).then(async (res) => {
-    if (res && res.status === 200) {
-      return (await res.json()).integrationAuth;
-    }
-    console.log("Failed to authorize the integration");
-    return undefined;
-  });
-
-export default AuthorizeIntegration;

frontend/src/pages/api/integrations/createIntegration.ts

@@ -1,67 +0,0 @@
-import SecurityClient from "@app/components/utilities/SecurityClient";
-
-interface Props {
-  integrationAuthId: string;
-  isActive: boolean;
-  secretPath: string;
-  app: string | null;
-  appId: string | null;
-  sourceEnvironment: string;
-  targetEnvironment: string | null;
-  targetEnvironmentId: string | null;
-  targetService: string | null;
-  targetServiceId: string | null;
-  owner: string | null;
-  path: string | null;
-  region: string | null;
-}
-/**
- * This route creates a new integration based on the integration authorization with id [integrationAuthId]
- * @param {Object} obj
- * @param {String} obj.accessToken - id of integration authorization for which to create the integration
- * @returns
- */
-const createIntegration = ({
-  integrationAuthId,
-  isActive,
-  app,
-  appId,
-  sourceEnvironment,
-  targetEnvironment,
-  targetEnvironmentId,
-  targetService,
-  targetServiceId,
-  owner,
-  path,
-  region,
-  secretPath,
-}: Props) =>
-  SecurityClient.fetchCall("/api/v1/integration", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify({
-      integrationAuthId,
-      isActive,
-      app,
-      appId,
-      sourceEnvironment,
-      targetEnvironment,
-      targetEnvironmentId,
-      targetService,
-      targetServiceId,
-      owner,
-      path,
-      region,
-      secretPath,
-    })
-  }).then(async (res) => {
-    if (res && res.status === 200) {
-      return (await res.json()).integration;
-    }
-    console.log("Failed to create integration");
-    return undefined;
-  });
-
-export default createIntegration;

frontend/src/pages/api/integrations/saveIntegrationAccessToken.ts

@@ -1,53 +0,0 @@
-import SecurityClient from "@app/components/utilities/SecurityClient";
-
-interface Props {
-  workspaceId: string | null;
-  integration: string | undefined;
-  accessId: string | null;
-  accessToken: string;
-  url: string | null;
-  namespace: string | null;
-}
-/**
- * This route creates a new integration authorization for integration [integration]
- * that requires the user to input their access token manually (e.g. Render). It
- * saves access token [accessToken] under that integration for workspace with id
- * [workspaceId].
- * @param {Object} obj
- * @param {String} obj.workspaceId - id of workspace to authorize integration for
- * @param {String} obj.integration - integration
- * @param {String} obj.accessToken - access token to save
- * @param {String} obj.url - URL of the Vault instance
- * @param {String} obj.namespace - Vault-specific namespace param
- * @returns
- */
-const saveIntegrationAccessToken = ({ 
-    workspaceId,
-    integration,
-    accessId,
-    accessToken,
-    url,
-    namespace
-}: Props) =>
-  SecurityClient.fetchCall("/api/v1/integration-auth/access-token", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify({
-        workspaceId,
-        integration,
-        accessId,
-        accessToken,
-        url,
-        namespace
-    })
-  }).then(async (res) => {
-    if (res && res.status === 200) {
-      return (await res.json()).integrationAuth;
-    }
-    console.log("Failed to save integration access details");
-    return undefined;
-  });
-
-export default saveIntegrationAccessToken;

frontend/src/pages/integrations/aws-parameter-store/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function AWSParameterStoreAuthorizeIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+  
   const [isLoading, setIsLoading] = useState(false);
 
   const [accessKey, setAccessKey] = useState("");
@@ -30,7 +35,7 @@ export default function AWSParameterStoreAuthorizeIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "aws-parameter-store",
         accessId: accessKey,

frontend/src/pages/integrations/aws-parameter-store/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -13,7 +17,6 @@ import {
 } from "../../../components/v2";
 import { useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 const awsRegions = [
   { name: "US East (Ohio)", slug: "us-east-2" },
@@ -49,6 +52,7 @@ const awsRegions = [
 
 export default function AWSParameterStoreCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -90,7 +94,7 @@ export default function AWSParameterStoreCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: null,

frontend/src/pages/integrations/aws-secret-manager/authorize.tsx

@@ -1,11 +1,14 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import { useSaveIntegrationAccessToken } from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function AWSSecretManagerCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [isLoading, setIsLoading] = useState(false);
 
   const [accessKey, setAccessKey] = useState("");
@@ -30,7 +33,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "aws-secret-manager",
         accessId: accessKey,

frontend/src/pages/integrations/aws-secret-manager/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -13,7 +17,6 @@ import {
 } from "../../../components/v2";
 import { useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 const awsRegions = [
   { name: "US East (Ohio)", slug: "us-east-2" },
@@ -49,6 +52,7 @@ const awsRegions = [
 
 export default function AWSSecretManagerCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -89,7 +93,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetSecretName.trim(),

frontend/src/pages/integrations/azure-key-vault/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -13,10 +17,10 @@ import {
 } from "../../../components/v2";
 import { useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function AzureKeyVaultCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -52,7 +56,7 @@ export default function AzureKeyVaultCreateIntegrationPage() {
       if (!integrationAuth?._id) return;
 
       setIsLoading(true);
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: vaultBaseUrl,

frontend/src/pages/integrations/azure-key-vault/oauth2/callback.tsx

@@ -2,10 +2,13 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
-import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+import {
+  useAuthorizeIntegration
+} from "@app/hooks/api";
 
 export default function AzureKeyVaultOAuth2CallbackPage() {
   const router = useRouter();
+  const { mutateAsync } = useAuthorizeIntegration();
 
   const { code, state } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -16,7 +19,7 @@ export default function AzureKeyVaultOAuth2CallbackPage() {
         if (state !== localStorage.getItem("latestCSRFToken")) return;
         localStorage.removeItem("latestCSRFToken");
 
-        const integrationAuth = await AuthorizeIntegration({
+        const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id") as string,
           code: code as string,
           integration: "azure-key-vault"

frontend/src/pages/integrations/bitbucket/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -17,10 +21,10 @@ import {
   useGetIntegrationAuthById,
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function BitBucketCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const [targetAppId, setTargetAppId] = useState("");
   const [targetEnvironmentId, setTargetEnvironmentId] = useState("");
@@ -79,7 +83,7 @@ export default function BitBucketCreateIntegrationPage() {
 
       if (!targetApp || !targetApp.appId || !targetEnvironment) return;
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp.name,

frontend/src/pages/integrations/bitbucket/oauth2/callback.tsx

@@ -2,10 +2,13 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
-import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+import {
+  useAuthorizeIntegration
+} from "@app/hooks/api";
 
 export default function BitBucketOAuth2CallbackPage() {
   const router = useRouter();
+  const { mutateAsync } = useAuthorizeIntegration();
   const { code, state } = queryString.parse(router.asPath.split("?")[1]);
 
   useEffect(() => {
@@ -15,7 +18,7 @@ export default function BitBucketOAuth2CallbackPage() {
         if (state !== localStorage.getItem("latestCSRFToken")) return;
         localStorage.removeItem("latestCSRFToken");
 
-        const integrationAuth = await AuthorizeIntegration({
+        const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id") as string,
           code: code as string,
           integration: "bitbucket"

frontend/src/pages/integrations/checkly/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function ChecklyCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [accessToken, setAccessToken] = useState("");
   const [accessTokenErrorText, setAccessTokenErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function ChecklyCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "checkly",
         accessId: null,

frontend/src/pages/integrations/checkly/create.tsx

@@ -11,16 +11,19 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
 
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function ChecklyCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -62,7 +65,7 @@ export default function ChecklyCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/circleci/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function CircleCICreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function CircleCICreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "circleci",
         accessToken: apiKey,

frontend/src/pages/integrations/circleci/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function CircleCICreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -58,7 +62,7 @@ export default function CircleCICreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/cloud-66/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function Cloud66CreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function Cloud66CreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "cloud-66",
         accessId: null,

frontend/src/pages/integrations/cloud-66/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById,
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function Cloud66CreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -56,7 +60,7 @@ export default function Cloud66CreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/cloudflare-pages/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+    useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button,Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function CloudflarePagesIntegrationPage() {
     const router = useRouter();
+    const { mutateAsync } = useSaveIntegrationAccessToken();
+
     const [accessKey, setAccessKey] = useState("");
     const [accessKeyErrorText, setAccessKeyErrorText] = useState("");
     const [accountId, setAccountId] = useState("");
@@ -24,7 +29,7 @@ export default function CloudflarePagesIntegrationPage() {
 
             setIsLoading(true);
 
-            const integrationAuth = await saveIntegrationAccessToken({
+            const integrationAuth = await mutateAsync({
                 workspaceId: localStorage.getItem("projectData.id"),
                 integration: "cloudflare-pages",
                 accessId: accountId,

frontend/src/pages/integrations/cloudflare-pages/create.tsx

@@ -2,10 +2,12 @@ import { useEffect,useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+    useCreateIntegration
+, useGetWorkspaceById } from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Select, SelectItem } from "../../../components/v2";
-import { useGetWorkspaceById } from "../../../hooks/api";
 import { useGetIntegrationAuthApps, useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
-import createIntegration from "../../api/integrations/createIntegration";
 
 const cloudflareEnvironments = [
     { name: "Production", slug: "production" },
@@ -14,6 +16,7 @@ const cloudflareEnvironments = [
 
 export default function CloudflarePagesIntegrationPage() {
     const router = useRouter();
+    const { mutateAsync } = useCreateIntegration();
 
     const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
@@ -54,7 +57,7 @@ export default function CloudflarePagesIntegrationPage() {
 
             setIsLoading(true);
 
-            await createIntegration({
+            await mutateAsync({
                 integrationAuthId: integrationAuth?._id,
                 isActive: true,
                 app: targetApp,

frontend/src/pages/integrations/codefresh/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function CodefreshCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function CodefreshCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "codefresh",
         accessId: null,

frontend/src/pages/integrations/codefresh/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function CodefreshCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -56,7 +60,7 @@ export default function CodefreshCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/digital-ocean-app-platform/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function DigitalOceanAppPlatformCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+  
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function DigitalOceanAppPlatformCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "digital-ocean-app-platform",
         accessId: null,

frontend/src/pages/integrations/digital-ocean-app-platform/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function DigitalOceanAppPlatformCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -56,7 +60,7 @@ export default function DigitalOceanAppPlatformCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/flyio/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function FlyioCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+  
   const [accessToken, setAccessToken] = useState("");
   const [accessTokenErrorText, setAccessTokenErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function FlyioCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "flyio",
         accessId: null,

frontend/src/pages/integrations/flyio/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function FlyioCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -59,7 +63,7 @@ export default function FlyioCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/github/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function GitHubCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -63,7 +67,7 @@ export default function GitHubCreateIntegrationPage() {
 
       if (!targetApp || !targetApp.owner) return;
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp.name,

frontend/src/pages/integrations/github/oauth2/callback.tsx

@@ -2,10 +2,14 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
-import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+import {
+  useAuthorizeIntegration
+} from "@app/hooks/api";
 
 export default function GitHubOAuth2CallbackPage() {
   const router = useRouter();
+  const { mutateAsync } = useAuthorizeIntegration();
+
   const { code, state } = queryString.parse(router.asPath.split("?")[1]);
 
   useEffect(() => {
@@ -15,7 +19,7 @@ export default function GitHubOAuth2CallbackPage() {
         if (state !== localStorage.getItem("latestCSRFToken")) return;
         localStorage.removeItem("latestCSRFToken");
 
-        const integrationAuth = await AuthorizeIntegration({
+        const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id") as string,
           code: code as string,
           integration: "github"

frontend/src/pages/integrations/gitlab/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -17,7 +21,6 @@ import {
   useGetIntegrationAuthTeams
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 const gitLabEntities = [
   { name: "Individual", value: "individual" },
@@ -26,6 +29,7 @@ const gitLabEntities = [
 
 export default function GitLabCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -87,7 +91,7 @@ export default function GitLabCreateIntegrationPage() {
       setIsLoading(true);
       if (!integrationAuth?._id) return;
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app:

frontend/src/pages/integrations/gitlab/oauth2/callback.tsx

@@ -2,10 +2,14 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
-import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+import {
+  useAuthorizeIntegration
+} from "@app/hooks/api";
 
 export default function GitLabOAuth2CallbackPage() {
   const router = useRouter();
+  const { mutateAsync } = useAuthorizeIntegration();
+
   const { code, state } = queryString.parse(router.asPath.split("?")[1]);
   useEffect(() => {
     (async () => {
@@ -14,7 +18,7 @@ export default function GitLabOAuth2CallbackPage() {
         if (state !== localStorage.getItem("latestCSRFToken")) return;
         localStorage.removeItem("latestCSRFToken");
 
-        const integrationAuth = await AuthorizeIntegration({
+        const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id") as string,
           code: code as string,
           integration: "gitlab"

frontend/src/pages/integrations/hashicorp-vault/authorize.tsx

@@ -1,11 +1,15 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function HashiCorpVaultAuthorizeIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
 
   const [vaultURL, setVaultURL] = useState("");
   const [vaultURLErrorText, setVaultURLErrorText] = useState("");
@@ -57,7 +61,7 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id"),
           integration: "hashicorp-vault",
           accessId: vaultRoleID,

frontend/src/pages/integrations/hashicorp-vault/create.tsx

@@ -2,6 +2,10 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -13,10 +17,10 @@ import {
 } from "../../../components/v2";
 import { useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function HashiCorpVaultCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -57,7 +61,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: vaultEnginePath,

frontend/src/pages/integrations/heroku/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function HerokuCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -57,7 +61,7 @@ export default function HerokuCreateIntegrationPage() {
 
       if (!integrationAuth?._id) return;
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/heroku/oauth2/callback.tsx

@@ -2,10 +2,13 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
-import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+import {
+  useAuthorizeIntegration
+} from "@app/hooks/api";
 
 export default function HerokuOAuth2CallbackPage() {
   const router = useRouter();
+  const { mutateAsync } = useAuthorizeIntegration();
 
   const { code, state } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -15,7 +18,7 @@ export default function HerokuOAuth2CallbackPage() {
         // validate state
         if (state !== localStorage.getItem("latestCSRFToken")) return;
         localStorage.removeItem("latestCSRFToken");
-        const integrationAuth = await AuthorizeIntegration({
+        const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id") as string,
           code: code as string,
           integration: "heroku"

frontend/src/pages/integrations/laravel-forge/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function LaravelForgeCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [serverId, setServerId] = useState("");
@@ -29,7 +34,7 @@ export default function LaravelForgeCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "laravel-forge",
         accessId: serverId,

frontend/src/pages/integrations/laravel-forge/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function LaravelForgeCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -56,7 +60,7 @@ export default function LaravelForgeCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/netlify/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,7 +20,6 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 const netlifyEnvironments = [
   { name: "Local development", slug: "dev" },
@@ -27,6 +30,7 @@ const netlifyEnvironments = [
 
 export default function NetlifyCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -65,7 +69,7 @@ export default function NetlifyCreateIntegrationPage() {
 
       if (!integrationAuth?._id) return;
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/netlify/oauth2/callback.tsx

@@ -2,10 +2,13 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
-import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+import {
+  useAuthorizeIntegration
+} from "@app/hooks/api";
 
 export default function NetlifyOAuth2CallbackPage() {
   const router = useRouter();
+  const { mutateAsync } = useAuthorizeIntegration();
 
   const { code, state } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -16,7 +19,7 @@ export default function NetlifyOAuth2CallbackPage() {
         if (state !== localStorage.getItem("latestCSRFToken")) return;
         localStorage.removeItem("latestCSRFToken");
 
-        const integrationAuth = await AuthorizeIntegration({
+        const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id") as string,
           code: code as string,
           integration: "netlify"

frontend/src/pages/integrations/northflank/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function NorthflankCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function NorthflankCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "northflank",
         accessToken: apiKey,

frontend/src/pages/integrations/northflank/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -17,10 +21,10 @@ import {
   useGetIntegrationAuthNorthflankSecretGroups
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function NorthflankCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
@@ -78,7 +82,7 @@ export default function NorthflankCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: integrationAuthApps?.find(

frontend/src/pages/integrations/railway/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function RailwayAuthorizeIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function RailwayAuthorizeIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "railway",
         accessId: null,

frontend/src/pages/integrations/railway/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -18,10 +22,10 @@ import {
   useGetIntegrationAuthRailwayServices
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function RailwayCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const [targetAppId, setTargetAppId] = useState("");
   const [targetEnvironmentId, setTargetEnvironmentId] = useState("");
@@ -96,7 +100,7 @@ export default function RailwayCreateIntegrationPage() {
         (service) => service.serviceId === targetServiceId
       );
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp.name,

frontend/src/pages/integrations/render/authorize.tsx

@@ -1,11 +1,14 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import { useSaveIntegrationAccessToken} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function RenderCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +23,7 @@ export default function RenderCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "render",
         accessId: null,

frontend/src/pages/integrations/render/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function RenderCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -56,7 +60,7 @@ export default function RenderCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/supabase/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function SupabaseCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function SupabaseCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "supabase",
         accessToken: apiKey,

frontend/src/pages/integrations/supabase/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function SupabaseCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -57,7 +61,7 @@ export default function SupabaseCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/teamcity/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function TeamCityCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [serverUrl, setServerUrl] = useState("");
@@ -29,7 +34,7 @@ export default function TeamCityCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "teamcity",
         accessId: null,

frontend/src/pages/integrations/teamcity/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function TeamCityCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -56,7 +60,7 @@ export default function TeamCityCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/terraform-cloud/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function TerraformCloudCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [workspacesId, setWorkSpacesId] = useState("");
@@ -29,7 +34,7 @@ export default function TerraformCloudCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "terraform-cloud",
         accessId: workspacesId,

frontend/src/pages/integrations/terraform-cloud/create.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import { useCreateIntegration } from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,7 +18,6 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 const variableTypes = [
   { name: "env" },
@@ -25,6 +26,7 @@ const variableTypes = [
 
 export default function TerraformCloudCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -70,7 +72,7 @@ export default function TerraformCloudCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/travisci/authorize.tsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 export default function TravisCICreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -20,7 +25,7 @@ export default function TravisCICreateIntegrationPage() {
 
       setIsLoading(true);
 
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "travisci",
         accessToken: apiKey,

frontend/src/pages/integrations/travisci/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function TravisCICreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -56,7 +60,7 @@ export default function TravisCICreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,

frontend/src/pages/integrations/vercel/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -17,7 +21,6 @@ import {
   useGetIntegrationAuthVercelBranches
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 const vercelEnvironments = [
   { name: "Development", slug: "development" },
@@ -27,6 +30,7 @@ const vercelEnvironments = [
 
 export default function VercelCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
@@ -81,7 +85,7 @@ export default function VercelCreateIntegrationPage() {
 
       const path = targetEnvironment === "preview" && targetBranch !== "" ? targetBranch : null;
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp.name,

frontend/src/pages/integrations/vercel/oauth2/callback.tsx

@@ -2,10 +2,13 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
-import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+import {
+  useAuthorizeIntegration
+} from "@app/hooks/api";
 
 export default function VercelOAuth2CallbackPage() {
   const router = useRouter();
+  const { mutateAsync } = useAuthorizeIntegration();
 
   const { code, state } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -15,8 +18,8 @@ export default function VercelOAuth2CallbackPage() {
         // validate state
         if (state !== localStorage.getItem("latestCSRFToken")) return;
         localStorage.removeItem("latestCSRFToken");
-
-        const integrationAuth = await AuthorizeIntegration({
+        
+        const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id") as string,
           code: code as string,
           integration: "vercel"

frontend/src/pages/integrations/windmill/authorize.tsx

@@ -1,12 +1,17 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 
+import {
+  useSaveIntegrationAccessToken
+} from "@app/hooks/api";
+
 import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
-import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
 
 
 export default function WindmillCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
   const [apiKey, setApiKey] = useState("");
   const [apiKeyErrorText, setApiKeyErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -21,7 +26,7 @@ export default function WindmillCreateIntegrationPage() {
   
       setIsLoading(true);
   
-      const integrationAuth = await saveIntegrationAccessToken({
+      const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "windmill",
         accessToken: apiKey,

frontend/src/pages/integrations/windmill/create.tsx

@@ -2,6 +2,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import queryString from "query-string";
 
+import {
+  useCreateIntegration
+} from "@app/hooks/api";
+
 import {
   Button,
   Card,
@@ -16,10 +20,10 @@ import {
   useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
-import createIntegration from "../../api/integrations/createIntegration";
 
 export default function WindmillCreateIntegrationPage() {
   const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
@@ -57,7 +61,7 @@ export default function WindmillCreateIntegrationPage() {
 
       setIsLoading(true);
 
-      await createIntegration({
+      await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
         app: targetApp,