Apply new eslint rules; default to prettier for styling
This commit is contained in:
parent
f22cce8881
commit
dc84af9937
218 changed files with 3876 additions and 3564 deletions
|
@ -22,9 +22,9 @@ interface Props {
|
|||
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 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);
|
||||
|
||||
|
@ -33,35 +33,42 @@ const VariableBox = ({ variable }: Props) => {
|
|||
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 => {
|
||||
.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(',') || [];
|
||||
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={
|
||||
<p css={tw`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>
|
||||
}
|
||||
{!variable.isEditable && (
|
||||
<span css={tw`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} css={tw`mb-2 md:mb-4`} />
|
||||
<InputSpinner visible={loading}>
|
||||
{useSwitch ?
|
||||
{useSwitch ? (
|
||||
<>
|
||||
<Switch
|
||||
readOnly={!canEdit || !variable.isEditable}
|
||||
|
@ -74,26 +81,30 @@ const VariableBox = ({ variable }: Props) => {
|
|||
}}
|
||||
/>
|
||||
</>
|
||||
:
|
||||
) : (
|
||||
<>
|
||||
{selectValues.length > 0 ?
|
||||
{selectValues.length > 0 ? (
|
||||
<>
|
||||
<Select
|
||||
onChange={e => setVariableValue(e.target.value)}
|
||||
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>
|
||||
{selectValues.map((selectValue) => (
|
||||
<option
|
||||
key={selectValue.replace('in:', '')}
|
||||
value={selectValue.replace('in:', '')}
|
||||
>
|
||||
{selectValue.replace('in:', '')}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
</>
|
||||
:
|
||||
) : (
|
||||
<>
|
||||
<Input
|
||||
onKeyUp={e => {
|
||||
onKeyUp={(e) => {
|
||||
if (canEdit && variable.isEditable) {
|
||||
setVariableValue(e.currentTarget.value);
|
||||
}
|
||||
|
@ -104,13 +115,11 @@ const VariableBox = ({ variable }: Props) => {
|
|||
placeholder={variable.defaultValue}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
)}
|
||||
</>
|
||||
}
|
||||
)}
|
||||
</InputSpinner>
|
||||
<p css={tw`mt-1 text-xs text-neutral-300`}>
|
||||
{variable.description}
|
||||
</p>
|
||||
<p css={tw`mt-1 text-xs text-neutral-300`}>{variable.description}</p>
|
||||
</TitledGreyBox>
|
||||
);
|
||||
};
|
||||
|
|
Reference in a new issue