From e6a61fbe9b91abfc371cd4878da7c9d4a4872859 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Fri, 17 Apr 2020 11:17:01 -0700 Subject: [PATCH] Update views to support a more logical container --- public/assets/svgs/not_found.svg | 1 + resources/scripts/TransitionRouter.tsx | 5 +--- resources/scripts/components/App.tsx | 2 ++ .../dashboard/AccountApiContainer.tsx | 5 ++-- .../dashboard/AccountOverviewContainer.tsx | 29 ++++++++++++------- .../dashboard/DashboardContainer.tsx | 5 ++-- .../components/elements/PageContentBlock.tsx | 5 ++-- .../scripts/components/screens/NotFound.tsx | 21 ++++++++++++++ .../components/server/ServerConsole.tsx | 5 ++-- .../server/backups/BackupContainer.tsx | 5 ++-- .../server/databases/DatabasesContainer.tsx | 5 ++-- .../server/files/FileEditContainer.tsx | 5 ++-- .../server/files/FileManagerContainer.tsx | 5 ++-- .../server/schedules/ScheduleContainer.tsx | 5 ++-- .../schedules/ScheduleEditContainer.tsx | 5 ++-- .../server/settings/SettingsContainer.tsx | 5 ++-- .../server/users/UsersContainer.tsx | 5 ++-- .../scripts/routers/AuthenticationRouter.tsx | 2 ++ resources/scripts/routers/DashboardRouter.tsx | 2 ++ resources/scripts/routers/ServerRouter.tsx | 2 ++ 20 files changed, 85 insertions(+), 39 deletions(-) create mode 100644 public/assets/svgs/not_found.svg create mode 100644 resources/scripts/components/screens/NotFound.tsx diff --git a/public/assets/svgs/not_found.svg b/public/assets/svgs/not_found.svg new file mode 100644 index 000000000..222a4152e --- /dev/null +++ b/public/assets/svgs/not_found.svg @@ -0,0 +1 @@ +not found \ No newline at end of file diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx index 57802a338..78fd164d1 100644 --- a/resources/scripts/TransitionRouter.tsx +++ b/resources/scripts/TransitionRouter.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Route } from 'react-router'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; -import PageContentBlock from '@/components/elements/PageContentBlock'; type Props = Readonly<{ children: React.ReactNode; @@ -13,9 +12,7 @@ export default ({ children }: Props) => (
- - {children} - + {children}
diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx index e8aa002d3..99507fc13 100644 --- a/resources/scripts/components/App.tsx +++ b/resources/scripts/components/App.tsx @@ -10,6 +10,7 @@ import { Provider } from 'react-redux'; import { SiteSettings } from '@/state/settings'; import { DefaultTheme, ThemeProvider } from 'styled-components'; import ProgressBar from '@/components/elements/ProgressBar'; +import NotFound from '@/components/screens/NotFound'; interface ExtendedWindow extends Window { SiteConfiguration?: SiteSettings; @@ -65,6 +66,7 @@ const App = () => { + diff --git a/resources/scripts/components/dashboard/AccountApiContainer.tsx b/resources/scripts/components/dashboard/AccountApiContainer.tsx index 51f1f7806..3d952ac2f 100644 --- a/resources/scripts/components/dashboard/AccountApiContainer.tsx +++ b/resources/scripts/components/dashboard/AccountApiContainer.tsx @@ -13,6 +13,7 @@ import { ApplicationStore } from '@/state'; import FlashMessageRender from '@/components/FlashMessageRender'; import { httpErrorToHuman } from '@/api/http'; import format from 'date-fns/format'; +import PageContentBlock from '@/components/elements/PageContentBlock'; export default () => { const [ deleteIdentifier, setDeleteIdentifier ] = useState(''); @@ -46,7 +47,7 @@ export default () => { }; return ( -
+
@@ -107,6 +108,6 @@ export default () => { }
-
+ ); }; diff --git a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx index 777a4e3a5..4b052e850 100644 --- a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx +++ b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx @@ -5,6 +5,7 @@ import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddr import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFactorForm'; import styled from 'styled-components'; import { breakpoint } from 'styled-components-breakpoint'; +import PageContentBlock from '@/components/elements/PageContentBlock'; const Container = styled.div` ${tw`flex flex-wrap my-10`}; @@ -24,16 +25,22 @@ const Container = styled.div` export default () => { return ( - - - - - - - - - - - + + + + + + + + + + + + + ); }; diff --git a/resources/scripts/components/dashboard/DashboardContainer.tsx b/resources/scripts/components/dashboard/DashboardContainer.tsx index b017efd61..767cb38b1 100644 --- a/resources/scripts/components/dashboard/DashboardContainer.tsx +++ b/resources/scripts/components/dashboard/DashboardContainer.tsx @@ -3,6 +3,7 @@ import { Server } from '@/api/server/getServer'; import getServers from '@/api/getServers'; import ServerRow from '@/components/dashboard/ServerRow'; import Spinner from '@/components/elements/Spinner'; +import PageContentBlock from '@/components/elements/PageContentBlock'; export default () => { const [ servers, setServers ] = useState(null); @@ -18,7 +19,7 @@ export default () => { } return ( -
+ {servers.length > 0 ? servers.map(server => ( @@ -28,6 +29,6 @@ export default () => { It looks like you have no servers.

} -
+ ); }; diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx index 3f627101a..6034f467a 100644 --- a/resources/scripts/components/elements/PageContentBlock.tsx +++ b/resources/scripts/components/elements/PageContentBlock.tsx @@ -4,12 +4,13 @@ import { CSSTransition } from 'react-transition-group'; interface Props { children: React.ReactNode; + className?: string; } -export default ({ children }: Props) => ( +export default ({ className, children }: Props) => ( <> - + {children} diff --git a/resources/scripts/components/screens/NotFound.tsx b/resources/scripts/components/screens/NotFound.tsx new file mode 100644 index 000000000..435afc8be --- /dev/null +++ b/resources/scripts/components/screens/NotFound.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import PageContentBlock from '@/components/elements/PageContentBlock'; + +interface Props { + title?: string; + message: string; +} + +export default ({ title, message }: Props) => ( + +
+
+ +

404

+

+ The requested resource was not found. +

+
+
+ +); diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx index 0440a1b59..6a490ed8d 100644 --- a/resources/scripts/components/server/ServerConsole.tsx +++ b/resources/scripts/components/server/ServerConsole.tsx @@ -11,6 +11,7 @@ import { bytesToHuman } from '@/helpers'; import SuspenseSpinner from '@/components/elements/SuspenseSpinner'; import TitledGreyBox from '@/components/elements/TitledGreyBox'; import Can from '@/components/elements/Can'; +import PageContentBlock from '@/components/elements/PageContentBlock'; type PowerAction = 'start' | 'stop' | 'restart' | 'kill'; @@ -80,7 +81,7 @@ export default () => { }, [ instance, connected ]); return ( -
+

@@ -159,6 +160,6 @@ export default () => {

-
+ ); }; diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx index e71b3c2f9..438c201fb 100644 --- a/resources/scripts/components/server/backups/BackupContainer.tsx +++ b/resources/scripts/components/server/backups/BackupContainer.tsx @@ -9,6 +9,7 @@ import CreateBackupButton from '@/components/server/backups/CreateBackupButton'; import FlashMessageRender from '@/components/FlashMessageRender'; import BackupRow from '@/components/server/backups/BackupRow'; import { ServerContext } from '@/state/server'; +import PageContentBlock from '@/components/elements/PageContentBlock'; export default () => { const { uuid } = useServer(); @@ -34,7 +35,7 @@ export default () => { } return ( -
+ {!backups.length ?

@@ -54,6 +55,6 @@ export default () => {

- + ); }; diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx index ce2189aca..7fb60f351 100644 --- a/resources/scripts/components/server/databases/DatabasesContainer.tsx +++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx @@ -10,6 +10,7 @@ import CreateDatabaseButton from '@/components/server/databases/CreateDatabaseBu import Can from '@/components/elements/Can'; import useFlash from '@/plugins/useFlash'; import useServer from '@/plugins/useServer'; +import PageContentBlock from '@/components/elements/PageContentBlock'; export default () => { const { uuid, featureLimits } = useServer(); @@ -33,7 +34,7 @@ export default () => { }, []); return ( -
+ {(!databases.length && loading) ? @@ -67,6 +68,6 @@ export default () => { } -
+ ); }; diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx index a44698fd9..36664396c 100644 --- a/resources/scripts/components/server/files/FileEditContainer.tsx +++ b/resources/scripts/components/server/files/FileEditContainer.tsx @@ -12,6 +12,7 @@ import { useParams } from 'react-router'; import FileNameModal from '@/components/server/files/FileNameModal'; import Can from '@/components/elements/Can'; import FlashMessageRender from '@/components/FlashMessageRender'; +import PageContentBlock from '@/components/elements/PageContentBlock'; const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor')); @@ -67,7 +68,7 @@ export default () => { }; return ( -
+ { }
- + ); }; diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx index 7328a94aa..0b3c99382 100644 --- a/resources/scripts/components/server/files/FileManagerContainer.tsx +++ b/resources/scripts/components/server/files/FileManagerContainer.tsx @@ -12,6 +12,7 @@ import { FileObject } from '@/api/server/files/loadDirectory'; import NewDirectoryButton from '@/components/server/files/NewDirectoryButton'; import { Link } from 'react-router-dom'; import Can from '@/components/elements/Can'; +import PageContentBlock from '@/components/elements/PageContentBlock'; const sortFiles = (files: FileObject[]): FileObject[] => { return files.sort((a, b) => a.name.localeCompare(b.name)) @@ -38,7 +39,7 @@ export default () => { }, []); return ( -
+ @@ -92,6 +93,6 @@ export default () => { } -
+ ); }; diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx index 8bb0ca74d..233c53ded 100644 --- a/resources/scripts/components/server/schedules/ScheduleContainer.tsx +++ b/resources/scripts/components/server/schedules/ScheduleContainer.tsx @@ -10,6 +10,7 @@ import EditScheduleModal from '@/components/server/schedules/EditScheduleModal'; import Can from '@/components/elements/Can'; import useServer from '@/plugins/useServer'; import useFlash from '@/plugins/useFlash'; +import PageContentBlock from '@/components/elements/PageContentBlock'; export default ({ match, history }: RouteComponentProps) => { const { uuid } = useServer(); @@ -32,7 +33,7 @@ export default ({ match, history }: RouteComponentProps) => { }, []); return ( -
+ {(!schedules.length && loading) ? @@ -76,6 +77,6 @@ export default ({ match, history }: RouteComponentProps) => { } -
+ ); }; diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx index bda1e089d..1abdc5e67 100644 --- a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx +++ b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx @@ -14,6 +14,7 @@ import Can from '@/components/elements/Can'; import useServer from '@/plugins/useServer'; import useFlash from '@/plugins/useFlash'; import { ServerContext } from '@/state/server'; +import PageContentBlock from '@/components/elements/PageContentBlock'; interface Params { id: string; @@ -49,7 +50,7 @@ export default ({ match, history, location: { state } }: RouteComponentProps + {!schedule || isLoading ? @@ -104,6 +105,6 @@ export default ({ match, history, location: { state } }: RouteComponentProps } - + ); }; diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx index 25766e80e..98d399e8f 100644 --- a/resources/scripts/components/server/settings/SettingsContainer.tsx +++ b/resources/scripts/components/server/settings/SettingsContainer.tsx @@ -8,13 +8,14 @@ import RenameServerBox from '@/components/server/settings/RenameServerBox'; import FlashMessageRender from '@/components/FlashMessageRender'; import Can from '@/components/elements/Can'; import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox'; +import PageContentBlock from '@/components/elements/PageContentBlock'; export default () => { const user = useStoreState(state => state.user.data!); const server = ServerContext.useStoreState(state => state.server.data!); return ( -
+
@@ -69,6 +70,6 @@ export default () => {
- + ); }; diff --git a/resources/scripts/components/server/users/UsersContainer.tsx b/resources/scripts/components/server/users/UsersContainer.tsx index 8d511a272..f0e17fd48 100644 --- a/resources/scripts/components/server/users/UsersContainer.tsx +++ b/resources/scripts/components/server/users/UsersContainer.tsx @@ -9,6 +9,7 @@ import FlashMessageRender from '@/components/FlashMessageRender'; import getServerSubusers from '@/api/server/users/getServerSubusers'; import { httpErrorToHuman } from '@/api/http'; import Can from '@/components/elements/Can'; +import PageContentBlock from '@/components/elements/PageContentBlock'; export default () => { const [ loading, setLoading ] = useState(true); @@ -46,7 +47,7 @@ export default () => { } return ( -
+ {!subusers.length ?

@@ -62,6 +63,6 @@ export default () => {

- + ); }; diff --git a/resources/scripts/routers/AuthenticationRouter.tsx b/resources/scripts/routers/AuthenticationRouter.tsx index 15f745e8d..9c25db250 100644 --- a/resources/scripts/routers/AuthenticationRouter.tsx +++ b/resources/scripts/routers/AuthenticationRouter.tsx @@ -4,6 +4,7 @@ import LoginContainer from '@/components/auth/LoginContainer'; import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer'; import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer'; import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer'; +import NotFound from '@/components/screens/NotFound'; export default ({ match }: RouteComponentProps) => (
@@ -12,5 +13,6 @@ export default ({ match }: RouteComponentProps) => ( +
); diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx index dab36630c..1e1de404d 100644 --- a/resources/scripts/routers/DashboardRouter.tsx +++ b/resources/scripts/routers/DashboardRouter.tsx @@ -6,6 +6,7 @@ import NavigationBar from '@/components/NavigationBar'; import DashboardContainer from '@/components/dashboard/DashboardContainer'; import TransitionRouter from '@/TransitionRouter'; import AccountApiContainer from '@/components/dashboard/AccountApiContainer'; +import NotFound from '@/components/screens/NotFound'; export default ({ location }: RouteComponentProps) => ( @@ -24,6 +25,7 @@ export default ({ location }: RouteComponentProps) => ( + diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx index 711852303..68b9ac7dd 100644 --- a/resources/scripts/routers/ServerRouter.tsx +++ b/resources/scripts/routers/ServerRouter.tsx @@ -20,6 +20,7 @@ import Spinner from '@/components/elements/Spinner'; import ServerInstalling from '@/components/screens/ServerInstalling'; import ServerError from '@/components/screens/ServerError'; import { httpErrorToHuman } from '@/api/http'; +import NotFound from '@/components/screens/NotFound'; const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => { const [ error, setError ] = useState(''); @@ -110,6 +111,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) +