ui(admin): work on Node editing

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

@@ -1,4 +1,3 @@
-import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import tw from 'twin.macro';
@@ -14,6 +13,8 @@ import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigati
 import AdminBox from '@/components/admin/AdminBox';
 import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
 import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
+import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
+import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
 
 interface ctx {
     node: Node | undefined;
@@ -72,7 +73,7 @@ const NodeEditContainer = () => {
 
     return (
         <AdminContentBlock title={'Node - ' + node.name}>
-            <div css={tw`w-full flex flex-row items-center mb-6`}>
+            <div css={tw`w-full flex flex-row items-center mb-4`}>
                 <div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
                     <h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{node.name}</h2>
                     <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>{node.uuid}</p>
@@ -116,7 +117,7 @@ const NodeEditContainer = () => {
             <Switch location={location}>
                 <Route path={`${match.path}`} exact>
                     <AdminBox title={'Node Information'}>
-                        <p>Version <Code>1.2.2</Code></p>
+                        <p>Version <Code>1.3.1</Code></p>
                     </AdminBox>
                 </Route>
 
@@ -127,9 +128,15 @@ const NodeEditContainer = () => {
                         </div>
 
                         <div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
+                            <div css={tw`flex w-full`}>
+                                <NodeListenContainer/>
+                            </div>
+
+                            <div css={tw`flex w-full mt-4`}>
                                 <NodeLimitContainer/>
                             </div>
                         </div>
+                    </div>
                 </Route>
 
                 <Route path={`${match.path}/configuration`} exact>

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

@@ -2,7 +2,6 @@ import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
 import { number, object } from 'yup';
-import Button from '@/components/elements/Button';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { Form, Formik, FormikHelpers } from 'formik';
@@ -59,9 +58,9 @@ export default () => {
             })}
         >
             {
-                ({ isSubmitting, isValid }) => (
+                ({ isSubmitting }) => (
                     <React.Fragment>
-                        <AdminBox title={'Limits'} css={tw`relative`}>
+                        <AdminBox title={'Limits'} css={tw`w-full relative`}>
                             <SpinnerOverlay visible={isSubmitting}/>
 
                             <Form css={tw`mb-0`}>
@@ -104,14 +103,6 @@ export default () => {
                                         />
                                     </div>
                                 </div>
-
-                                <div css={tw`w-full flex flex-row items-center`}>
-                                    <div css={tw`flex ml-auto`}>
-                                        <Button type={'submit'} disabled={isSubmitting || !isValid}>
-                                            Save
-                                        </Button>
-                                    </div>
-                                </div>
                             </Form>
                         </AdminBox>
                     </React.Fragment>

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import AdminBox from '@/components/admin/AdminBox';
+import tw from 'twin.macro';
+import { object } from 'yup';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { Form, Formik, FormikHelpers } from 'formik';
+import { Context } from '@/components/admin/nodes/NodeEditContainer';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import updateNode from '@/api/admin/nodes/updateNode';
+
+interface Values {
+    listenPortHTTP: number;
+    publicPortHTTP: number;
+    listenPortSFTP: number;
+    publicPortSFTP: number;
+}
+
+export default () => {
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const node = Context.useStoreState(state => state.node);
+    const setNode = Context.useStoreActions(actions => actions.setNode);
+
+    if (node === undefined) {
+        return (
+            <></>
+        );
+    }
+
+    const submit = ({ listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('node');
+
+        updateNode(node.id, { listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
+            .then(() => setNode({ ...node, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                listenPortHTTP: node.listenPortHTTP,
+                publicPortHTTP: node.publicPortHTTP,
+                listenPortSFTP: node.listenPortSFTP,
+                publicPortSFTP: node.publicPortSFTP,
+            }}
+            validationSchema={object().shape({
+            })}
+        >
+            {
+                ({ isSubmitting }) => (
+                    <React.Fragment>
+                        <AdminBox title={'Listen'} css={tw`w-full relative`}>
+                            <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
+                                            id={'listenPortHTTP'}
+                                            name={'listenPortHTTP'}
+                                            label={'HTTP Listen Port'}
+                                            type={'number'}
+                                        />
+                                    </div>
+
+                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
+                                        <Field
+                                            id={'publicPortHTTP'}
+                                            name={'publicPortHTTP'}
+                                            label={'HTTP Public Port'}
+                                            type={'number'}
+                                        />
+                                    </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:mr-4 md:mb-0`}>
+                                        <Field
+                                            id={'listenPortSFTP'}
+                                            name={'listenPortSFTP'}
+                                            label={'SFTP Listen Port'}
+                                            type={'number'}
+                                        />
+                                    </div>
+
+                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
+                                        <Field
+                                            id={'publicPortSFTP'}
+                                            name={'publicPortSFTP'}
+                                            label={'SFTP Public Port'}
+                                            type={'number'}
+                                        />
+                                    </div>
+                                </div>
+                            </Form>
+                        </AdminBox>
+                    </React.Fragment>
+                )
+            }
+        </Formik>
+    );
+};

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

@@ -1,17 +1,17 @@
-import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
 import { object, string } from 'yup';
 import updateNode from '@/api/admin/nodes/updateNode';
-import Button from '@/components/elements/Button';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Form, Formik, FormikHelpers } from 'formik';
+import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
 import { Context } from '@/components/admin/nodes/NodeEditContainer';
 import { ApplicationStore } from '@/state';
 import { Actions, useStoreActions } from 'easy-peasy';
 import LocationSelect from '@/components/admin/nodes/LocationSelect';
+import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
+import Label from '@/components/elements/Label';
 
 interface Values {
     public: boolean;
@@ -20,11 +20,8 @@ interface Values {
     locationId: number;
     databaseHostId: number | null;
     fqdn: string;
-    listenPortHTTP: number;
-    publicPortHTTP: number;
-    listenPortSFTP: number;
-    publicPortSFTP: number;
     scheme: string;
+    behindProxy: boolean;
 }
 
 export default () => {
@@ -39,11 +36,11 @@ export default () => {
         );
     }
 
-    const submit = ({ name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+    const submit = ({ name, description, locationId, databaseHostId, fqdn, scheme, behindProxy }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('node');
 
-        updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
+        updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, scheme, behindProxy })
-            .then(() => setNode({ ...node, name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
+            .then(() => setNode({ ...node, name, description, locationId, fqdn, scheme, behindProxy }))
             .catch(error => {
                 console.error(error);
                 clearAndAddHttpError({ key: 'node', error });
@@ -61,11 +58,8 @@ export default () => {
                 locationId: node.locationId,
                 databaseHostId: node.databaseHostId,
                 fqdn: node.fqdn,
-                listenPortHTTP: node.listenPortHTTP,
-                publicPortHTTP: node.publicPortHTTP,
-                listenPortSFTP: node.listenPortSFTP,
-                publicPortSFTP: node.publicPortSFTP,
                 scheme: node.scheme,
+                behindProxy: node.behindProxy,
             }}
             validationSchema={object().shape({
                 name: string().required().max(191),
@@ -73,9 +67,9 @@ export default () => {
             })}
         >
             {
-                ({ isSubmitting, isValid }) => (
+                ({ isSubmitting }) => (
                     <React.Fragment>
-                        <AdminBox title={'Settings'} css={tw`relative`}>
+                        <AdminBox title={'Settings'} css={tw`w-full relative`}>
                             <SpinnerOverlay visible={isSubmitting}/>
 
                             <Form css={tw`mb-0`}>
@@ -114,51 +108,51 @@ export default () => {
                                     />
                                 </div>
 
-                                <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
+                                <div css={tw`mt-6`}>
-                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
+                                    <Label htmlFor={'scheme'}>SSL</Label>
-                                        <Field
-                                            id={'listenPortHTTP'}
-                                            name={'listenPortHTTP'}
-                                            label={'HTTP Listen Port'}
-                                            type={'number'}
-                                        />
-                                    </div>
 
-                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
+                                    <div>
-                                        <Field
+                                        <label css={tw`inline-flex items-center mr-2`}>
-                                            id={'publicPortHTTP'}
+                                            <FormikField
-                                            name={'publicPortHTTP'}
+                                                name={'scheme'}
-                                            label={'HTTP Public Port'}
+                                                type={'radio'}
-                                            type={'number'}
+                                                value={'https'}
                                             />
+                                            <span css={tw`text-neutral-300 ml-2`}>Enabled</span>
+                                        </label>
+
+                                        <label css={tw`inline-flex items-center ml-2`}>
+                                            <FormikField
+                                                name={'scheme'}
+                                                type={'radio'}
+                                                value={'http'}
+                                            />
+                                            <span css={tw`text-neutral-300 ml-2`}>Disabled</span>
+                                        </label>
                                     </div>
                                 </div>
 
-                                <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
+                                <div css={tw`mt-6`}>
-                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
+                                    <Label htmlFor={'behindProxy'}>Behind Proxy</Label>
-                                        <Field
-                                            id={'listenPortSFTP'}
-                                            name={'listenPortSFTP'}
-                                            label={'SFTP Listen Port'}
-                                            type={'number'}
-                                        />
-                                    </div>
 
-                                    <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
+                                    <div>
-                                        <Field
+                                        <label css={tw`inline-flex items-center mr-2`}>
-                                            id={'publicPortSFTP'}
+                                            <FormikField
-                                            name={'publicPortSFTP'}
+                                                name={'behindProxy'}
-                                            label={'SFTP Public Port'}
+                                                type={'radio'}
-                                            type={'number'}
+                                                value={false}
                                             />
-                                    </div>
+                                            <span css={tw`text-neutral-300 ml-2`}>No</span>
-                                </div>
+                                        </label>
 
-                                <div css={tw`flex flex-row items-center w-full`}>
+                                        <label css={tw`inline-flex items-center ml-2`}>
-                                    <div css={tw`flex ml-auto`}>
+                                            <FormikField
-                                        <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                                name={'behindProxy'}
-                                            Save
+                                                type={'radio'}
-                                        </Button>
+                                                value
+                                            />
+                                            <span css={tw`text-neutral-300 ml-2`}>Yes</span>
+                                        </label>
                                     </div>
                                 </div>
                             </Form>