Reposition variable description and required controls

This commit is contained in:
2025-10-03 16:10:05 -06:00
parent aacc7ccec2
commit 80646ee842

View File

@@ -918,15 +918,15 @@ export default function AssemblyEditor({
arrow arrow
placement="top-start" placement="top-start"
> >
<TextField <TextField
label="Variable" label="Variable"
value={variable.name} value={variable.name}
onChange={(e) => updateVariable(variable.id, { name: e.target.value })} onChange={(e) => updateVariable(variable.id, { name: e.target.value })}
fullWidth fullWidth
variant="outlined" variant="outlined"
sx={INPUT_BASE_SX} sx={INPUT_BASE_SX}
/> />
</Tooltip> </Tooltip>
</Box> </Box>
<Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 22%" }, minWidth: { lg: 180 } }}> <Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 22%" }, minWidth: { lg: 180 } }}>
<Tooltip <Tooltip
@@ -934,36 +934,52 @@ export default function AssemblyEditor({
arrow arrow
placement="top-start" placement="top-start"
> >
<TextField <TextField
label="Display Label" label="Display Label"
value={variable.label} value={variable.label}
onChange={(e) => updateVariable(variable.id, { label: e.target.value })} onChange={(e) => updateVariable(variable.id, { label: e.target.value })}
fullWidth fullWidth
variant="outlined" variant="outlined"
sx={INPUT_BASE_SX} sx={INPUT_BASE_SX}
/> />
</Tooltip> </Tooltip>
</Box>
<Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 28%" }, minWidth: { lg: 220 } }}>
<Tooltip
title="Instruct the operator in why this variable exists and how to set it appropriately."
arrow
placement="top-start"
>
<TextField
label="Description"
value={variable.description}
onChange={(e) => updateVariable(variable.id, { description: e.target.value })}
fullWidth
variant="outlined"
sx={INPUT_BASE_SX}
/>
</Tooltip>
</Box> </Box>
<Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 18%" }, minWidth: { lg: 160 } }}> <Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 18%" }, minWidth: { lg: 160 } }}>
<Tooltip <Tooltip
title="This defines the type of variable data the script should expect." title="This defines the type of variable data the script should expect."
arrow arrow
placement="top-start" placement="top-start"
>
<TextField
select
fullWidth
label="Type"
value={variable.type}
onChange={(e) => updateVariable(variable.id, { type: e.target.value })}
sx={SELECT_BASE_SX}
SelectProps={{ MenuProps: MENU_PROPS }}
> >
{VARIABLE_TYPE_OPTIONS.map((opt) => ( <TextField
<MenuItem key={opt.key} value={opt.key}>{opt.label}</MenuItem> select
))} fullWidth
</TextField> label="Type"
</Tooltip> value={variable.type}
onChange={(e) => updateVariable(variable.id, { type: e.target.value })}
sx={SELECT_BASE_SX}
SelectProps={{ MenuProps: MENU_PROPS }}
>
{VARIABLE_TYPE_OPTIONS.map((opt) => (
<MenuItem key={opt.key} value={opt.key}>{opt.label}</MenuItem>
))}
</TextField>
</Tooltip>
</Box> </Box>
<Box <Box
sx={{ sx={{
@@ -978,59 +994,39 @@ export default function AssemblyEditor({
title="This is the value that will be pre-populated in the assembly when ran. Use a sensible default value." title="This is the value that will be pre-populated in the assembly when ran. Use a sensible default value."
arrow arrow
placement="top-start" placement="top-start"
> >
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
checked={Boolean(variable.defaultValue)} checked={Boolean(variable.defaultValue)}
onChange={(e) => updateVariable(variable.id, { defaultValue: e.target.checked })} onChange={(e) => updateVariable(variable.id, { defaultValue: e.target.checked })}
sx={{ color: "#58a6ff" }} sx={{ color: "#58a6ff" }}
/> />
} }
label="Default Value" label="Default Value"
sx={{ sx={{
color: "#9ba3b4", color: "#9ba3b4",
m: 0, m: 0,
"& .MuiFormControlLabel-label": { fontSize: "0.95rem" } "& .MuiFormControlLabel-label": { fontSize: "0.95rem" }
}} }}
/> />
</Tooltip> </Tooltip>
) : ( ) : (
<Tooltip <Tooltip
title="This is the value that will be pre-populated in the assembly when ran. Use a sensible default value." title="This is the value that will be pre-populated in the assembly when ran. Use a sensible default value."
arrow arrow
placement="top-start" placement="top-start"
> >
<TextField <TextField
label="Default Value" label="Default Value"
value={variable.defaultValue ?? ""} value={variable.defaultValue ?? ""}
onChange={(e) => updateVariable(variable.id, { defaultValue: e.target.value })} onChange={(e) => updateVariable(variable.id, { defaultValue: e.target.value })}
fullWidth fullWidth
variant="outlined" variant="outlined"
sx={INPUT_BASE_SX} sx={INPUT_BASE_SX}
/> />
</Tooltip> </Tooltip>
)} )}
</Box>
<Box
sx={{
flex: { xs: "1 1 100%", lg: "0 0 110px" },
minWidth: { lg: 110 },
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 1
}}
>
<Typography variant="caption" sx={{ color: "#9ba3b4", fontSize: "0.75rem" }}>
Required
</Typography>
<Checkbox
checked={Boolean(variable.required)}
onChange={(e) => updateVariable(variable.id, { required: e.target.checked })}
sx={{ color: "#58a6ff", p: 0.5 }}
inputProps={{ "aria-label": "Required" }}
/>
</Box> </Box>
<Box <Box
sx={{ sx={{
@@ -1055,21 +1051,24 @@ export default function AssemblyEditor({
gap: { xs: 2, lg: 1.5 } gap: { xs: 2, lg: 1.5 }
}} }}
> >
<Box sx={{ flex: { xs: "1 1 100%", lg: "0 1 50%" }, minWidth: { lg: 260 } }}> <Box
<Tooltip sx={{
title="Instruct the operator in why this variable exists and how to set it appropriately." flex: { xs: "1 1 100%", lg: "0 1 50%" },
arrow minWidth: { lg: 220 },
placement="top-start" display: "flex",
> alignItems: "center",
<TextField gap: 1.5
label="Description" }}
value={variable.description} >
onChange={(e) => updateVariable(variable.id, { description: e.target.value })} <Typography variant="caption" sx={{ color: "#9ba3b4", fontSize: "0.75rem" }}>
fullWidth Required
variant="outlined" </Typography>
sx={INPUT_BASE_SX} <Checkbox
/> checked={Boolean(variable.required)}
</Tooltip> onChange={(e) => updateVariable(variable.id, { required: e.target.checked })}
sx={{ color: "#58a6ff", p: 0.5 }}
inputProps={{ "aria-label": "Required" }}
/>
</Box> </Box>
</Box> </Box>
</Box> </Box>