-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4816 from thornbill/dashboard-app
Migrate dashboard to separate app
- Loading branch information
Showing
68 changed files
with
484 additions
and
769 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import loadable from '@loadable/component'; | ||
| import React from 'react'; | ||
| import { Route, Routes } from 'react-router-dom'; | ||
|
|
||
| import ConnectionRequired from 'components/ConnectionRequired'; | ||
| import { toViewManagerPageRoute } from 'components/router/LegacyRoute'; | ||
| import { AsyncPageProps, AsyncRoute, toAsyncPageRoute } from 'components/router/AsyncRoute'; | ||
| import { toRedirectRoute } from 'components/router/Redirect'; | ||
| import ServerContentPage from 'components/ServerContentPage'; | ||
|
|
||
| import AppLayout from './AppLayout'; | ||
| import { REDIRECTS } from './routes/_redirects'; | ||
| import { ASYNC_ADMIN_ROUTES } from './routes/_asyncRoutes'; | ||
| import { LEGACY_ADMIN_ROUTES } from './routes/_legacyRoutes'; | ||
|
|
||
| const DashboardAsyncPage = loadable( | ||
| (props: { page: string }) => import(/* webpackChunkName: "[request]" */ `./routes/${props.page}`), | ||
| { cacheKey: (props: AsyncPageProps) => props.page } | ||
| ); | ||
|
|
||
| const toDashboardAsyncPageRoute = (route: AsyncRoute) => ( | ||
| toAsyncPageRoute({ | ||
| ...route, | ||
| element: DashboardAsyncPage | ||
| }) | ||
| ); | ||
|
|
||
| export const DASHBOARD_APP_PATHS = { | ||
| Dashboard: 'dashboard', | ||
| MetadataManager: 'metadata', | ||
| PluginConfig: 'configurationpage' | ||
| }; | ||
|
|
||
| const DashboardApp = () => ( | ||
| <Routes> | ||
| <Route element={<ConnectionRequired isAdminRequired />}> | ||
| <Route element={<AppLayout drawerlessPaths={[ DASHBOARD_APP_PATHS.MetadataManager ]} />}> | ||
| <Route path={DASHBOARD_APP_PATHS.Dashboard}> | ||
| {ASYNC_ADMIN_ROUTES.map(toDashboardAsyncPageRoute)} | ||
| {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)} | ||
| </Route> | ||
|
|
||
| {/* NOTE: The metadata editor might deserve a dedicated app in the future */} | ||
| {toViewManagerPageRoute({ | ||
| path: DASHBOARD_APP_PATHS.MetadataManager, | ||
| pageProps: { | ||
| controller: 'edititemmetadata', | ||
| view: 'edititemmetadata.html' | ||
| } | ||
| })} | ||
|
|
||
| <Route path={DASHBOARD_APP_PATHS.PluginConfig} element={ | ||
| <ServerContentPage view='/web/configurationpage' /> | ||
| } /> | ||
| </Route> | ||
|
|
||
| {/* Suppress warnings for unhandled routes */} | ||
| <Route path='*' element={null} /> | ||
| </Route> | ||
|
|
||
| {/* Redirects for old paths */} | ||
| {REDIRECTS.map(toRedirectRoute)} | ||
| </Routes> | ||
| ); | ||
|
|
||
| export default DashboardApp; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import AppBar from '@mui/material/AppBar'; | ||
| import Box from '@mui/material/Box'; | ||
| import { useTheme } from '@mui/material/styles'; | ||
| import React, { FC, useCallback, useEffect, useState } from 'react'; | ||
| import { Outlet, useLocation } from 'react-router-dom'; | ||
|
|
||
| import AppBody from 'components/AppBody'; | ||
| import AppToolbar from 'components/toolbar/AppToolbar'; | ||
| import ElevationScroll from 'components/ElevationScroll'; | ||
| import { DRAWER_WIDTH } from 'components/ResponsiveDrawer'; | ||
| import { useApi } from 'hooks/useApi'; | ||
| import { useLocalStorage } from 'hooks/useLocalStorage'; | ||
|
|
||
| import AppDrawer from './components/drawer/AppDrawer'; | ||
|
|
||
| import './AppOverrides.scss'; | ||
|
|
||
| interface AppLayoutProps { | ||
| drawerlessPaths: string[] | ||
| } | ||
|
|
||
| interface DashboardAppSettings { | ||
| isDrawerPinned: boolean | ||
| } | ||
|
|
||
| const DEFAULT_APP_SETTINGS: DashboardAppSettings = { | ||
| isDrawerPinned: false | ||
| }; | ||
|
|
||
| const AppLayout: FC<AppLayoutProps> = ({ | ||
| drawerlessPaths | ||
| }) => { | ||
| const [ appSettings, setAppSettings ] = useLocalStorage<DashboardAppSettings>('DashboardAppSettings', DEFAULT_APP_SETTINGS); | ||
| const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned); | ||
| const location = useLocation(); | ||
| const theme = useTheme(); | ||
| const { user } = useApi(); | ||
|
|
||
| const isDrawerAvailable = !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`)); | ||
| const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user); | ||
|
|
||
| useEffect(() => { | ||
| if (isDrawerActive !== appSettings.isDrawerPinned) { | ||
| setAppSettings({ | ||
| ...appSettings, | ||
| isDrawerPinned: isDrawerActive | ||
| }); | ||
| } | ||
| }, [ appSettings, isDrawerActive, setAppSettings ]); | ||
|
|
||
| const onToggleDrawer = useCallback(() => { | ||
| setIsDrawerActive(!isDrawerActive); | ||
| }, [ isDrawerActive, setIsDrawerActive ]); | ||
|
|
||
| return ( | ||
| <Box sx={{ display: 'flex' }}> | ||
| <ElevationScroll elevate={isDrawerOpen}> | ||
| <AppBar | ||
| position='fixed' | ||
| sx={{ zIndex: (muiTheme) => muiTheme.zIndex.drawer + 1 }} | ||
| > | ||
| <AppToolbar | ||
| isDrawerAvailable={isDrawerAvailable} | ||
| isDrawerOpen={isDrawerOpen} | ||
| onDrawerButtonClick={onToggleDrawer} | ||
| /> | ||
| </AppBar> | ||
| </ElevationScroll> | ||
|
|
||
| <AppDrawer | ||
| open={isDrawerOpen} | ||
| onClose={onToggleDrawer} | ||
| onOpen={onToggleDrawer} | ||
| /> | ||
|
|
||
| <Box | ||
| component='main' | ||
| sx={{ | ||
| width: '100%', | ||
| flexGrow: 1, | ||
| transition: theme.transitions.create('margin', { | ||
| easing: theme.transitions.easing.sharp, | ||
| duration: theme.transitions.duration.leavingScreen | ||
| }), | ||
| marginLeft: 0, | ||
| ...(isDrawerAvailable && { | ||
| marginLeft: { | ||
| sm: `-${DRAWER_WIDTH}px` | ||
| } | ||
| }), | ||
| ...(isDrawerActive && { | ||
| transition: theme.transitions.create('margin', { | ||
| easing: theme.transitions.easing.easeOut, | ||
| duration: theme.transitions.duration.enteringScreen | ||
| }), | ||
| marginLeft: 0 | ||
| }) | ||
| }} | ||
| > | ||
| <AppBody> | ||
| <Outlet /> | ||
| </AppBody> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default AppLayout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| // Default MUI breakpoints | ||
| // https://mui.com/material-ui/customization/breakpoints/#default-breakpoints | ||
| $mui-bp-sm: 600px; | ||
| $mui-bp-md: 900px; | ||
| $mui-bp-lg: 1200px; | ||
| $mui-bp-xl: 1536px; | ||
|
|
||
| // Fix dashboard pages layout to work with drawer | ||
| .dashboardDocument { | ||
| .mainAnimatedPage { | ||
| position: relative; | ||
| } | ||
|
|
||
| .skinBody { | ||
| position: unset !important; | ||
| } | ||
|
|
||
| // Fix the padding of dashboard pages | ||
| .content-primary.content-primary { | ||
| padding-top: 3.25rem !important; | ||
| } | ||
| } |
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React, { FC } from 'react'; | ||
|
|
||
| import ResponsiveDrawer, { ResponsiveDrawerProps } from 'components/ResponsiveDrawer'; | ||
|
|
||
| import ServerDrawerSection from './sections/ServerDrawerSection'; | ||
| import DevicesDrawerSection from './sections/DevicesDrawerSection'; | ||
| import LiveTvDrawerSection from './sections/LiveTvDrawerSection'; | ||
| import AdvancedDrawerSection from './sections/AdvancedDrawerSection'; | ||
| import PluginDrawerSection from './sections/PluginDrawerSection'; | ||
|
|
||
| const AppDrawer: FC<ResponsiveDrawerProps> = ({ | ||
| open = false, | ||
| onClose, | ||
| onOpen | ||
| }) => ( | ||
| <ResponsiveDrawer | ||
| open={open} | ||
| onClose={onClose} | ||
| onOpen={onOpen} | ||
| > | ||
| <ServerDrawerSection /> | ||
| <DevicesDrawerSection /> | ||
| <LiveTvDrawerSection /> | ||
| <AdvancedDrawerSection /> | ||
| <PluginDrawerSection /> | ||
| </ResponsiveDrawer> | ||
| ); | ||
|
|
||
| export default AppDrawer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.