Add page parameters to navigation actions

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

@@ -385,6 +385,7 @@ function mergeThemeIntoAppDom(dom: appDom.AppDom, themeFile: Theme): appDom.AppD
 }
 
 function toBindable<V>(value: V | { $$jsExpression: string }): BindableAttrValue<V> {
+ console.log('fuck');
  if (value && typeof value === 'object' && typeof (value as any).$$jsExpression === 'string') {
  return { type: 'jsExpression', value: (value as any).$$jsExpression };
  }
@@ -410,7 +411,10 @@ 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 === 'string' ||
+ typeof (value as any).$$navigationAction === 'object'
+ ) {
  const action = value as any as NavigationAction;
  return {
  type: 'navigationAction',

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

@@ -1,11 +1,11 @@
 import { Box, Typography, TextField, MenuItem } from '@mui/material';
 import * as React from 'react';
 import { BindableAttrValue, NavigationAction, NodeId } from '@mui/toolpad-core';
+import { mapValues } from '@mui/toolpad-utils/collections';
 import { WithControlledProp } from '../../../utils/types';
 import { useDom } from '../../AppState';
 import * as appDom from '../../../appDom';
 import { usePageEditorState } from '../PageEditor/PageEditorProvider';
-import { mapValues } from '../../../utils/collections';
 import BindableEditor from '../PageEditor/BindableEditor';
 import { useBindingEditorContext } from '.';
 import { useEvaluateLiveBinding } from '../useEvaluateLiveBinding';

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

@@ -22,7 +22,7 @@ import {
  BindableAttrValue,
  PropValueType,
 } from '@mui/toolpad-core';
-import { createProvidedContext } from '@mui/toolpad-core/utils/react';
+import { createProvidedContext } from '@mui/toolpad-utils/react';
 import { JsExpressionEditor } from '../PageEditor/JsExpressionEditor';
 import JsonView from '../../../components/JsonView';
 import useLatest from '../../../utils/useLatest';

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

@@ -25,7 +25,6 @@ import QueryPreview from '../QueryPreview';
 import { usePrivateQuery } from '../context';
 import BindableEditor from '../../toolpad/AppEditor/PageEditor/BindableEditor';
 import { getDefaultControl } from '../../toolpad/propertyControls';
-import { errorFrom } from '../../utils/errors';
 import { PropBindingEditorDialog } from '../../toolpad/AppEditor/BindingEditor/PropBindingEditorDialog';
 
 const EMPTY_PARAMS: BindableAttrEntries = [];

test/integration/bindings/fixture-navigation/toolpad/.gitignore

@@ -0,0 +1 @@
+.generated

test/integration/bindings/fixture-navigation/toolpad/pages/page1/page.yml

@@ -0,0 +1,22 @@
+apiVersion: v1
+kind: page
+spec:
+ id: ld03upm
+ title: page
+ content:
+ - component: PageRow
+ name: pageRow
+ children:
+ - component: Button
+ name: button
+ props:
+ onClick:
+ $$navigationAction:
+ page: au03sef
+ parameters:
+ abc: zyx
+ def:
+ $$jsExpression: |
+ button.content
+ content: test
+ display: shell

test/integration/bindings/fixture-navigation/toolpad/pages/page2/page.yml

@@ -0,0 +1,11 @@
+apiVersion: v1
+kind: page
+spec:
+ id: au03sef
+ title: page2
+ parameters:
+ - name: abc
+ value: "123"
+ - name: def
+ value: "456"
+ display: shell

test/integration/bindings/fixture-navigation/toolpad/theme.yml

@@ -0,0 +1,6 @@
+apiVersion: v1
+kind: theme
+spec:
+ palette.mode: light
+ palette.primary.main: purple
+ palette.secondary.main: indigo