From fffe3a7f8bdf96c4ce9e93adf5fb4a694af1346e Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Mon, 2 Aug 2021 10:23:58 -0600
Subject: [PATCH] ui(admin): fix node settings button

---
 .../Api/Application/Nodes/NodeController.php  |   2 +-
 .../Application/Nodes/StoreNodeRequest.php    |  14 +-
 .../admin/nodes/NodeLimitContainer.tsx        |  76 +++---
 .../admin/nodes/NodeListenContainer.tsx       |  76 +++---
 .../admin/nodes/NodeSettingsContainer.tsx     | 223 +++++++++---------
 .../components/admin/servers/OwnerSelect.tsx  |  10 +-
 6 files changed, 202 insertions(+), 199 deletions(-)

diff --git a/app/Http/Controllers/Api/Application/Nodes/NodeController.php b/app/Http/Controllers/Api/Application/Nodes/NodeController.php
index f2e5e5476..fdf86ccc6 100644
--- a/app/Http/Controllers/Api/Application/Nodes/NodeController.php
+++ b/app/Http/Controllers/Api/Application/Nodes/NodeController.php
@@ -108,7 +108,7 @@ class NodeController extends ApplicationApiController
         $node = $this->updateService->handle(
             $node,
             $request->validated(),
-            $request->input('reset_secret'),
+            false,
         );
 
         return $this->fractal->item($node)
diff --git a/app/Http/Requests/Api/Application/Nodes/StoreNodeRequest.php b/app/Http/Requests/Api/Application/Nodes/StoreNodeRequest.php
index 5a737d941..9ce8b37de 100644
--- a/app/Http/Requests/Api/Application/Nodes/StoreNodeRequest.php
+++ b/app/Http/Requests/Api/Application/Nodes/StoreNodeRequest.php
@@ -17,20 +17,24 @@ class StoreNodeRequest extends ApplicationApiRequest
     public function rules(array $rules = null): array
     {
         return collect($rules ?? Node::getRules())->only([
-            'public',
             'name',
             'location_id',
+            'database_host_id',
             'fqdn',
-            'listen_port_http',
-            'listen_port_sftp',
-            'public_port_http',
-            'public_port_sftp',
             'scheme',
             'behind_proxy',
+            'public',
+
+            'listen_port_http',
+            'public_port_http',
+            'listen_port_sftp',
+            'public_port_sftp',
+
             'memory',
             'memory_overallocate',
             'disk',
             'disk_overallocate',
+
             'upload_size',
             'daemon_base',
         ])->mapWithKeys(function ($value, $key) {
diff --git a/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx b/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx
index 8fbd9d429..93fc0c3bf 100644
--- a/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx
@@ -3,7 +3,7 @@ import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Form, useFormikContext } from 'formik';
+import { useFormikContext } from 'formik';
 
 export default () => {
     const { isSubmitting } = useFormikContext();
@@ -12,47 +12,45 @@ export default () => {
         <AdminBox title={'Limits'} css={tw`w-full relative`}>
             <SpinnerOverlay visible={isSubmitting}/>
 
-            <Form css={tw`mb-0`}>
-                <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
-                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
-                        <Field
-                            id={'memory'}
-                            name={'memory'}
-                            label={'Memory'}
-                            type={'number'}
-                        />
-                    </div>
-
-                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
-                        <Field
-                            id={'memoryOverallocate'}
-                            name={'memoryOverallocate'}
-                            label={'Memory Overallocate'}
-                            type={'number'}
-                        />
-                    </div>
+            <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
+                <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
+                    <Field
+                        id={'memory'}
+                        name={'memory'}
+                        label={'Memory'}
+                        type={'number'}
+                    />
                 </div>
 
-                <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
-                    <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
-                        <Field
-                            id={'disk'}
-                            name={'disk'}
-                            label={'Disk'}
-                            type={'number'}
-                        />
-                    </div>
-
-                    <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
-                        <Field
-                            id={'diskOverallocate'}
-                            name={'diskOverallocate'}
-                            label={'Disk Overallocate'}
-                            type={'number'}
-                        />
-                    </div>
+                <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
+                    <Field
+                        id={'memoryOverallocate'}
+                        name={'memoryOverallocate'}
+                        label={'Memory Overallocate'}
+                        type={'number'}
+                    />
                 </div>
-            </Form>
+            </div>
+
+            <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
+                <div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
+                    <Field
+                        id={'disk'}
+                        name={'disk'}
+                        label={'Disk'}
+                        type={'number'}
+                    />
+                </div>
+
+                <div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
+                    <Field
+                        id={'diskOverallocate'}
+                        name={'diskOverallocate'}
+                        label={'Disk Overallocate'}
+                        type={'number'}
+                    />
+                </div>
+            </div>
         </AdminBox>
     );
 };
diff --git a/resources/scripts/components/admin/nodes/NodeListenContainer.tsx b/resources/scripts/components/admin/nodes/NodeListenContainer.tsx
index 3145f6b13..69870d962 100644
--- a/resources/scripts/components/admin/nodes/NodeListenContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeListenContainer.tsx
@@ -3,7 +3,7 @@ import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Form, useFormikContext } from 'formik';
+import { useFormikContext } from 'formik';
 
 export default () => {
     const { isSubmitting } = useFormikContext();
@@ -12,47 +12,45 @@ export default () => {
         <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 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-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 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>
-            </Form>
+            </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>
         </AdminBox>
     );
 };
diff --git a/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx b/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
index f99a672e4..f94b0cf73 100644
--- a/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
@@ -51,105 +51,103 @@ const NodeSettingsContainer = () => {
         <AdminBox title={'Settings'} css={tw`w-full relative`}>
             <SpinnerOverlay visible={isSubmitting}/>
 
-            <Form css={tw`mb-0`}>
-                <div css={tw`mb-6`}>
-                    <Field
-                        id={'name'}
-                        name={'name'}
-                        label={'Name'}
-                        type={'text'}
-                    />
+            <div css={tw`mb-6`}>
+                <Field
+                    id={'name'}
+                    name={'name'}
+                    label={'Name'}
+                    type={'text'}
+                />
+            </div>
+
+            <div css={tw`mb-6`}>
+                <LocationSelect selected={node?.relations.location || null}/>
+            </div>
+
+            <div css={tw`mb-6`}>
+                <DatabaseSelect selected={node?.relations.databaseHost || null}/>
+            </div>
+
+            <div css={tw`mb-6`}>
+                <Field
+                    id={'fqdn'}
+                    name={'fqdn'}
+                    label={'FQDN'}
+                    type={'text'}
+                />
+            </div>
+
+            <div css={tw`mt-6`}>
+                <Label htmlFor={'scheme'}>SSL</Label>
+
+                <div>
+                    <label css={tw`inline-flex items-center mr-2`}>
+                        <FormikField
+                            name={'scheme'}
+                            type={'radio'}
+                            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`}>
-                    <LocationSelect selected={node?.relations.location || null}/>
+            <div css={tw`mt-6`}>
+                <Label htmlFor={'behindProxy'}>Behind Proxy</Label>
+
+                <div>
+                    <label css={tw`inline-flex items-center mr-2`}>
+                        <FormikField
+                            name={'behindProxy'}
+                            type={'radio'}
+                            value={false}
+                        />
+                        <span css={tw`text-neutral-300 ml-2`}>No</span>
+                    </label>
+
+                    <label css={tw`inline-flex items-center ml-2`}>
+                        <FormikField
+                            name={'behindProxy'}
+                            type={'radio'}
+                            value
+                        />
+                        <span css={tw`text-neutral-300 ml-2`}>Yes</span>
+                    </label>
                 </div>
+            </div>
 
-                <div css={tw`mb-6`}>
-                    <DatabaseSelect selected={node?.relations.databaseHost || null}/>
+            <div css={tw`mt-6`}>
+                <Label htmlFor={'public'}>Automatic Allocation</Label>
+
+                <div>
+                    <label css={tw`inline-flex items-center mr-2`}>
+                        <FormikField
+                            name={'public'}
+                            type={'radio'}
+                            value={false}
+                        />
+                        <span css={tw`text-neutral-300 ml-2`}>Disabled</span>
+                    </label>
+
+                    <label css={tw`inline-flex items-center ml-2`}>
+                        <FormikField
+                            name={'public'}
+                            type={'radio'}
+                            value
+                        />
+                        <span css={tw`text-neutral-300 ml-2`}>Enabled</span>
+                    </label>
                 </div>
-
-                <div css={tw`mb-6`}>
-                    <Field
-                        id={'fqdn'}
-                        name={'fqdn'}
-                        label={'FQDN'}
-                        type={'text'}
-                    />
-                </div>
-
-                <div css={tw`mt-6`}>
-                    <Label htmlFor={'scheme'}>SSL</Label>
-
-                    <div>
-                        <label css={tw`inline-flex items-center mr-2`}>
-                            <FormikField
-                                name={'scheme'}
-                                type={'radio'}
-                                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`mt-6`}>
-                    <Label htmlFor={'behindProxy'}>Behind Proxy</Label>
-
-                    <div>
-                        <label css={tw`inline-flex items-center mr-2`}>
-                            <FormikField
-                                name={'behindProxy'}
-                                type={'radio'}
-                                value={false}
-                            />
-                            <span css={tw`text-neutral-300 ml-2`}>No</span>
-                        </label>
-
-                        <label css={tw`inline-flex items-center ml-2`}>
-                            <FormikField
-                                name={'behindProxy'}
-                                type={'radio'}
-                                value
-                            />
-                            <span css={tw`text-neutral-300 ml-2`}>Yes</span>
-                        </label>
-                    </div>
-                </div>
-
-                <div css={tw`mt-6`}>
-                    <Label htmlFor={'public'}>Automatic Allocation</Label>
-
-                    <div>
-                        <label css={tw`inline-flex items-center mr-2`}>
-                            <FormikField
-                                name={'public'}
-                                type={'radio'}
-                                value={false}
-                            />
-                            <span css={tw`text-neutral-300 ml-2`}>Disabled</span>
-                        </label>
-
-                        <label css={tw`inline-flex items-center ml-2`}>
-                            <FormikField
-                                name={'public'}
-                                type={'radio'}
-                                value
-                            />
-                            <span css={tw`text-neutral-300 ml-2`}>Enabled</span>
-                        </label>
-                    </div>
-                </div>
-            </Form>
+            </div>
         </AdminBox>
     );
 };
@@ -167,6 +165,7 @@ export default () => {
     }
 
     const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        console.log('submit!');
         clearFlashes('node');
 
         updateNode(node.id, values)
@@ -216,29 +215,31 @@ export default () => {
         >
             {
                 ({ isSubmitting, isValid }) => (
-                    <div css={tw`flex flex-col lg:flex-row`}>
-                        <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
-                            <NodeSettingsContainer/>
-                        </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/>
+                    <Form>
+                        <div css={tw`flex flex-col lg:flex-row`}>
+                            <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
+                                <NodeSettingsContainer/>
                             </div>
 
-                            <div css={tw`flex w-full mt-4`}>
-                                <NodeLimitContainer/>
-                            </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`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}>
-                                <div css={tw`flex flex-row`}>
-                                    <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
-                                        Save Changes
-                                    </Button>
+                                <div css={tw`flex w-full mt-4`}>
+                                    <NodeLimitContainer/>
+                                </div>
+
+                                <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}>
+                                    <div css={tw`flex flex-row`}>
+                                        <Button type={'submit'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                                            Save Changes
+                                        </Button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    </Form>
                 )
             }
         </Formik>
diff --git a/resources/scripts/components/admin/servers/OwnerSelect.tsx b/resources/scripts/components/admin/servers/OwnerSelect.tsx
index f04fdcfcd..c5c89a1ea 100644
--- a/resources/scripts/components/admin/servers/OwnerSelect.tsx
+++ b/resources/scripts/components/admin/servers/OwnerSelect.tsx
@@ -12,10 +12,12 @@ export default ({ selected }: { selected: User | null }) => {
 
     const onSearch = (query: string): Promise<void> => {
         return new Promise((resolve, reject) => {
-            searchUsers({ username: query, email: query }).then((users) => {
-                setUsers(users);
-                return resolve();
-            }).catch(reject);
+            searchUsers({ username: query, email: query })
+                .then((users) => {
+                    setUsers(users);
+                    return resolve();
+                })
+                .catch(reject);
         });
     };