Make page title optional in the yml files (#2948)

mui · Nov 29, 2023 · 8d8cff0 · 8d8cff0
1 parent 8d5dc73
commit 8d8cff0
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 25 deletions.
diff --git a/packages/toolpad-app/src/appDom/index.ts b/packages/toolpad-app/src/appDom/index.ts
@@ -85,7 +85,7 @@ export type PageDisplayMode = 'standalone' | 'shell';
 export interface PageNode extends AppDomNodeBase {
   readonly type: 'page';
   readonly attributes: {
-    readonly title: string;
+    readonly title?: string;
     readonly parameters?: [string, string][];
     readonly module?: string;
     readonly display?: PageDisplayMode;
@@ -1207,3 +1207,7 @@ export function getRequiredEnvVars(dom: AppDom): Set<string> {
 
   return new Set(allVars);
 }
+
+export function getPageTitle(node: PageNode): string {
+  return node.attributes.title || node.name;
+}
diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -1379,7 +1379,7 @@ function RenderedLowCodePage({ page }: RenderedLowCodePageProps) {
   const dom = useDomContext();
   const { children = [], queries = [] } = appDom.getChildNodes(dom, page);
 
-  usePageTitle(page.attributes.title);
+  usePageTitle(appDom.getPageTitle(page));
 
   const location = useLocation();
   const components = useComponents();
@@ -1431,7 +1431,7 @@ export function RenderedPage({ nodeId }: RenderedNodeProps) {
   const dom = useDomContext();
   const page = appDom.getNode(dom, nodeId, 'page');
 
-  usePageTitle(page.attributes.title);
+  usePageTitle(appDom.getPageTitle(page));
 
   if (page.attributes.codeFile) {
     return <RenderedProCodePage page={page} />;

diff --git a/packages/toolpad-app/src/server/localMode.ts b/packages/toolpad-app/src/server/localMode.ts
@@ -658,7 +658,7 @@ function createPageDomFromPageFile(pageName: string, pageFile: Page): appDom.App
   let fragment = appDom.createFragmentInternal(pageFileSpec.id as NodeId, 'page', {
     name: pageName,
     attributes: {
-      title: pageFileSpec.title || '',
+      title: pageFileSpec.title,
       parameters: pageFileSpec.parameters?.map(({ name, value }) => [name, value]) || [],
       display: pageFileSpec.display || undefined,
       codeFile: pageFileSpec.unstable_codeFile || undefined,

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/material';
 import { NodeId } from '@mui/toolpad-core';
+import usePageTitle from '@mui/toolpad-utils/hooks/usePageTitle';
 import { Panel, PanelGroup, PanelResizeHandle } from '../../../components/resizablePanels';
 import RenderPanel from './RenderPanel';
 import ComponentPanel from './ComponentPanel';
@@ -9,7 +10,6 @@ import { useAppState } from '../../AppState';
 import * as appDom from '../../../appDom';
 import ComponentCatalog from './ComponentCatalog';
 import NotFoundEditor from '../NotFoundEditor';
-import usePageTitle from '../../../utils/usePageTitle';
 import useUndoRedo from '../../hooks/useUndoRedo';
 
 const classes = {
@@ -32,7 +32,7 @@ interface PageEditorContentProps {
 }
 
 function PageEditorContent({ node }: PageEditorContentProps) {
-  usePageTitle(`${node.attributes.title} | Toolpad editor`);
+  usePageTitle(`${appDom.getPageTitle(node)} | Toolpad editor`);
 
   return (
     <PageEditorProvider key={node.id} nodeId={node.id}>

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageTitleEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageTitleEditor.tsx
@@ -1,10 +1,10 @@
 import { TextField } from '@mui/material';
 import * as React from 'react';
-import { AppDom, PageNode, setNodeNamespacedProp } from '../../appDom';
+import * as appDom from '../../appDom';
 import { useDomApi } from '../AppState';
 
 interface PageTitleEditorProps {
-  node: PageNode;
+  node: appDom.PageNode;
 }
 
 function validateInput(input: string) {
@@ -16,16 +16,16 @@ function validateInput(input: string) {
 
 export default function PageTitleEditor({ node }: PageTitleEditorProps) {
   const domApi = useDomApi();
-  const [pageTitleInput, setPageTitleInput] = React.useState(node.attributes.title);
+  const [pageTitleInput, setPageTitleInput] = React.useState(appDom.getPageTitle(node));
 
   const handlePageTitleChange = React.useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => setPageTitleInput(event.target.value),
     [],
   );
 
   const handleCommit = React.useCallback(() => {
-    domApi.update((appDom: AppDom) =>
-      setNodeNamespacedProp(appDom, node, 'attributes', 'title', pageTitleInput),
+    domApi.update((dom: appDom.AppDom) =>
+      appDom.setNodeNamespacedProp(dom, node, 'attributes', 'title', pageTitleInput),
     );
   }, [node, pageTitleInput, domApi]);
 

diff --git a/packages/toolpad-app/src/utils/usePageTitle.ts b/packages/toolpad-app/src/utils/usePageTitle.ts