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 <jacobsfletch@gmail.com>

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' &&

test/admin-root/CustomView/index.tsx

@@ -0,0 +1,5 @@
+import type { AdminViewServerProps } from 'payload'
+
+export function CustomView(args: AdminViewServerProps) {
+  return <div id="custom-view">Hello, world!</div>
+}

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<{

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<{

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
+}

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'
 

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],

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()
+  })
 })

test/admin-root/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // 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.