Add banner to the app when running in preview mode (#608)

mui · Jun 27, 2022 · e33abd8 · e33abd8
1 parent 479def3
commit e33abd8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/packages/toolpad-app/src/components/AppEditor/AppEditorShell.tsx b/packages/toolpad-app/src/components/AppEditor/AppEditorShell.tsx
@@ -16,6 +16,7 @@ import {
 import * as React from 'react';
 import { useForm } from 'react-hook-form';
 import { Outlet, useNavigate } from 'react-router-dom';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
 import DialogForm from '../DialogForm';
 import { useDomLoader } from '../DomLoader';
@@ -115,7 +116,7 @@ export default function AppEditorShell({ appId, ...props }: ToolpadAppShellProps
     <ToolpadAppShell
       appId={appId}
       actions={
-        <React.Fragment>
+        <Stack direction="row" gap={1} alignItems="center">
           {domLoader.saving ? (
             <Box display="flex" flexDirection="row" alignItems="center">
               <CircularProgress size={16} color="inherit" sx={{ mr: 1 }} />
@@ -125,12 +126,20 @@ export default function AppEditorShell({ appId, ...props }: ToolpadAppShellProps
           <IconButton
             aria-label="Create release"
             color="inherit"
-            sx={{ ml: 1 }}
             onClick={() => setCreateReleaseDialogOpen(true)}
           >
             <RocketLaunchIcon />
           </IconButton>
-        </React.Fragment>
+          <Button
+            variant="outlined"
+            component="a"
+            href={`/app/${appId}/preview`}
+            target="_blank"
+            endIcon={<OpenInNewIcon />}
+          >
+            Preview
+          </Button>
+        </Stack>
       }
       {...props}
     >

diff --git a/packages/toolpad-app/src/runtime/AppCanvas/index.tsx b/packages/toolpad-app/src/runtime/AppCanvas/index.tsx
@@ -56,6 +56,7 @@ export default function AppCanvas({ basename }: AppCanvasProps) {
 
   const editorHooks: EditorHooks = React.useMemo(() => {
     return {
+      hidePreviewBanner: true,
       navigateToPage(pageNodeId) {
         fireEvent({ type: 'pageNavigationRequest', pageNodeId });
       },

diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -61,6 +61,7 @@ export interface NavigateToPage {
 
 export interface EditorHooks {
   navigateToPage?: NavigateToPage;
+  hidePreviewBanner?: boolean;
 }
 
 export const EditorHooksContext = React.createContext<EditorHooks>({});
@@ -576,6 +577,8 @@ export default function ToolpadApp({ basename, appId, version, dom }: ToolpadApp
   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]);
@@ -602,6 +605,9 @@ export default function ToolpadApp({ basename, appId, version, dom }: ToolpadApp
         <DomContextProvider value={dom}>
           <AppThemeProvider node={theme}>
             <CssBaseline />
+            {hidePreviewBanner ? null : (
+              <Alert severity="info">This is a preview version of the application.</Alert>
+            )}
             <ErrorBoundary FallbackComponent={AppError}>
               <ResetNodeErrorsKeyProvider value={resetNodeErrorsKey}>
                 <React.Suspense fallback={<AppLoading />}>