[studio] Fix some layout issues in the component attribute editor

packages/toolpad-studio/src/runtime/toolpadComponents/layoutBox.ts

@@ -15,14 +15,14 @@ export const layoutBoxArgTypes: {
  enum: ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'],
  default: 'start',
  label: 'Horizontal alignment',
- control: { type: 'HorizontalAlign', hideLabel: true },
+ control: { type: 'HorizontalAlign', hideLabel: true, bindable: false },
  },
  verticalAlign: {
  helperText: 'Vertical alignment of the component.',
  type: 'string',
  enum: ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'],
  default: 'start',
  label: 'Vertical alignment',
- control: { type: 'VerticalAlign', hideLabel: true },
+ control: { type: 'VerticalAlign', hideLabel: true, bindable: false },
  },
 };

packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/BindableEditor.tsx

@@ -14,6 +14,7 @@ import {
  JsRuntime,
  ScopeMeta,
  EnvAttrValue,
+ ArgTypeDefinition,
 } from '@toolpad/studio-runtime';
 import { WithControlledProp } from '@toolpad/utils/types';
 import { getBindingType } from '../../../runtime/bindings';
@@ -43,7 +44,7 @@ export interface BindableEditorProps<V> extends WithControlledProp<BindableAttrV
  bindable?: boolean;
  disabled?: boolean;
  jsRuntime: JsRuntime;
- propType: PropValueType;
+ propType: ArgTypeDefinition<any>;
  renderControl?: (params: RenderControlParams<any>) => React.ReactNode;
  liveBinding?: LiveBinding;
  globalScope?: Record<string, unknown>;
@@ -103,14 +104,14 @@ export default function BindableEditor<V>({
 
  return (
  <EditorRoot sx={sx}>
- <React.Fragment>
- {renderControl({
-  label,
-  propType,
-  disabled: disabled || !!hasBinding,
-  value: constValue,
-  onChange: handlePropConstChange,
-  })}
+ {renderControl({
+ label,
+ propType,
+ disabled: disabled || !!hasBinding,
+ value: constValue,
+ onChange: handlePropConstChange,
+ })}
+ {propType.control?.bindable === false ? null : (
  <BindingEditor<V>
  globalScope={globalScope}
  globalScopeMeta={globalScopeMeta}
@@ -125,7 +126,7 @@ export default function BindableEditor<V>({
  env={env}
  declaredEnvKeys={declaredEnvKeys}
  />
- </React.Fragment>
+ )}
  </EditorRoot>
  );
 }

packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx

@@ -11,6 +11,7 @@ import {
 } from '@toolpad/studio-runtime';
 import { ExactEntriesOf } from '@toolpad/utils/types';
 import * as appDom from '@toolpad/studio-runtime/appDom';
+import Box from '@mui/system/Box';
 import NodeAttributeEditor from './NodeAttributeEditor';
 import { usePageEditorState } from './PageEditorProvider';
 import { useToolpadComponent } from '../toolpadComponents';
@@ -106,7 +107,15 @@ function ComponentPropsEditor<P extends object>({
 
  <div className={classes.control}>
  <Typography variant="body2">Alignment:</Typography>
- <Stack direction="row">
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+ gap: 1,
+ }}
+ >
  {hasLayoutHorizontalControls ? (
  <NodeAttributeEditor
  node={node}
@@ -124,7 +133,7 @@ function ComponentPropsEditor<P extends object>({
  argType={layoutBoxArgTypes.verticalAlign}
  />
  ) : null}
- </Stack>
+ </Box>
  </div>
 
  <Divider sx={{ mt: 1 }} />

packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx

@@ -96,7 +96,7 @@ export default function NodeAttributeEditor<P extends object>({
  propType={argType}
  jsRuntime={jsBrowserRuntime}
  renderControl={(params) => (
- <Box sx={{ flex: 1, maxWidth: '100%' }}>
+ <Box sx={{ flex: 1, minWidth: 0 }}>
  <Control nodeId={node.id} {...params} propType={argType} />
  </Box>
  )}

packages/toolpad-studio/src/toolpadDataSources/TranformInput.tsx

@@ -1,4 +1,4 @@
-import { Stack, Grid, Checkbox, FormControlLabel, IconButton } from '@mui/material';
+import { Stack, Checkbox, FormControlLabel, IconButton } from '@mui/material';
 import * as React from 'react';
 import AutorenewIcon from '@mui/icons-material/Autorenew';
 import JsonView from '../components/JsonView';
@@ -31,72 +31,70 @@ export default function TransformInput({
  );
 
  return (
- <Grid item xs={6} md={12}>
- <Stack>
- <FormControlLabel
- label="Transform response"
+ <Stack>
+ <FormControlLabel
+ label="Transform response"
+ sx={{
+ '& .MuiFormControlLabel-label': { fontSize: 12 },
+ }}
+ control={
+ <Checkbox
+ checked={enabled}
+ sx={{ p: 0.25, pl: 1 }}
+ onChange={handleTransformEnabledChange}
+ inputProps={{ 'aria-label': 'controlled' }}
+ />
+ }
+ />
+
+ <Stack direction={'row'} spacing={2} width={'100%'}>
+ <JsonView
+ src={globalScope}
+ disabled={loading || !enabled}
  sx={{
- '& .MuiFormControlLabel-label': { fontSize: 12 },
+ width: '300px',
+ maxWidth: '600px',
+ maxHeight: '150px',
  }}
- control={
- <Checkbox
- checked={enabled}
- sx={{ p: 0.25, pl: 1 }}
- onChange={handleTransformEnabledChange}
- inputProps={{ 'aria-label': 'controlled' }}
- />
- }
  />
 
- <Stack direction={'row'} spacing={2} width={'100%'}>
- <JsonView
- src={globalScope}
- disabled={loading || !enabled}
- sx={{
- width: '300px',
- maxWidth: '600px',
- maxHeight: '150px',
- }}
- />
-
- {onUpdatePreview ? (
- <IconButton
- disabled={!enabled}
- onClick={onUpdatePreview}
- sx={{ alignSelf: 'self-start' }}
- >
- <AutorenewIcon
- sx={{
- animation: 'spin 1500ms linear infinite',
- animationPlayState: loading ? 'running' : 'paused',
- '@keyframes spin': {
- '0%': {
- transform: 'rotate(0deg)',
- },
- '100%': {
- transform: 'rotate(360deg)',
- },
+ {onUpdatePreview ? (
+ <IconButton
+ disabled={!enabled}
+ onClick={onUpdatePreview}
+ sx={{ alignSelf: 'self-start' }}
+ >
+ <AutorenewIcon
+ sx={{
+ animation: 'spin 1500ms linear infinite',
+ animationPlayState: loading ? 'running' : 'paused',
+ '@keyframes spin': {
+ '0%': {
+ transform: 'rotate(0deg)',
  },
- }}
- fontSize="inherit"
- />
- </IconButton>
- ) : null}
- <JsExpressionEditor
- globalScope={globalScope}
- globalScopeMeta={SCOPE_META}
- autoFocus
- value={value}
- sx={{
- minWidth: '300px',
- flex: 1,
- }}
- functionBody
- onChange={onChange}
- disabled={!enabled || loading}
- />
- </Stack>
+ '100%': {
+ transform: 'rotate(360deg)',
+ },
+ },
+ }}
+ fontSize="inherit"
+ />
+ </IconButton>
+ ) : null}
+ <JsExpressionEditor
+ globalScope={globalScope}
+ globalScopeMeta={SCOPE_META}
+ autoFocus
+ value={value}
+ sx={{
+ minWidth: '300px',
+ flex: 1,
+ }}
+ functionBody
+ onChange={onChange}
+ disabled={!enabled || loading}
+ />
  </Stack>
- </Grid>
+ </Stack>
  );
 }

packages/toolpad-studio/src/toolpadDataSources/local/client.tsx

@@ -340,35 +340,43 @@ function QueryEditor({
 
  <Divider sx={{ mb: 1.5 }} />
  <TabPanel value="parameters" disableGutters sx={{ ml: 1 }}>
- <Grid display="grid" gridTemplateColumns={'1fr 1fr 1fr'} gap={2}>
+ <Grid container spacing={1}>
  {Object.entries(parameterDefs).map(([name, definiton]) => {
  const Control = getDefaultControl(propTypeControls, definiton, liveBindings);
- return Control ? (
- <BindableEditor
- key={name}
- liveBinding={liveBindings[name]}
- globalScope={globalScope}
- globalScopeMeta={globalScopeMeta}
- label={name}
- propType={definiton}
- jsRuntime={jsBrowserRuntime}
- renderControl={(renderControlParams) => (
- <Control {...renderControlParams} propType={definiton} />
- )}
- value={paramsObject[name]}
- onChange={(newValue) => {
- const paramKeys = Object.keys(parameterDefs);
- const newParams: BindableAttrEntries = paramKeys.flatMap((key) => {
- const paramValue = key === name ? newValue : paramsObject[key];
- return paramValue ? [[key, paramValue]] : [];
- });
- appStateApi.updateQueryDraft((draft) => ({
- ...draft,
- params: newParams,
- }));
- }}
- />
- ) : null;
+ if (!Control) {
+ return (
+ <Grid xs={4} key={name} sx={{ display: 'flex', alignItems: 'center' }}>
+ <Typography>Can&apos;t configure {name}</Typography>
+ </Grid>
+ );
+ }
+ return (
+ <Grid xs={4} key={name}>
+ <BindableEditor
+ liveBinding={liveBindings[name]}
+ globalScope={globalScope}
+ globalScopeMeta={globalScopeMeta}
+ label={name}
+ propType={definiton}
+ jsRuntime={jsBrowserRuntime}
+ renderControl={(renderControlParams) => (
+ <Control {...renderControlParams} propType={definiton} />
+ )}
+ value={paramsObject[name]}
+ onChange={(newValue) => {
+ const paramKeys = Object.keys(parameterDefs);
+ const newParams: BindableAttrEntries = paramKeys.flatMap((key) => {
+ const paramValue = key === name ? newValue : paramsObject[key];
+ return paramValue ? [[key, paramValue]] : [];
+ });
+ appStateApi.updateQueryDraft((draft) => ({
+ ...draft,
+ params: newParams,
+ }));
+ }}
+ />
+ </Grid>
+ );
  })}
  </Grid>
  </TabPanel>