ui(server): fix defaultValue not being used with VariableBox select

Author: matthewpi

resources/scripts/api/server/types.d.ts

@@ -23,7 +23,7 @@ export interface ServerEggVariable {
     description: string;
     envVariable: string;
     defaultValue: string;
-    serverValue: string;
+    serverValue: string | null;
     isEditable: boolean;
     rules: string[];
 }

resources/scripts/components/server/startup/VariableBox.tsx

@@ -5,7 +5,6 @@ import { usePermissions } from '@/plugins/usePermissions';
 import InputSpinner from '@/components/elements/InputSpinner';
 import Input from '@/components/elements/Input';
 import Switch from '@/components/elements/Switch';
-import tw from 'twin.macro';
 import { debounce } from 'debounce';
 import updateStartupVariable from '@/api/server/updateStartupVariable';
 import useFlash from '@/plugins/useFlash';
@@ -61,15 +60,15 @@ const VariableBox = ({ variable }: Props) => {
     return (
         <TitledGreyBox
             title={
-                <p css={tw`text-sm uppercase`}>
+                <p className="text-sm uppercase">
                     {!variable.isEditable && (
-                        <span css={tw`bg-neutral-700 text-xs py-1 px-2 rounded-full mr-2 mb-1`}>Read Only</span>
+                        <span className="bg-neutral-700 text-xs py-1 px-2 rounded-full mr-2 mb-1">Read Only</span>
                     )}
                     {variable.name}
                 </p>
             }
         >
-            <FlashMessageRender byKey={FLASH_KEY} css={tw`mb-2 md:mb-4`} />
+            <FlashMessageRender byKey={FLASH_KEY} className="mb-2 md:mb-4" />
             <InputSpinner visible={loading}>
                 {useSwitch ? (
                     <>
@@ -97,7 +96,7 @@ const VariableBox = ({ variable }: Props) => {
                                 <Select
                                     onChange={(e) => setVariableValue(e.target.value)}
                                     name={variable.envVariable}
-                                    defaultValue={variable.serverValue}
+                                    defaultValue={variable.serverValue ?? variable.defaultValue}
                                     disabled={!canEdit || !variable.isEditable}
                                 >
                                     {selectValues.map((selectValue) => (
@@ -120,15 +119,18 @@ const VariableBox = ({ variable }: Props) => {
                                     }}
                                     readOnly={!canEdit || !variable.isEditable}
                                     name={variable.envVariable}
-                                    defaultValue={variable.serverValue}
+                                    defaultValue={variable.serverValue ?? ''}
                                     placeholder={variable.defaultValue}
                                 />
                             </>
                         )}
                     </>
                 )}
             </InputSpinner>
-            <p css={tw`mt-1 text-xs text-neutral-300`}>{variable.description}</p>
+
+            <p className="mt-1 text-xs text-neutral-300">
+                {variable.description}
+            </p>
         </TitledGreyBox>
     );
 };