Fix complete oauth error

airbyte-webapp/src/hooks/services/useConnectorAuth.tsx

@@ -1,6 +1,6 @@
 import { useFormikContext } from "formik";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useAsyncFn } from "react-use";
+import { useCallback, useMemo, useRef } from "react";
+import { useAsyncFn, useEffectOnce, useEvent } from "react-use";
 import merge from "lodash.merge";
 
 import {
@@ -19,6 +19,27 @@ import { RequestMiddleware } from "core/request/RequestMiddleware";
 import { isSourceDefinitionSpecification } from "core/domain/connector/source";
 import useRouter from "../useRouter";
 
+let windowObjectReference: Window | null = null; // global variable
+
+function openWindow(url: string): void {
+  if (windowObjectReference == null || windowObjectReference.closed) {
+    /* if the pointer to the window object in memory does not exist
+       or if such pointer exists but the window was closed */
+
+    const strWindowFeatures =
+      "toolbar=no,menubar=no,width=600,height=700,top=100,left=100";
+    windowObjectReference = window.open(url, "name", strWindowFeatures);
+    /* then create it. The new window will be created and
+       will be brought on top of any other window. */
+  } else {
+    windowObjectReference.focus();
+    /* else the window reference must exist and the window
+       is not closed; therefore, we can bring it back on top of any other
+       window with the focus() method. There would be no need to re-create
+       the window or to reload the referenced resource. */
+  }
+}
+
 export function useConnectorAuth() {
   const { workspaceId } = useCurrentWorkspace();
   const { apiUrl, oauthRedirectUrl } = useConfig();
@@ -77,27 +98,6 @@ export function useConnectorAuth() {
   };
 }
 
-let windowObjectReference: Window | null = null; // global variable
-
-function openWindow(url: string): void {
-  if (windowObjectReference == null || windowObjectReference.closed) {
-    /* if the pointer to the window object in memory does not exist
-       or if such pointer exists but the window was closed */
-
-    const strWindowFeatures =
-      "toolbar=no,menubar=no,width=600,height=700,top=100,left=100";
-    windowObjectReference = window.open(url, "name", strWindowFeatures);
-    /* then create it. The new window will be created and
-       will be brought on top of any other window. */
-  } else {
-    windowObjectReference.focus();
-    /* else the window reference must exist and the window
-       is not closed; therefore, we can bring it back on top of any other
-       window with the focus() method. There would be no need to re-create
-       the window or to reload the referenced resource. */
-  }
-}
-
 export function useRunOauthFlow(
   connector: ConnectorDefinitionSpecification
 ): {
@@ -152,11 +152,7 @@ export function useRunOauthFlow(
     [completeOauth]
   );
 
-  useEffect(() => {
-    window.addEventListener("message", onOathGranted, false);
-
-    return () => window.removeEventListener("message", onOathGranted);
-  }, [onOathGranted]);
+  useEvent("message", onOathGranted);
 
   return {
     loading: loadingCompleteOauth || loading,
@@ -168,8 +164,8 @@ export function useRunOauthFlow(
 export function useResolveRedirect(): void {
   const { query } = useRouter();
 
-  useEffect(() => {
+  useEffectOnce(() => {
     window.opener.postMessage(query);
     window.close();
-  }, [query]);
+  });
 }

airbyte-webapp/src/hooks/useRouter.tsx

@@ -26,21 +26,26 @@ function useRouter<T = any, L = any>(): {
   const location = useLocation<L>();
   const history = useHistory();
   const match = useRouteMatch();
+  const query = useMemo<T>(
+    () =>
+      ({
+        ...queryString.parse(location.search), // Convert string to object
+        ...params,
+      } as T),
+    [params, location.search]
+  );
 
   return useMemo(() => {
     return {
       push: history.push,
       replace: history.replace,
       pathname: location.pathname,
-      query: {
-        ...queryString.parse(location.search), // Convert string to object
-        ...params,
-      } as T,
+      query,
       match,
       location,
       history,
     };
-  }, [params, match, location, history]);
+  }, [match, location, history, query]);
 }
 
 export default useRouter;

airbyte-webapp/src/packages/cloud/routes.tsx

@@ -132,29 +132,27 @@ const MainViewRoutes = () => {
   const { currentWorkspaceId } = useWorkspaceService();
 
   return (
-    <>
-      <Switch>
-        <Route path={Routes.AuthFlow}>
-          <CompleteOauthRequest />
-        </Route>
-        <Route>
-          {currentWorkspaceId ? (
-            <MainView>
-              <Suspense fallback={<LoadingPage />}>
-                <MainRoutes currentWorkspaceId={currentWorkspaceId} />
-              </Suspense>
-            </MainView>
-          ) : (
-            <Switch>
-              <Route exact path={Routes.SelectWorkspace}>
-                <WorkspacesPage />
-              </Route>
-              <Redirect to={Routes.SelectWorkspace} />
-            </Switch>
-          )}
-        </Route>
-      </Switch>
-    </>
+    <Switch>
+      <Route path={Routes.AuthFlow}>
+        <CompleteOauthRequest />
+      </Route>
+      <Route>
+        {currentWorkspaceId ? (
+          <MainView>
+            <Suspense fallback={<LoadingPage />}>
+              <MainRoutes currentWorkspaceId={currentWorkspaceId} />
+            </Suspense>
+          </MainView>
+        ) : (
+          <Switch>
+            <Route exact path={Routes.SelectWorkspace}>
+              <WorkspacesPage />
+            </Route>
+            <Redirect to={Routes.SelectWorkspace} />
+          </Switch>
+        )}
+      </Route>
+    </Switch>
   );
 };
 

airbyte-webapp/src/views/CompleteOauthRequest.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { LoadingPage } from "components";
 import { useResolveRedirect } from "hooks/services/useConnectorAuth";
 
-const CompleteOauthRequest: React.FC = () => {
+const CompleteOauthRequest: React.FC = React.memo(() => {
   useResolveRedirect();
 
   return <LoadingPage />;
-};
+});
 
 export { CompleteOauthRequest };