ui(admin): fix server egg select improperly switching

This commit is contained in:
Matthew Penner 2023-09-29 16:33:15 -06:00
parent 3721b2007b
commit 35ded9def8
No known key found for this signature in database
4 changed files with 67 additions and 58 deletions

View file

@ -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>