fix: overrides entity visibility within drawers (#9546)

When using the `admin.hidden: true` property on a collection, it
rightfully removes all navigation and routing for that particular
collection. However, this also affects the expected behavior of hidden
entities when they are rendered within a drawer, such as the document
drawer or list drawer. For example, when creating a new _admin.hidden_
document through the relationship or join field, the drawer should still
render the view, despite the underlying route for that view being
disabled. This change was a result of the introduction of on-demand
server components in #8364, where we now make a server roundtrip to
render the view in its entirety, which include the logic that redirects
these hidden entities.

Now, we pass a new `overrideEntityVisibility` argument through the
server function that, when true, skips this step. This way documents can
continue to respect `admin.hidden` while also having the ability to
override on a case-by-case basis throughout the UI.

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

@@ -19,6 +19,7 @@ export const renderDocumentHandler = async (args: {
   drawerSlug?: string
   initialData?: Data
   initialState?: FormState
+  overrideEntityVisibility?: boolean
   redirectAfterDelete: boolean
   redirectAfterDuplicate: boolean
   req: PayloadRequest
@@ -29,6 +30,7 @@ export const renderDocumentHandler = async (args: {
     docID,
     drawerSlug,
     initialData,
+    overrideEntityVisibility,
     redirectAfterDelete,
     redirectAfterDuplicate,
     req,
@@ -148,6 +150,7 @@ export const renderDocumentHandler = async (args: {
       translations: undefined, // TODO
       visibleEntities,
     },
+    overrideEntityVisibility,
     params: {
       segments: ['collections', collectionSlug, docID],
     },

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

@@ -33,11 +33,14 @@ export const renderDocument = async ({
   importMap,
   initialData,
   initPageResult,
+  overrideEntityVisibility,
   params,
   redirectAfterDelete,
   redirectAfterDuplicate,
   searchParams,
-}: AdminViewProps): Promise<{
+}: {
+  overrideEntityVisibility?: boolean
+} & AdminViewProps): Promise<{
   data: Data
   Document: React.ReactNode
 }> => {
@@ -168,7 +171,10 @@ export const renderDocument = async ({
   }
 
   if (collectionConfig) {
-    if (!visibleEntities?.collections?.find((visibleSlug) => visibleSlug === collectionSlug)) {
+    if (
+      !visibleEntities?.collections?.find((visibleSlug) => visibleSlug === collectionSlug) &&
+      !overrideEntityVisibility
+    ) {
       throw new Error('not-found')
     }
 

packages/next/src/views/List/handleServerFunction.tsx

@@ -20,6 +20,7 @@ export const renderListHandler = async (args: {
   documentDrawerSlug: string
   drawerSlug?: string
   enableRowSelections: boolean
+  overrideEntityVisibility?: boolean
   query: ListQuery
   redirectAfterDelete: boolean
   redirectAfterDuplicate: boolean
@@ -32,6 +33,7 @@ export const renderListHandler = async (args: {
     disableBulkEdit,
     drawerSlug,
     enableRowSelections,
+    overrideEntityVisibility,
     query,
     redirectAfterDelete,
     redirectAfterDuplicate,
@@ -149,6 +151,7 @@ export const renderListHandler = async (args: {
       translations: undefined, // TODO
       visibleEntities,
     },
+    overrideEntityVisibility,
     params: {
       segments: ['collections', collectionSlug],
     },

packages/next/src/views/List/index.tsx

@@ -23,6 +23,7 @@ type ListViewArgs = {
   disableBulkDelete?: boolean
   disableBulkEdit?: boolean
   enableRowSelections: boolean
+  overrideEntityVisibility?: boolean
   query: ListQuery
 } & AdminViewProps
 
@@ -39,6 +40,7 @@ export const renderListView = async (
     drawerSlug,
     enableRowSelections,
     initPageResult,
+    overrideEntityVisibility,
     params,
     query: queryFromArgs,
     searchParams,
@@ -111,7 +113,7 @@ export const renderListView = async (
   } = config
 
   if (collectionConfig) {
-    if (!visibleEntities.collections.includes(collectionSlug)) {
+    if (!visibleEntities.collections.includes(collectionSlug) && !overrideEntityVisibility) {
       throw new Error('not-found')
     }
 

packages/payload/src/admin/views/types.ts

@@ -8,7 +8,7 @@ import type { Locale, MetaConfig, PayloadComponent, ServerProps } from '../../co
 import type { SanitizedGlobalConfig } from '../../globals/config/types.js'
 import type { PayloadRequest } from '../../types/index.js'
 import type { LanguageOptions } from '../LanguageOptions.js'
-import type { Data, DocumentSlots, PayloadServerAction } from '../types.js'
+import type { Data, DocumentSlots } from '../types.js'
 
 export type AdminViewConfig = {
   Component: AdminViewComponent

packages/ui/src/elements/AddNewRelation/index.tsx

@@ -34,10 +34,13 @@ export const AddNewRelation: React.FC<Props> = ({
   const { permissions } = useAuth()
   const [show, setShow] = useState(false)
   const [selectedCollection, setSelectedCollection] = useState<string>()
+
   const relatedToMany = relatedCollections.length > 1
+
   const [collectionConfig, setCollectionConfig] = useState<ClientCollectionConfig>(() =>
     !relatedToMany ? relatedCollections[0] : undefined,
   )
+
   const [popupOpen, setPopupOpen] = useState(false)
   const { i18n, t } = useTranslation()
   const [showTooltip, setShowTooltip] = useState(false)

packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx

@@ -25,6 +25,7 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
   onDelete: onDeleteFromProps,
   onDuplicate: onDuplicateFromProps,
   onSave: onSaveFromProps,
+  overrideEntityVisibility = true,
   redirectAfterDelete,
   redirectAfterDuplicate,
 }) => {
@@ -64,6 +65,7 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
             docID,
             drawerSlug,
             initialData,
+            overrideEntityVisibility,
             redirectAfterDelete: redirectAfterDelete !== undefined ? redirectAfterDelete : false,
             redirectAfterDuplicate:
               redirectAfterDuplicate !== undefined ? redirectAfterDuplicate : false,
@@ -92,6 +94,7 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
       redirectAfterDuplicate,
       renderDocument,
       closeModal,
+      overrideEntityVisibility,
       t,
     ],
   )

packages/ui/src/elements/DocumentDrawer/index.tsx

@@ -64,7 +64,11 @@ export const DocumentDrawer: React.FC<DocumentDrawerProps> = (props) => {
   )
 }
 
-export const useDocumentDrawer: UseDocumentDrawer = ({ id, collectionSlug }) => {
+export const useDocumentDrawer: UseDocumentDrawer = ({
+  id,
+  collectionSlug,
+  overrideEntityVisibility,
+}) => {
   const editDepth = useEditDepth()
   const uuid = useId()
   const { closeModal, modalState, openModal, toggleModal } = useModal()
@@ -101,9 +105,10 @@ export const useDocumentDrawer: UseDocumentDrawer = ({ id, collectionSlug }) =>
         drawerSlug={drawerSlug}
         id={id}
         key={drawerSlug}
+        overrideEntityVisibility={overrideEntityVisibility}
       />
     )
-  }, [id, drawerSlug, collectionSlug])
+  }, [id, drawerSlug, collectionSlug, overrideEntityVisibility])
 
   const MemoizedDrawerToggler = useMemo(() => {
     return (props) => (

packages/ui/src/elements/DocumentDrawer/types.ts

@@ -13,6 +13,7 @@ export type DocumentDrawerProps = {
   readonly id?: null | number | string
   readonly initialData?: Data
   readonly initialState?: FormState
+  readonly overrideEntityVisibility?: boolean
   readonly redirectAfterDelete?: boolean
   readonly redirectAfterDuplicate?: boolean
 } & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> &
@@ -28,7 +29,11 @@ export type DocumentTogglerProps = {
   readonly onClick?: () => void
 } & Readonly<HTMLAttributes<HTMLButtonElement>>
 
-export type UseDocumentDrawer = (args: { collectionSlug: string; id?: number | string }) => [
+export type UseDocumentDrawer = (args: {
+  collectionSlug: string
+  id?: number | string
+  overrideEntityVisibility?: boolean
+}) => [
   React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>, // drawer
   React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>, // toggler
   {

packages/ui/src/elements/ListDrawer/DrawerContent.tsx

@@ -22,6 +22,7 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
   filterOptions,
   onBulkSelect,
   onSelect,
+  overrideEntityVisibility = true,
   selectedCollection: selectedCollectionFromProps,
 }) => {
   const { closeModal, isModalOpen } = useModal()
@@ -86,6 +87,7 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
             disableBulkEdit: true,
             drawerSlug,
             enableRowSelections,
+            overrideEntityVisibility,
             query: newQuery,
           },
         })) as { List: React.ReactNode }
@@ -100,7 +102,15 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
         }
       }
     },
-    [serverFunction, closeModal, drawerSlug, isOpen, enableRowSelections, filterOptions],
+    [
+      serverFunction,
+      closeModal,
+      drawerSlug,
+      isOpen,
+      enableRowSelections,
+      filterOptions,
+      overrideEntityVisibility,
+    ],
   )
 
   useEffect(() => {

packages/ui/src/elements/ListDrawer/types.ts

@@ -10,6 +10,7 @@ export type ListDrawerProps = {
   readonly drawerSlug?: string
   readonly enableRowSelections?: boolean
   readonly filterOptions?: FilterOptionsResult
+  readonly overrideEntityVisibility?: boolean
   readonly selectedCollection?: string
 } & ListDrawerContextProps
 
@@ -23,6 +24,7 @@ export type ListTogglerProps = {
 export type UseListDrawer = (args: {
   collectionSlugs?: SanitizedCollectionConfig['slug'][]
   filterOptions?: FilterOptionsResult
+  overrideEntityVisibility?: boolean
   selectedCollection?: SanitizedCollectionConfig['slug']
   uploads?: boolean // finds all collections with upload: true
 }) => [

packages/ui/src/elements/RelationshipTable/index.tsx

@@ -178,7 +178,11 @@ export const RelationshipTable: React.FC<RelationshipTableComponentProps> = (pro
       <div className={`${baseClass}__header`}>
         {Label}
         <div className={`${baseClass}__actions`}>
-          {canCreate && <DocumentDrawerToggler>{i18n.t('fields:addNew')}</DocumentDrawerToggler>}
+          {canCreate && (
+            <DocumentDrawerToggler className={`${baseClass}__add-new`}>
+              {i18n.t('fields:addNew')}
+            </DocumentDrawerToggler>
+          )}
           <Pill
             aria-controls={`${baseClass}-columns`}
             aria-expanded={openColumnSelector}

packages/ui/src/fields/Join/index.tsx

@@ -53,7 +53,10 @@ const JoinFieldComponent: JoinFieldClientComponent = (props) => {
   }, [docID, on, field.where])
 
   return (
-    <div className={[fieldBaseClass, 'join'].filter(Boolean).join(' ')}>
+    <div
+      className={[fieldBaseClass, 'join'].filter(Boolean).join(' ')}
+      id={`field-${path?.replace(/\./g, '__')}`}
+    >
       {BeforeInput}
       <RelationshipTable
         allowCreate={typeof docID !== 'undefined' && allowCreate}

packages/ui/src/providers/ServerFunctions/index.tsx

@@ -30,6 +30,7 @@ type RenderDocument = (args: {
   docID?: number | string
   drawerSlug?: string
   initialData?: Data
+  overrideEntityVisibility?: boolean
   redirectAfterDelete?: boolean
   redirectAfterDuplicate?: boolean
   signal?: AbortSignal