ui(admin): fix server egg select improperly switching
This commit is contained in:
parent
3721b2007b
commit
35ded9def8
4 changed files with 67 additions and 58 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue