Add single document with tabs sample

app/containers/App/App.jsx

@@ -11,7 +11,7 @@ import {
   registerProgressCallback
 } from 'lib/api-bridge-client'
 import AuthenticatedRoute from './AuthenticatedRoute'
-import buildGroupedRoutes from './buildGroupedRoutes'
+import buildRoutes from './buildRoutes'
 import {connectRedux} from 'lib/redux'
 import {debounce} from 'lib/util'
 import DocumentEditView from 'views/DocumentEditView/DocumentEditView'
@@ -23,32 +23,6 @@ import ProfileEditView from 'views/ProfileEditView/ProfileEditView'
 import React from 'react'
 import SignInView from 'views/SignInView/SignInView'
 
-const baseRoutes = [
-  {
-    path: '/:collection/new/:section?',
-    render: props => <DocumentEditView isNewDocument {...props} />
-  },
-  {
-    path: '/:collection/:documentId/:section?',
-    component: DocumentEditView
-  },
-  {
-    path: '/:collection',
-    component: DocumentListView
-  }
-]
-
-function buildRoutes({menu, isMultiProperty}) {
-  const routes = [...buildGroupedRoutes(menu, baseRoutes), ...baseRoutes]
-
-  return isMultiProperty
-    ? routes.map(route => ({
-        ...route,
-        path: '/:property' + route.path
-      }))
-    : routes
-}
-
 class App extends React.Component {
   constructor(props) {
     super(props)

app/containers/App/buildRoutes.js

@@ -0,0 +1,104 @@
+import DocumentEditView from 'views/DocumentEditView/DocumentEditView'
+import DocumentListView from 'views/DocumentListView/DocumentListView'
+import React from 'react'
+import {slugify} from '../../../shared/lib/string'
+
+const baseRoutes = [
+  {
+    path: '/:collection/new/:section?',
+    render: props => <DocumentEditView {...props} isNewDocument />
+  },
+  {
+    path: '/:collection/:documentId/:section?',
+    component: DocumentEditView
+  },
+  {
+    path: '/:collection',
+    component: DocumentListView
+  }
+]
+
+export default function buildRoutes({
+  collections = [],
+  menu: menuGroups = [],
+  isMultiProperty
+}) {
+  const singleDocCollections = []
+  const multiDocCollections = []
+
+  for (const collection of collections) {
+    if (
+      collection.settings &&
+      collection.settings.publish &&
+      collection.settings.publish.isSingleDocument
+    ) {
+      singleDocCollections.push(collection)
+    } else {
+      multiDocCollections.push(collection)
+    }
+  }
+
+  const validMenuGroups = menuGroups
+    .filter(
+      group =>
+        typeof group.title === 'string' &&
+        group.title.length &&
+        Array.isArray(group.collections) &&
+        group.collections.length
+    )
+    .map(group => ({...group, slug: slugify(group.title)}))
+
+  const singleDocRoutes = singleDocCollections.map(collection => {
+    const group = validMenuGroups.find(group =>
+      group.collections.includes(collection.slug)
+    )
+
+    return {
+      path: (group ? `/${group.slug}` : '') + `/${collection.slug}/:section?`,
+      render: props => {
+        const {params} = props.route
+
+        params.group = group ? group.slug : undefined
+        params.collection = collection.slug
+
+        return <DocumentListView {...props} isSingleDocument />
+      }
+    }
+  })
+
+  const multiDocRoutes = validMenuGroups
+    .map(group =>
+      group.collections.map(collectionSlug =>
+        baseRoutes.map(route => ({
+          path: `/${group.slug}${route.path.replace(
+            ':collection',
+            collectionSlug
+          )}`,
+          render(props) {
+            const {params} = props.route
+
+            params.group = group.slug
+            params.collection = collectionSlug
+
+            if (route.render) {
+              return route.render(props)
+            }
+
+            const Component = route.component
+
+            return <Component {...props} />
+          }
+        }))
+      )
+    )
+    .flat(2)
+
+  const routes = [...singleDocRoutes, ...multiDocRoutes, ...baseRoutes]
+
+  return isMultiProperty
+    ? routes.map(route => ({
+        ...route,
+        path: '/:property' + route.path
+      }))
+    : routes
+}

app/lib/util/url.js

@@ -71,9 +71,12 @@ export function buildUrl({
   group = this.props.route.params.group,
   property = this.props.route.params.property,
   search = this.props.route.search,
-  section = this.props.route.params.section
+  section
 } = {}) {
-  if (!createNew && !documentId) section = null
+  if (createNew || documentId) {
+    section = section || this.props.route.params.section
+  }
+
   if (createNew) documentId = 'new'
 
   const urlNodes = [property, group, collection, documentId, section]

app/views/DocumentEditView/DocumentEditView.jsx

@@ -198,7 +198,7 @@ class DocumentEditView extends React.Component {
   // - `name`: name of the section
   // - `slug`: slug of the section
   groupFieldsIntoSections(fields) {
-    const {documentId, onBuildBaseUrl, route} = this.props
+    const {isNewDocument, onBuildBaseUrl, route} = this.props
     const {section: activeSectionSlug} = route.params
 
     const sections = {}
@@ -236,7 +236,7 @@ class DocumentEditView extends React.Component {
       return {
         fields: fieldsInPlacements,
         href: onBuildBaseUrl.call(this, {
-          createNew: !documentId,
+          createNew: isNewDocument,
           section: slug
         }),
         isActive,

app/views/DocumentListView/DocumentListView.jsx

@@ -546,6 +546,7 @@ class DocumentListView extends React.Component {
 
 function mapState(state, ownProps) {
   const {
+    isSingleDocument,
     route: {params, search, searchString}
   } = ownProps
 
@@ -556,12 +557,6 @@ function mapState(state, ownProps) {
           return collection.slug === params.collection
         })
 
-  const isSingleDocument =
-    collection &&
-    collection.settings &&
-    collection.settings.publish &&
-    collection.settings.publish.isSingleDocument
-
   const {group} = params
   const contentKey = isSingleDocument
     ? JSON.stringify({collection: collection && collection.slug})
@@ -579,7 +574,6 @@ function mapState(state, ownProps) {
   return {
     collection,
     contentKey,
-    isSingleDocument,
     selectionKey,
     state
   }

dev-config/config.ci.json

@@ -40,6 +40,10 @@
             "field-test"
           ],
           "title": "Field Testing"
+        },
+        {
+          "collections": ["test-single-document", "test-single-document-tabs"],
+          "title": "Single Document"
         }
       ]
     }

dev-config/config.test.json

@@ -33,6 +33,10 @@
           "no-filterable-fields"
         ],
         "title": "Field Testing"
+      },
+      {
+        "collections": ["test-single-document", "test-single-document-tabs"],
+        "title": "Single Document"
       }
     ]
   }