ui(admin): start work on node settings

resources/scripts/api/admin/nodes/updateNode.ts

@@ -0,0 +1,12 @@
+import http from '@/api/http';
+import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
+
+export default (id: number, name: string, description: string | null, include: string[] = []): Promise<Node> => {
+    return new Promise((resolve, reject) => {
+        http.patch(`/api/application/nodes/${id}`, {
+            name, description,
+        }, { params: { include: include.join(',') } })
+            .then(({ data }) => resolve(rawDataToNode(data)))
+            .catch(reject);
+    });
+};

resources/scripts/components/admin/SubNavigation.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 
 export const SubNavigation = styled.div`
-    ${tw`h-12 flex flex-row items-center border-b border-neutral-700`};
+    ${tw`h-12 flex flex-row items-center border-b border-neutral-700 mb-4`};
 
     & > div {
         ${tw`h-full flex flex-col flex-shrink-0 justify-center`};

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

@@ -1,3 +1,5 @@
+import AdminBox from '@/components/admin/AdminBox';
+import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import tw from 'twin.macro';
@@ -24,6 +26,14 @@ export const Context = createContextStore<ctx>({
     }),
 });
 
+const Code = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <code css={tw`text-sm font-mono bg-neutral-900 rounded`} style={{ padding: '2px 6px' }}>
+            {children}
+        </code>
+    );
+};
+
 const NodeEditContainer = () => {
     const location = useLocation();
     const match = useRouteMatch<{ id?: string }>();
@@ -60,13 +70,15 @@ const NodeEditContainer = () => {
 
     return (
         <AdminContentBlock title={'Node - ' + node.name}>
-            <div css={tw`w-full flex flex-row items-center mb-4`}>
+            <div css={tw`w-full flex flex-row items-center mb-6`}>
                 <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>
                 </div>
             </div>
 
+            <FlashMessageRender byKey={'node'} css={tw`mb-4`}/>
+
             <SubNavigation>
                 <SubNavigationLink to={`${match.url}`} name={'About'}>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -99,15 +111,19 @@ const NodeEditContainer = () => {
                 </SubNavigationLink>
             </SubNavigation>
 
-            <FlashMessageRender byKey={'node'} css={tw`mb-4`}/>
-
             <Switch location={location}>
                 <Route path={`${match.path}`} exact>
-                    <p>About</p>
+                    <AdminBox title={'Node Information'}>
+                        <p>Version <Code>1.2.2</Code></p>
+                    </AdminBox>
                 </Route>
 
                 <Route path={`${match.path}/settings`} exact>
-                    <p>Settings</p>
+                    <div css={tw`flex flex-row`}>
+                        <div css={tw`w-full flex flex-col`}>
+                            <NodeSettingsContainer/>
+                        </div>
+                    </div>
                 </Route>
 
                 <Route path={`${match.path}/configuration`} exact>

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import AdminBox from '@/components/admin/AdminBox';
+import tw from 'twin.macro';
+import { number, 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 { Context } from '@/components/admin/nodes/NodeEditContainer';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+
+interface Values {
+    name: string;
+    description: string;
+}
+
+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 = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('database');
+
+        updateNode(node.id, name, description)
+            .then(() => setNode({ ...node, name, description }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: node.name,
+                description: node.description || '',
+            }}
+            validationSchema={object().shape({
+                name: string().required().max(191),
+                description: string().max(255),
+            })}
+        >
+            {
+                ({ isSubmitting, isValid }) => (
+                    <React.Fragment>
+                        <AdminBox title={'Settings'} css={tw`relative`}>
+                            <SpinnerOverlay visible={isSubmitting}/>
+
+                            <Form css={tw`mb-0`}>
+                                <div css={tw`mb-6`}>
+                                    <Field
+                                        id={'name'}
+                                        name={'name'}
+                                        label={'Name'}
+                                        type={'text'}
+                                    />
+                                </div>
+
+                                <div css={tw`mb-6`}>
+                                    <Field
+                                        id={'description'}
+                                        name={'description'}
+                                        label={'Description'}
+                                        type={'text'}
+                                    />
+                                </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>
+                )
+            }
+        </Formik>
+    );
+};