fix: join field description, custom components and loading state (#9703)

- [fix: join field shows loading when creating a
document](9f7a2e7936)
- [fix: join field
descriptions](90e8cdb464)
- [feat(ui): adds before & after inputs to join
field](19d43329ad)

---------

Co-authored-by: Patrik <patrik@payloadcms.com>

test/joins/collections/Categories.ts

@@ -47,6 +47,13 @@ export const Categories: CollectionConfig = {
       name: 'relatedPosts',
       label: 'Related Posts',
       type: 'join',
+      admin: {
+        components: {
+          afterInput: ['/components/AfterInput.js#AfterInput'],
+          beforeInput: ['/components/BeforeInput.js#BeforeInput'],
+          Description: '/components/CustomDescription/index.js#FieldDescriptionComponent',
+        },
+      },
       collection: postsSlug,
       defaultSort: '-title',
       defaultLimit: 5,
@@ -57,6 +64,9 @@ export const Categories: CollectionConfig = {
       name: 'hasManyPosts',
       type: 'join',
       collection: postsSlug,
+      admin: {
+        description: 'Static Description',
+      },
       on: 'categories',
     },
     {

test/joins/components/AfterInput.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import React from 'react'
+
+export const AfterInput: React.FC = () => {
+  return <div className="after-input">#after-input</div>
+}

test/joins/components/BeforeInput.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import React from 'react'
+
+export const BeforeInput: React.FC = () => {
+  return <div className="before-input">#before-input</div>
+}

test/joins/components/CustomDescription/index.tsx

@@ -0,0 +1,8 @@
+'use client'
+import type { FieldDescriptionClientComponent } from 'payload'
+
+import React from 'react'
+
+export const FieldDescriptionComponent: FieldDescriptionClientComponent = ({ path }) => {
+  return <div className={`field-description-${path}`}>Component description: {path}</div>
+}

test/joins/config.ts

@@ -22,6 +22,11 @@ const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
 export default buildConfigWithDefaults({
+  admin: {
+    importMap: {
+      baseDir: path.resolve(dirname),
+    },
+  },
   collections: [
     Posts,
     Categories,

test/joins/e2e.spec.ts

@@ -88,6 +88,22 @@ test.describe('Admin Panel', () => {
     await page.goto(categoriesURL.create)
     const nameField = page.locator('#field-name')
     await expect(nameField).toBeVisible()
+
+    // assert that the join field is visible and is not stuck in a loading state
+    await expect(page.locator('#field-relatedPosts')).toContainText('No Posts found.')
+    await expect(page.locator('#field-relatedPosts')).not.toContainText('loading')
+
+    // assert that the create new button is not visible
+    await expect(page.locator('#field-relatedPosts > .relationship-table__add-new')).toBeHidden()
+
+    // assert that the admin.description is visible
+    await expect(page.locator('.field-description-hasManyPosts')).toHaveText('Static Description')
+
+    //assert that the admin.components.Description is visible
+    await expect(page.locator('.field-description-relatedPosts')).toHaveText(
+      'Component description: relatedPosts',
+    )
+
     await nameField.fill('test category')
     await saveDocAndAssert(page)
   })