Move all integration queries/mutations to hooks

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,