ui(admin): fix server editing

app/Transformers/Api/Application/ServerTransformer.php

@@ -73,7 +73,7 @@ class ServerTransformer extends Transformer
                 'backups' => $model->backup_limit,
                 'databases' => $model->database_limit,
             ],
-            'user_id' => $model->owner_id,
+            'owner_id' => $model->owner_id,
             'node_id' => $model->node_id,
             'allocation_id' => $model->allocation_id,
             'nest_id' => $model->nest_id,

resources/scripts/api/admin/server.ts

@@ -37,7 +37,7 @@ export interface Server extends Model {
     name: string;
     description: string;
     status: string;
-    userId: number;
+    ownerId: number;
     nodeId: number;
     allocationId: number;
     eggId: number;

resources/scripts/api/definitions/admin/transformers.ts

@@ -9,10 +9,26 @@ import { Nest } from '@/api/admin/nest';
 
 const isList = (data: FractalResponseList | FractalResponseData): data is FractalResponseList => data.object === 'list';
 
-function transform<T, M = undefined> (data: undefined, transformer: (callback: FractalResponseData) => T, missing?: M): undefined;
+function transform<T, M = undefined>(
-function transform<T, M> (data: FractalResponseData | undefined, transformer: (callback: FractalResponseData) => T, missing?: M): T | M | undefined;
+    data: undefined,
-function transform<T, M> (data: FractalResponseList | undefined, transformer: (callback: FractalResponseData) => T, missing?: M): T[] | undefined;
+    transformer: (callback: FractalResponseData) => T,
-function transform<T> (data: FractalResponseData | FractalResponseList | undefined, transformer: (callback: FractalResponseData) => T, missing = undefined) {
+    missing?: M,
+): undefined;
+function transform<T, M>(
+    data: FractalResponseData | undefined,
+    transformer: (callback: FractalResponseData) => T,
+    missing?: M,
+): T | M | undefined;
+function transform<T, M>(
+    data: FractalResponseList | undefined,
+    transformer: (callback: FractalResponseData) => T,
+    missing?: M,
+): T[] | undefined;
+function transform<T>(
+    data: FractalResponseData | FractalResponseList | undefined,
+    transformer: (callback: FractalResponseData) => T,
+    missing = undefined,
+) {
     if (data === undefined) return undefined;
 
     if (isList(data)) {
@@ -35,7 +51,7 @@ export default class Transformers {
             name: attributes.name,
             description: attributes.description,
             status: attributes.status,
-            userId: attributes.owner_id,
+            ownerId: attributes.owner_id,
             nodeId: attributes.node_id,
             allocationId: attributes.allocation_id,
             eggId: attributes.egg_id,
@@ -190,7 +206,7 @@ export default class Transformers {
             node: transform(attributes.relationships?.node as FractalResponseData, this.toNode),
             server: transform(attributes.relationships?.server as FractalResponseData, this.toServer),
         },
-        getDisplayText (): string {
+        getDisplayText(): string {
             const raw = `${this.ip}:${this.port}`;
 
             return !this.alias ? raw : `${this.alias} (${raw})`;

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

@@ -50,7 +50,7 @@ function InternalForm() {
 
         setFieldValue('eggId', egg.id);
         setFieldValue('startup', '');
-        setFieldValue('image', egg.dockerImages.length > 0 ? egg.dockerImages[0] : '');
+        setFieldValue('image', Object.values(egg.dockerImages)[0] ?? '');
     }, [egg]);
 
     useEffect(() => {

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

@@ -16,6 +16,7 @@ export default ({ selected }: { selected?: User }) => {
     };
 
     const onSelect = (user: User | null) => {
+        console.log(user);
         setUser(user);
         setFieldValue('ownerId', user?.id || null);
     };

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

@@ -3,9 +3,8 @@ import type { Actions } from 'easy-peasy';
 import { useStoreActions } from 'easy-peasy';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import tw from 'twin.macro';
 
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import deleteServer from '@/api/admin/servers/deleteServer';
 import { useServerFromRoute } from '@/api/admin/server';
@@ -52,15 +51,10 @@ export default () => {
             >
                 Are you sure you want to delete this server?
             </ConfirmationModal>
-            <Button
+
-                type={'button'}
+            <Button.Danger type="button" onClick={() => setVisible(true)} className="flex items-center justify-center">
-                size={'small'}
+                <TrashIcon className="mr-2 h-5 w-5" /> Delete Server
-                color={'red'}
+            </Button.Danger>
-                onClick={() => setVisible(true)}
-                css={tw`flex items-center justify-center`}
-            >
-                <TrashIcon css={tw`w-5 h-5 mr-2`} /> Delete Server
-            </Button>
         </>
     );
 };

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

@@ -12,7 +12,7 @@ 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';
+import { Button } from '@/components/elements/button';
 
 export default () => {
     const { data: server } = useServerFromRoute();
@@ -27,6 +27,8 @@ export default () => {
         // OOM Killer is enabled, rather than when disabled.
         values.limits.oomDisabled = !values.limits.oomDisabled;
 
+        console.log(values);
+
         updateServer(server.id, values)
             .then(() => {
                 // setServer({ ...server, ...s });
@@ -48,7 +50,7 @@ export default () => {
             initialValues={{
                 externalId: server.externalId || '',
                 name: server.name,
-                ownerId: server.userId,
+                ownerId: server.ownerId,
                 limits: {
                     memory: server.limits.memory,
                     swap: server.limits.swap,
@@ -79,17 +81,15 @@ export default () => {
                             <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"
+                                    <Button type="submit" className="ml-auto" disabled={isSubmitting || !isValid}>
-                                        size="small"
-                                        css={tw`ml-auto`}
-                                        disabled={isSubmitting || !isValid}
-                                    >
                                         Save Changes
                                     </Button>
                                 </div>

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

@@ -33,13 +33,14 @@ function ServerStartupLineContainer({ egg, server }: { egg: Egg | null; server:
         }
 
         if (server.eggId === egg.id) {
+            console.log(server.container);
             setFieldValue('image', server.container.image);
             setFieldValue('startup', server.container.startup || '');
             return;
         }
 
         // Whenever the egg is changed, set the server's startup command to the egg's default.
-        setFieldValue('image', egg.dockerImages.length > 0 ? egg.dockerImages[0] : '');
+        setFieldValue('image', Object.values(egg.dockerImages)[0] ?? '');
         setFieldValue('startup', '');
     }, [egg]);
 
@@ -105,6 +106,7 @@ export function ServerImageContainer() {
 
             <div css={tw`md:w-full md:flex md:flex-col`}>
                 <div>
+                    {/* TODO: make this a proper select but allow a custom image to be specified if needed. */}
                     <Field id={'image'} name={'image'} label={'Docker Image'} type={'text'} />
                 </div>
             </div>
@@ -249,7 +251,7 @@ export default () => {
         >
             <ServerStartupForm
                 egg={egg}
-                // @ts-ignore
+                // @ts-expect-error fix this
                 setEgg={setEgg}
                 server={server}
             />