fix(ui): admin.dependencies components not added to client config (#7928)

Author: AlessioGr

docs/admin/components.mdx

@@ -196,6 +196,48 @@ import { MyFieldComponent } from 'my-external-package/client'
 
 which is a valid way to access MyFieldComponent that can be resolved by the consuming project.
 
+### Custom Components from unknown locations
+
+By default, any component paths from known locations are added to the import map. However, if you need to add any components from unknown locations to the import map, you can do so by adding them to the `admin.dependencies` array in your Payload Config. This is mostly only relevant for plugin authors and not for regular Payload users.
+
+Example:
+
+```ts
+export default {
+  // ...
+  admin: {
+    // ...
+    dependencies: {
+      myTestComponent: { // myTestComponent is the key - can be anything
+        path: '/components/TestComponent.js#TestComponent',
+        type: 'component',
+        clientProps: {
+          test: 'hello',
+        },
+      },
+    },
+  }
+}
+```
+
+This way, `TestComponent` is added to the import map, no matter if it's referenced in a known location or not. On the client, you can then use the component like this:
+
+```tsx
+'use client'
+
+import { RenderComponent, useConfig } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomView = () => {
+  const { config } = useConfig()
+  return (
+    <div>
+      <RenderComponent mappedComponent={config.admin.dependencies?.myTestComponent} />
+    </div>
+  )
+}
+```
+
 ## Root Components
 
 Root Components are those that effect the [Admin Panel](./overview) generally, such as the logo or the main nav.

packages/payload/src/config/client.ts

@@ -39,8 +39,9 @@ export type ClientConfig = {
         Logo: MappedComponent
       }
     }
+    dependencies?: Record<string, MappedComponent>
     livePreview?: Omit<LivePreviewConfig, ServerOnlyLivePreviewProperties>
-  } & Omit<SanitizedConfig['admin'], 'components' | 'livePreview'>
+  } & Omit<SanitizedConfig['admin'], 'components' | 'dependencies' | 'livePreview'>
   collections: ClientCollectionConfig[]
   custom?: Record<string, any>
   globals: ClientGlobalConfig[]

packages/ui/src/providers/Config/createClientConfig/index.tsx

@@ -6,6 +6,7 @@ import {
   type EditViewProps,
   type ImportMap,
   type Payload,
+  type PayloadComponent,
   type SanitizedConfig,
   deepCopyObjectSimple,
   serverOnlyConfigProperties,
@@ -113,6 +114,29 @@ export const createClientConfig = async ({
         'config.admin.components.graphics.Logo',
       )
     }
+
+    if (config.admin?.dependencies) {
+      clientConfig.admin.dependencies = {}
+      for (const key in config.admin.dependencies) {
+        const dependency = config.admin.dependencies[key]
+
+        if (dependency.type === 'component') {
+          const payloadComponent: PayloadComponent = {
+            clientProps: dependency.clientProps,
+            path: dependency.path,
+            serverProps: dependency.serverProps,
+          }
+
+          clientConfig.admin.dependencies[key] = createMappedComponent(
+            payloadComponent,
+            undefined,
+            undefined,
+            `config.admin.dependencies.${key}`,
+          )
+          continue
+        }
+      }
+    }
   }
 
   if (

test/admin/components/AfterDashboardClient/index.tsx

@@ -0,0 +1,17 @@
+'use client'
+import type { PayloadClientReactComponent, SanitizedConfig } from 'payload'
+
+import { RenderComponent, useConfig } from '@payloadcms/ui'
+import React from 'react'
+
+export const AfterDashboardClient: PayloadClientReactComponent<
+  SanitizedConfig['admin']['components']['afterDashboard'][0]
+> = () => {
+  const { config } = useConfig()
+  return (
+    <div>
+      <p>Admin Dependency test component:</p>
+      <RenderComponent mappedComponent={config.admin.dependencies?.myTestComponent} />
+    </div>
+  )
+}

test/admin/components/TestComponent.tsx

@@ -0,0 +1,6 @@
+'use client'
+import React from 'react'
+
+export const TestComponent: React.FC = () => {
+  return <div>Test Component</div>
+}

test/admin/config.ts

@@ -41,7 +41,10 @@ export default buildConfigWithDefaults({
     },
     components: {
       actions: ['/components/AdminButton/index.js#AdminButton'],
-      afterDashboard: ['/components/AfterDashboard/index.js#AfterDashboard'],
+      afterDashboard: [
+        '/components/AfterDashboard/index.js#AfterDashboard',
+        '/components/AfterDashboardClient/index.js#AfterDashboardClient',
+      ],
       afterNavLinks: ['/components/AfterNavLinks/index.js#AfterNavLinks'],
       beforeLogin: ['/components/BeforeLogin/index.js#BeforeLogin'],
       logout: {
@@ -104,6 +107,15 @@ export default buildConfigWithDefaults({
       titleSuffix: '- Custom Title Suffix',
     },
     routes: customAdminRoutes,
+    dependencies: {
+      myTestComponent: {
+        path: '/components/TestComponent.js#TestComponent',
+        type: 'component',
+        clientProps: {
+          test: 'hello',
+        },
+      },
+    },
   },
   collections: [
     UploadCollection,