Add page parameters to navigation actions

packages/toolpad-app/src/appDom/index.ts

@@ -1114,15 +1114,15 @@ export function ref(nodeId: NodeId): NodeReference;
 export function ref(nodeId: null | undefined): null;
 export function ref(nodeId: Maybe<NodeId>): NodeReference | null;
 export function ref(nodeId: Maybe<NodeId>): NodeReference | null {
- return nodeId ? { $$ref: nodeId } : null;
+ return nodeId ? { $ref: nodeId } : null;
 }
 
 export function deref(nodeRef: NodeReference): NodeId;
 export function deref(nodeRef: null | undefined): null;
 export function deref(nodeRef: Maybe<NodeReference>): NodeId | null;
 export function deref(nodeRef: Maybe<NodeReference>): NodeId | null {
  if (nodeRef) {
- return nodeRef.$$ref;
+ return nodeRef.$ref;
  }
  return null;
 }

packages/toolpad-app/src/runtime/CanvasHooksContext.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { NodeHashes } from '../types';
 
 export interface NavigateToPage {
- (pageNodeId: NodeId): void;
+ (pageNodeId: NodeId, pageParameters?: Record<string, string>): void;
 }
 
 /**

packages/toolpad-app/src/runtime/ToolpadApp.tsx

@@ -131,8 +131,17 @@ const USE_DATA_QUERY_CONFIG_KEYS: readonly (keyof UseDataQueryConfig)[] = [
 function usePageNavigator(): NavigateToPage {
  const navigate = useNavigate();
  const navigateToPage: NavigateToPage = React.useCallback(
- (pageNodeId: NodeId) => {
- navigate(`/pages/${pageNodeId}`);
+ (pageNodeId, pageParameters) => {
+ const urlParams = pageParameters && new URLSearchParams(pageParameters);
+
+ navigate({
+ pathname: `/pages/${pageNodeId}`,
+ ...(urlParams
+ ? {
+ search: urlParams.toString(),
+ }
+ : {}),
+ });
  },
  [navigate],
  );
@@ -345,10 +354,28 @@ function RenderedNodeContent({ node, childNodeGroups, Component }: RenderedNodeC
  const action = (node as appDom.ElementNode).props?.[key];
 
  if (action?.type === 'navigationAction') {
- const handler = () => {
- const { page } = action.value;
+ const handler = async () => {
+ const { page, parameters = {} } = action.value;
  if (page) {
- navigateToPage(appDom.deref(page));
+ const parsedParameterEntries = await Promise.all(
+ Object.keys(parameters).map(async (parameterName) => {
+ const parameterValue = parameters[parameterName];
+
+ if (parameterValue && parameterValue.type === 'jsExpression') {
+ const result = await evaluatePageExpression(
+ parameterValue.value,
+ scopeId,
+ localScopeParams,
+ );
+ return [parameterName, result.value];
+ }
+ return [parameterName, parameterValue?.value];
+ }),
+ );
+
+ const parsedParameters = Object.fromEntries(parsedParameterEntries);
+
+ navigateToPage(appDom.deref(page), parsedParameters);
  }
  };
 
@@ -736,9 +763,10 @@ function parseBindings(
  ? `${elm.id}.props.${argType.defaultValueProp}`
  : undefined;
 
+ const propValue = elm.props?.[propName];
+
  const binding: BindableAttrValue<any> =
- elm.props?.[propName] ||
- appDom.createConst(argType ? getArgTypeDefaultValue(argType) : undefined);
+ propValue || appDom.createConst(argType ? getArgTypeDefaultValue(argType) : undefined);
 
  const bindingId = `${elm.id}.props.${propName}`;
 

packages/toolpad-app/src/server/localMode.ts

@@ -410,12 +410,12 @@ function toBindableProp<V>(value: V | { $$jsExpression: string }): BindableAttrV
  if (typeof (value as any).$$jsExpressionAction === 'string') {
  return { type: 'jsExpressionAction', value: (value as any).$$jsExpressionAction };
  }
- if (typeof (value as any).$$navigationAction === 'string') {
+ if (typeof (value as any).$$navigationAction === 'object') {
  const action = value as any as NavigationAction;
  return {
  type: 'navigationAction',
  value: {
- page: { $$ref: action.$$navigationAction.page as NodeId },
+ page: { $ref: action.$$navigationAction.page as NodeId },
  parameters: mapValues(
  action.$$navigationAction.parameters,
  (param) => param && toBindable(param),
@@ -438,7 +438,7 @@ function fromBindableProp<V>(bindable: BindableAttrValue<V>) {
  case 'navigationAction':
  return {
  $$navigationAction: {
- page: bindable.value.page.$$ref,
+ page: bindable.value.page.$ref,
  parameters:
  bindable.value.parameters &&
  mapValues(bindable.value.parameters, (param) => param && fromBindable(param)),

packages/toolpad-app/src/toolpad/AppEditor/BindingEditor/ActionEditor.tsx

@@ -0,0 +1,48 @@
+import { TabContext, TabList } from '@mui/lab';
+import { Box, Tab } from '@mui/material';
+import * as React from 'react';
+import { BindableAttrValue } from '@mui/toolpad-core';
+import { NavigationActionEditor } from './NavigationActionEditor';
+import TabPanel from '../../../components/TabPanel';
+import { Maybe, WithControlledProp } from '../../../utils/types';
+import { BindableType, JsExpressionActionEditor } from '.';
+
+function getActionTab(value: Maybe<BindableAttrValue<any>>) {
+ return value?.type || 'jsExpressionAction';
+}
+
+export interface ActionEditorProps extends WithControlledProp<BindableAttrValue<any> | null> {}
+
+export function ActionEditor({ value, onChange }: ActionEditorProps) {
+ const [activeTab, setActiveTab] = React.useState<BindableType>(getActionTab(value));
+ React.useEffect(() => setActiveTab(getActionTab(value)), [value]);
+
+ const handleTabChange = (event: React.SyntheticEvent, newValue: BindableType) => {
+ setActiveTab(newValue);
+ };
+
+ return (
+ <Box>
+ <TabContext value={activeTab}>
+ <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+ <TabList onChange={handleTabChange} aria-label="Choose action kind ">
+ <Tab label="JS expression" value="jsExpressionAction" />
+ <Tab label="Navigation" value="navigationAction" />
+ </TabList>
+ </Box>
+ <TabPanel value="jsExpressionAction" disableGutters>
+ <JsExpressionActionEditor
+ value={value?.type === 'jsExpressionAction' ? value : null}
+ onChange={onChange}
+ />
+ </TabPanel>
+ <TabPanel value="navigationAction" disableGutters>
+ <NavigationActionEditor
+ value={value?.type === 'navigationAction' ? value : null}
+ onChange={onChange}
+ />
+ </TabPanel>
+ </TabContext>
+ </Box>
+ );
+}

packages/toolpad-app/src/toolpad/AppEditor/BindingEditor/BindingEditorDialog.tsx

@@ -0,0 +1,112 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import * as React from 'react';
+import { BindableAttrValue, PropValueType } from '@mui/toolpad-core';
+
+import { tryFormatExpression } from '../../../utils/prettier';
+import useShortcut from '../../../utils/useShortcut';
+import useUnsavedChangesConfirm from '../../hooks/useUnsavedChangesConfirm';
+import { WithControlledProp } from '../../../utils/types';
+import { JsBindingEditor, useBindingEditorContext } from '.';
+
+export interface BindingEditorDialogProps<V>
+ extends WithControlledProp<BindableAttrValue<V> | null> {
+ open: boolean;
+ onClose: () => void;
+ renderPropBindingEditor?: (
+ propType: PropValueType,
+ controlProps: WithControlledProp<BindableAttrValue<V> | null>,
+ ) => JSX.Element | null;
+}
+
+export function BindingEditorDialog<V>({
+ value,
+ onChange,
+ open,
+ onClose,
+ renderPropBindingEditor,
+}: BindingEditorDialogProps<V>) {
+ const { propType, label } = useBindingEditorContext();
+
+ const [input, setInput] = React.useState(value);
+ React.useEffect(() => {
+ if (open) {
+ setInput(value);
+ }
+ }, [open, value]);
+
+ const committedInput = React.useRef<BindableAttrValue<V> | null>(input);
+
+ const handleSave = React.useCallback(() => {
+ let newValue = input;
+
+ if (input?.type === 'jsExpression') {
+ newValue = {
+ ...input,
+ value: tryFormatExpression(input.value),
+ };
+ }
+
+ committedInput.current = newValue;
+ onChange(newValue);
+ }, [onChange, input]);
+
+ const hasUnsavedChanges = input
+ ? input.type !== committedInput.current?.type || input.value !== committedInput.current?.value
+ : false;
+
+ const { handleCloseWithUnsavedChanges } = useUnsavedChangesConfirm({
+ hasUnsavedChanges,
+ onClose,
+ });
+
+ const handleCommit = React.useCallback(() => {
+ handleSave();
+ onClose();
+ }, [onClose, handleSave]);
+
+ const handleRemove = React.useCallback(() => {
+ onChange(null);
+ onClose();
+ }, [onClose, onChange]);
+
+ useShortcut({ key: 's', metaKey: true, disabled: !open }, handleSave);
+
+ const propBindingEditor =
+ renderPropBindingEditor &&
+ propType &&
+ renderPropBindingEditor(propType, {
+ value: input,
+ onChange: (newValue) => setInput(newValue),
+ });
+
+ return (
+ <Dialog
+ onClose={handleCloseWithUnsavedChanges}
+ open={open}
+ fullWidth
+ scroll="body"
+ maxWidth="lg"
+ >
+ <DialogTitle>Bind property &quot;{label}&quot;</DialogTitle>
+ <DialogContent>
+ {propBindingEditor || (
+ <JsBindingEditor
+ value={input?.type === 'jsExpression' ? input : null}
+ onChange={(newValue) => setInput(newValue)}
+ />
+ )}
+ </DialogContent>
+ <DialogActions>
+ <Button color="inherit" variant="text" onClick={onClose}>
+ {hasUnsavedChanges ? 'Cancel' : 'Close'}
+ </Button>
+ <Button color="inherit" disabled={!value} onClick={handleRemove}>
+ Remove binding
+ </Button>
+ <Button disabled={!hasUnsavedChanges} color="primary" onClick={handleCommit}>
+ Update binding
+ </Button>
+ </DialogActions>
+ </Dialog>
+ );
+}