ui(admin): tweaks to server management

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

@@ -27,7 +27,7 @@ export default ({ selected }: { selected: User | null }) => {
     };
 
     const getSelectedText = (user: User | null): string => {
-        return user?.username || '';
+        return user?.email || '';
     };
 
     return (
@@ -47,7 +47,7 @@ export default ({ selected }: { selected: User | null }) => {
         >
             {users?.map(d => (
                 <Option key={d.id} selectId={'ownerId'} id={d.id} item={d} active={d.id === user?.id}>
-                    {d.username}
+                    {d.email}
                 </Option>
             ))}
         </SearchableSelect>

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

@@ -19,7 +19,6 @@ interface Values {
     uuid: string;
     identifier: string;
     name: string;
-    description: string;
 
     memory: number;
     swap: number;
@@ -54,7 +53,6 @@ const ServerFeatureContainer = () => {
         <AdminBox title={'Feature Limits'} css={tw`relative w-full`}>
             <SpinnerOverlay visible={isSubmitting}/>
 
-            <Form css={tw`mb-0`}>
             <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
                 <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
                     <Field
@@ -66,7 +64,7 @@ const ServerFeatureContainer = () => {
                     />
                 </div>
 
-                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
+                <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mx-4 md:mb-0`}>
                     <Field
                         id={'allocations'}
                         name={'allocations'}
@@ -75,10 +73,8 @@ const ServerFeatureContainer = () => {
                         description={'The total number of allocations a user is allowed to create for this server.'}
                     />
                 </div>
-                </div>
 
-                <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
+                <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
-                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mb-0`}>
                     <Field
                         id={'backups'}
                         name={'backup'}
@@ -88,8 +84,6 @@ const ServerFeatureContainer = () => {
                     />
                 </div>
             </div>
-
-            </Form>
         </AdminBox>
     );
 };
@@ -109,7 +103,6 @@ const ServerResourceContainer = () => {
         <AdminBox title={'Resource Management'} css={tw`relative w-full`}>
             <SpinnerOverlay visible={isSubmitting}/>
 
-            <Form css={tw`mb-0`}>
             <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
                 <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
                     <Field
@@ -176,7 +169,7 @@ const ServerResourceContainer = () => {
             </div>
 
             <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
-                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
+                <div css={tw`mt-6 bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
                     <FormikSwitch
                         name={'oom'}
                         label={'Out of Memory Killer'}
@@ -184,8 +177,6 @@ const ServerResourceContainer = () => {
                     />
                 </div>
             </div>
-
-            </Form>
         </AdminBox>
     );
 };
@@ -205,7 +196,6 @@ const ServerSettingsContainer = () => {
         <AdminBox title={'Settings'} css={tw`relative w-full`}>
             <SpinnerOverlay visible={isSubmitting}/>
 
-            <Form css={tw`mb-0`}>
             <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
                 <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
                     <Field
@@ -227,20 +217,10 @@ const ServerSettingsContainer = () => {
             </div>
 
             <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
-                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
+                <div css={tw`mb-6 w-full md:w-1/2 md:flex md:flex-col md:pr-4 md:mb-0`}>
                     <OwnerSelect selected={null}/>
                 </div>
-
-                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
-                        <Field
-                            id={'description'}
-                            name={'description'}
-                            label={'Server Description'}
-                            type={'string'}
-                        />
             </div>
-                </div>
-            </Form>
         </AdminBox>
     );
 };
@@ -278,7 +258,6 @@ export default () => {
                 uuid: server.uuid,
                 identifier: server.identifier,
                 name: server.name,
-                description: server.description,
 
                 memory: server.limits.memory,
                 swap: server.limits.swap,
@@ -302,6 +281,7 @@ export default () => {
         >
             {
                 ({ isSubmitting, isValid }) => (
+                    <Form>
                         <div css={tw`flex flex-col lg:flex-row`}>
                             <div css={tw`flex flex-col w-full mt-4 ml-0 lg:w-1/2 lg:ml-2 lg:mt-0`}>
                                 <div css={tw`flex flex-col w-full mr-0 lg:mr-2`}>
@@ -324,6 +304,7 @@ export default () => {
                                 </div>
                             </div>
                         </div>
+                    </Form>
                 )
             }
         </Formik>

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

@@ -87,13 +87,15 @@ const ServerServiceContainer = () => {
                         Nest/Egg Selector HERE
                     </div>
                     <div css={tw`pb-4 mb-6 md:w-full md:flex md:flex-col md:mb-0`}>
+                        <div css={tw`mt-6 bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded`}>
                             <FormikSwitch
-                            name={'oom'}
+                                name={'skip_install_script'}
                                 label={'Skip Egg Install Script'}
                                 description={'If the selected Egg has an install script attached to it, the script will run during install. If you would like to skip this step, check this box.'}
                             />
                         </div>
                     </div>
+                </div>
             </Form>
         </AdminBox>
     );

resources/scripts/components/elements/Button.tsx

@@ -10,7 +10,7 @@ interface Props {
 }
 
 const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
-    ${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`};
+    ${tw`relative inline-block rounded p-2 tracking-wide text-sm transition-all duration-150 border`};
 
     & > span {
         ${tw`select-none`};