Support modifying startup variables for servers

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

@@ -3,9 +3,10 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import useServer from '@/plugins/useServer';
 import tw from 'twin.macro';
+import VariableBox from '@/components/server/startup/VariableBox';
 
 const StartupContainer = () => {
-    const { invocation } = useServer();
+    const { invocation, variables } = useServer();
 
     return (
         <PageContentBlock title={'Startup Settings'} showFlashKey={'server:startup'}>
@@ -16,6 +17,9 @@ const StartupContainer = () => {
                     </p>
                 </div>
             </TitledGreyBox>
+            <div css={tw`grid gap-8 grid-cols-2 mt-10`}>
+                {variables.map(variable => <VariableBox key={variable.envVariable} variable={variable}/>)}
+            </div>
         </PageContentBlock>
     );
 };

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

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { ServerEggVariable } from '@/api/server/types';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
+import { usePermissions } from '@/plugins/usePermissions';
+import InputSpinner from '@/components/elements/InputSpinner';
+import Input from '@/components/elements/Input';
+import tw from 'twin.macro';
+import { debounce } from 'debounce';
+import updateStartupVariable from '@/api/server/updateStartupVariable';
+import useServer from '@/plugins/useServer';
+import { ServerContext } from '@/state/server';
+import useFlash from '@/plugins/useFlash';
+import FlashMessageRender from '@/components/FlashMessageRender';
+
+interface Props {
+    variable: ServerEggVariable;
+}
+
+const VariableBox = ({ variable }: Props) => {
+    const FLASH_KEY = `server:startup:${variable.envVariable}`;
+
+    const server = useServer();
+    const [ loading, setLoading ] = useState(false);
+    const [ canEdit ] = usePermissions([ 'startup.update' ]);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
+
+    const setVariableValue = debounce((value: string) => {
+        setLoading(true);
+        clearFlashes(FLASH_KEY);
+
+        updateStartupVariable(server.uuid, variable.envVariable, value)
+            .then(response => setServer({
+                ...server,
+                variables: server.variables.map(v => v.envVariable === response.envVariable ? response : v),
+            }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ error, key: FLASH_KEY });
+            })
+            .then(() => setLoading(false));
+    }, 500);
+
+    return (
+        <TitledGreyBox title={variable.name}>
+            <FlashMessageRender byKey={FLASH_KEY} css={tw`mb-4`}/>
+            <InputSpinner visible={loading}>
+                <Input
+                    onKeyUp={e => setVariableValue(e.currentTarget.value)}
+                    readOnly={!canEdit}
+                    name={variable.envVariable}
+                    defaultValue={variable.serverValue}
+                    placeholder={variable.defaultValue}
+                />
+            </InputSpinner>
+            <p css={tw`mt-1 text-xs text-neutral-400`}>
+                {variable.description}
+            </p>
+        </TitledGreyBox>
+    );
+};
+
+export default VariableBox;