fix: overrides entity visibility within drawers (#9546)

jacobsfletch · web-flow · commit 5d18a5288e09 · 2024-11-26T18:22:04.000-05:00
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.
diff --git a/packages/next/src/views/Document/handleServerFunction.tsx b/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],
     },
diff --git a/packages/next/src/views/Document/index.tsx b/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')
     }
 
diff --git a/packages/next/src/views/List/handleServerFunction.tsx b/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],
     },
diff --git a/packages/next/src/views/List/index.tsx b/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')
     }
 
diff --git a/packages/payload/src/admin/views/types.ts b/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
diff --git a/packages/ui/src/elements/AddNewRelation/index.tsx b/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)
diff --git a/packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx b/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,
     ],
   )
diff --git a/packages/ui/src/elements/DocumentDrawer/index.tsx b/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) => (
diff --git a/packages/ui/src/elements/DocumentDrawer/types.ts b/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
   {
diff --git a/packages/ui/src/elements/ListDrawer/DrawerContent.tsx b/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(() => {
diff --git a/packages/ui/src/elements/ListDrawer/types.ts b/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
 }) => [
diff --git a/packages/ui/src/elements/RelationshipTable/index.tsx b/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}
diff --git a/packages/ui/src/fields/Join/index.tsx b/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}
diff --git a/packages/ui/src/providers/ServerFunctions/index.tsx b/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
diff --git a/test/joins/collections/Categories.ts b/test/joins/collections/Categories.ts
@@ -1,6 +1,6 @@
 import type { CollectionConfig } from 'payload'
 
-import { categoriesSlug, postsSlug } from '../shared.js'
+import { categoriesSlug, hiddenPostsSlug, postsSlug } from '../shared.js'
 import { singularSlug } from './Singular.js'
 
 export const Categories: CollectionConfig = {
@@ -65,6 +65,12 @@ export const Categories: CollectionConfig = {
       collection: postsSlug,
       on: 'categoriesLocalized',
     },
+    {
+      name: 'hiddenPosts',
+      type: 'join',
+      collection: hiddenPostsSlug,
+      on: 'category',
+    },
     {
       name: 'group',
       type: 'group',
diff --git a/test/joins/collections/HiddenPosts.ts b/test/joins/collections/HiddenPosts.ts
@@ -0,0 +1,23 @@
+import type { CollectionConfig } from 'payload'
+
+import { categoriesSlug, hiddenPostsSlug } from '../shared.js'
+
+export const HiddenPosts: CollectionConfig = {
+  slug: hiddenPostsSlug,
+  admin: {
+    useAsTitle: 'title',
+    hidden: true,
+    defaultColumns: ['title', 'category'],
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+    {
+      name: 'category',
+      type: 'relationship',
+      relationTo: categoriesSlug,
+    },
+  ],
+}
diff --git a/test/joins/config.ts b/test/joins/config.ts
@@ -4,6 +4,7 @@ import path from 'path'
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { Categories } from './collections/Categories.js'
 import { CategoriesVersions } from './collections/CategoriesVersions.js'
+import { HiddenPosts } from './collections/HiddenPosts.js'
 import { Posts } from './collections/Posts.js'
 import { Singular } from './collections/Singular.js'
 import { Uploads } from './collections/Uploads.js'
@@ -24,6 +25,7 @@ export default buildConfigWithDefaults({
   collections: [
     Posts,
     Categories,
+    HiddenPosts,
     Uploads,
     Versions,
     CategoriesVersions,
diff --git a/test/joins/e2e.spec.ts b/test/joins/e2e.spec.ts
diff --git a/test/joins/payload-types.ts b/test/joins/payload-types.ts
diff --git a/test/joins/seed.ts b/test/joins/seed.ts
diff --git a/test/joins/shared.ts b/test/joins/shared.ts
