@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
237 lines (235 loc) • 9.4 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import React, { useState, lazy, Suspense, useEffect, useMemo } from 'react';
import LauncherGlobalNav from '../LauncherGlobalNav';
import ResizeableDrawer from '../ResizeableDrawer/ResizeableDrawer';
import { useStyles } from './styles';
import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
import SiteManagement from '../SiteManagement';
import { getLauncherSectionLink, urlMapping } from '../LauncherSection/utils';
import EmptyState from '../EmptyState/EmptyState';
import { FormattedMessage, useIntl } from 'react-intl';
import { useGlobalAppState } from './GlobalAppContext';
import Typography from '@mui/material/Typography';
import CrafterCMSLogo from '../../icons/CrafterCMSLogo';
import LoadingState from '../LoadingState/LoadingState';
import LauncherOpenerButton from '../LauncherOpenerButton';
import { useGlobalNavigation } from '../../hooks/useGlobalNavigation';
import GlobalAppToolbar from '../GlobalAppToolbar';
import Skeleton from '@mui/material/Skeleton';
import { globalMenuMessages } from '../../env/i18n-legacy';
// Site management loaded normally above as it is usually where people first land.
const UserManagement = lazy(() => import('../UserManagement'));
const GroupManagement = lazy(() => import('../GroupManagement'));
const AuditManagement = lazy(() => import('../AuditManagement'));
const LogLevelManagement = lazy(() => import('../LogLevelManagement'));
const LogConsole = lazy(() => import('../LogConsole'));
const GlobalConfigManagement = lazy(() => import('../GlobalConfigManagement'));
const EncryptTool = lazy(() => import('../EncryptTool'));
const TokenManagement = lazy(() => import('../TokenManagement'));
const AboutCrafterCMSView = lazy(() => import('../AboutCrafterCMSView'));
const AccountManagement = lazy(() => import('../AccountManagement'));
export function GlobalApp(props) {
const { classes } = useStyles();
const { passwordRequirementsMinComplexity, footerHtml } = props;
const [width, setWidth] = useState(240);
const globalNavigation = useGlobalNavigation();
const [{ openSidebar }] = useGlobalAppState();
const { items } = useGlobalNavigation();
const { formatMessage } = useIntl();
const location = useLocation();
const idByPathLookup = useMemo(
() =>
items === null || items === void 0
? void 0
: items.reduce((lookup, item) => {
lookup[getLauncherSectionLink(item.id, '').replace(/^#/, '')] = item.id;
return lookup;
}, {}),
[items]
);
useEffect(() => {
var _a;
const path = location.pathname;
const id = idByPathLookup === null || idByPathLookup === void 0 ? void 0 : idByPathLookup[path];
document.title = `CrafterCMS - ${formatMessage(
(_a = globalMenuMessages[id]) !== null && _a !== void 0
? _a
: {
id: 'globalApp.routeNotFound',
defaultMessage: 'Route not found'
}
)}`;
}, [formatMessage, idByPathLookup, location.pathname]);
return React.createElement(
Paper,
{ className: classes.root, elevation: 0 },
React.createElement(
ResizeableDrawer,
{
classes: { drawerPaper: classes.drawerPaper, drawerBody: classes.drawerBody },
open: openSidebar,
width: width,
onWidthChange: setWidth
},
React.createElement(LauncherGlobalNav, {
title: '',
sectionStyles: {
nav: {
maxHeight: '100%',
overflow: 'auto'
}
},
tileStyles: {
tile: {
width: '100%',
height: 'auto',
flexDirection: 'row',
justifyContent: 'left',
margin: '0 0 5px'
},
iconAvatar: {
width: '25px',
height: '25px',
margin: '5px 10px'
},
title: {
textAlign: 'left'
}
}
}),
React.createElement(
'footer',
{ className: classes.footer },
React.createElement(CrafterCMSLogo, { width: 100, className: classes.logo }),
React.createElement(Typography, {
component: 'p',
variant: 'caption',
className: classes.footerDescription,
dangerouslySetInnerHTML: { __html: footerHtml }
})
)
),
React.createElement(
Box,
{ className: classes.wrapper, height: '100%', width: '100%', paddingLeft: openSidebar ? `${width}px` : 0 },
React.createElement(
Suspense,
{
fallback: React.createElement(
React.Fragment,
null,
React.createElement(GlobalAppToolbar, { title: React.createElement(Skeleton, { width: '140px' }) }),
React.createElement(
Box,
{ display: 'flex', sx: { height: '100%' } },
React.createElement(LoadingState, null)
)
)
},
React.createElement(
Switch,
null,
React.createElement(Route, { path: '/sites', component: SiteManagement }),
React.createElement(Route, {
path: '/users',
render: () =>
React.createElement(UserManagement, {
passwordRequirementsMinComplexity: passwordRequirementsMinComplexity
})
}),
React.createElement(Route, { path: '/groups', component: GroupManagement }),
React.createElement(Route, { path: '/audit', component: AuditManagement }),
React.createElement(Route, { path: '/logging', component: LogLevelManagement }),
React.createElement(Route, { path: '/log', component: LogConsole }),
React.createElement(Route, { path: '/global-config', component: GlobalConfigManagement }),
React.createElement(Route, { path: '/encryption-tool', component: EncryptTool }),
React.createElement(Route, { path: '/token-management', component: TokenManagement }),
React.createElement(Route, { path: '/about-us', component: AboutCrafterCMSView }),
React.createElement(Route, {
path: '/settings',
render: () =>
React.createElement(AccountManagement, {
passwordRequirementsMinComplexity: passwordRequirementsMinComplexity
})
}),
React.createElement(Route, {
path: '/globalMenu/:id',
render: (props) => React.createElement(Redirect, { to: `/${props.match.params.id}` })
}),
React.createElement(
Route,
{ exact: true, path: '/' },
globalNavigation.items
? React.createElement(Redirect, { to: `${urlMapping[globalNavigation.items[0].id].replace('#', '')}` })
: React.createElement(LoadingState, {
styles: {
root: {
height: '100%',
margin: 0
}
}
})
),
React.createElement(Route, {
render: () => {
return React.createElement(
Box,
{ display: 'flex', flexDirection: 'column', height: '100%' },
React.createElement(
'section',
{ className: classes.launcher },
React.createElement(LauncherOpenerButton, null)
),
React.createElement(EmptyState, {
styles: {
root: {
height: '100%',
margin: 0
}
},
title: '404',
subtitle: React.createElement(FormattedMessage, {
id: 'globalApp.routeNotFound',
defaultMessage: 'Route not found'
})
})
);
}
})
)
)
)
);
}
export default GlobalApp;