From 7ec78d940025e678da381c7794585b9a8b11eb2a Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 3 Oct 2021 18:38:45 -0700
Subject: [PATCH] Move feature limits box into own component

---
 .../admin/servers/ServerSettingsContainer.tsx | 39 +----------------
 .../servers/settings/FeatureLimitsBox.tsx     | 42 +++++++++++++++++++
 2 files changed, 44 insertions(+), 37 deletions(-)
 create mode 100644 resources/scripts/components/admin/servers/settings/FeatureLimitsBox.tsx

diff --git a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
index 3da8115c2..b3a25ee40 100644
--- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
@@ -20,42 +20,7 @@ import { Actions, useStoreActions } from 'easy-peasy';
 import Button from '@/components/elements/Button';
 import FormikSwitch from '@/components/elements/FormikSwitch';
 import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox';
-
-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>
-    );
-}
+import FeatureLimitsBox from '@/components/admin/servers/settings/FeatureLimitsBox';
 
 export function ServerAllocationsContainer ({ server }: { server: Server }) {
     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 gap-y-6`}>
                             <BaseSettingsBox/>
-                            <ServerFeatureContainer/>
+                            <FeatureLimitsBox/>
                             <ServerAllocationsContainer server={server}/>
                         </div>
 
diff --git a/resources/scripts/components/admin/servers/settings/FeatureLimitsBox.tsx b/resources/scripts/components/admin/servers/settings/FeatureLimitsBox.tsx
new file mode 100644
index 000000000..d6597dd13
--- /dev/null
+++ b/resources/scripts/components/admin/servers/settings/FeatureLimitsBox.tsx
@@ -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>
+    );
+};