From e4c7243278473390778aad3e8825b9faa6660842 Mon Sep 17 00:00:00 2001 From: Artem Astapenko Date: Wed, 17 Nov 2021 17:27:06 +0300 Subject: [PATCH] Fix complete oauth error --- .../src/hooks/services/useConnectorAuth.tsx | 56 +++++++++---------- airbyte-webapp/src/hooks/useRouter.tsx | 15 +++-- airbyte-webapp/src/packages/cloud/routes.tsx | 44 +++++++-------- .../src/views/CompleteOauthRequest.tsx | 4 +- 4 files changed, 59 insertions(+), 60 deletions(-) diff --git a/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx b/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx index 8bf6c03a85d2df..6db832e0285e96 100644 --- a/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx +++ b/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]); + }); } diff --git a/airbyte-webapp/src/hooks/useRouter.tsx b/airbyte-webapp/src/hooks/useRouter.tsx index d8f8122c3c6e30..bfb28ada7f2d0a 100644 --- a/airbyte-webapp/src/hooks/useRouter.tsx +++ b/airbyte-webapp/src/hooks/useRouter.tsx @@ -26,21 +26,26 @@ function useRouter(): { const location = useLocation(); const history = useHistory(); const match = useRouteMatch(); + const query = useMemo( + () => + ({ + ...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; diff --git a/airbyte-webapp/src/packages/cloud/routes.tsx b/airbyte-webapp/src/packages/cloud/routes.tsx index 213bee6b50d18b..a8093648a7b02f 100644 --- a/airbyte-webapp/src/packages/cloud/routes.tsx +++ b/airbyte-webapp/src/packages/cloud/routes.tsx @@ -132,29 +132,27 @@ const MainViewRoutes = () => { const { currentWorkspaceId } = useWorkspaceService(); return ( - <> - - - - - - {currentWorkspaceId ? ( - - }> - - - - ) : ( - - - - - - - )} - - - + + + + + + {currentWorkspaceId ? ( + + }> + + + + ) : ( + + + + + + + )} + + ); }; diff --git a/airbyte-webapp/src/views/CompleteOauthRequest.tsx b/airbyte-webapp/src/views/CompleteOauthRequest.tsx index 6a99d6c126c88f..a06c859e5a7413 100644 --- a/airbyte-webapp/src/views/CompleteOauthRequest.tsx +++ b/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 ; -}; +}); export { CompleteOauthRequest };