Remote auth fix

designer/client/src/components/RemoteComponent.tsx

@@ -1,9 +1,9 @@
-import React, { useMemo } from "react";
-import LoaderSpinner from "./spinner/Spinner";
 import { FederatedComponent, FederatedComponentProps, getFederatedComponentLoader } from "@touk/federated-component";
-import { NuThemeProvider } from "../containers/theme/nuThemeProvider";
+import React, { useMemo } from "react";
 import SystemUtils from "../common/SystemUtils";
+import { NuThemeProvider } from "../containers/theme/nuThemeProvider";
 import { useWindows, WindowKind } from "../windowManager";
+import LoaderSpinner from "./spinner/Spinner";
 
 export const loadExternalReactModule = getFederatedComponentLoader({ Wrapper: NuThemeProvider });
 export const loadExternalReactModuleWithAuth = getFederatedComponentLoader({
@@ -14,6 +14,17 @@ export const loadExternalReactModuleWithAuth = getFederatedComponentLoader({
 window["loadExternalReactModule"] = loadExternalReactModule;
 window["loadExternalReactModuleWithAuth"] = loadExternalReactModuleWithAuth;
 
+function PlainRemoteComponentRender<P extends NonNullable<unknown>, T = unknown>(
+    props: FederatedComponentProps<P>,
+    ref: React.ForwardedRef<T>,
+) {
+    return <FederatedComponent<P, T> ref={ref} {...props} fallback={<LoaderSpinner show={true} />} buildHash={__BUILD_HASH__} />;
+}
+
+export const PlainRemoteComponent = React.forwardRef(PlainRemoteComponentRender) as <P extends NonNullable<unknown>, T = unknown>(
+    props: FederatedComponentProps<P> & React.RefAttributes<T>,
+) => React.ReactElement;
+
 export type RemoteToolbarContentProps = {
     openRemoteModuleWindow: <P extends NonNullable<unknown>>(props: P & { url?: string; title?: string }) => void;
 };
@@ -32,15 +43,7 @@ function RemoteComponentRender<P extends NonNullable<unknown>, T = unknown>(prop
         [open],
     );
 
-    return (
-        <FederatedComponent<P, T>
-            ref={ref}
-            {...sharedContext}
-            {...props}
-            fallback={<LoaderSpinner show={true} />}
-            buildHash={__BUILD_HASH__}
-        />
-    );
+    return <PlainRemoteComponent<P, T> ref={ref} {...sharedContext} {...props} />;
 }
 
 export const RemoteComponent = React.forwardRef(RemoteComponentRender) as <P extends NonNullable<unknown>, T = unknown>(

designer/client/src/containers/Auth/strategies/RemoteAuthStrategy/RemoteAuthStrategy.tsx

@@ -3,7 +3,7 @@ import React, { FunctionComponent, PropsWithChildren } from "react";
 import { PendingPromise } from "../../../../common/PendingPromise";
 import SystemUtils from "../../../../common/SystemUtils";
 import { ErrorBoundary } from "../../../../components/common/error-boundary";
-import { RemoteComponent } from "../../../../components/RemoteComponent";
+import { PlainRemoteComponent } from "../../../../components/RemoteComponent";
 import { RemoteAuthenticationSettings } from "../../../../reducers/settings";
 import { AuthErrorCodes } from "../../AuthErrorCodes";
 import { Strategy, StrategyConstructor } from "../../Strategy";
@@ -18,9 +18,9 @@ function createAuthWrapper(url: ModuleUrl, onInit: AuthLibCallback): FunctionCom
     return function Wrapper({ children }: PropsWithChildren<unknown>) {
         return (
             <ErrorBoundary>
-                <RemoteComponent<RemoteAuthProviderProps> url={url} onInit={onInit}>
+                <PlainRemoteComponent<RemoteAuthProviderProps> url={url} onInit={onInit}>
                     {children}
-                </RemoteComponent>
+                </PlainRemoteComponent>
             </ErrorBoundary>
         );
     };

designer/client/src/windowManager/useWindows.ts

@@ -33,7 +33,15 @@ const useRemoveFocusOnEscKey = (isWindowOpen: boolean) => {
 };
 
 export function useWindows(parent?: WindowId) {
-    const { open: _open, closeAll, windows } = useWindowManager(parent);
+    let windowManager: ReturnType<typeof useWindowManager>;
+
+    try {
+        windowManager = useWindowManager(parent);
+    } catch (e) {
+        throw "used outside WindowManager context";
+    }
+
+    const { open: _open, closeAll, windows } = windowManager;
     useRemoveFocusOnEscKey(windows.length > 0);
     const [settings] = useUserSettings();
     const forceDisableModals = useMemo(() => settings["debug.forceDisableModals"], [settings]);