fix(next): dynamic params for custom collection and global views

test/admin/collections/CustomViews2.ts

@@ -1,11 +1,14 @@
 import type { CollectionConfig } from 'payload/types'
 
 import { CustomTabComponent } from '../components/CustomTabComponent/index.js'
-import { CustomTabView } from '../components/views/CustomTab/index.js'
-import { CustomTabView2 } from '../components/views/CustomTab2/index.js'
+import { CustomTabComponentView } from '../components/views/CustomTabComponent/index.js'
+import { CustomTabLabelView } from '../components/views/CustomTabLabel/index.js'
 import { CustomNestedTabView } from '../components/views/CustomTabNested/index.js'
+import { CustomTabWithParamView } from '../components/views/CustomTabWithParam/index.js'
 import { CustomVersionsView } from '../components/views/CustomVersions/index.js'
 import {
+  customCollectionParamViewPath,
+  customCollectionParamViewPathBase,
   customEditLabel,
   customNestedTabViewPath,
   customTabLabel,
@@ -26,7 +29,7 @@ export const CustomViews2: CollectionConfig = {
             },
           },
           MyCustomView: {
-            Component: CustomTabView,
+            Component: CustomTabLabelView,
             Tab: {
               href: '/custom-tab-view',
               label: customTabLabel,
@@ -34,15 +37,27 @@ export const CustomViews2: CollectionConfig = {
             path: '/custom-tab-view',
           },
           MyCustomViewWithCustomTab: {
-            Component: CustomTabView2,
+            Component: CustomTabComponentView,
             Tab: CustomTabComponent,
             path: customTabViewPath,
           },
           MyCustomViewWithNestedPath: {
             Component: CustomNestedTabView,
             path: customNestedTabViewPath,
+            tab: {
+              label: 'Custom Nested Tab View',
+              href: customNestedTabViewPath,
+            },
           },
           Versions: CustomVersionsView,
+          CustomViewWithParam: {
+            Component: CustomTabWithParamView,
+            path: customCollectionParamViewPath,
+            Tab: {
+              label: 'Custom Param View',
+              href: `${customCollectionParamViewPathBase}/123`,
+            },
+          },
         },
       },
     },

test/admin/components/CustomTabComponent/client.tsx

@@ -1,16 +1,21 @@
 'use client'
 
-import LinkImport from 'next/link'
-import { usePathname } from 'next/navigation'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import LinkImport from 'next/link.js'
+import { useParams } from 'next/navigation'
 import React from 'react'
 
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
 export const CustomTabComponentClient: React.FC<{
   path: string
-}> = (props) => {
-  const { path } = props
-  const pathname = usePathname()
+}> = ({ path }) => {
+  const {
+    routes: { admin: adminRoute },
+  } = useConfig()
+  const params = useParams()
 
-  return <Link href={`${pathname}${path}`}>Custom Tab Component</Link>
+  const baseRoute = (params.segments.slice(0, 3) as string[]).join('/')
+
+  return <Link href={`${adminRoute}/${baseRoute}${path}`}>Custom Tab Component</Link>
 }

test/admin/components/views/CustomDefault/index.scss

@@ -1,5 +1,5 @@
 // As this is the demo folder, we import Payload SCSS functions relatively.
-@import '../../../../../packages/ui/src/exports/scss.scss';
+@import '../../../../../packages/ui/src/scss/styles.scss';
 
 // In your own projects, you'd import as follows:
 // @import '~payload/scss';

test/admin/components/views/CustomMinimal/index.scss

@@ -1,5 +1,5 @@
 // As this is the demo folder, we import Payload SCSS functions relatively.
-@import '../../../../../packages/ui/src/exports/scss.scss';
+@import '../../../../../packages/ui/src/scss/styles.scss';
 
 // In your own projects, you'd import as follows:
 // @import '~payload/scss';

test/admin/components/views/CustomTabComponent/index.tsx

@@ -4,9 +4,9 @@ import React, { Fragment } from 'react'
 
 import type { ServerSideEditViewProps } from '../../../../../packages/payload/types.js'
 
-import { customTabViewTitle } from '../../../shared.js'
+import { customTabViewComponentTitle } from '../../../shared.js'
 
-export const CustomTabView2: React.FC<ServerSideEditViewProps> = ({ initPageResult }) => {
+export const CustomTabComponentView: React.FC<ServerSideEditViewProps> = ({ initPageResult }) => {
   if (!initPageResult) {
     notFound()
   }
@@ -27,7 +27,7 @@ export const CustomTabView2: React.FC<ServerSideEditViewProps> = ({ initPageResu
           paddingRight: 'var(--gutter-h)',
         }}
       >
-        <h1 id="custom-view-title">{customTabViewTitle}</h1>
+        <h1 id="custom-view-title">{customTabViewComponentTitle}</h1>
         <p>This custom view was added through the Payload config:</p>
         <ul>
           <li>

test/admin/components/views/CustomTabLabel/index.tsx

@@ -4,9 +4,9 @@ import React, { Fragment } from 'react'
 
 import type { ServerSideEditViewProps } from '../../../../../packages/payload/types.js'
 
-import { customTabViewTitle } from '../../../shared.js'
+import { customTabLabelViewTitle } from '../../../shared.js'
 
-export const CustomTabView: React.FC<ServerSideEditViewProps> = ({ initPageResult }) => {
+export const CustomTabLabelView: React.FC<ServerSideEditViewProps> = ({ initPageResult }) => {
   if (!initPageResult) {
     notFound()
   }
@@ -27,7 +27,7 @@ export const CustomTabView: React.FC<ServerSideEditViewProps> = ({ initPageResul
           paddingRight: 'var(--gutter-h)',
         }}
       >
-        <h1 id="custom-view-title">{customTabViewTitle}</h1>
+        <h1 id="custom-view-title">{customTabLabelViewTitle}</h1>
         <p>This custom view was added through the Payload config:</p>
         <ul>
           <li>

test/admin/components/views/CustomTabWithParam/index.tsx

@@ -0,0 +1,24 @@
+import type { AdminViewProps } from 'payload/types.js'
+
+import React from 'react'
+
+import { customParamViewTitle } from '../../../shared.js'
+
+export const CustomTabWithParamView: React.FC<AdminViewProps> = ({ params }) => {
+  const paramValue = params?.segments?.[4]
+
+  return (
+    <div
+      style={{
+        marginTop: 'calc(var(--base) * 2)',
+        paddingLeft: 'var(--gutter-h)',
+        paddingRight: 'var(--gutter-h)',
+      }}
+    >
+      <h1 id="custom-view-title">{customParamViewTitle}</h1>
+      <p>
+        This custom collection view is using a dynamic URL parameter `slug: {paramValue || 'None'}`
+      </p>
+    </div>
+  )
+}

test/admin/globals/CustomViews2.ts

@@ -2,7 +2,8 @@ import type { GlobalConfig } from 'payload/types'
 
 import { CustomTabComponent } from '../components/CustomTabComponent/index.js'
 import { CustomDefaultEditView } from '../components/views/CustomEditDefault/index.js'
-import { CustomTabView } from '../components/views/CustomTab/index.js'
+import { CustomTabComponentView } from '../components/views/CustomTabComponent/index.js'
+import { CustomTabLabelView } from '../components/views/CustomTabLabel/index.js'
 import { CustomVersionsView } from '../components/views/CustomVersions/index.js'
 import { customGlobalViews2GlobalSlug } from '../slugs.js'
 
@@ -14,7 +15,7 @@ export const CustomGlobalViews2: GlobalConfig = {
         Edit: {
           Default: CustomDefaultEditView,
           MyCustomView: {
-            Component: CustomTabView,
+            Component: CustomTabLabelView,
             Tab: {
               href: '/custom-tab-view',
               label: 'Custom',
@@ -22,7 +23,7 @@ export const CustomGlobalViews2: GlobalConfig = {
             path: '/custom-tab-view',
           },
           MyCustomViewWithCustomTab: {
-            Component: CustomTabView,
+            Component: CustomTabComponentView,
             Tab: CustomTabComponent,
             path: '/custom-tab-component',
           },

test/admin/shared.ts

@@ -22,8 +22,14 @@ export const customTabLabel = 'Custom Tab Label'
 
 export const customTabViewPath = '/custom-tab-component'
 
-export const customTabViewTitle = 'Custom View With Tab Component'
+export const customTabLabelViewTitle = 'Custom Tab Label View'
+
+export const customTabViewComponentTitle = 'Custom View With Tab Component'
 
 export const customNestedTabViewPath = `${customTabViewPath}/nested-view`
 
 export const customNestedTabViewTitle = 'Custom Nested Tab View'
+
+export const customCollectionParamViewPathBase = '/custom-param'
+
+export const customCollectionParamViewPath = `${customCollectionParamViewPathBase}/:slug`