Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add latest deployment preview in editor #1423

Merged
merged 11 commits into from
Dec 20, 2022
49 changes: 41 additions & 8 deletions packages/toolpad-app/src/toolpad/AppEditor/AppEditorShell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
Alert,
Box,
Button,
ButtonGroup,
Dialog,
DialogActions,
DialogContent,
Expand All @@ -11,11 +12,14 @@ import {
TextField,
Tooltip,
Typography,
Menu,
MenuItem,
} from '@mui/material';
import CloudDoneIcon from '@mui/icons-material/CloudDone';
import SyncIcon from '@mui/icons-material/Sync';
import SyncProblemIcon from '@mui/icons-material/SyncProblem';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';

import * as React from 'react';
Expand All @@ -28,6 +32,7 @@ import ToolpadShell from '../ToolpadShell';
import PagePanel from './PagePanel';
import client from '../../api';
import useBoolean from '../../utils/useBoolean';
import useMenu from '../../utils/useMenu';

interface CreateReleaseDialogProps {
appId: string;
Expand Down Expand Up @@ -138,13 +143,18 @@ export interface ToolpadShellProps {

export default function AppEditorShell({ appId, ...props }: ToolpadShellProps) {
const domLoader = useDomLoader();
const release = client.useQuery('findLastRelease', [appId]);

const {
value: createReleaseDialogOpen,
setTrue: handleCreateReleaseDialogOpen,
setFalse: handleCreateReleaseDialogClose,
} = useBoolean(false);

const isDeployed = Boolean(release?.data);

const { buttonProps, menuProps } = useMenu();

return (
<ToolpadShell
actions={
Expand All @@ -159,14 +169,37 @@ export default function AppEditorShell({ appId, ...props }: ToolpadShellProps) {
>
Preview
</Button>
<Button
variant="outlined"
endIcon={<RocketLaunchIcon />}
color="primary"
onClick={handleCreateReleaseDialogOpen}
>
Deploy
</Button>
<ButtonGroup>
<Button
variant="outlined"
endIcon={<RocketLaunchIcon />}
size="small"
color="primary"
onClick={handleCreateReleaseDialogOpen}
>
Deploy
</Button>
{isDeployed ? (
<React.Fragment>
<Button size="small" {...buttonProps}>
<ArrowDropDownIcon />
</Button>
<Menu
{...menuProps}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
>
{!release.error ? (
bytasv marked this conversation as resolved.
Show resolved Hide resolved
<MenuItem component="a" href={`/deploy/${appId}`} target="_blank">
Open current deployed version
</MenuItem>
) : (
<MenuItem>{release.error as string}</MenuItem>
bytasv marked this conversation as resolved.
Show resolved Hide resolved
)}
</Menu>
</React.Fragment>
) : null}
</ButtonGroup>
</Stack>
}
status={getSaveState(domLoader)}
Expand Down