From 528488dc888b5e3323444e9bbca565fc8fed7353 Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Tue, 5 Jul 2022 18:35:46 +0200
Subject: [PATCH] Hide preview banner on deployed pages

---
 .../toolpad-app/src/runtime/AppCanvas/index.tsx  |  2 +-
 packages/toolpad-app/src/runtime/ToolpadApp.tsx  | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/toolpad-app/src/runtime/AppCanvas/index.tsx b/packages/toolpad-app/src/runtime/AppCanvas/index.tsx
index c1017c33ad5..5d79b30c244 100644
--- a/packages/toolpad-app/src/runtime/AppCanvas/index.tsx
+++ b/packages/toolpad-app/src/runtime/AppCanvas/index.tsx
@@ -56,7 +56,6 @@ export default function AppCanvas({ basename }: AppCanvasProps) {
 
   const editorHooks: EditorHooks = React.useMemo(() => {
     return {
-      hidePreviewBanner: true,
       navigateToPage(pageNodeId) {
         fireEvent({ type: 'pageNavigationRequest', pageNodeId });
       },
@@ -66,6 +65,7 @@ export default function AppCanvas({ basename }: AppCanvasProps) {
   return state ? (
     <EditorHooksContext.Provider value={editorHooks}>
       <ToolpadApp
+        hidePreviewBanner
         dom={state.dom}
         version="preview"
         appId={state.appId}
diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
index 8b64ecb26eb..e731e7b0c3d 100644
--- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx
+++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -61,7 +61,6 @@ export interface NavigateToPage {
 
 export interface EditorHooks {
   navigateToPage?: NavigateToPage;
-  hidePreviewBanner?: boolean;
 }
 
 export const EditorHooksContext = React.createContext<EditorHooks>({});
@@ -567,18 +566,23 @@ function AppError({ error }: FallbackProps) {
 }
 
 export interface ToolpadAppProps {
+  hidePreviewBanner?: boolean;
   basename: string;
   appId: string;
   version: VersionOrPreview;
   dom: appDom.AppDom;
 }
 
-export default function ToolpadApp({ basename, appId, version, dom }: ToolpadAppProps) {
+export default function ToolpadApp({
+  basename,
+  appId,
+  version,
+  dom,
+  hidePreviewBanner,
+}: ToolpadAppProps) {
   const root = appDom.getApp(dom);
   const { pages = [], themes = [] } = appDom.getChildNodes(dom, root);
 
-  const { hidePreviewBanner } = React.useContext(EditorHooksContext);
-
   const theme = themes.length > 0 ? themes[0] : null;
 
   const appContext = React.useMemo(() => ({ appId, version }), [appId, version]);
@@ -605,9 +609,9 @@ export default function ToolpadApp({ basename, appId, version, dom }: ToolpadApp
         <DomContextProvider value={dom}>
           <AppThemeProvider node={theme}>
             <CssBaseline />
-            {hidePreviewBanner ? null : (
+            {version === 'preview' && !hidePreviewBanner ? (
               <Alert severity="info">This is a preview version of the application.</Alert>
-            )}
+            ) : null}
             <ErrorBoundary FallbackComponent={AppError}>
               <ResetNodeErrorsKeyProvider value={resetNodeErrorsKey}>
                 <React.Suspense fallback={<AppLoading />}>