From f0646dec14e1d7f28bcab22b412e98438f7b74a6 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 26 Apr 2023 13:55:18 +0200 Subject: [PATCH] Add page name as an alias for routing in the runtime (#1925) --- .../toolpad-app/src/runtime/ToolpadApp.tsx | 39 +++--- test/models/ToolpadHome.ts | 119 ------------------ test/models/ToolpadRuntime.ts | 5 +- 3 files changed, 24 insertions(+), 139 deletions(-) delete mode 100644 test/models/ToolpadHome.ts diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 026d07236d7..0e89f178571 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -1106,18 +1106,27 @@ function RenderedPages({ pages, defaultPage }: RenderedPagesProps) { return ( {pages.map((page) => ( - - } - /> + + + } + /> + + ))} + {pages.map((page) => ( + + } + /> + ))} @@ -1175,11 +1184,9 @@ function ToolpadAppLayout({ dom, version, hasShell: hasShellProp = true }: Toolp const pageId = pageMatch?.params.nodeId; const defaultPage = pages[0]; - const page = pageId - ? (appDom.getNode<'page'>(dom, pageId as NodeId) as appDom.PageNode) - : defaultPage; + const page = pageId ? appDom.getMaybeNode(dom, pageId as NodeId, 'page') : defaultPage; - const pageDisplay = urlParams.get('toolpad-display') || page.attributes.display?.value; + const pageDisplay = urlParams.get('toolpad-display') || page?.attributes.display?.value; const hasShell = hasShellProp && pageDisplay !== 'standalone'; diff --git a/test/models/ToolpadHome.ts b/test/models/ToolpadHome.ts deleted file mode 100644 index ba37777564d..00000000000 --- a/test/models/ToolpadHome.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { Locator, Page } from '@playwright/test'; -import generateId from '../utils/generateId'; -import { gotoIfNotCurrent } from './shared'; - -interface CreateApplicationParams { - name?: string; - appTemplateId?: string; - dom?: any; -} - -interface CreateApplicationResult { - id: string; - name: string; -} - -export class ToolpadHome { - readonly page: Page; - - readonly createNewbtn: Locator; - - readonly newAppDialog: Locator; - - readonly newAppNameInput: Locator; - - readonly newAppTemplateSelect: Locator; - - readonly newAppDomInput: Locator; - - readonly newAppDomCreateBtn: Locator; - - readonly getAppRow: (appName: string) => Locator; - - constructor(page: Page) { - this.page = page; - - this.createNewbtn = page.locator('button:has-text("create new")'); - - this.newAppDialog = page.locator('[role="dialog"]', { - hasText: 'Create a new App', - }); - this.newAppNameInput = this.newAppDialog.locator('label:has-text("name")'); - this.newAppTemplateSelect = page.getByRole('button', { name: /Use template/ }); - this.newAppDomInput = this.newAppDialog.locator('label:has-text("dom")'); - this.newAppDomCreateBtn = this.newAppDialog.locator('button:has-text("create")'); - - this.getAppRow = (appName: string): Locator => - page.locator(`[role="row"]`, { has: page.locator(`input[value="${appName}"]`) }); - } - - async goto() { - await gotoIfNotCurrent(this.page, `/`); - } - - async createApplication({ - name = `App ${generateId()}`, - appTemplateId, - dom, - }: CreateApplicationParams): Promise { - await this.createNewbtn.click(); - - await this.newAppNameInput.fill(name); - - if (appTemplateId) { - await this.newAppTemplateSelect.click(); - await this.page.locator(`[data-value="${appTemplateId}"]`).click(); - } - - if (dom) { - const isDomInputEnabled = await this.newAppDomInput.isVisible(); - if (!isDomInputEnabled) { - throw new Error( - `Toolpad not in integration test mode. Make sure to start Toolpad with environment variable TOOLPAD_ENABLE_CREATE_BY_DOM=1.`, - ); - } - - await this.newAppDomInput.fill(JSON.stringify(dom)); - } - - await Promise.all([ - this.newAppDomCreateBtn.click(), - this.page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/pages\/[^/]+/ }), - ]); - - const { pathname } = new URL(this.page.url()); - const idMatch = /^\/_toolpad\/app\/([^/]+)\//.exec(pathname); - if (!idMatch) { - throw new Error(`Application id not found in url "${this.page.url()}"`); - } - - return { id: idMatch[1], name }; - } - - async duplicateApplication(appName: string) { - await this.getAppRow(appName).locator('[aria-label="Application menu"]').click(); - - await this.page.click('[role="menuitem"]:has-text("Duplicate"):visible'); - const textField = this.page.getByLabel('name'); - await textField.focus(); - await textField.fill(appName); - await this.page.click('[aria-label="Duplicate app submit button"]'); - // Navigate to the new app - await this.getAppRow(`${appName} (copy)`).locator('a:has-text("Edit")').click(); - await this.page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/pages\/[^/]+/ }); - - const { pathname } = new URL(this.page.url()); - const idMatch = /^\/_toolpad\/app\/([^/]+)\//.exec(pathname); - if (!idMatch) { - throw new Error(`Application id not found in url "${this.page.url()}"`); - } - - return { id: idMatch[1] }; - } - - async searchFor(name: string) { - const textField = this.page.getByPlaceholder('Search apps'); - await textField.focus(); - await textField.fill(name); - } -} diff --git a/test/models/ToolpadRuntime.ts b/test/models/ToolpadRuntime.ts index 90d70608cdb..13ea2162572 100644 --- a/test/models/ToolpadRuntime.ts +++ b/test/models/ToolpadRuntime.ts @@ -13,10 +13,7 @@ export class ToolpadRuntime { } async gotoPage(pageName: string) { - await this.goto(); - - const navLocator = this.page.locator('nav'); - await navLocator.getByRole('button', { name: pageName }).click(); + await gotoIfNotCurrent(this.page, `/preview/pages/${pageName}`); } async gotoPageById(appId: string, pageId: string) {