feat: custom document tabs (#3387)

test/admin/components/CustomTabComponent/index.scss

@@ -0,0 +1,10 @@
+.custom-doc-tab {
+  text-decoration: none;
+  background-color: var(--theme-elevation-200);
+  padding: 0 6px;
+  border-radius: 2px;
+
+  &:hover {
+    background-color: var(--theme-elevation-300);
+  }
+}

test/admin/components/CustomTabComponent/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Link, useRouteMatch } from 'react-router-dom'
+
+import type { DocumentTabProps } from '../../../../packages/payload/src/admin/components/elements/DocumentHeader/Tabs/types'
+
+import './index.scss'
+
+const CustomTabComponent: React.FC<DocumentTabProps> = (props) => {
+  const { path } = props
+  const match = useRouteMatch()
+
+  return (
+    <Link className="custom-doc-tab" to={`${match.url}${path}`}>
+      Custom Tab Component
+    </Link>
+  )
+}
+
+export default CustomTabComponent

test/admin/config.ts

@@ -7,6 +7,7 @@ import { devUser } from '../credentials'
 import AfterDashboard from './components/AfterDashboard'
 import AfterNavLinks from './components/AfterNavLinks'
 import BeforeLogin from './components/BeforeLogin'
+import CustomTabComponent from './components/CustomTabComponent'
 import DemoUIFieldCell from './components/DemoUIField/Cell'
 import DemoUIFieldField from './components/DemoUIField/Field'
 import Logout from './components/Logout'
@@ -164,9 +165,17 @@ export default buildConfigWithDefaults({
               Default: CustomDefaultView,
               Versions: CustomVersionsView,
               MyCustomView: {
-                path: '/custom',
+                path: '/custom-tab-view',
                 Component: CustomView,
-                label: 'Custom',
+                Tab: {
+                  label: 'Custom',
+                  href: '/custom-tab-view',
+                },
+              },
+              MyCustomViewWithCustomTab: {
+                path: '/custom-tab-component',
+                Component: CustomView,
+                Tab: CustomTabComponent,
               },
             },
           },
@@ -293,9 +302,17 @@ export default buildConfigWithDefaults({
               Default: CustomDefaultView,
               Versions: CustomVersionsView,
               MyCustomView: {
-                path: '/custom',
+                path: '/custom-tab-view',
                 Component: CustomView,
-                label: 'Custom',
+                Tab: {
+                  label: 'Custom',
+                  href: '/custom-tab-view',
+                },
+              },
+              MyCustomViewWithCustomTab: {
+                path: '/custom-tab-component',
+                Component: CustomView,
+                Tab: CustomTabComponent,
               },
             },
           },

test/admin/e2e.spec.ts

@@ -43,14 +43,14 @@ describe('admin', () => {
   })
 
   describe('Nav', () => {
-    test('should nav to collection - sidebar', async () => {
+    test('should nav to collection - main menu', async () => {
       await page.goto(url.admin)
       await openMainMenu(page)
       await page.locator(`#nav-${slug}`).click()
       expect(page.url()).toContain(url.list)
     })
 
-    test('should nav to a global - sidebar', async () => {
+    test('should nav to a global - main menu', async () => {
       await page.goto(url.admin)
       await openMainMenu(page)
       await page.locator(`#nav-global-${globalSlug}`).click()