From 0303b78d628422bac99457fd8d6bcf82844c18d1 Mon Sep 17 00:00:00 2001
From: Said Akhrarov <36972061+akhrarovsaid@users.noreply.github.com>
Date: Wed, 11 Dec 2024 12:19:37 -0500
Subject: [PATCH] fix(next): thread default ServerProps to view actions and
 other components that were missing (#9868)

This PR threads default `serverProps` to Edit and List view action slots, as well as other various components that were missing them.

---------

Co-authored-by: Alessio Gravili <alessio@gravili.de>
---
 packages/next/src/templates/Default/index.tsx | 42 +++++++++----------
 .../views/Document/renderDocumentSlots.tsx    | 14 ++++++-
 packages/payload/src/config/types.ts          |  2 +-
 3 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/packages/next/src/templates/Default/index.tsx b/packages/next/src/templates/Default/index.tsx
index 32b9019fd43..b410ee6a15f 100644
--- a/packages/next/src/templates/Default/index.tsx
+++ b/packages/next/src/templates/Default/index.tsx
@@ -48,6 +48,20 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
     } = {},
   } = payload.config || {}
 
+  const serverProps = React.useMemo<ServerProps>(
+    () => ({
+      i18n,
+      locale,
+      params,
+      payload,
+      permissions,
+      searchParams,
+      user,
+      visibleEntities,
+    }),
+    [i18n, locale, params, payload, permissions, searchParams, user, visibleEntities],
+  )
+
   const { Actions } = React.useMemo<{
     Actions: Record<string, React.ReactNode>
   }>(() => {
@@ -59,11 +73,13 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
                 acc[action.path] = RenderServerComponent({
                   Component: action,
                   importMap: payload.importMap,
+                  serverProps,
                 })
               } else {
                 acc[action] = RenderServerComponent({
                   Component: action,
                   importMap: payload.importMap,
+                  serverProps,
                 })
               }
             }
@@ -72,23 +88,14 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
           }, {})
         : undefined,
     }
-  }, [viewActions, payload])
+  }, [payload, serverProps, viewActions])
 
   const NavComponent = RenderServerComponent({
     clientProps: { clientProps: { visibleEntities } },
     Component: CustomNav,
     Fallback: DefaultNav,
     importMap: payload.importMap,
-    serverProps: {
-      i18n,
-      locale,
-      params,
-      payload,
-      permissions,
-      searchParams,
-      user,
-      visibleEntities,
-    },
+    serverProps,
   })
 
   return (
@@ -99,16 +106,7 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
             clientProps: { clientProps: { visibleEntities } },
             Component: CustomHeader,
             importMap: payload.importMap,
-            serverProps: {
-              i18n,
-              locale,
-              params,
-              payload,
-              permissions,
-              searchParams,
-              user,
-              visibleEntities,
-            },
+            serverProps,
           })}
           <div style={{ position: 'relative' }}>
             <div className={`${baseClass}__nav-toggler-wrapper`} id="nav-toggler">
@@ -127,6 +125,7 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
                       ? RenderServerComponent({
                           Component: avatar.Component,
                           importMap: payload.importMap,
+                          serverProps,
                         })
                       : undefined
                   }
@@ -135,6 +134,7 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
                       ? RenderServerComponent({
                           Component: components.graphics.Icon,
                           importMap: payload.importMap,
+                          serverProps,
                         })
                       : undefined
                   }
diff --git a/packages/next/src/views/Document/renderDocumentSlots.tsx b/packages/next/src/views/Document/renderDocumentSlots.tsx
index 459cba81a81..e86cd134584 100644
--- a/packages/next/src/views/Document/renderDocumentSlots.tsx
+++ b/packages/next/src/views/Document/renderDocumentSlots.tsx
@@ -5,12 +5,12 @@ import type {
   SanitizedCollectionConfig,
   SanitizedDocumentPermissions,
   SanitizedGlobalConfig,
+  ServerProps,
   StaticDescription,
 } from 'payload'
 
 import { ViewDescription } from '@payloadcms/ui'
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
-import React from 'react'
 
 import { getDocumentPermissions } from './getDocumentPermissions.js'
 
@@ -29,6 +29,13 @@ export const renderDocumentSlots: (args: {
 
   const isPreviewEnabled = collectionConfig?.admin?.preview || globalConfig?.admin?.preview
 
+  const serverProps: ServerProps = {
+    i18n: req.i18n,
+    payload: req.payload,
+    user: req.user,
+    // TODO: Add remaining serverProps
+  }
+
   const CustomPreviewButton =
     collectionConfig?.admin?.components?.edit?.PreviewButton ||
     globalConfig?.admin?.components?.elements?.PreviewButton
@@ -37,6 +44,7 @@ export const renderDocumentSlots: (args: {
     components.PreviewButton = RenderServerComponent({
       Component: CustomPreviewButton,
       importMap: req.payload.importMap,
+      serverProps,
     })
   }
 
@@ -60,6 +68,7 @@ export const renderDocumentSlots: (args: {
       Component: CustomDescription,
       Fallback: ViewDescription,
       importMap: req.payload.importMap,
+      serverProps,
     })
   }
 
@@ -73,6 +82,7 @@ export const renderDocumentSlots: (args: {
         components.PublishButton = RenderServerComponent({
           Component: CustomPublishButton,
           importMap: req.payload.importMap,
+          serverProps,
         })
       }
       const CustomSaveDraftButton =
@@ -87,6 +97,7 @@ export const renderDocumentSlots: (args: {
         components.SaveDraftButton = RenderServerComponent({
           Component: CustomSaveDraftButton,
           importMap: req.payload.importMap,
+          serverProps,
         })
       }
     } else {
@@ -98,6 +109,7 @@ export const renderDocumentSlots: (args: {
         components.SaveButton = RenderServerComponent({
           Component: CustomSaveButton,
           importMap: req.payload.importMap,
+          serverProps,
         })
       }
     }
diff --git a/packages/payload/src/config/types.ts b/packages/payload/src/config/types.ts
index 9a455c93fa9..1eee12794c2 100644
--- a/packages/payload/src/config/types.ts
+++ b/packages/payload/src/config/types.ts
@@ -704,7 +704,7 @@ export type Config = {
       | 'default'
       | 'gravatar'
       | {
-          Component: PayloadComponent<never>
+          Component: PayloadComponent
         }
     /**
      * Add extra and/or replace built-in components with custom components