Move feature limits box into own component

This commit is contained in:
Dane Everitt 2021-10-03 18:38:45 -07:00
parent 6814811a19
commit 7ec78d9400
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 44 additions and 37 deletions

View file

@ -20,42 +20,7 @@ import { Actions, useStoreActions } from 'easy-peasy';
import Button from '@/components/elements/Button'; import Button from '@/components/elements/Button';
import FormikSwitch from '@/components/elements/FormikSwitch'; import FormikSwitch from '@/components/elements/FormikSwitch';
import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox'; import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox';
import FeatureLimitsBox from '@/components/admin/servers/settings/FeatureLimitsBox';
export function ServerFeatureContainer () {
const { isSubmitting } = useFormikContext();
return (
<AdminBox icon={faConciergeBell} title={'Feature Limits'} css={tw`relative w-full`}>
<SpinnerOverlay visible={isSubmitting}/>
<div css={tw`grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6`}>
<Field
id={'featureLimits.allocations'}
name={'featureLimits.allocations'}
label={'Allocation Limit'}
type={'number'}
description={'The total number of allocations a user is allowed to create for this server.'}
/>
<Field
id={'featureLimits.backups'}
name={'featureLimits.backups'}
label={'Backup Limit'}
type={'number'}
description={'The total number of backups that can be created for this server.'}
/>
<Field
id={'featureLimits.databases'}
name={'featureLimits.databases'}
label={'Database Limit'}
type={'number'}
description={'The total number of databases a user is allowed to create for this server.'}
/>
</div>
</AdminBox>
);
}
export function ServerAllocationsContainer ({ server }: { server: Server }) { export function ServerAllocationsContainer ({ server }: { server: Server }) {
const { isSubmitting } = useFormikContext(); const { isSubmitting } = useFormikContext();
@ -259,7 +224,7 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server }
<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 md:grid-cols-2 gap-y-6 gap-x-8 mb-16`}>
<div css={tw`grid grid-cols-1 gap-y-6`}> <div css={tw`grid grid-cols-1 gap-y-6`}>
<BaseSettingsBox/> <BaseSettingsBox/>
<ServerFeatureContainer/> <FeatureLimitsBox/>
<ServerAllocationsContainer server={server}/> <ServerAllocationsContainer server={server}/>
</div> </div>

View file

@ -0,0 +1,42 @@
import React from 'react';
import { useFormikContext } from 'formik';
import AdminBox from '@/components/admin/AdminBox';
import { faConciergeBell } from '@fortawesome/free-solid-svg-icons';
import tw from 'twin.macro';
import Field from '@/components/elements/Field';
import getServerDetails from '@/api/swr/admin/getServerDetails';
export default () => {
const { data: server } = getServerDetails();
const { isSubmitting } = useFormikContext();
if (!server) return null;
return (
<AdminBox icon={faConciergeBell} title={'Feature Limits'} isLoading={isSubmitting}>
<div css={tw`grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6`}>
<Field
id={'featureLimits.allocations'}
name={'featureLimits.allocations'}
label={'Allocation Limit'}
type={'number'}
description={'The total number of allocations a user is allowed to create for this server.'}
/>
<Field
id={'featureLimits.backups'}
name={'featureLimits.backups'}
label={'Backup Limit'}
type={'number'}
description={'The total number of backups that can be created for this server.'}
/>
<Field
id={'featureLimits.databases'}
name={'featureLimits.databases'}
label={'Database Limit'}
type={'number'}
description={'The total number of databases a user is allowed to create for this server.'}
/>
</div>
</AdminBox>
);
};