snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/hooks/use-integration-popup.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "next/navigation";
+
+const useIntegrationPopup = ({
+  provider,
+  stateParams,
+  github_app_name,
+  slack_client_id,
+}: {
+  provider: string | undefined;
+  stateParams?: string;
+  github_app_name?: string;
+  slack_client_id?: string;
+}) => {
+  const [authLoader, setAuthLoader] = useState(false);
+
+  const { workspaceSlug, projectId } = useParams();
+
+  const providerUrls: { [key: string]: string } = {
+    github: `https://github.com/apps/${github_app_name}/installations/new?state=${workspaceSlug?.toString()}`,
+    slack: `https://slack.com/oauth/v2/authorize?scope=chat:write,im:history,im:write,links:read,links:write,users:read,users:read.email&user_scope=&&client_id=${slack_client_id}&state=${workspaceSlug?.toString()}`,
+    slackChannel: `https://slack.com/oauth/v2/authorize?scope=incoming-webhook&client_id=${slack_client_id}&state=${workspaceSlug?.toString()},${projectId?.toString()}${
+      stateParams ? "," + stateParams : ""
+    }`,
+  };
+
+  const popup = useRef<Window | null>(null);
+  const popupCheckIntervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+
+  // release the polling interval if the component unmounts mid-auth
+  useEffect(
+    () => () => {
+      if (popupCheckIntervalRef.current) clearInterval(popupCheckIntervalRef.current);
+    },
+    []
+  );
+
+  const checkPopup = () => {
+    // a repeated click restarts the flow, so retire the previous poller before
+    // replacing the ref — otherwise it outlives its popup and clears its successor
+    if (popupCheckIntervalRef.current) clearInterval(popupCheckIntervalRef.current);
+
+    const intervalId = setInterval(() => {
+      if (!popup.current || popup.current.closed) {
+        clearInterval(intervalId);
+        popupCheckIntervalRef.current = undefined;
+        setAuthLoader(false);
+      }
+    }, 1000);
+    popupCheckIntervalRef.current = intervalId;
+  };
+
+  const openPopup = (): Window | null => {
+    if (!provider) return null;
+
+    const width = 600,
+      height = 600;
+    const left = window.innerWidth / 2 - width / 2;
+    const top = window.innerHeight / 2 - height / 2;
+    const url = providerUrls[provider];
+
+    return window.open(url, "", `width=${width}, height=${height}, top=${top}, left=${left}`);
+  };
+
+  const startAuth = () => {
+    popup.current = openPopup();
+    if (!popup.current) return;
+    checkPopup();
+    setAuthLoader(true);
+  };
+
+  return {
+    startAuth,
+    isConnecting: authLoader,
+  };
+};
+
+export default useIntegrationPopup;