fix: custom tabs not working in globals (#7148)

Author: paulpopus

packages/next/src/views/Document/getViewsFromConfig.tsx

@@ -185,7 +185,6 @@ export const getViewsFromConfig = ({
     }
 
     if (!EditOverride) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const [globalEntity, globalSlug, segment3, ...remainingSegments] = routeSegments
 
       if (!docPermissions?.read?.permission) {
@@ -228,7 +227,19 @@ export const getViewsFromConfig = ({
 
               default: {
                 if (docPermissions?.read?.permission) {
-                  CustomView = getCustomViewByKey(views, 'Default')
+                  const baseRoute = [adminRoute, globalEntity, globalSlug, segment3]
+                    .filter(Boolean)
+                    .join('/')
+
+                  const currentRoute = [baseRoute, segment3, ...remainingSegments]
+                    .filter(Boolean)
+                    .join('/')
+
+                  CustomView = getCustomViewByRoute({
+                    baseRoute,
+                    currentRoute,
+                    views,
+                  })
                   DefaultView = DefaultEditView
                 } else {
                   ErrorView = UnauthorizedView

test/admin/components/CustomTabComponent/client.tsx

@@ -15,7 +15,7 @@ export const CustomTabComponentClient: React.FC<{
   } = useConfig()
   const params = useParams()
 
-  const baseRoute = (params.segments.slice(0, 3) as string[]).join('/')
+  const baseRoute = (params.segments.slice(0, 2) as string[]).join('/')
 
   return <Link href={`${adminRoute}/${baseRoute}${path}`}>Custom Tab Component</Link>
 }

test/admin/e2e/1/e2e.spec.ts

@@ -35,6 +35,7 @@ import {
 } from '../../shared.js'
 import {
   customFieldsSlug,
+  customGlobalViews2GlobalSlug,
   customIdCollectionId,
   customViews2CollectionSlug,
   disableDuplicateSlug,
@@ -482,6 +483,28 @@ describe('admin1', () => {
 
       await expect(customTab).toBeVisible()
     })
+
+    test('global — should render custom tab label', async () => {
+      await page.goto(globalURL.global(customGlobalViews2GlobalSlug) + '/custom-tab-view')
+
+      const title = page.locator('#custom-view-title')
+
+      const docTab = page.locator('.doc-tab__link:has-text("Custom")')
+
+      await expect(docTab).toBeVisible()
+      await expect(title).toContainText('Custom Tab Label View')
+    })
+
+    test('global — should render custom tab component', async () => {
+      await page.goto(globalURL.global(customGlobalViews2GlobalSlug) + '/custom-tab-component')
+      const title = page.locator('#custom-view-title')
+
+      const docTab = page.locator('.custom-doc-tab').first()
+
+      await expect(docTab).toBeVisible()
+      await expect(docTab).toContainText('Custom Tab Component')
+      await expect(title).toContainText('Custom View With Tab Component')
+    })
   })
 
   describe('custom fields', () => {