[CRUD] Refactor page titles to pageTitles and pageTitle props

docs/data/toolpad/core/components/crud/CrudAdvanced.js

@@ -4,7 +4,6 @@ import { createTheme } from '@mui/material/styles';
 import StickyNote2Icon from '@mui/icons-material/StickyNote2';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { PageContainer } from '@toolpad/core/PageContainer';
 import {
   Create,
   CrudProvider,
@@ -223,22 +222,6 @@ function CrudAdvanced(props) {
   const createPath = `${rootPath}/new`;
   const editPath = `${rootPath}/:noteId/edit`;
 
-  const title = React.useMemo(() => {
-    if (router.pathname === createPath) {
-      return 'New Note';
-    }
-    const editNoteId = matchPath(editPath, router.pathname);
-    if (editNoteId) {
-      return `Note ${editNoteId} - Edit`;
-    }
-    const showNoteId = matchPath(showPath, router.pathname);
-    if (showNoteId) {
-      return `Note ${showNoteId}`;
-    }
-
-    return undefined;
-  }, [createPath, editPath, router.pathname, showPath]);
-
   const handleRowClick = React.useCallback(
     (noteId) => {
       router.navigate(`${rootPath}/${String(noteId)}`);
@@ -282,37 +265,41 @@ function CrudAdvanced(props) {
         window={demoWindow}
       >
         <DashboardLayout defaultSidebarCollapsed>
-          <PageContainer title={title}>
-            {/* preview-start */}
-            <CrudProvider dataSource={notesDataSource} dataSourceCache={notesCache}>
-              {router.pathname === listPath ? (
-                <List
-                  initialPageSize={10}
-                  onRowClick={handleRowClick}
-                  onCreateClick={handleCreateClick}
-                  onEditClick={handleEditClick}
-                />
-              ) : null}
-              {router.pathname === createPath ? (
-                <Create
-                  initialValues={{ title: 'New note' }}
-                  onSubmitSuccess={handleCreate}
-                  resetOnSubmit={false}
-                />
-              ) : null}
-              {router.pathname !== createPath && showNoteId ? (
-                <Show
-                  id={showNoteId}
-                  onEditClick={handleEditClick}
-                  onDelete={handleDelete}
-                />
-              ) : null}
-              {editNoteId ? (
-                <Edit id={editNoteId} onSubmitSuccess={handleEdit} />
-              ) : null}
-            </CrudProvider>
-            {/* preview-end */}
-          </PageContainer>
+          {/* preview-start */}
+          <CrudProvider dataSource={notesDataSource} dataSourceCache={notesCache}>
+            {router.pathname === listPath ? (
+              <List
+                initialPageSize={10}
+                onRowClick={handleRowClick}
+                onCreateClick={handleCreateClick}
+                onEditClick={handleEditClick}
+              />
+            ) : null}
+            {router.pathname === createPath ? (
+              <Create
+                initialValues={{ title: 'New note' }}
+                onSubmitSuccess={handleCreate}
+                resetOnSubmit={false}
+                pageTitle="New Note"
+              />
+            ) : null}
+            {router.pathname !== createPath && showNoteId ? (
+              <Show
+                id={showNoteId}
+                onEditClick={handleEditClick}
+                onDelete={handleDelete}
+                pageTitle={`Note ${showNoteId}`}
+              />
+            ) : null}
+            {editNoteId ? (
+              <Edit
+                id={editNoteId}
+                onSubmitSuccess={handleEdit}
+                pageTitle={`Note ${editNoteId} - Edit`}
+              />
+            ) : null}
+          </CrudProvider>
+          {/* preview-end */}
         </DashboardLayout>
       </AppProvider>
     </DemoProvider>

docs/data/toolpad/core/components/crud/CrudAdvanced.tsx

@@ -3,7 +3,6 @@ import { createTheme } from '@mui/material/styles';
 import StickyNote2Icon from '@mui/icons-material/StickyNote2';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { PageContainer } from '@toolpad/core/PageContainer';
 import {
   Create,
   CrudProvider,
@@ -244,22 +243,6 @@ export default function CrudAdvanced(props: DemoProps) {
   const createPath = `${rootPath}/new`;
   const editPath = `${rootPath}/:noteId/edit`;
 
-  const title = React.useMemo(() => {
-    if (router.pathname === createPath) {
-      return 'New Note';
-    }
-    const editNoteId = matchPath(editPath, router.pathname);
-    if (editNoteId) {
-      return `Note ${editNoteId} - Edit`;
-    }
-    const showNoteId = matchPath(showPath, router.pathname);
-    if (showNoteId) {
-      return `Note ${showNoteId}`;
-    }
-
-    return undefined;
-  }, [createPath, editPath, router.pathname, showPath]);
-
   const handleRowClick = React.useCallback(
     (noteId: string | number) => {
       router.navigate(`${rootPath}/${String(noteId)}`);
@@ -303,40 +286,44 @@ export default function CrudAdvanced(props: DemoProps) {
         window={demoWindow}
       >
         <DashboardLayout defaultSidebarCollapsed>
-          <PageContainer title={title}>
-            {/* preview-start */}
-            <CrudProvider<Note>
-              dataSource={notesDataSource}
-              dataSourceCache={notesCache}
-            >
-              {router.pathname === listPath ? (
-                <List<Note>
-                  initialPageSize={10}
-                  onRowClick={handleRowClick}
-                  onCreateClick={handleCreateClick}
-                  onEditClick={handleEditClick}
-                />
-              ) : null}
-              {router.pathname === createPath ? (
-                <Create<Note>
-                  initialValues={{ title: 'New note' }}
-                  onSubmitSuccess={handleCreate}
-                  resetOnSubmit={false}
-                />
-              ) : null}
-              {router.pathname !== createPath && showNoteId ? (
-                <Show<Note>
-                  id={showNoteId}
-                  onEditClick={handleEditClick}
-                  onDelete={handleDelete}
-                />
-              ) : null}
-              {editNoteId ? (
-                <Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
-              ) : null}
-            </CrudProvider>
-            {/* preview-end */}
-          </PageContainer>
+          {/* preview-start */}
+          <CrudProvider<Note>
+            dataSource={notesDataSource}
+            dataSourceCache={notesCache}
+          >
+            {router.pathname === listPath ? (
+              <List<Note>
+                initialPageSize={10}
+                onRowClick={handleRowClick}
+                onCreateClick={handleCreateClick}
+                onEditClick={handleEditClick}
+              />
+            ) : null}
+            {router.pathname === createPath ? (
+              <Create<Note>
+                initialValues={{ title: 'New note' }}
+                onSubmitSuccess={handleCreate}
+                resetOnSubmit={false}
+                pageTitle="New Note"
+              />
+            ) : null}
+            {router.pathname !== createPath && showNoteId ? (
+              <Show<Note>
+                id={showNoteId}
+                onEditClick={handleEditClick}
+                onDelete={handleDelete}
+                pageTitle={`Note ${showNoteId}`}
+              />
+            ) : null}
+            {editNoteId ? (
+              <Edit<Note>
+                id={editNoteId}
+                onSubmitSuccess={handleEdit}
+                pageTitle={`Note ${editNoteId} - Edit`}
+              />
+            ) : null}
+          </CrudProvider>
+          {/* preview-end */}
         </DashboardLayout>
       </AppProvider>
     </DemoProvider>

docs/data/toolpad/core/components/crud/CrudAdvanced.tsx.preview

@@ -15,16 +15,22 @@
       initialValues={{ title: 'New note' }}
       onSubmitSuccess={handleCreate}
       resetOnSubmit={false}
+      pageTitle="New Note"
     />
   ) : null}
   {router.pathname !== createPath && showNoteId ? (
     <Show<Note>
       id={showNoteId}
       onEditClick={handleEditClick}
       onDelete={handleDelete}
+      pageTitle={`Note ${showNoteId}`}
     />
   ) : null}
   {editNoteId ? (
-    <Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
+    <Edit<Note>
+      id={editNoteId}
+      onSubmitSuccess={handleEdit}
+      pageTitle={`Note ${editNoteId} - Edit`}
+    />
   ) : null}
 </CrudProvider>

docs/data/toolpad/core/components/crud/CrudBasic.js

@@ -4,7 +4,6 @@ import { createTheme } from '@mui/material/styles';
 import StickyNote2Icon from '@mui/icons-material/StickyNote2';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { PageContainer } from '@toolpad/core/PageContainer';
 import { Crud, DataSourceCache } from '@toolpad/core/Crud';
 import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
@@ -211,21 +210,8 @@ function CrudBasic(props) {
   // Remove this const when copying and pasting into your project.
   const demoWindow = window !== undefined ? window() : undefined;
 
-  const title = React.useMemo(() => {
-    if (router.pathname === '/notes/new') {
-      return 'New Note';
-    }
-    const editNoteId = matchPath('/notes/:noteId/edit', router.pathname);
-    if (editNoteId) {
-      return `Note ${editNoteId} - Edit`;
-    }
-    const showNoteId = matchPath('/notes/:noteId', router.pathname);
-    if (showNoteId) {
-      return `Note ${showNoteId}`;
-    }
-
-    return undefined;
-  }, [router.pathname]);
+  const showNoteId = matchPath('/notes/:noteId', router.pathname);
+  const editNoteId = matchPath('/notes/:noteId/edit', router.pathname);
 
   return (
     // Remove this provider when copying and pasting into your project.
@@ -237,17 +223,20 @@ function CrudBasic(props) {
         window={demoWindow}
       >
         <DashboardLayout defaultSidebarCollapsed>
-          <PageContainer title={title}>
-            {/* preview-start */}
-            <Crud
-              dataSource={notesDataSource}
-              dataSourceCache={notesCache}
-              rootPath="/notes"
-              initialPageSize={10}
-              defaultValues={{ title: 'New note' }}
-            />
-            {/* preview-end */}
-          </PageContainer>
+          {/* preview-start */}
+          <Crud
+            dataSource={notesDataSource}
+            dataSourceCache={notesCache}
+            rootPath="/notes"
+            initialPageSize={10}
+            defaultValues={{ title: 'New note' }}
+            pageTitles={{
+              create: 'New Note',
+              edit: `Note ${editNoteId} - Edit`,
+              show: `Note ${showNoteId}`,
+            }}
+          />
+          {/* preview-end */}
         </DashboardLayout>
       </AppProvider>
     </DemoProvider>

docs/data/toolpad/core/components/crud/CrudBasic.tsx

@@ -3,7 +3,6 @@ import { createTheme } from '@mui/material/styles';
 import StickyNote2Icon from '@mui/icons-material/StickyNote2';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { PageContainer } from '@toolpad/core/PageContainer';
 import { Crud, DataModel, DataSource, DataSourceCache } from '@toolpad/core/Crud';
 import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
@@ -230,21 +229,8 @@ export default function CrudBasic(props: DemoProps) {
   // Remove this const when copying and pasting into your project.
   const demoWindow = window !== undefined ? window() : undefined;
 
-  const title = React.useMemo(() => {
-    if (router.pathname === '/notes/new') {
-      return 'New Note';
-    }
-    const editNoteId = matchPath('/notes/:noteId/edit', router.pathname);
-    if (editNoteId) {
-      return `Note ${editNoteId} - Edit`;
-    }
-    const showNoteId = matchPath('/notes/:noteId', router.pathname);
-    if (showNoteId) {
-      return `Note ${showNoteId}`;
-    }
-
-    return undefined;
-  }, [router.pathname]);
+  const showNoteId = matchPath('/notes/:noteId', router.pathname);
+  const editNoteId = matchPath('/notes/:noteId/edit', router.pathname);
 
   return (
     // Remove this provider when copying and pasting into your project.
@@ -256,17 +242,20 @@ export default function CrudBasic(props: DemoProps) {
         window={demoWindow}
       >
         <DashboardLayout defaultSidebarCollapsed>
-          <PageContainer title={title}>
-            {/* preview-start */}
-            <Crud<Note>
-              dataSource={notesDataSource}
-              dataSourceCache={notesCache}
-              rootPath="/notes"
-              initialPageSize={10}
-              defaultValues={{ title: 'New note' }}
-            />
-            {/* preview-end */}
-          </PageContainer>
+          {/* preview-start */}
+          <Crud<Note>
+            dataSource={notesDataSource}
+            dataSourceCache={notesCache}
+            rootPath="/notes"
+            initialPageSize={10}
+            defaultValues={{ title: 'New note' }}
+            pageTitles={{
+              create: 'New Note',
+              edit: `Note ${editNoteId} - Edit`,
+              show: `Note ${showNoteId}`,
+            }}
+          />
+          {/* preview-end */}
         </DashboardLayout>
       </AppProvider>
     </DemoProvider>

docs/data/toolpad/core/components/crud/CrudBasic.tsx.preview

@@ -4,4 +4,9 @@
   rootPath="/notes"
   initialPageSize={10}
   defaultValues={{ title: 'New note' }}
+  pageTitles={{
+    create: 'New Note',
+    edit: `Note ${editNoteId} - Edit`,
+    show: `Note ${showNoteId}`,
+  }}
 />