ui(admin): add "working" React admin ui

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

@@ -0,0 +1,103 @@
+import { useStoreActions } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Form, Formik } from 'formik';
+import tw from 'twin.macro';
+import { object } from 'yup';
+
+import { useServerFromRoute } from '@/api/admin/server';
+import type { Values } from '@/api/admin/servers/updateServer';
+import updateServer from '@/api/admin/servers/updateServer';
+import ServerDeleteButton from '@/components/admin/servers/ServerDeleteButton';
+import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox';
+import FeatureLimitsBox from '@/components/admin/servers/settings/FeatureLimitsBox';
+import NetworkingBox from '@/components/admin/servers/settings/NetworkingBox';
+import ServerResourceBox from '@/components/admin/servers/settings/ServerResourceBox';
+import Button from '@/components/elements/Button';
+
+export default () => {
+    const { data: server } = useServerFromRoute();
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions(actions => actions.flashes);
+
+    if (!server) return null;
+
+    const submit = (values: Values, { setSubmitting, setFieldValue }: FormikHelpers<Values>) => {
+        clearFlashes('server');
+
+        // This value is inverted to have the switch be on when the
+        // OOM Killer is enabled, rather than when disabled.
+        values.limits.oomDisabled = !values.limits.oomDisabled;
+
+        updateServer(server.id, values)
+            .then(() => {
+                // setServer({ ...server, ...s });
+
+                // TODO: Figure out how to properly clear react-selects for allocations.
+                setFieldValue('addAllocations', []);
+                setFieldValue('removeAllocations', []);
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'server', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                externalId: server.externalId || '',
+                name: server.name,
+                ownerId: server.userId,
+                limits: {
+                    memory: server.limits.memory,
+                    swap: server.limits.swap,
+                    disk: server.limits.disk,
+                    io: server.limits.io,
+                    cpu: server.limits.cpu,
+                    threads: server.limits.threads || '',
+                    // This value is inverted to have the switch be on when the
+                    // OOM Killer is enabled, rather than when disabled.
+                    oomDisabled: !server.limits.oomDisabled,
+                },
+                featureLimits: {
+                    allocations: server.featureLimits.allocations,
+                    backups: server.featureLimits.backups,
+                    databases: server.featureLimits.databases,
+                },
+                allocationId: server.allocationId,
+                addAllocations: [] as number[],
+                removeAllocations: [] as number[],
+            }}
+            validationSchema={object().shape({})}
+        >
+            {({ isSubmitting, isValid }) => (
+                <Form>
+                    <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8 mb-16`}>
+                        <div css={tw`grid grid-cols-1 gap-y-6`}>
+                            <BaseSettingsBox />
+                            <FeatureLimitsBox />
+                            <NetworkingBox />
+                        </div>
+                        <div css={tw`flex flex-col`}>
+                            <ServerResourceBox />
+                            <div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mt-6`}>
+                                <div css={tw`flex flex-row`}>
+                                    <ServerDeleteButton />
+                                    <Button
+                                        type="submit"
+                                        size="small"
+                                        css={tw`ml-auto`}
+                                        disabled={isSubmitting || !isValid}
+                                    >
+                                        Save Changes
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+};