feat(next): add custom admin footer

packages/next/src/templates/Default/index.tsx

@@ -62,7 +62,7 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
     admin: {
       avatar,
       components,
-      components: { header: CustomHeader, Nav: CustomNav } = {
+      components: { footer: CustomFooter, header: CustomHeader, Nav: CustomNav } = {
         header: undefined,
         Nav: undefined,
       },
@@ -189,6 +189,12 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
               </div>
             </Wrapper>
           </div>
+          {RenderServerComponent({
+            clientProps,
+            Component: CustomFooter,
+            importMap: payload.importMap,
+            serverProps,
+          })}
         </ActionsProvider>
       </BulkUploadProvider>
     </EntityVisibilityProvider>

packages/payload/src/bin/generateImportMap/iterateConfig.ts

@@ -56,6 +56,7 @@ export function iterateConfig({
 
   addToImportMap(config.admin?.components?.Nav)
   addToImportMap(config.admin?.components?.header)
+  addToImportMap(config.admin?.components?.footer)
   addToImportMap(config.admin?.components?.logout?.Button)
   addToImportMap(config.admin?.components?.graphics?.Icon)
   addToImportMap(config.admin?.components?.graphics?.Logo)

packages/payload/src/config/types.ts

@@ -805,6 +805,10 @@ export type Config = {
        * Add custom components before the navigation links
        */
       beforeNavLinks?: CustomComponent[]
+      /**
+       * Add custom footer to bottom of page globally
+       */
+      footer?: CustomComponent[]
       /** Replace graphical components */
       graphics?: {
         /** Replace the icon in the navigation */

test/admin/components/CustomFooter/index.tsx

@@ -0,0 +1,27 @@
+import type { PayloadServerReactComponent, SanitizedConfig } from 'payload'
+
+import React from 'react'
+
+const baseClass = 'custom-footer'
+
+export const CustomFooter: PayloadServerReactComponent<
+  SanitizedConfig['admin']['components']['footer'][0]
+> = () => {
+  return (
+    <div
+      className={baseClass}
+      style={{
+        alignItems: 'center',
+        backgroundColor: 'var(--theme-warning-100)',
+        display: 'flex',
+        padding: '0 var(--gutter-h)',
+        width: '100%',
+        zIndex: 'var(--z-modal)',
+      }}
+    >
+      <p style={{ color: 'var(--theme-warning-750)', margin: 0, padding: '1rem 0' }}>
+        Here is a custom footer inserted with admin.components.footer
+      </p>
+    </div>
+  )
+}

test/admin/config.ts

@@ -78,6 +78,7 @@ export default buildConfigWithDefaults({
         Icon: '/components/graphics/Icon.js#Icon',
       },
       header: ['/components/CustomHeader/index.js#CustomHeader'],
+      footer: ['/components/CustomFooter/index.js#CustomFooter'],
       logout: {
         Button: '/components/Logout/index.js#Logout',
       },

test/admin/e2e/general/e2e.spec.ts

@@ -716,6 +716,12 @@ describe('General', () => {
       const header = page.locator('.custom-header')
       await expect(header).toContainText('Here is a custom header')
     })
+
+    test('should render custom footer', async () => {
+      await page.goto(`${serverURL}/admin`)
+      const footer = page.locator('.custom-footer')
+      await expect(footer).toContainText('Here is a custom footer')
+    })
   })
 
   describe('i18n', () => {