Support page parameters (#555)

* Remove StringRecordEditor * rename to page parameters * us entries * Make param available in runtime * remove old
mui · Jun 15, 2022 · 28e0f63 · 28e0f63
1 parent 9b0daf3
commit 28e0f63
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 192 deletions.
diff --git a/packages/toolpad-app/src/appDom.ts b/packages/toolpad-app/src/appDom.ts
@@ -76,7 +76,7 @@ export interface PageNode extends AppDomNodeBase {
   readonly type: 'page';
   readonly attributes: {
     readonly title: ConstantAttrValue<string>;
-    readonly urlQuery: ConstantAttrValue<Record<string, string>>;
+    readonly parameters?: ConstantAttrValue<[string, string][]>;
   };
 }
 

diff --git a/packages/toolpad-app/src/components/AppEditor/HierarchyExplorer/CreatePageNodeDialog.tsx b/packages/toolpad-app/src/components/AppEditor/HierarchyExplorer/CreatePageNodeDialog.tsx
@@ -34,7 +34,6 @@ export default function CreatePageDialog({ appId, onClose, ...props }: CreatePag
             name,
             attributes: {
               title: appDom.createConst(name),
-              urlQuery: appDom.createConst({}),
             },
           });
           const appNode = appDom.getApp(dom);

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/UrlQueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/UrlQueryEditor.tsx
@@ -1,10 +1,17 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from '@mui/material';
 import * as React from 'react';
 import AddIcon from '@mui/icons-material/Add';
-import StringRecordEditor from '../../StringRecordEditor';
 import * as appDom from '../../../appDom';
 import { useDom, useDomApi } from '../../DomLoader';
 import { NodeId } from '../../../types';
+import MapEntriesEditor from '../../MapEntriesEditor';
 
 export interface UrlQueryEditorProps {
   pageNodeId: NodeId;
@@ -18,38 +25,40 @@ export default function UrlQueryEditor({ pageNodeId }: UrlQueryEditorProps) {
 
   const [dialogOpen, setDialogOpen] = React.useState(false);
 
-  const [input, setInput] = React.useState(page.attributes.urlQuery.value || {});
-  React.useEffect(
-    () => setInput(page.attributes.urlQuery.value || {}),
-    [page.attributes.urlQuery.value],
-  );
+  const value = page.attributes.parameters?.value;
+  const [input, setInput] = React.useState(value);
+  React.useEffect(() => setInput(value), [value]);
 
   const handleSave = React.useCallback(() => {
-    domApi.setNodeNamespacedProp(page, 'attributes', 'urlQuery', appDom.createConst(input));
+    domApi.setNodeNamespacedProp(page, 'attributes', 'parameters', appDom.createConst(input || []));
   }, [domApi, page, input]);
 
   return (
     <React.Fragment>
       <Button color="inherit" startIcon={<AddIcon />} onClick={() => setDialogOpen(true)}>
-        URL query
+        Add page parameters
       </Button>
       <Dialog fullWidth open={dialogOpen} onClose={() => setDialogOpen(false)}>
-        <DialogTitle>Edit URL query</DialogTitle>
+        <DialogTitle>Edit page parameters</DialogTitle>
         <DialogContent>
-          <StringRecordEditor
-            sx={{ my: 1 }}
+          <Typography>
+            The parameters you define below will be made available in bindings under the{' '}
+            <code>page.parameters</code> global variable. You can set these parameters in the url
+            with query variables (<code>?param=value</code>).
+          </Typography>
+          <MapEntriesEditor
+            sx={{ my: 3 }}
             fieldLabel="Parameter"
             valueLabel="Default value"
-            value={input}
+            value={input || []}
             onChange={setInput}
-            autoFocus
           />
         </DialogContent>
         <DialogActions>
           <Button color="inherit" variant="text" onClick={() => setDialogOpen(false)}>
             Close
           </Button>
-          <Button disabled={page.attributes.urlQuery.value === input} onClick={handleSave}>
+          <Button disabled={value === input} onClick={handleSave}>
             Save
           </Button>
         </DialogActions>

diff --git a/packages/toolpad-app/src/components/StringRecordEditor.tsx b/packages/toolpad-app/src/components/StringRecordEditor.tsx
diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx
@@ -20,7 +20,6 @@ function renderPage(initPage: (dom: appDom.AppDom, page: appDom.PageNode) => app
     name: 'Page',
     attributes: {
       title: appDom.createConst(''),
-      urlQuery: appDom.createConst({}),
     },
   });
   dom = appDom.addNode(dom, page, root, 'pages');

diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -365,12 +365,13 @@ function parseBindings(
   }
 
   const urlParams = new URLSearchParams(location.search);
-  for (const [paramName, paramValue] of urlParams.entries()) {
-    const bindingId = `${page.id}.query.${paramName}`;
-    const scopePath = `page.query.${paramName}`;
+  const pageParameters = page.attributes.parameters?.value || [];
+  for (const [paramName, paramDefault] of pageParameters) {
+    const bindingId = `${page.id}.parameters.${paramName}`;
+    const scopePath = `page.parameters.${paramName}`;
     parsedBindingsMap.set(bindingId, {
       scopePath,
-      result: { value: paramValue },
+      result: { value: urlParams.get(paramName) || paramDefault },
     });
   }
 

diff --git a/packages/toolpad-app/src/server/data.ts b/packages/toolpad-app/src/server/data.ts
@@ -169,7 +169,6 @@ function createDefaultDom(): appDom.AppDom {
     name: 'Page 1',
     attributes: {
       title: appDom.createConst('Page 1'),
-      urlQuery: appDom.createConst({}),
     },
   });