From 107cf722693ae781cb1e4e001f745fed5681c986 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Fri, 17 Sep 2021 13:06:31 -0600
Subject: [PATCH] ui(admin): consistency tweaks, add egg pages

---
 .../admin/databases/NewDatabaseContainer.tsx  |  2 +-
 .../admin/mounts/NewMountContainer.tsx        |  2 +-
 .../admin/nests/ImportEggButton.tsx           | 53 +++++++++++++++++++
 .../admin/nests/NestEditContainer.tsx         | 15 ++++--
 .../admin/nests/NewEggContainer.tsx           | 16 ++++++
 .../admin/nodes/NewNodeContainer.tsx          |  2 +-
 .../admin/servers/NewServerContainer.tsx      |  2 +-
 .../admin/users/NewUserContainer.tsx          |  2 +-
 resources/scripts/routers/AdminRouter.tsx     | 12 +++--
 9 files changed, 91 insertions(+), 15 deletions(-)
 create mode 100644 resources/scripts/components/admin/nests/ImportEggButton.tsx
 create mode 100644 resources/scripts/components/admin/nests/NewEggContainer.tsx

diff --git a/resources/scripts/components/admin/databases/NewDatabaseContainer.tsx b/resources/scripts/components/admin/databases/NewDatabaseContainer.tsx
index 7da5be66e..ff627fa5a 100644
--- a/resources/scripts/components/admin/databases/NewDatabaseContainer.tsx
+++ b/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>
diff --git a/resources/scripts/components/admin/mounts/NewMountContainer.tsx b/resources/scripts/components/admin/mounts/NewMountContainer.tsx
index 83f0c03db..177680033 100644
--- a/resources/scripts/components/admin/mounts/NewMountContainer.tsx
+++ b/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>
diff --git a/resources/scripts/components/admin/nests/ImportEggButton.tsx b/resources/scripts/components/admin/nests/ImportEggButton.tsx
new file mode 100644
index 000000000..292db9248
--- /dev/null
+++ b/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>
+        </>
+    );
+};
diff --git a/resources/scripts/components/admin/nests/NestEditContainer.tsx b/resources/scripts/components/admin/nests/NestEditContainer.tsx
index fb18de43d..cad1ab46d 100644
--- a/resources/scripts/components/admin/nests/NestEditContainer.tsx
+++ b/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`}>
-                    <Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
-                        New Egg
-                    </Button>
+                <div css={tw`flex flex-row ml-auto pl-4`}>
+                    <ImportEggButton css={tw`mr-4`}/>
+
+                    <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>
 
diff --git a/resources/scripts/components/admin/nests/NewEggContainer.tsx b/resources/scripts/components/admin/nests/NewEggContainer.tsx
new file mode 100644
index 000000000..28c5b470a
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/resources/scripts/components/admin/nodes/NewNodeContainer.tsx b/resources/scripts/components/admin/nodes/NewNodeContainer.tsx
index ff99ada17..521576e69 100644
--- a/resources/scripts/components/admin/nodes/NewNodeContainer.tsx
+++ b/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>
diff --git a/resources/scripts/components/admin/servers/NewServerContainer.tsx b/resources/scripts/components/admin/servers/NewServerContainer.tsx
index 75aae7ee3..2b121915c 100644
--- a/resources/scripts/components/admin/servers/NewServerContainer.tsx
+++ b/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>
diff --git a/resources/scripts/components/admin/users/NewUserContainer.tsx b/resources/scripts/components/admin/users/NewUserContainer.tsx
index 428e4f985..ffd00c6b3 100644
--- a/resources/scripts/components/admin/users/NewUserContainer.tsx
+++ b/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>
diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx
index 224f7e501..88e747764 100644
--- a/resources/scripts/routers/AdminRouter.tsx
+++ b/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}