From 379fc127cc3c98de163b2283ffd80a8995da1946 Mon Sep 17 00:00:00 2001 From: Ruby Jasmin Date: Thu, 26 Jun 2025 09:34:08 -0400 Subject: [PATCH] fix(ui): unreachable custom views when admin route set to '/' (#12812) ### What? Fixes #12811 ### Why? Custom Views become unreachable when admin route is set to "/" because the forward slash of the current route gets removed before routing to custom view ### How? Fixes # --> Fixes #12811 Custom Views become unreachable when admin route is set to "/" because the forward slash of the current route gets removed before routing to custom view --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1210582760545830 --------- Co-authored-by: Jacob Fletcher --- packages/next/src/views/Root/getCustomViewByRoute.ts | 4 +++- test/admin-root/CustomView/index.tsx | 5 +++++ .../app/(payload)/[[...segments]]/not-found.tsx | 2 +- test/admin-root/app/(payload)/[[...segments]]/page.tsx | 2 +- test/admin-root/app/(payload)/importMap.js | 5 +++++ test/admin-root/app/(payload)/layout.tsx | 2 +- test/admin-root/config.ts | 8 ++++++++ test/admin-root/e2e.spec.ts | 8 ++++++-- test/admin-root/next-env.d.ts | 2 +- 9 files changed, 31 insertions(+), 7 deletions(-) create mode 100644 test/admin-root/CustomView/index.tsx create mode 100644 test/admin-root/app/(payload)/importMap.js diff --git a/packages/next/src/views/Root/getCustomViewByRoute.ts b/packages/next/src/views/Root/getCustomViewByRoute.ts index 3226f1e2a..7bc4821dc 100644 --- a/packages/next/src/views/Root/getCustomViewByRoute.ts +++ b/packages/next/src/views/Root/getCustomViewByRoute.ts @@ -22,9 +22,11 @@ export const getCustomViewByRoute = ({ routes: { admin: adminRoute }, } = config - const currentRoute = currentRouteWithAdmin.replace(adminRoute, '') let viewKey: string + const currentRoute = + adminRoute === '/' ? currentRouteWithAdmin : currentRouteWithAdmin.replace(adminRoute, '') + const foundViewConfig = (views && typeof views === 'object' && diff --git a/test/admin-root/CustomView/index.tsx b/test/admin-root/CustomView/index.tsx new file mode 100644 index 000000000..b36f89062 --- /dev/null +++ b/test/admin-root/CustomView/index.tsx @@ -0,0 +1,5 @@ +import type { AdminViewServerProps } from 'payload' + +export function CustomView(args: AdminViewServerProps) { + return
Hello, world!
+} diff --git a/test/admin-root/app/(payload)/[[...segments]]/not-found.tsx b/test/admin-root/app/(payload)/[[...segments]]/not-found.tsx index 2e97dec0d..180e6f81c 100644 --- a/test/admin-root/app/(payload)/[[...segments]]/not-found.tsx +++ b/test/admin-root/app/(payload)/[[...segments]]/not-found.tsx @@ -5,7 +5,7 @@ import type { Metadata } from 'next' import config from '@payload-config' import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views' -import { importMap } from '../admin/importMap.js' +import { importMap } from '../importMap.js' type Args = { params: Promise<{ diff --git a/test/admin-root/app/(payload)/[[...segments]]/page.tsx b/test/admin-root/app/(payload)/[[...segments]]/page.tsx index 0a26178aa..e59b2d3a8 100644 --- a/test/admin-root/app/(payload)/[[...segments]]/page.tsx +++ b/test/admin-root/app/(payload)/[[...segments]]/page.tsx @@ -5,7 +5,7 @@ import type { Metadata } from 'next' import config from '@payload-config' import { generatePageMetadata, RootPage } from '@payloadcms/next/views' -import { importMap } from '../admin/importMap.js' +import { importMap } from '../importMap.js' type Args = { params: Promise<{ diff --git a/test/admin-root/app/(payload)/importMap.js b/test/admin-root/app/(payload)/importMap.js new file mode 100644 index 000000000..7e732f320 --- /dev/null +++ b/test/admin-root/app/(payload)/importMap.js @@ -0,0 +1,5 @@ +import { CustomView as CustomView_c4f0e2747eca2be436a06a63cea31567 } from '../../CustomView/index.js' + +export const importMap = { + "/CustomView/index.js#CustomView": CustomView_c4f0e2747eca2be436a06a63cea31567 +} diff --git a/test/admin-root/app/(payload)/layout.tsx b/test/admin-root/app/(payload)/layout.tsx index 5e7b56435..0ac1a5ec1 100644 --- a/test/admin-root/app/(payload)/layout.tsx +++ b/test/admin-root/app/(payload)/layout.tsx @@ -6,7 +6,7 @@ import config from '@payload-config' import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts' import React from 'react' -import { importMap } from './admin/importMap.js' +import { importMap } from './importMap.js' import '@payloadcms/next/css' import './custom.scss' diff --git a/test/admin-root/config.ts b/test/admin-root/config.ts index 55af94985..6e3110fc9 100644 --- a/test/admin-root/config.ts +++ b/test/admin-root/config.ts @@ -22,6 +22,14 @@ export default buildConfigWithDefaults({ baseDir: path.resolve(dirname), }, theme: 'dark', + components: { + views: { + CustomDefaultView: { + Component: '/CustomView/index.js#CustomView', + path: '/custom-view', + }, + }, + }, }, cors: ['http://localhost:3000', 'http://localhost:3001'], globals: [MenuGlobal], diff --git a/test/admin-root/e2e.spec.ts b/test/admin-root/e2e.spec.ts index cd08fd523..99cf45c2c 100644 --- a/test/admin-root/e2e.spec.ts +++ b/test/admin-root/e2e.spec.ts @@ -2,7 +2,6 @@ import type { BrowserContext, Page } from '@playwright/test' import { expect, test } from '@playwright/test' import * as path from 'path' -import { wait } from 'payload/shared' import { adminRoute } from 'shared.js' import { fileURLToPath } from 'url' @@ -11,7 +10,7 @@ import { initPageConsoleErrorCatch, login, saveDocAndAssert, - throttleTest, + // throttleTest, } from '../helpers.js' import { AdminUrlUtil } from '../helpers/adminUrlUtil.js' import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js' @@ -134,4 +133,9 @@ test.describe('Admin Panel (Root)', () => { await expect(page.locator('#field-theme')).toBeHidden() await expect(page.locator('#field-theme-auto')).toBeHidden() }) + + test('should mount custom root views', async () => { + await page.goto(`${url.admin}/custom-view`) + await expect(page.locator('#custom-view')).toBeVisible() + }) }) diff --git a/test/admin-root/next-env.d.ts b/test/admin-root/next-env.d.ts index 40c3d6809..1b3be0840 100644 --- a/test/admin-root/next-env.d.ts +++ b/test/admin-root/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.