chore: type getViewFromConfig, add viewActions to serverProps (#9404)

### What?
`viewActions` are not easily accessible in custom views.

### Why?
We extract view actions when we call `getViewFromConfig`, but never pass
them to the custom views.

### How?
Properly types return type for serverProps inside `getViewFromConfig`
and adds viewActions to serverProps so they are spread into props when
we build the custom view components.

Now custom server views will get the viewActions as a prop.

Fixes #9338

packages/next/src/views/Root/getViewFromConfig.ts

@@ -67,14 +67,13 @@ function getViewActions({
   return undefined
 }
 
-export const getViewFromConfig = ({
+type ServerPropsFromView = {
-  adminRoute,
+  collectionConfig?: SanitizedConfig['collections'][number]
-  config,
+  globalConfig?: SanitizedConfig['globals'][number]
-  currentRoute,
+  viewActions: CustomComponent[]
-  importMap,
+}
-  searchParams,
+
-  segments,
+type GetViewFromConfigArgs = {
-}: {
   adminRoute: string
   config: SanitizedConfig
   currentRoute: string
@@ -83,14 +82,24 @@ export const getViewFromConfig = ({
     [key: string]: string | string[]
   }
   segments: string[]
-}): {
+}
+
+type GetViewFromConfigResult = {
   DefaultView: ViewFromConfig
   initPageOptions: Parameters<typeof initPage>[0]
-  serverProps: Record<string, unknown>
+  serverProps: ServerPropsFromView
   templateClassName: string
   templateType: 'default' | 'minimal'
-  viewActions?: CustomComponent[]
+}
-} => {
+
+export const getViewFromConfig = ({
+  adminRoute,
+  config,
+  currentRoute,
+  importMap,
+  searchParams,
+  segments,
+}: GetViewFromConfigArgs): GetViewFromConfigResult => {
   let ViewToRender: ViewFromConfig = null
   let templateClassName: string
   let templateType: 'default' | 'minimal' | undefined
@@ -102,8 +111,6 @@ export const getViewFromConfig = ({
     searchParams,
   }
 
-  let viewActions: CustomComponent[] = config?.admin?.components?.actions || []
-
   const [segmentOne, segmentTwo, segmentThree, segmentFour, segmentFive] = segments
 
   const isGlobal = segmentOne === 'globals'
@@ -111,20 +118,18 @@ export const getViewFromConfig = ({
   let matchedCollection: SanitizedConfig['collections'][number] = undefined
   let matchedGlobal: SanitizedConfig['globals'][number] = undefined
 
-  let serverProps = {}
+  const serverProps: ServerPropsFromView = {
+    viewActions: config?.admin?.components?.actions || [],
+  }
 
   if (isCollection) {
     matchedCollection = config.collections.find(({ slug }) => slug === segmentTwo)
-    serverProps = {
+    serverProps.collectionConfig = matchedCollection
-      collectionConfig: matchedCollection,
-    }
   }
 
   if (isGlobal) {
     matchedGlobal = config.globals.find(({ slug }) => slug === segmentTwo)
-    serverProps = {
+    serverProps.globalConfig = matchedGlobal
-      globalConfig: matchedGlobal,
-    }
   }
 
   switch (segments.length) {
@@ -198,7 +203,9 @@ export const getViewFromConfig = ({
 
         templateClassName = `${segmentTwo}-list`
         templateType = 'default'
-        viewActions = viewActions.concat(matchedCollection.admin.components?.views?.list?.actions)
+        serverProps.viewActions = serverProps.viewActions.concat(
+          matchedCollection.admin.components?.views?.list?.actions,
+        )
       } else if (isGlobal && matchedGlobal) {
         // --> /globals/:globalSlug
 
@@ -210,7 +217,7 @@ export const getViewFromConfig = ({
         templateType = 'default'
 
         // add default view actions
-        viewActions = viewActions.concat(
+        serverProps.viewActions = serverProps.viewActions.concat(
           getViewActions({
             editConfig: matchedGlobal.admin?.components?.views?.edit,
             viewKey: 'default',
@@ -246,7 +253,7 @@ export const getViewFromConfig = ({
         // Adds view actions to the current collection view
         if (matchedCollection.admin?.components?.views?.edit) {
           if ('root' in matchedCollection.admin.components.views.edit) {
-            viewActions = viewActions.concat(
+            serverProps.viewActions = serverProps.viewActions.concat(
               getViewActions({
                 editConfig: matchedCollection.admin?.components?.views?.edit,
                 viewKey: 'root',
@@ -256,7 +263,7 @@ export const getViewFromConfig = ({
             if (segmentFive) {
               if (segmentFour === 'versions') {
                 // add version view actions
-                viewActions = viewActions.concat(
+                serverProps.viewActions = serverProps.viewActions.concat(
                   getViewActions({
                     editConfig: matchedCollection.admin?.components?.views?.edit,
                     viewKey: 'version',
@@ -266,7 +273,7 @@ export const getViewFromConfig = ({
             } else if (segmentFour) {
               if (segmentFour === 'versions') {
                 // add versions view actions
-                viewActions = viewActions.concat(
+                serverProps.viewActions = serverProps.viewActions.concat(
                   getViewActions({
                     editConfig: matchedCollection.admin?.components?.views.edit,
                     viewKey: 'versions',
@@ -274,7 +281,7 @@ export const getViewFromConfig = ({
                 )
               } else if (segmentFour === 'preview') {
                 // add livePreview view actions
-                viewActions = viewActions.concat(
+                serverProps.viewActions = serverProps.viewActions.concat(
                   getViewActions({
                     editConfig: matchedCollection.admin?.components?.views.edit,
                     viewKey: 'livePreview',
@@ -282,7 +289,7 @@ export const getViewFromConfig = ({
                 )
               } else if (segmentFour === 'api') {
                 // add api view actions
-                viewActions = viewActions.concat(
+                serverProps.viewActions = serverProps.viewActions.concat(
                   getViewActions({
                     editConfig: matchedCollection.admin?.components?.views.edit,
                     viewKey: 'api',
@@ -291,7 +298,7 @@ export const getViewFromConfig = ({
               }
             } else if (segmentThree) {
               // add default view actions
-              viewActions = viewActions.concat(
+              serverProps.viewActions = serverProps.viewActions.concat(
                 getViewActions({
                   editConfig: matchedCollection.admin?.components?.views.edit,
                   viewKey: 'default',
@@ -317,7 +324,7 @@ export const getViewFromConfig = ({
         // Adds view actions to the current global view
         if (matchedGlobal.admin?.components?.views?.edit) {
           if ('root' in matchedGlobal.admin.components.views.edit) {
-            viewActions = viewActions.concat(
+            serverProps.viewActions = serverProps.viewActions.concat(
               getViewActions({
                 editConfig: matchedGlobal.admin.components?.views?.edit,
                 viewKey: 'root',
@@ -327,7 +334,7 @@ export const getViewFromConfig = ({
             if (segmentFour) {
               if (segmentThree === 'versions') {
                 // add version view actions
-                viewActions = viewActions.concat(
+                serverProps.viewActions = serverProps.viewActions.concat(
                   getViewActions({
                     editConfig: matchedGlobal.admin?.components?.views?.edit,
                     viewKey: 'version',
@@ -337,7 +344,7 @@ export const getViewFromConfig = ({
             } else if (segmentThree) {
               if (segmentThree === 'versions') {
                 // add versions view actions
-                viewActions = viewActions.concat(
+                serverProps.viewActions = serverProps.viewActions.concat(
                   getViewActions({
                     editConfig: matchedGlobal.admin?.components?.views?.edit,
                     viewKey: 'versions',
@@ -345,7 +352,7 @@ export const getViewFromConfig = ({
                 )
               } else if (segmentThree === 'preview') {
                 // add livePreview view actions
-                viewActions = viewActions.concat(
+                serverProps.viewActions = serverProps.viewActions.concat(
                   getViewActions({
                     editConfig: matchedGlobal.admin?.components?.views?.edit,
                     viewKey: 'livePreview',
@@ -353,7 +360,7 @@ export const getViewFromConfig = ({
                 )
               } else if (segmentThree === 'api') {
                 // add api view actions
-                viewActions = viewActions.concat(
+                serverProps.viewActions = serverProps.viewActions.concat(
                   getViewActions({
                     editConfig: matchedGlobal.admin?.components?.views?.edit,
                     viewKey: 'api',
@@ -371,12 +378,13 @@ export const getViewFromConfig = ({
     ViewToRender = getCustomViewByRoute({ config, currentRoute })?.view
   }
 
+  serverProps.viewActions.reverse()
+
   return {
     DefaultView: ViewToRender,
     initPageOptions,
     serverProps,
     templateClassName,
     templateType,
-    viewActions: viewActions.reverse(),
   }
 }

packages/next/src/views/Root/index.tsx

@@ -57,21 +57,15 @@ export const RootPage = async ({
 
   const searchParams = await searchParamsPromise
 
-  const {
+  const { DefaultView, initPageOptions, serverProps, templateClassName, templateType } =
-    DefaultView,
+    getViewFromConfig({
-    initPageOptions,
+      adminRoute,
-    serverProps,
+      config,
-    templateClassName,
+      currentRoute,
-    templateType,
+      importMap,
-    viewActions,
+      searchParams,
-  } = getViewFromConfig({
+      segments,
-    adminRoute,
+    })
-    config,
-    currentRoute,
-    importMap,
-    searchParams,
-    segments,
-  })
 
   const initPageResult = await initPage(initPageOptions)
 
@@ -159,7 +153,7 @@ export const RootPage = async ({
           permissions={initPageResult?.permissions}
           searchParams={searchParams}
           user={initPageResult?.req.user}
-          viewActions={viewActions}
+          viewActions={serverProps.viewActions}
           visibleEntities={{
             // The reason we are not passing in initPageResult.visibleEntities directly is due to a "Cannot assign to read only property of object '#<Object>" error introduced in React 19
             // which this caused as soon as initPageResult.visibleEntities is passed in