Can’t add custom view under new path to collection

[robinscholz]

We are currently trying to implement a custom grid view for a media collection in addition to the standard list and edit views, but fail to configure it.

We have tried multiple different path configs, none of which seem to be respected.

    const mediaCollectionWithViews = {
      ...mediaCollection,
      admin: {
        ...mediaCollection.admin,
        components: {
          ...mediaCollection.admin?.components,
          views: {
            ...(mediaCollection.admin?.components?.views ?? {}),
            grid: {
              Component: '@maas/payload-plugin-media-cloud/components#GridView',
              path: `/grid`,
              exact: true,
            },
          },
        },
      },
    }

Sadly this is rather poorly documented and I also can’t find a working example anywhere. My suspicion is that this is somehow not possible. Maybe due to the code here: https://github.com/payloadcms/payload/blob/main/packages/next/src/views/Root/getRouteData.ts ?

[robinscholz]

Essentially I end up here

[robinscholz]

I’ve tried

/grid
/collection/media/grid
/something-else
etc. 

both with exact set and not set to true.

[robinscholz]

Possibly related #14061

[robinscholz]

payload/packages/next/src/views/Root/getRouteData.ts

Line 372 in 0f55464

} else {

It appears that there is no logic implemented here to render custom views for collections under new routes, unlike what’s sparsely stated in the docs.

Another related issue that was somewhat solved here: #8664

[robinscholz]

Without knowing the specifics of payloads internals, something like this could be sufficient?

} else {
  // Check for custom views other than 'list' and 'edit'
  const customViewKeys = Array.from(
    Object.keys(collectionConfig.admin.components?.views || {}),
  )
  if (customViewKeys.some((key) => key !== 'list' && key !== 'edit')) {
    customViewKeys.forEach((key) => {
      if (segmentThree !== key) {
        return
      }
      const customView = collectionConfig.admin.components?.views?.[key]
  
      if (customView?.view?.Component) {
        ViewToRender = {
          view: {
            payloadComponent: customView.view.Component,
          },
          viewKey: key,
        }
      }
    })
  } else {
    // Collection Edit Views
    // --> /collections/:collectionSlug/create
    // --> /collections/:collectionSlug/:id
    // --> /collections/:collectionSlug/:id/api
    // --> /collections/:collectionSlug/:id/versions
    // --> /collections/:collectionSlug/:id/versions/:versionID
    routeParams.id = segmentThree === 'create' ? undefined : segmentThree
    routeParams.versionID = segmentFive
  
    ViewToRender = {
      Component: DocumentView,
    }
  
    templateClassName = `collection-default-edit`
    templateType = 'default'
  
    const viewInfo = getDocumentViewInfo([segmentFour, segmentFive])
    viewType = viewInfo.viewType
    documentSubViewType = viewInfo.documentSubViewType
  
    viewActions.push(
      ...getSubViewActions({
        collectionOrGlobal: collectionConfig,
        viewKeyArg: documentSubViewType,
      }),
    )
  }
}

Maybe @jacobsfletch and @JarrodMFlesch could chime in, since they have written the original logic I believe.