ui(admin): consistency tweaks, add egg pages

resources/scripts/components/admin/databases/NewDatabaseContainer.tsx

@@ -30,7 +30,7 @@ export default () => {
         <AdminContentBlock title={'New Database'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
-                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Database Host</h2>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Database Host</h2>
                     <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new database host to the panel.</p>
                 </div>
             </div>

resources/scripts/components/admin/mounts/NewMountContainer.tsx

@@ -30,7 +30,7 @@ export default () => {
         <AdminContentBlock title={'New Mount'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
-                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Mount</h2>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Mount</h2>
                     <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new mount to the panel.</p>
                 </div>
             </div>

resources/scripts/components/admin/nests/ImportEggButton.tsx

@@ -0,0 +1,53 @@
+import { jsonLanguage } from '@codemirror/lang-json';
+import Editor from '@/components/elements/Editor';
+import React, { useState } from 'react';
+import Button from '@/components/elements/Button';
+import Modal from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import tw from 'twin.macro';
+
+export default ({ className }: { className?: string }) => {
+    const [ visible, setVisible ] = useState(false);
+
+    return (
+        <>
+            <Modal
+                visible={visible}
+                onDismissed={() => {
+                    setVisible(false);
+                }}
+            >
+                <FlashMessageRender byKey={'egg:import'} css={tw`mb-6`}/>
+
+                <h2 css={tw`mb-6 text-2xl text-neutral-100`}>Import Egg</h2>
+
+                <Editor overrides={tw`h-64 rounded`} initialContent={''} mode={jsonLanguage}/>
+
+                <div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
+                    <Button
+                        type={'button'}
+                        isSecondary
+                        css={tw`w-full sm:w-auto sm:mr-2`}
+                        onClick={() => setVisible(false)}
+                    >
+                        Cancel
+                    </Button>
+                    <Button css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
+                        Import Egg
+                    </Button>
+                </div>
+            </Modal>
+
+            <Button
+                type={'button'}
+                size={'large'}
+                css={tw`h-10 px-4 py-0 whitespace-nowrap`}
+                className={className}
+                onClick={() => setVisible(true)}
+                isSecondary
+            >
+                Import
+            </Button>
+        </>
+    );
+};

resources/scripts/components/admin/nests/NestEditContainer.tsx

@@ -1,6 +1,7 @@
+import ImportEggButton from '@/components/admin/nests/ImportEggButton';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
-import { useRouteMatch } from 'react-router-dom';
+import { NavLink, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
@@ -245,10 +246,14 @@ const NestEditContainer = () => {
                     }
                 </div>
 
-                <div css={tw`flex ml-auto pl-4`}>
+                <div css={tw`flex flex-row ml-auto pl-4`}>
-                    <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
+                    <ImportEggButton css={tw`mr-4`}/>
-                        New Egg
+
-                    </Button>
+                    <NavLink to={`${match.url}/new`}>
+                        <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
+                            New Egg
+                        </Button>
+                    </NavLink>
                 </div>
             </div>
 

resources/scripts/components/admin/nests/NewEggContainer.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import tw from 'twin.macro';
+import AdminContentBlock from '@/components/admin/AdminContentBlock';
+
+export default () => {
+    return (
+        <AdminContentBlock title={'New Egg'}>
+            <div css={tw`w-full flex flex-row items-center mb-8`}>
+                <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Egg</h2>
+                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new egg to the panel.</p>
+                </div>
+            </div>
+        </AdminContentBlock>
+    );
+};

resources/scripts/components/admin/nodes/NewNodeContainer.tsx

@@ -59,7 +59,7 @@ export default () => {
         <AdminContentBlock title={'New Node'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
-                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Node</h2>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Node</h2>
                     <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new node to the panel.</p>
                 </div>
             </div>

resources/scripts/components/admin/servers/NewServerContainer.tsx

@@ -7,7 +7,7 @@ export default () => {
         <AdminContentBlock title={'New Server'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
-                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Server</h2>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Server</h2>
                     <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new server to the panel.</p>
                 </div>
             </div>

resources/scripts/components/admin/users/NewUserContainer.tsx

@@ -30,7 +30,7 @@ export default () => {
         <AdminContentBlock title={'New User'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
                 <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
-                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create User</h2>
+                    <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New User</h2>
                     <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new user to the panel.</p>
                 </div>
             </div>

resources/scripts/routers/AdminRouter.tsx

@@ -2,9 +2,6 @@ import { State, useStoreState } from 'easy-peasy';
 import React from 'react';
 import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import tw, { styled } from 'twin.macro';
-import { ApplicationStore } from '@/state';
-import { AdminContext } from '@/state/admin';
-import { breakpoint } from '@/theme';
 import OverviewContainer from '@/components/admin/overview/OverviewContainer';
 import SettingsContainer from '@/components/admin/settings/SettingsContainer';
 import DatabasesContainer from '@/components/admin/databases/DatabasesContainer';
@@ -17,6 +14,7 @@ import LocationsContainer from '@/components/admin/locations/LocationsContainer'
 import LocationEditContainer from '@/components/admin/locations/LocationEditContainer';
 import ServersContainer from '@/components/admin/servers/ServersContainer';
 import NewServerContainer from '@/components/admin/servers/NewServerContainer';
+import ServerRouter from '@/components/admin/servers/ServerRouter';
 import UsersContainer from '@/components/admin/users/UsersContainer';
 import NewUserContainer from '@/components/admin/users/NewUserContainer';
 import UserRouter from '@/components/admin/users/UserRouter';
@@ -24,13 +22,16 @@ import RolesContainer from '@/components/admin/roles/RolesContainer';
 import RoleEditContainer from '@/components/admin/roles/RoleEditContainer';
 import NestsContainer from '@/components/admin/nests/NestsContainer';
 import NestEditContainer from '@/components/admin/nests/NestEditContainer';
+import NewEggContainer from '@/components/admin/nests/NewEggContainer';
+import EggRouter from '@/components/admin/nests/eggs/EggRouter';
 import MountsContainer from '@/components/admin/mounts/MountsContainer';
 import NewMountContainer from '@/components/admin/mounts/NewMountContainer';
 import MountEditContainer from '@/components/admin/mounts/MountEditContainer';
-import EggRouter from '@/components/admin/nests/eggs/EggRouter';
-import ServerRouter from '@/components/admin/servers/ServerRouter';
 import { NotFound } from '@/components/elements/ScreenBlock';
 import { usePersistedState } from '@/plugins/usePersistedState';
+import { ApplicationStore } from '@/state';
+import { AdminContext } from '@/state/admin';
+import { breakpoint } from '@/theme';
 
 const Sidebar = styled.div<{ collapsed?: boolean }>`
     ${tw`fixed h-screen hidden md:flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`};
@@ -251,6 +252,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
                             component={NestEditContainer}
                             exact
                         />
+                        <Route path={`${match.path}/nests/:nestId/new`} component={NewEggContainer} exact/>
                         <Route
                             path={`${match.path}/nests/:nestId/eggs/:id`}
                             component={EggRouter}