From 7d0d71baec8ccaeba5e9d63de203564d39d731b4 Mon Sep 17 00:00:00 2001
From: Boy132 <Boy132@users.noreply.github.com>
Date: Tue, 18 Jan 2022 04:08:53 +0100
Subject: [PATCH] Checkbox & Dropdown for Startup Variables (#3769)

---
 .../scripts/components/elements/Switch.tsx    |  4 +-
 .../components/server/startup/VariableBox.tsx | 60 +++++++++++++++----
 2 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/resources/scripts/components/elements/Switch.tsx b/resources/scripts/components/elements/Switch.tsx
index 5c4b1e9b3..6420bccfa 100644
--- a/resources/scripts/components/elements/Switch.tsx
+++ b/resources/scripts/components/elements/Switch.tsx
@@ -41,11 +41,12 @@ export interface SwitchProps {
     label?: string;
     description?: string;
     defaultChecked?: boolean;
+    readOnly?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     children?: React.ReactNode;
 }
 
-const Switch = ({ name, label, description, defaultChecked, onChange, children }: SwitchProps) => {
+const Switch = ({ name, label, description, defaultChecked, readOnly, onChange, children }: SwitchProps) => {
     const uuid = useMemo(() => v4(), []);
 
     return (
@@ -58,6 +59,7 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
                     type={'checkbox'}
                     onChange={e => onChange && onChange(e)}
                     defaultChecked={defaultChecked}
+                    disabled={readOnly}
                 />
                 }
                 <Label htmlFor={uuid}/>
diff --git a/resources/scripts/components/server/startup/VariableBox.tsx b/resources/scripts/components/server/startup/VariableBox.tsx
index 5ebca8f6e..ae7150d03 100644
--- a/resources/scripts/components/server/startup/VariableBox.tsx
+++ b/resources/scripts/components/server/startup/VariableBox.tsx
@@ -4,12 +4,14 @@ import TitledGreyBox from '@/components/elements/TitledGreyBox';
 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';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import getServerStartup from '@/api/swr/getServerStartup';
+import Select from '@/components/elements/Select';
 import isEqual from 'react-fast-compare';
 import { ServerContext } from '@/state/server';
 
@@ -43,6 +45,9 @@ const VariableBox = ({ variable }: Props) => {
             .then(() => setLoading(false));
     }, 500);
 
+    const useSwitch = variable.rules.some(v => v === 'boolean' || v === 'in:0,1');
+    const selectValues = variable.rules.find(v => v.startsWith('in:'))?.split(',') || [];
+
     return (
         <TitledGreyBox
             title={
@@ -56,17 +61,52 @@ const VariableBox = ({ variable }: Props) => {
         >
             <FlashMessageRender byKey={FLASH_KEY} css={tw`mb-2 md:mb-4`}/>
             <InputSpinner visible={loading}>
-                <Input
-                    onKeyUp={e => {
-                        if (canEdit && variable.isEditable) {
-                            setVariableValue(e.currentTarget.value);
+                {useSwitch ?
+                    <>
+                        <Switch
+                            readOnly={!canEdit || !variable.isEditable}
+                            name={variable.envVariable}
+                            defaultChecked={variable.serverValue === '1'}
+                            onChange={() => {
+                                if (canEdit && variable.isEditable) {
+                                    setVariableValue(variable.serverValue === '1' ? '0' : '1');
+                                }
+                            }}
+                        />
+                    </>
+                    :
+                    <>
+                        {selectValues.length > 0 ?
+                            <>
+                                <Select
+                                    onChange={e => setVariableValue(e.target.value)}
+                                    name={variable.envVariable}
+                                    defaultValue={variable.serverValue}
+                                    disabled={!canEdit || !variable.isEditable}
+                                >
+                                    {selectValues.map(selectValue => (
+                                        <option key={selectValue.replace('in:', '')} value={selectValue.replace('in:', '')}>{selectValue.replace('in:', '')}</option>
+                                    ))}
+                                </Select>
+
+                            </>
+                            :
+                            <>
+                                <Input
+                                    onKeyUp={e => {
+                                        if (canEdit && variable.isEditable) {
+                                            setVariableValue(e.currentTarget.value);
+                                        }
+                                    }}
+                                    readOnly={!canEdit || !variable.isEditable}
+                                    name={variable.envVariable}
+                                    defaultValue={variable.serverValue}
+                                    placeholder={variable.defaultValue}
+                                />
+                            </>
                         }
-                    }}
-                    readOnly={!canEdit || !variable.isEditable}
-                    name={variable.envVariable}
-                    defaultValue={variable.serverValue}
-                    placeholder={variable.defaultValue}
-                />
+                    </>
+                }
             </InputSpinner>
             <p css={tw`mt-1 text-xs text-neutral-300`}>
                 {variable.description}