Remove editor segment from route (#800)

* Remove editor segment from route * Better naming * merge * tests
mui · Sep 9, 2022 · 4441687 · 4441687
1 parent d1dab56
commit 4441687
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 29 deletions.
diff --git a/...ges/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreateCodeComponentNodeDialog.tsx b/...ges/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreateCodeComponentNodeDialog.tsx
@@ -83,7 +83,7 @@ export default function CreateCodeComponentDialog({
           const appNode = appDom.getApp(dom);
           domApi.addNode(newNode, appNode, 'codeComponents');
           onClose();
-          navigate(`/app/${appId}/editor/codeComponents/${newNode.id}`);
+          navigate(`/app/${appId}/codeComponents/${newNode.id}`);
         }}
       >
         <DialogTitle>Create a new MUI Toolpad Code Component</DialogTitle>

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreateConnectionNodeDialog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreateConnectionNodeDialog.tsx
@@ -51,7 +51,7 @@ export default function CreateConnectionDialog({
           const appNode = appDom.getApp(dom);
           domApi.addNode(newNode, appNode, 'connections');
           onClose();
-          navigate(`/app/${appId}/editor/connections/${newNode.id}`);
+          navigate(`/app/${appId}/connections/${newNode.id}`);
         }}
       >
         <DialogTitle>Create a new MUI Toolpad Connection</DialogTitle>

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreatePageNodeDialog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreatePageNodeDialog.tsx
@@ -52,7 +52,7 @@ export default function CreatePageDialog({
           domApi.addNode(newNode, appNode, 'pages');
 
           onClose();
-          navigate(`/app/${appId}/editor/pages/${newNode.id}`);
+          navigate(`/app/${appId}/pages/${newNode.id}`);
         }}
       >
         <DialogTitle>Create a new MUI Toolpad Page</DialogTitle>

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/index.tsx
@@ -71,10 +71,10 @@ function getActiveNodeId(location: Location): NodeId | null {
   const match =
     matchRoutes(
       [
-        { path: `/app/:appId/editor/pages/:activeNodeId` },
-        { path: `/app/:appId/editor/apis/:activeNodeId` },
-        { path: `/app/:appId/editor/codeComponents/:activeNodeId` },
-        { path: `/app/:appId/editor/connections/:activeNodeId` },
+        { path: `/app/:appId/pages/:activeNodeId` },
+        { path: `/app/:appId/apis/:activeNodeId` },
+        { path: `/app/:appId/codeComponents/:activeNodeId` },
+        { path: `/app/:appId/connections/:activeNodeId` },
       ],
       location,
     ) || [];
@@ -86,11 +86,11 @@ function getActiveNodeId(location: Location): NodeId | null {
 function getLinkToNodeEditor(appId: string, node: appDom.AppDomNode): string | undefined {
   switch (node.type) {
     case 'page':
-      return `/app/${appId}/editor/pages/${node.id}`;
+      return `/app/${appId}/pages/${node.id}`;
     case 'connection':
-      return `/app/${appId}/editor/connections/${node.id}`;
+      return `/app/${appId}/connections/${node.id}`;
     case 'codeComponent':
-      return `/app/${appId}/editor/codeComponents/${node.id}`;
+      return `/app/${appId}/codeComponents/${node.id}`;
     default:
       return undefined;
   }
@@ -139,20 +139,20 @@ export default function HierarchyExplorer({ appId, className }: HierarchyExplore
       // TODO: sort out in-page selection
       const page = appDom.getPageAncestor(dom, node);
       if (page) {
-        navigate(`/app/${appId}/editor/pages/${page.id}`);
+        navigate(`/app/${appId}/pages/${page.id}`);
       }
     }
 
     if (appDom.isPage(node)) {
-      navigate(`/app/${appId}/editor/pages/${node.id}`);
+      navigate(`/app/${appId}/pages/${node.id}`);
     }
 
     if (appDom.isCodeComponent(node)) {
-      navigate(`/app/${appId}/editor/codeComponents/${node.id}`);
+      navigate(`/app/${appId}/codeComponents/${node.id}`);
     }
 
     if (appDom.isConnection(node)) {
-      navigate(`/app/${appId}/editor/connections/${node.id}`);
+      navigate(`/app/${appId}/connections/${node.id}`);
     }
   };
 
@@ -191,6 +191,7 @@ export default function HierarchyExplorer({ appId, className }: HierarchyExplore
     },
     [],
   );
+
   const handledeleteNodeDialogClose = React.useCallback(
     (confirmed: boolean) => {
       if (confirmed && deletedNodeId) {
@@ -202,7 +203,7 @@ export default function HierarchyExplorer({ appId, className }: HierarchyExplore
           if (firstSiblingOfType) {
             redirectAfterDelete = getLinkToNodeEditor(appId, firstSiblingOfType);
           } else {
-            redirectAfterDelete = `/app/${appId}/editor`;
+            redirectAfterDelete = `/app/${appId}`;
           }
         }
 

diff --git a/packages/toolpad-app/src/toolpad/Home.tsx b/packages/toolpad-app/src/toolpad/Home.tsx
@@ -67,7 +67,7 @@ function CreateAppDialog({ onClose, ...props }: CreateAppDialogProps) {
 
   const createAppMutation = client.useMutation('createApp', {
     onSuccess: (app) => {
-      window.location.href = `/_toolpad/app/${app.id}/editor`;
+      window.location.href = `/_toolpad/app/${app.id}`;
     },
   });
 
@@ -228,12 +228,7 @@ interface AppEditButtonProps {
 
 function AppEditButton({ app }: AppEditButtonProps) {
   return (
-    <Button
-      size="small"
-      component="a"
-      href={app ? `/_toolpad/app/${app.id}/editor` : ''}
-      disabled={!app}
-    >
+    <Button size="small" component="a" href={app ? `/_toolpad/app/${app.id}` : ''} disabled={!app}>
       Edit
     </Button>
   );

diff --git a/packages/toolpad-app/src/toolpad/Toolpad.tsx b/packages/toolpad-app/src/toolpad/Toolpad.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
 import { Box, CircularProgress, NoSsr, styled } from '@mui/material';
 import { ErrorBoundary } from 'react-error-boundary';
 import AppEditor from './AppEditor';
@@ -33,11 +33,17 @@ function FullPageError({ error }: FullPageErrorProps) {
   );
 }
 
+function LegacyEditorUrlRedirect() {
+  const { '*': editorRoute } = useParams();
+  return <Navigate to={`../${editorRoute}`} />;
+}
+
 function AppWorkspace() {
   return (
     <Routes>
       <Route>
-        <Route path="editor/*" element={<AppEditor />} />
+        <Route path="editor/*" element={<LegacyEditorUrlRedirect />} />
+        <Route path="*" element={<AppEditor />} />
       </Route>
     </Routes>
   );

diff --git a/packages/toolpad-app/src/toolpadDataSources/googleSheets/server.ts b/packages/toolpad-app/src/toolpadDataSources/googleSheets/server.ts
@@ -263,7 +263,7 @@ async function handler(
         await api.setConnectionParams(appId, connectionId, client.credentials);
       }
       return res.redirect(
-        `/_toolpad/app/${encodeURIComponent(appId)}/editor/connections/${encodeURIComponent(
+        `/_toolpad/app/${encodeURIComponent(appId)}/connections/${encodeURIComponent(
           connectionId,
         )}`,
       );

diff --git a/test/integration/appRename.spec.ts b/test/integration/appRename.spec.ts
@@ -9,7 +9,7 @@ async function createApp(page: Page, name: string) {
 
   await page.click('[role="dialog"] button:has-text("create")');
 
-  await page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/editor\/pages\/[^/]+/ });
+  await page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/pages\/[^/]+/ });
 }
 
 test('app create/rename flow', async ({ page }) => {

diff --git a/test/integration/smoke.spec.ts b/test/integration/smoke.spec.ts
@@ -15,7 +15,7 @@ test('basic app creation flow', async ({ page }) => {
 
   await page.click('[role="dialog"] button:has-text("create")');
 
-  await page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/editor\/pages\/[^/]+/ });
+  await page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/pages\/[^/]+/ });
 
   // TODO: basic editor tests
 

diff --git a/test/models/ToolpadEditor.ts b/test/models/ToolpadEditor.ts
@@ -60,7 +60,7 @@ export class ToolpadEditor {
   }
 
   async goto(appId: string) {
-    await this.page.goto(`/_toolpad/app/${appId}/editor`);
+    await this.page.goto(`/_toolpad/app/${appId}`);
   }
 
   async createPage(name: string) {

diff --git a/test/models/ToolpadHome.ts b/test/models/ToolpadHome.ts
@@ -53,7 +53,7 @@ export class ToolpadHome {
 
     await this.newAppDomCreateBtn.click();
 
-    await this.page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/editor\/pages\/[^/]+/ });
+    await this.page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/pages\/[^/]+/ });
 
     const { pathname } = new URL(this.page.url());
     const idMatch = /^\/_toolpad\/app\/([^/]+)\//.exec(pathname);