diff --git a/docs/custom-components/custom-views.mdx b/docs/custom-components/custom-views.mdx index 59e18ddcfea..b6ea06bd6d7 100644 --- a/docs/custom-components/custom-views.mdx +++ b/docs/custom-components/custom-views.mdx @@ -52,6 +52,7 @@ For more granular control, pass a configuration object instead. Payload exposes | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `Component` \* | Pass in the component path that should be rendered when a user navigates to this route. | | `path` \* | Any valid URL path or array of paths that [`path-to-regexp`](https://www.npmjs.com/package/path-to-regex) understands. | +| `condition` | Optional function that receives `req` and `doc` as arguments and returns a `boolean`. When `true`, the route and associated tab are rendered. Defaults to `true`. | | `exact` | Boolean. When true, will only match if the path matches the `usePathname()` exactly. | | `strict` | When true, a path that has a trailing slash will only match a `location.pathname` with a trailing slash. This has no effect when there are additional URL segments in the pathname. | | `sensitive` | When true, will match if the path is case sensitive. | diff --git a/docs/custom-components/document-views.mdx b/docs/custom-components/document-views.mdx index 36b63b1109e..1f0ba3fc24c 100644 --- a/docs/custom-components/document-views.mdx +++ b/docs/custom-components/document-views.mdx @@ -181,3 +181,38 @@ export function MyCustomTabComponent(props: DocumentTabClientProps) { ) } ``` + +## Restricting Document Views + +You can restrict access to specific Document Views by using the `views.edit.[key].condition` property in your [Collection Config](../configuration/collections) or [Global Config](../configuration/globals). This allows you to control which user roles can access specific views. + +To restrict access, define a condition function that returns a `boolean`. This function receives both the `req` and the relevant `doc` as arguments. + +If the condition returns `false`, the corresponding **view and its tab** will not be rendered or accessible to the user. + +#### Example + +```ts +import type { CollectionConfig } from 'payload' + +export const MyCollection: CollectionConfig = { + slug: 'my-collection', + // ... + admin: { + // ... + components: { + views: { + edit: { + api: { + condition: ({ doc, req: { user } }) => { + return user?.roles?.includes('admin') ?? false + }, + }, + }, + }, + }, + }, +} +``` + +In this example, only users with the `admin` role can access the API View and its associated tab. This setup works for both Collection and Global Document Views. diff --git a/packages/next/src/elements/DocumentHeader/Tabs/index.tsx b/packages/next/src/elements/DocumentHeader/Tabs/index.tsx index 6efef9a5be1..85f56ba09b2 100644 --- a/packages/next/src/elements/DocumentHeader/Tabs/index.tsx +++ b/packages/next/src/elements/DocumentHeader/Tabs/index.tsx @@ -1,8 +1,10 @@ import type { I18n } from '@payloadcms/translations' import type { + Data, DocumentTabClientProps, DocumentTabServerPropsOnly, Payload, + PayloadRequest, SanitizedCollectionConfig, SanitizedGlobalConfig, SanitizedPermissions, @@ -13,19 +15,21 @@ import React from 'react' import { ShouldRenderTabs } from './ShouldRenderTabs.js' import { DocumentTab } from './Tab/index.js' -import { getTabs } from './tabs/index.js' import './index.scss' +import { getTabs } from './tabs/index.js' const baseClass = 'doc-tabs' export const DocumentTabs: React.FC<{ collectionConfig: SanitizedCollectionConfig + doc: Data globalConfig: SanitizedGlobalConfig i18n: I18n payload: Payload permissions: SanitizedPermissions + req?: PayloadRequest }> = (props) => { - const { collectionConfig, globalConfig, i18n, payload, permissions } = props + const { collectionConfig, doc, globalConfig, i18n, payload, permissions, req } = props const { config } = payload const tabs = getTabs({ @@ -38,13 +42,33 @@ export const DocumentTabs: React.FC<{