From 3ca452c0d9229fcfd8f3dee6a8f9fa076be36c5d Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Tue, 6 Feb 2024 06:01:44 +0100 Subject: [PATCH 1/4] Add isCanvas into app host context --- packages/toolpad-app/src/canvas/index.tsx | 10 ++++++--- .../src/runtime/AppHostContext.tsx | 1 + .../toolpad-app/src/runtime/ToolpadApp.tsx | 21 +++++++++---------- packages/toolpad-app/src/runtime/index.tsx | 10 +++++++-- 4 files changed, 26 insertions(+), 16 deletions(-) diff --git a/packages/toolpad-app/src/canvas/index.tsx b/packages/toolpad-app/src/canvas/index.tsx index f845991e284..9e6967643ca 100644 --- a/packages/toolpad-app/src/canvas/index.tsx +++ b/packages/toolpad-app/src/canvas/index.tsx @@ -4,7 +4,8 @@ import { throttle } from 'lodash-es'; import { CanvasEventsContext } from '@mui/toolpad-core/runtime'; import { FlowDirection, SlotType } from '@mui/toolpad-core'; import { update } from '@mui/toolpad-utils/immutability'; -import ToolpadApp, { IS_RENDERED_IN_CANVAS } from '../runtime/ToolpadApp'; +import { useNonNullableContext } from '@mui/toolpad-utils/react'; +import ToolpadApp from '../runtime/ToolpadApp'; import { queryClient } from '../runtime/api'; import { AppCanvasState, NodeInfo, PageViewState, SlotsState } from '../types'; import { @@ -14,6 +15,7 @@ import { } from '../utils/geometry'; import { CanvasHooks, CanvasHooksContext } from '../runtime/CanvasHooksContext'; import { ToolpadBridge, bridge, setCommandHandler } from './ToolpadBridge'; +import { AppHostContext } from '../runtime/AppHostContext'; const handleScreenUpdate = throttle( () => { @@ -80,7 +82,7 @@ export interface AppCanvasProps { export default function AppCanvas({ basename, state: initialState }: AppCanvasProps) { const [state, setState] = React.useState(initialState); - const [readyBridge, setReadyBridge] = React.useState(); + const [readyBridge, setReadyBridge] = React.useState(); const appRootRef = React.useRef(); const appRootCleanupRef = React.useRef<() => void>(); @@ -202,7 +204,9 @@ export default function AppCanvas({ basename, state: initialState }: AppCanvasPr }; }, [savedNodes]); - if (IS_RENDERED_IN_CANVAS) { + const appHost = useNonNullableContext(AppHostContext); + + if (appHost.isCanvas) { return readyBridge ? ( diff --git a/packages/toolpad-app/src/runtime/AppHostContext.tsx b/packages/toolpad-app/src/runtime/AppHostContext.tsx index c7010ff6888..986d013771c 100644 --- a/packages/toolpad-app/src/runtime/AppHostContext.tsx +++ b/packages/toolpad-app/src/runtime/AppHostContext.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; export interface AppHost { isPreview: boolean; isCustomServer: boolean; + isCanvas: boolean; } export const AppHostContext = React.createContext(null); diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 5b4a2d9de2f..e504b73df73 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -44,7 +44,6 @@ import { mapProperties, mapValues } from '@mui/toolpad-utils/collections'; import { set as setObjectPath } from 'lodash-es'; import { QueryClientProvider, useMutation } from '@tanstack/react-query'; import { - BrowserRouter, Routes, Route, useLocation, @@ -99,11 +98,6 @@ import { AppHostContext } from './AppHostContext'; const browserJsRuntime = getBrowserRuntime(); -export const IS_RENDERED_IN_CANVAS = - typeof window === 'undefined' - ? false - : !!(window.frameElement as HTMLIFrameElement)?.dataset?.toolpadCanvas; - export type PageComponents = Partial>; export const componentsStore = createGlobalState({}); @@ -1484,6 +1478,8 @@ function RenderedPages({ pages, defaultPage }: RenderedPagesProps) { const defaultPageNavigation = ; + const appHost = useNonNullableContext(AppHostContext); + return ( {pages.map((page) => { @@ -1496,7 +1492,7 @@ function RenderedPages({ pages, defaultPage }: RenderedPagesProps) { /> ); - if (!IS_RENDERED_IN_CANVAS) { + if (!appHost.isCanvas) { pageContent = ( ; } @@ -1591,8 +1589,8 @@ function ToolpadAppLayout({ dom, basename, clipped }: ToolpadAppLayoutProps) { @@ -1630,7 +1628,8 @@ export default function ToolpadApp({ rootRef, basename, state }: ToolpadAppProps const authContext = useAuth({ dom, basename, isRenderedInCanvas: IS_RENDERED_IN_CANVAS }); const appHost = useNonNullableContext(AppHostContext); - const showPreviewHeader: boolean = !!appHost?.isPreview && !IS_RENDERED_IN_CANVAS; + const showPreviewHeader: boolean = !!appHost.isPreview && !appHost.isCanvas; + return ( diff --git a/packages/toolpad-app/src/runtime/index.tsx b/packages/toolpad-app/src/runtime/index.tsx index 52d9942dd57..8ef4ebbdbc4 100644 --- a/packages/toolpad-app/src/runtime/index.tsx +++ b/packages/toolpad-app/src/runtime/index.tsx @@ -13,7 +13,7 @@ import RuntimeToolpadApp, { pageComponentsStore, } from './ToolpadApp'; import { RuntimeState } from './types'; -import { AppHostContext } from './AppHostContext'; +import { AppHost, AppHostContext } from './AppHostContext'; const IS_PREVIEW = process.env.NODE_ENV !== 'production'; const IS_CUSTOM_SERVER = process.env.TOOLPAD_CUSTOM_SERVER === 'true'; @@ -43,9 +43,15 @@ export interface RootProps { ToolpadApp: React.ComponentType; } -const appHost = { +const IS_RENDERED_IN_CANVAS = + typeof window === 'undefined' + ? false + : !!(window.frameElement as HTMLIFrameElement)?.dataset?.toolpadCanvas; + +const appHost: AppHost = { isPreview: IS_PREVIEW, isCustomServer: IS_CUSTOM_SERVER, + isCanvas: IS_RENDERED_IN_CANVAS, }; function Root({ ToolpadApp, initialState, base }: RootProps) { From 8c3f7d280cf985e0d93d42afca6620b0a727beda Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Tue, 6 Feb 2024 06:03:05 +0100 Subject: [PATCH 2/4] Update index.tsx --- packages/toolpad-app/src/runtime/index.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/toolpad-app/src/runtime/index.tsx b/packages/toolpad-app/src/runtime/index.tsx index 8ef4ebbdbc4..d8237d51107 100644 --- a/packages/toolpad-app/src/runtime/index.tsx +++ b/packages/toolpad-app/src/runtime/index.tsx @@ -17,6 +17,10 @@ import { AppHost, AppHostContext } from './AppHostContext'; const IS_PREVIEW = process.env.NODE_ENV !== 'production'; const IS_CUSTOM_SERVER = process.env.TOOLPAD_CUSTOM_SERVER === 'true'; +const IS_RENDERED_IN_CANVAS = + typeof window === 'undefined' + ? false + : !!(window.frameElement as HTMLIFrameElement)?.dataset?.toolpadCanvas; const cache = createCache({ key: 'css', @@ -43,11 +47,6 @@ export interface RootProps { ToolpadApp: React.ComponentType; } -const IS_RENDERED_IN_CANVAS = - typeof window === 'undefined' - ? false - : !!(window.frameElement as HTMLIFrameElement)?.dataset?.toolpadCanvas; - const appHost: AppHost = { isPreview: IS_PREVIEW, isCustomServer: IS_CUSTOM_SERVER, From 5341afadcb188ecc7e328baf0e4ea06b64753a4d Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Tue, 6 Feb 2024 06:08:26 +0100 Subject: [PATCH 3/4] dewrew --- packages/toolpad-app/src/runtime/ToolpadApp.tsx | 4 ++-- packages/toolpad-app/src/runtime/useAuth.ts | 11 +++++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index e504b73df73..021ede3fa03 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -51,6 +51,7 @@ import { Location as RouterLocation, useNavigate, useMatch, + BrowserRouter, } from 'react-router-dom'; import { ErrorBoundary, FallbackProps } from 'react-error-boundary'; import { @@ -1625,12 +1626,11 @@ export default function ToolpadApp({ rootRef, basename, state }: ToolpadAppProps (window as any).toggleDevtools = () => toggleDevtools(); }, [toggleDevtools]); - const authContext = useAuth({ dom, basename, isRenderedInCanvas: IS_RENDERED_IN_CANVAS }); + const authContext = useAuth({ dom, basename }); const appHost = useNonNullableContext(AppHostContext); const showPreviewHeader: boolean = !!appHost.isPreview && !appHost.isCanvas; - return ( diff --git a/packages/toolpad-app/src/runtime/useAuth.ts b/packages/toolpad-app/src/runtime/useAuth.ts index ee736fbd73b..c7d1aad6efc 100644 --- a/packages/toolpad-app/src/runtime/useAuth.ts +++ b/packages/toolpad-app/src/runtime/useAuth.ts @@ -1,5 +1,7 @@ import * as React from 'react'; import * as appDom from '@mui/toolpad-core/appDom'; +import { useNonNullableContext } from '@mui/toolpad-utils/react'; +import { AppHostContext } from './AppHostContext'; const AUTH_API_PATH = '/api/auth'; @@ -46,10 +48,9 @@ export const AuthContext = React.createContext({ interface UseAuthInput { dom: appDom.RenderTree; basename: string; - isRenderedInCanvas?: boolean; } -export function useAuth({ dom, basename, isRenderedInCanvas = true }: UseAuthInput): AuthPayload { +export function useAuth({ dom, basename }: UseAuthInput): AuthPayload { const authProviders = React.useMemo(() => { const app = appDom.getApp(dom); const authProviderConfigs = app.attributes.authentication?.providers ?? []; @@ -157,11 +158,13 @@ export function useAuth({ dom, basename, isRenderedInCanvas = true }: UseAuthInp [basename, getCsrfToken, signOut], ); + const appHost = useNonNullableContext(AppHostContext); + React.useEffect(() => { - if (!isRenderedInCanvas && hasAuthentication) { + if (hasAuthentication && !appHost.isCanvas) { getSession(); } - }, [getCsrfToken, getSession, hasAuthentication, isRenderedInCanvas]); + }, [getCsrfToken, getSession, hasAuthentication, appHost.isCanvas]); return { session, From 26bb0af1e6464cc72c9c2e42ae15f34bb9e71aa7 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Tue, 6 Feb 2024 08:51:07 +0100 Subject: [PATCH 4/4] Update ToolpadApp.spec.tsx --- packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx index f0e577ded14..4971a805bac 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx @@ -27,7 +27,7 @@ afterEach(cleanup); const waitFor: typeof waitForOrig = (waiter, options) => waitForOrig(waiter, { timeout: 10000, ...options }); -const appHost: AppHost = { isPreview: false, isCustomServer: false }; +const appHost: AppHost = { isPreview: false, isCustomServer: false, isCanvas: false }; function renderPage( initPage: (dom: appDom.AppDom, page: appDom.PageNode) => appDom.AppDom,