121 lines
3.6 KiB
JavaScript
121 lines
3.6 KiB
JavaScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
import Stack from '@mui/material/Stack';
|
|
import AppsIcon from '@mui/icons-material/Apps';
|
|
import SwapCallsIcon from '@mui/icons-material/SwapCalls';
|
|
import HistoryIcon from '@mui/icons-material/History';
|
|
import NotificationsIcon from '@mui/icons-material/Notifications';
|
|
import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';
|
|
import * as URLS from 'config/urls';
|
|
import useFormatMessage from 'hooks/useFormatMessage';
|
|
import useVersion from 'hooks/useVersion';
|
|
import AppBar from 'components/AppBar';
|
|
import Drawer from 'components/Drawer';
|
|
import useConfig from 'hooks/useConfig';
|
|
const drawerLinks = [
|
|
{
|
|
Icon: SwapCallsIcon,
|
|
primary: 'drawer.flows',
|
|
to: URLS.FLOWS,
|
|
dataTest: 'flows-page-drawer-link',
|
|
},
|
|
{
|
|
Icon: AppsIcon,
|
|
primary: 'drawer.apps',
|
|
to: URLS.APPS,
|
|
dataTest: 'apps-page-drawer-link',
|
|
},
|
|
{
|
|
Icon: HistoryIcon,
|
|
primary: 'drawer.executions',
|
|
to: URLS.EXECUTIONS,
|
|
dataTest: 'executions-page-drawer-link',
|
|
},
|
|
];
|
|
const generateDrawerBottomLinks = async ({
|
|
disableNotificationsPage,
|
|
notificationBadgeContent = 0,
|
|
additionalDrawerLink,
|
|
additionalDrawerLinkText,
|
|
formatMessage,
|
|
}) => {
|
|
const notificationsPageLinkObject = {
|
|
Icon: NotificationsIcon,
|
|
primary: formatMessage('settingsDrawer.notifications'),
|
|
to: URLS.UPDATES,
|
|
badgeContent: notificationBadgeContent,
|
|
};
|
|
const hasAdditionalDrawerLink =
|
|
additionalDrawerLink && additionalDrawerLinkText;
|
|
const additionalDrawerLinkObject = {
|
|
Icon: ArrowBackIosNew,
|
|
primary: additionalDrawerLinkText || '',
|
|
to: additionalDrawerLink || '',
|
|
target: '_blank',
|
|
};
|
|
const links = [];
|
|
if (!disableNotificationsPage) {
|
|
links.push(notificationsPageLinkObject);
|
|
}
|
|
if (hasAdditionalDrawerLink) {
|
|
links.push(additionalDrawerLinkObject);
|
|
}
|
|
return links;
|
|
};
|
|
export default function PublicLayout({ children }) {
|
|
const version = useVersion();
|
|
const { config, loading } = useConfig([
|
|
'disableNotificationsPage',
|
|
'additionalDrawerLink',
|
|
'additionalDrawerLinkText',
|
|
]);
|
|
const theme = useTheme();
|
|
const formatMessage = useFormatMessage();
|
|
const [bottomLinks, setBottomLinks] = React.useState([]);
|
|
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
|
|
const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
|
|
const openDrawer = () => setDrawerOpen(true);
|
|
const closeDrawer = () => setDrawerOpen(false);
|
|
React.useEffect(() => {
|
|
async function perform() {
|
|
const newBottomLinks = await generateDrawerBottomLinks({
|
|
notificationBadgeContent: version.newVersionCount,
|
|
disableNotificationsPage: config?.disableNotificationsPage,
|
|
additionalDrawerLink: config?.additionalDrawerLink,
|
|
additionalDrawerLinkText: config?.additionalDrawerLinkText,
|
|
formatMessage,
|
|
});
|
|
setBottomLinks(newBottomLinks);
|
|
}
|
|
if (loading) return;
|
|
perform();
|
|
}, [config, loading, version.newVersionCount]);
|
|
return (
|
|
<>
|
|
<AppBar
|
|
drawerOpen={isDrawerOpen}
|
|
onDrawerOpen={openDrawer}
|
|
onDrawerClose={closeDrawer}
|
|
/>
|
|
|
|
<Box sx={{ display: 'flex', height: '100%' }}>
|
|
<Drawer
|
|
links={drawerLinks}
|
|
bottomLinks={bottomLinks}
|
|
open={isDrawerOpen}
|
|
onOpen={openDrawer}
|
|
onClose={closeDrawer}
|
|
/>
|
|
|
|
<Stack flex={1}>
|
|
<Toolbar />
|
|
{children}
|
|
</Stack>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|