import React, { memo, 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 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'; interface Props { variable: ServerEggVariable; } const VariableBox = ({ variable }: Props) => { const FLASH_KEY = `server:startup:${variable.envVariable}`; const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid); const [loading, setLoading] = useState(false); const [canEdit] = usePermissions(['startup.update']); const { clearFlashes, clearAndAddHttpError } = useFlash(); const { mutate } = getServerStartup(uuid); const setVariableValue = debounce((value: string) => { setLoading(true); clearFlashes(FLASH_KEY); updateStartupVariable(uuid, variable.envVariable, value) .then(([response, invocation]) => mutate( (data) => ({ ...data, invocation, variables: (data.variables || []).map((v) => v.envVariable === response.envVariable ? response : v ), }), false ) ) .catch((error) => { console.error(error); clearAndAddHttpError({ error, key: FLASH_KEY }); }) .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 ( {!variable.isEditable && ( Read Only )} {variable.name}

} > {useSwitch ? ( <> { if (canEdit && variable.isEditable) { setVariableValue(variable.serverValue === '1' ? '0' : '1'); } }} /> ) : ( <> {selectValues.length > 0 ? ( <> ) : ( <> { if (canEdit && variable.isEditable) { setVariableValue(e.currentTarget.value); } }} readOnly={!canEdit || !variable.isEditable} name={variable.envVariable} defaultValue={variable.serverValue} placeholder={variable.defaultValue} /> )} )}

{variable.description}

); }; export default memo(VariableBox, isEqual);