ui(admin): fix server egg select improperly switching

resources/scripts/api/admin/egg.ts

@@ -56,7 +56,7 @@ export interface EggVariable extends Model {
  * A standard API response with the minimum viable details for the frontend
  * to correctly render a egg.
  */
-type LoadedEgg = WithRelationships<Egg, 'nest' | 'variables'>;
+export type LoadedEgg = WithRelationships<Egg, 'nest' | 'variables'>;
 
 /**
  * Gets a single egg from the database and returns it.

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

@@ -3,7 +3,7 @@ import type { ChangeEvent } from 'react';
 import { useEffect, useState } from 'react';
 
 import type { WithRelationships } from '@/api/admin';
-import type { Egg } from '@/api/admin/egg';
+import type {Egg, LoadedEgg} from '@/api/admin/egg';
 import { searchEggs } from '@/api/admin/egg';
 import Label from '@/components/elements/Label';
 import Select from '@/components/elements/Select';
@@ -11,16 +11,16 @@ import Select from '@/components/elements/Select';
 interface Props {
     nestId?: number;
     selectedEggId?: number;
-    onEggSelect: (egg: Egg | null) => void;
+    onEggSelect: (egg: WithRelationships<Egg, 'variables'> | undefined) => void;
 }
 
 export default ({ nestId, selectedEggId, onEggSelect }: Props) => {
     const [, , { setValue, setTouched }] = useField<Record<string, string | undefined>>('environment');
-    const [eggs, setEggs] = useState<WithRelationships<Egg, 'variables'>[] | null>(null);
+    const [eggs, setEggs] = useState<WithRelationships<Egg, 'variables'>[] | undefined>(undefined);
 
-    const selectEgg = (egg: Egg | null) => {
-        if (egg === null) {
-            onEggSelect(null);
+    const selectEgg = (egg: WithRelationships<Egg, 'variables'> | undefined) => {
+        if (egg === undefined) {
+            onEggSelect(undefined);
             return;
         }
 
@@ -40,26 +40,29 @@ export default ({ nestId, selectedEggId, onEggSelect }: Props) => {
 
     useEffect(() => {
         if (!nestId) {
-            setEggs(null);
+            setEggs(undefined);
             return;
         }
 
         searchEggs(nestId, {})
-            .then(eggs => {
-                setEggs(eggs);
-                selectEgg(eggs[0] || null);
+            .then(_eggs => {
+                setEggs(_eggs);
+
+                // If the currently selected egg is in the selected nest, use it instead of picking the first egg on the nest.
+                const egg = _eggs.find(egg => egg.id === selectedEggId) ?? _eggs[0];
+                selectEgg(egg);
             })
             .catch(error => console.error(error));
     }, [nestId]);
 
-    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
-        selectEgg(eggs?.find(egg => egg.id.toString() === e.currentTarget.value) || null);
+    const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
+        selectEgg(eggs?.find(egg => egg.id.toString() === event.currentTarget.value) ?? undefined);
     };
 
     return (
         <>
             <Label>Egg</Label>
-            <Select id={'eggId'} name={'eggId'} defaultValue={selectedEggId} onChange={onSelectChange}>
+            <Select id={'eggId'} name={'eggId'} value={selectedEggId} onChange={onSelectChange}>
                 {!eggs ? (
                     <option disabled>Loading...</option>
                 ) : (

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

@@ -30,6 +30,7 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import {WithRelationships} from "@/api/admin";
 
 function InternalForm() {
     const {
@@ -39,12 +40,12 @@ function InternalForm() {
         values: { environment },
     } = useFormikContext<CreateServerRequest>();
 
-    const [egg, setEgg] = useState<Egg | null>(null);
-    const [node, setNode] = useState<Node | null>(null);
-    const [allocations, setAllocations] = useState<Allocation[] | null>(null);
+    const [egg, setEgg] = useState<WithRelationships<Egg, 'variables'> | undefined>(undefined);
+    const [node, setNode] = useState<Node | undefined>(undefined);
+    const [allocations, setAllocations] = useState<Allocation[] | undefined>(undefined);
 
     useEffect(() => {
-        if (egg === null) {
+        if (egg === undefined) {
             return;
         }
 
@@ -54,7 +55,7 @@ function InternalForm() {
     }, [egg]);
 
     useEffect(() => {
-        if (node === null) {
+        if (node === undefined) {
             return;
         }
 
@@ -77,20 +78,20 @@ function InternalForm() {
                         </div>
                     </BaseSettingsBox>
                     <FeatureLimitsBox />
-                    <ServerServiceContainer egg={egg} setEgg={setEgg} nestId={0} />
+                    <ServerServiceContainer selectedEggId={egg?.id} setEgg={setEgg} nestId={0} />
                 </div>
-                <div css={tw`grid grid-cols-1 gap-y-6 col-span-2 md:col-span-1`}>
-                    <AdminBox icon={faNetworkWired} title={'Networking'} isLoading={isSubmitting}>
-                        <div css={tw`grid grid-cols-1 gap-4 lg:gap-6`}>
+                <div className="grid grid-cols-1 gap-y-6 col-span-2 md:col-span-1">
+                    <AdminBox icon={faNetworkWired} title="Networking" isLoading={isSubmitting}>
+                        <div className="grid grid-cols-1 gap-4 lg:gap-6">
                             <div>
                                 <Label htmlFor={'allocation.default'}>Primary Allocation</Label>
                                 <Select
                                     id={'allocation.default'}
                                     name={'allocation.default'}
-                                    disabled={node === null}
+                                    disabled={node === undefined}
                                     onChange={e => setFieldValue('allocation.default', Number(e.currentTarget.value))}
                                 >
-                                    {node === null ? (
+                                    {node === undefined ? (
                                         <option value="">Select a node...</option>
                                     ) : (
                                         <option value="">Select an allocation...</option>
@@ -116,7 +117,7 @@ function InternalForm() {
                     <ServerImageContainer />
                 </div>
 
-                <AdminBox title={'Startup Command'} css={tw`relative w-full col-span-2`}>
+                <AdminBox title={'Startup Command'} className="relative w-full col-span-2">
                     <SpinnerOverlay visible={isSubmitting} />
 
                     <Field
@@ -131,7 +132,7 @@ function InternalForm() {
                     />
                 </AdminBox>
 
-                <div css={tw`col-span-2 grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8`}>
+                <div className="col-span-2 grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8">
                     {/* This ensures that no variables are rendered unless the environment has a value for the variable. */}
                     {egg?.relationships.variables
                         ?.filter(v => Object.keys(environment).find(e => e === v.environmentVariable) !== undefined)
@@ -140,9 +141,9 @@ function InternalForm() {
                         ))}
                 </div>
 
-                <div css={tw`bg-neutral-700 rounded shadow-md px-4 py-3 col-span-2`}>
-                    <div css={tw`flex flex-row`}>
-                        <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                <div className="bg-neutral-700 rounded shadow-md px-4 py-3 col-span-2">
+                    <div className="flex flex-row">
+                        <Button type="submit" size="small" className="ml-auto" disabled={isSubmitting || !isValid}>
                             Create Server
                         </Button>
                     </div>

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

@@ -7,7 +7,7 @@ import tw from 'twin.macro';
 import { object } from 'yup';
 
 import type { InferModel } from '@/api/admin';
-import type { Egg, EggVariable } from '@/api/admin/egg';
+import type {Egg, EggVariable, LoadedEgg} from '@/api/admin/egg';
 import { getEgg } from '@/api/admin/egg';
 import type { Server } from '@/api/admin/server';
 import { useServerFromRoute } from '@/api/admin/server';
@@ -23,12 +23,13 @@ import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import Label from '@/components/elements/Label';
 import type { ApplicationStore } from '@/state';
+import {WithRelationships} from "@/api/admin";
 
-function ServerStartupLineContainer({ egg, server }: { egg: Egg | null; server: Server }) {
+function ServerStartupLineContainer({ egg, server }: { egg?: Egg; server: Server }) {
     const { isSubmitting, setFieldValue } = useFormikContext();
 
     useEffect(() => {
-        if (egg === null) {
+        if (egg === undefined) {
             return;
         }
 
@@ -44,10 +45,10 @@ function ServerStartupLineContainer({ egg, server }: { egg: Egg | null; server:
     }, [egg]);
 
     return (
-        <AdminBox title={'Startup Command'} css={tw`relative w-full`}>
+        <AdminBox title={'Startup Command'} className="relative w-full">
             <SpinnerOverlay visible={isSubmitting} />
 
-            <div css={tw`mb-6`}>
+            <div className="mb-6">
                 <Field
                     id={'startup'}
                     name={'startup'}
@@ -69,12 +70,12 @@ function ServerStartupLineContainer({ egg, server }: { egg: Egg | null; server:
 }
 
 export function ServerServiceContainer({
-    egg,
+    selectedEggId,
     setEgg,
     nestId: _nestId,
 }: {
-    egg: Egg | null;
-    setEgg: (value: Egg | null) => void;
+    selectedEggId?: number;
+    setEgg: (value: WithRelationships<Egg, 'variables'> | undefined) => void;
     nestId: number;
 }) {
     const { isSubmitting } = useFormikContext();
@@ -87,7 +88,7 @@ export function ServerServiceContainer({
                 <NestSelector selectedNestId={nestId} onNestSelect={setNestId} />
             </div>
             <div className="mb-6">
-                <EggSelect nestId={nestId} selectedEggId={egg?.id} onEggSelect={setEgg} />
+                <EggSelect nestId={nestId} selectedEggId={selectedEggId} onEggSelect={setEgg} />
             </div>
             <div className="bg-neutral-800 border border-neutral-900 shadow-inner p-4 rounded">
                 <FormikSwitch name={'skipScripts'} label={'Skip Egg Install Script'} description={'Soon™'} />
@@ -100,10 +101,10 @@ export function ServerImageContainer() {
     const { isSubmitting } = useFormikContext();
 
     return (
-        <AdminBox title={'Image Configuration'} css={tw`relative w-full`}>
+        <AdminBox title={'Image Configuration'} className="relative w-full">
             <SpinnerOverlay visible={isSubmitting} />
 
-            <div css={tw`md:w-full md:flex md:flex-col`}>
+            <div className="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'} />
@@ -130,7 +131,7 @@ export function ServerVariableContainer({ variable, value }: { variable: EggVari
     }, [value]);
 
     return (
-        <AdminBox css={tw`relative w-full`} title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}>
+        <AdminBox className="relative w-full" title={<p className="text-sm uppercase">{variable.name}</p>}>
             <SpinnerOverlay visible={isSubmitting} />
 
             <Field
@@ -145,12 +146,14 @@ export function ServerVariableContainer({ variable, value }: { variable: EggVari
 }
 
 function ServerStartupForm({
+    selectedEggId,
     egg,
     setEgg,
     server,
 }: {
-    egg: Egg | null;
-    setEgg: (value: Egg | null) => void;
+    selectedEggId?: number;
+    egg?: LoadedEgg;
+    setEgg: (value: LoadedEgg | undefined) => void;
     server: Server;
 }) {
     const {
@@ -161,22 +164,22 @@ function ServerStartupForm({
 
     return (
         <Form>
-            <div css={tw`flex flex-col mb-16`}>
-                <div css={tw`flex flex-row mb-6`}>
+            <div className="flex flex-col mb-16">
+                <div className="flex flex-row mb-6">
                     <ServerStartupLineContainer egg={egg} server={server} />
                 </div>
 
-                <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
-                    <div css={tw`flex`}>
-                        <ServerServiceContainer egg={egg} setEgg={setEgg} nestId={server.nestId} />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6">
+                    <div className="flex">
+                        <ServerServiceContainer selectedEggId={selectedEggId} setEgg={setEgg} nestId={server.nestId} />
                     </div>
 
-                    <div css={tw`flex`}>
+                    <div className="flex">
                         <ServerImageContainer />
                     </div>
                 </div>
 
-                <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8`}>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8">
                     {/* This ensures that no variables are rendered unless the environment has a value for the variable. */}
                     {egg?.relationships.variables
                         ?.filter(v => Object.keys(environment).find(e => e === v.environmentVariable) !== undefined)
@@ -193,9 +196,9 @@ function ServerStartupForm({
                         ))}
                 </div>
 
-                <div css={tw`bg-neutral-700 rounded shadow-md py-2 pr-6 mt-6`}>
-                    <div css={tw`flex flex-row`}>
-                        <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                <div className="bg-neutral-700 rounded shadow-md py-2 pr-6 mt-6">
+                    <div className="flex flex-row">
+                        <Button type="submit" size="small" className="ml-auto" disabled={isSubmitting || !isValid}>
                             Save Changes
                         </Button>
                     </div>
@@ -210,10 +213,12 @@ export default () => {
     const { clearFlashes, clearAndAddHttpError } = useStoreActions(
         (actions: Actions<ApplicationStore>) => actions.flashes,
     );
-    const [egg, setEgg] = useState<InferModel<typeof getEgg> | null>(null);
+    const [egg, setEgg] = useState<LoadedEgg | undefined>(undefined);
 
     useEffect(() => {
-        if (!server) return;
+        if (!server) {
+            return;
+        }
 
         getEgg(server.eggId)
             .then(egg => setEgg(egg))
@@ -249,10 +254,10 @@ export default () => {
             validationSchema={object().shape({})}
         >
             <ServerStartupForm
+                selectedEggId={egg?.id ?? server.eggId}
                 egg={egg}
-                // @ts-expect-error fix this
                 setEgg={setEgg}
-                server={server}
+                server={server as Server}
             />
         </Formik>
     );