fix: properly handles hideAPIURL (#3721)

packages/payload/src/admin/components/elements/DocumentHeader/Tabs/tabs.ts

@@ -43,7 +43,7 @@ export const tabs: DocumentTabConfig[] = [
   // API
   {
     condition: ({ collection, global }) =>
-      !collection?.admin?.hideAPIURL || !global?.admin?.hideAPIURL,
+      (collection && !collection?.admin?.hideAPIURL) || (global && !global?.admin?.hideAPIURL),
     href: '/api',
     label: 'API',
   },

packages/payload/src/admin/components/views/Global/Routes/index.tsx

@@ -41,9 +41,11 @@ export const GlobalRoutes: React.FC<GlobalEditViewProps> = (props) => {
           <Unauthorized />
         )}
       </Route>
-      <Route exact key={`${global.slug}-api`} path={`${adminRoute}/globals/${global.slug}/api`}>
-        {permissions?.read ? <CustomGlobalComponent view="API" {...props} /> : <Unauthorized />}
-      </Route>
+      {global?.admin?.hideAPIURL !== true && (
+        <Route exact key={`${global.slug}-api`} path={`${adminRoute}/globals/${global.slug}/api`}>
+          {permissions?.read ? <CustomGlobalComponent view="API" {...props} /> : <Unauthorized />}
+        </Route>
+      )}
       <Route
         exact
         key={`${global.slug}-view-version`}

packages/payload/src/admin/components/views/collections/Edit/Routes/index.tsx

@@ -41,13 +41,19 @@ export const CollectionRoutes: React.FC<CollectionEditViewProps> = (props) => {
           <Unauthorized />
         )}
       </Route>
-      <Route
-        exact
-        key={`${collection.slug}-api`}
-        path={`${adminRoute}/collections/${collection.slug}/:id/api`}
-      >
-        {permissions?.read ? <CustomCollectionComponent view="API" {...props} /> : <Unauthorized />}
-      </Route>
+      {collection?.admin?.hideAPIURL !== true && (
+        <Route
+          exact
+          key={`${collection.slug}-api`}
+          path={`${adminRoute}/collections/${collection.slug}/:id/api`}
+        >
+          {permissions?.read ? (
+            <CustomCollectionComponent view="API" {...props} />
+          ) : (
+            <Unauthorized />
+          )}
+        </Route>
+      )}
       <Route
         exact
         key={`${collection.slug}-view-version`}

test/admin/collections/NoApiView.ts

@@ -0,0 +1,11 @@
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+
+import { noApiViewCollection } from '../shared'
+
+export const CollectionNoApiView: CollectionConfig = {
+  slug: noApiViewCollection,
+  admin: {
+    hideAPIURL: true,
+  },
+  fields: [],
+}

test/admin/config.ts

@@ -11,6 +11,7 @@ import { CollectionGroup1B } from './collections/Group1B'
 import { CollectionGroup2A } from './collections/Group2A'
 import { CollectionGroup2B } from './collections/Group2B'
 import { CollectionHidden } from './collections/Hidden'
+import { CollectionNoApiView } from './collections/NoApiView'
 import { Posts } from './collections/Posts'
 import { Users } from './collections/Users'
 import AfterDashboard from './components/AfterDashboard'
@@ -25,7 +26,8 @@ import { Global } from './globals/Global'
 import { GlobalGroup1A } from './globals/Group1A'
 import { GlobalGroup1B } from './globals/Group1B'
 import { GlobalHidden } from './globals/Hidden'
-import { postsSlug } from './shared'
+import { GlobalNoApiView } from './globals/NoApiView'
+import { noApiViewCollection, postsSlug } from './shared'
 
 export interface Post {
   createdAt: Date
@@ -77,6 +79,7 @@ export default buildConfigWithDefaults({
     Posts,
     Users,
     CollectionHidden,
+    CollectionNoApiView,
     CustomViews1,
     CustomViews2,
     CollectionGroup1A,
@@ -87,6 +90,7 @@ export default buildConfigWithDefaults({
   ],
   globals: [
     GlobalHidden,
+    GlobalNoApiView,
     Global,
     CustomGlobalViews1,
     CustomGlobalViews2,
@@ -139,5 +143,10 @@ export default buildConfigWithDefaults({
         point: [5, -5],
       },
     })
+
+    await payload.create({
+      collection: noApiViewCollection,
+      data: {},
+    })
   },
 })

test/admin/e2e.spec.ts

@@ -21,6 +21,8 @@ import {
   globalSlug,
   group1Collection1Slug,
   group1GlobalSlug,
+  noApiViewCollection,
+  noApiViewGlobal,
   postsSlug,
   slugPluralLabel,
 } from './shared'
@@ -153,6 +155,32 @@ describe('admin', () => {
       await page.goto(url.global('hidden-global'))
       await expect(page.locator('.not-found')).toContainText('Nothing found')
     })
+
+    test('should not show API tab on collection when disabled in config', async () => {
+      await page.goto(url.collection(noApiViewCollection))
+      await page.locator('.collection-list .table a').click()
+      await expect(page.locator('.doc-tabs__tabs-container')).not.toContainText('API')
+    })
+
+    test('should not enable API route on collection when disabled in config', async () => {
+      const collectionItems = await payload.find({
+        collection: noApiViewCollection,
+        limit: 1,
+      })
+      expect(collectionItems.docs.length).toBe(1)
+      await page.goto(`${url.collection(noApiViewCollection)}/${collectionItems.docs[0].id}/api`)
+      await expect(page.locator('.not-found')).toHaveCount(1)
+    })
+
+    test('should not show API tab on global when disabled in config', async () => {
+      await page.goto(url.global(noApiViewGlobal))
+      await expect(page.locator('.doc-tabs__tabs-container')).not.toContainText('API')
+    })
+
+    test('should not enable API route on global when disabled in config', async () => {
+      await page.goto(`${url.global(noApiViewGlobal)}/api`)
+      await expect(page.locator('.not-found')).toHaveCount(1)
+    })
   })
 
   describe('ui', () => {

test/admin/globals/NoApiView.ts

@@ -0,0 +1,10 @@
+import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types'
+import { noApiViewGlobal } from '../shared'
+
+export const GlobalNoApiView: GlobalConfig = {
+  slug: noApiViewGlobal,
+  admin: {
+    hideAPIURL: true,
+  },
+  fields: [],
+}

test/admin/shared.ts

@@ -11,3 +11,7 @@ export const slugPluralLabel = 'Posts'
 export const globalSlug = 'global'
 
 export const group1GlobalSlug = 'group-globals-one'
+
+export const noApiViewCollection = 'collection-no-api-view'
+
+export const noApiViewGlobal = 'global-no-api-view'