Make it easier for plugins to extend the navigation and add routes

resources/scripts/components/elements/PermissionRoute.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { RouteProps } from 'react-router';
+import Can from '@/components/elements/Can';
+import { ServerError } from '@/components/elements/ScreenBlock';
+
+interface Props extends Omit<RouteProps, 'path'> {
+    path: string;
+    permission: string | string[] | null;
+}
+
+export default ({ permission, children, ...props }: Props) => (
+    <Route {...props}>
+        {!permission ?
+            children
+            :
+            <Can
+                action={permission}
+                renderOnError={
+                    <ServerError
+                        title={'Access Denied'}
+                        message={'You do not have permission to access this page.'}
+                    />
+                }
+            >
+                {children}
+            </Can>
+        }
+    </Route>
+);

resources/scripts/components/server/ConflictStateRenderer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ServerContext } from '@/state/server';
+import ScreenBlock from '@/components/elements/ScreenBlock';
+import ServerInstallSvg from '@/assets/images/server_installing.svg';
+import ServerErrorSvg from '@/assets/images/server_error.svg';
+import ServerRestoreSvg from '@/assets/images/server_restore.svg';
+
+export default () => {
+    const status = ServerContext.useStoreState(state => state.server.data?.status || null);
+    const isTransferring = ServerContext.useStoreState(state => state.server.data?.isTransferring || false);
+
+    return (
+        status === 'installing' || status === 'install_failed' ?
+            <ScreenBlock
+                title={'Running Installer'}
+                image={ServerInstallSvg}
+                message={'Your server should be ready soon, please try again in a few minutes.'}
+            />
+            :
+            status === 'suspended' ?
+                <ScreenBlock
+                    title={'Server Suspended'}
+                    image={ServerErrorSvg}
+                    message={'This server is suspended and cannot be accessed.'}
+                />
+                :
+                <ScreenBlock
+                    title={isTransferring ? 'Transferring' : 'Restoring from Backup'}
+                    image={ServerRestoreSvg}
+                    message={isTransferring ? 'Your server is being transfered to a new node, please check back later.' : 'Your server is currently being restored from a backup, please check back in a few minutes.'}
+                />
+    );
+};

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -1,4 +1,4 @@
-import React, { lazy, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import getFileContents from '@/api/server/files/getFileContents';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@@ -19,8 +19,7 @@ import { ServerContext } from '@/state/server';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import { encodePathSegments, hashToPath } from '@/helpers';
 import { dirname } from 'path';
-
-const LazyCodemirrorEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/CodemirrorEditor'));
+import CodemirrorEditor from '@/components/elements/CodemirrorEditor';
 
 export default () => {
     const [ error, setError ] = useState('');
@@ -116,7 +115,7 @@ export default () => {
             />
             <div css={tw`relative`}>
                 <SpinnerOverlay visible={loading}/>
-                <LazyCodemirrorEditor
+                <CodemirrorEditor
                     mode={mode}
                     filename={hash.replace(/^#/, '')}
                     onModeChanged={setMode}