misc: added auto redirect to new connection flow

frontend/src/pages/integrations/select-integration-auth.tsx

@@ -1,11 +1,11 @@
 import crypto from "crypto";
 
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import { useRouter } from "next/router";
 
-import { Button, Card, CardTitle } from "@app/components/v2";
+import { Button, Card, CardTitle, ContentLoader } from "@app/components/v2";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
   useDuplicateIntegrationAuth,
@@ -31,8 +31,11 @@ export default function SelectIntegrationAuthPage() {
 
   // for Github, we want to reuse the same connection across the Infisical organization
   // when we do need to reuse this page for other integrations, add handling to fetch workspace integration auths instead
-  const { data: integrationAuths, isLoading: isLoadingIntegrationAuths } =
+  const {
-    useGetOrgIntegrationAuths(
+    data: integrationAuths,
+    isLoading: isLoadingIntegrationAuths,
+    isSuccess: isLoadingIntegrationAuthsSuccess
+  } = useGetOrgIntegrationAuths(
     orgId,
     useCallback(
       (data: IntegrationAuth[]) => {
@@ -78,6 +81,28 @@ export default function SelectIntegrationAuthPage() {
     )
   );
 
+  const handleNewConnection = () => {
+    const state = crypto.randomBytes(16).toString("hex");
+    localStorage.setItem("latestCSRFToken", state);
+
+    if (integrationSlug === "github") {
+      // for now we only handle Github apps
+      window.location.assign(
+        `https://github.com/apps/${currentIntegration?.clientSlug}/installations/new?state=${state}`
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (
+      !isLoadingIntegrationAuths &&
+      integrationAuths?.length === 0 &&
+      isLoadingIntegrationAuthsSuccess
+    ) {
+      handleNewConnection();
+    }
+  }, [isLoadingIntegrationAuths, integrationAuths, isLoadingIntegrationAuthsSuccess]);
+
   const logo = integrationSlug === "github" ? "/images/integrations/GitHub.png" : "";
 
   const handleConnectionSelect = async (integrationAuth: IntegrationAuth) => {
@@ -96,17 +121,12 @@ export default function SelectIntegrationAuthPage() {
     }
   };
 
-  const handleNewConnection = () => {
+  if (
-    const state = crypto.randomBytes(16).toString("hex");
+    isLoadingIntegrationAuths ||
-    localStorage.setItem("latestCSRFToken", state);
+    (integrationAuths?.length === 0 && isLoadingIntegrationAuthsSuccess)
-
+  ) {
-    if (integrationSlug === "github") {
+    return <ContentLoader />;
-      // for now we only handle Github apps
-      window.location.assign(
-        `https://github.com/apps/${currentIntegration?.clientSlug}/installations/new?state=${state}`
-      );
   }
-  };
 
   return (
     <div className="flex h-full w-full items-center justify-center">