feat(nested collections) legacy mode (#7387)

* feat(nested-collections): opt-in to legacy nested folder behaviour

* style: lint

* feat(nested-collection): default subfolders to true

* test(nested-collections): keep the tests in the subfolders: false scenario

Author: demshy

dev-test/config.yml

@@ -62,7 +62,7 @@ collections: # A list of collections the CMS should be able to edit
     folder: '_restaurants'
     slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
     summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
-    create: true # Allow users to create new documents in this collection    
+    create: true # Allow users to create new documents in this collection
     editor:
       visualEditing: true
     fields: # The fields each document in this collection have
@@ -276,7 +276,7 @@ collections: # A list of collections the CMS should be able to edit
     label_singular: 'Page'
     folder: _pages
     create: true
-    nested: { depth: 100 }
+    nested: { depth: 100, subfolders: false }
     fields:
       - label: Title
         name: title

packages/decap-cms-core/index.d.ts

@@ -310,6 +310,7 @@ declare module 'decap-cms-core' {
     publish?: boolean;
     nested?: {
       depth: number;
+      subfolders?: boolean;
     };
     meta?: { path?: { label: string; widget: string; index_file: string } };
 

packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js

@@ -117,7 +117,7 @@ export class EntriesCollection extends React.Component {
   }
 }
 
-export function filterNestedEntries(path, collectionFolder, entries) {
+export function filterNestedEntries(path, collectionFolder, entries, subfolders) {
   const filtered = entries.filter(e => {
     let entryPath = e.get('path').slice(collectionFolder.length + 1);
     if (!entryPath.startsWith(path)) {
@@ -130,6 +130,13 @@ export function filterNestedEntries(path, collectionFolder, entries) {
       entryPath = entryPath.slice(path.length + 1);
     }
 
+    // if subfolders legacy mode is enabled, show only immediate subfolders
+    // also show index file in root folder
+    if (subfolders) {
+      const depth = entryPath.split('/').length;
+      return path ? depth === 2 : depth <= 2;
+    }
+
     // only show immediate children
     return !entryPath.includes('/');
   });
@@ -145,7 +152,12 @@ function mapStateToProps(state, ownProps) {
 
   if (collection.has('nested')) {
     const collectionFolder = collection.get('folder');
-    entries = filterNestedEntries(filterTerm || '', collectionFolder, entries);
+    entries = filterNestedEntries(
+      filterTerm || '',
+      collectionFolder,
+      entries,
+      collection.get('nested').get('subfolders') !== false,
+    );
   }
   const entriesLoaded = selectEntriesLoaded(state.entries, collection.get('name'));
   const isFetching = selectIsFetching(state.entries, collection.get('name'));

packages/decap-cms-core/src/components/Collection/Entries/__tests__/EntriesCollection.spec.js

@@ -115,7 +115,9 @@ describe('EntriesCollection', () => {
     });
 
     const { asFragment } = renderWithRedux(
-      <ConnectedEntriesCollection collection={collection.set('nested', fromJS({ depth: 10 }))} />,
+      <ConnectedEntriesCollection
+        collection={collection.set('nested', fromJS({ depth: 10, subfolders: false }))}
+      />,
       {
         store,
       },
@@ -140,7 +142,7 @@ describe('EntriesCollection', () => {
 
     const { asFragment } = renderWithRedux(
       <ConnectedEntriesCollection
-        collection={collection.set('nested', fromJS({ depth: 10 }))}
+        collection={collection.set('nested', fromJS({ depth: 10, subfolders: false }))}
         filterTerm="dir3/dir4"
       />,
       {

packages/decap-cms-core/src/components/Collection/Entries/__tests__/__snapshots__/EntriesCollection.spec.js.snap

@@ -16,7 +16,7 @@ exports[`EntriesCollection should render show only immediate children for nested
 <DocumentFragment>
   <mock-entries
     collectionname="Pages"
-    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10 } }"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10, \\"subfolders\\": false } }"
     cursor="[object Object]"
     entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } } ]"
     isfetching="false"
@@ -28,7 +28,7 @@ exports[`EntriesCollection should render with applied filter term for nested col
 <DocumentFragment>
   <mock-entries
     collectionname="Pages"
-    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10 } }"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10, \\"subfolders\\": false } }"
     cursor="[object Object]"
     entries="List [ Map { \\"slug\\": \\"dir3/dir4/index\\", \\"path\\": \\"src/pages/dir3/dir4/index.md\\", \\"data\\": Map { \\"title\\": \\"File 4\\" } } ]"
     isfetching="false"

packages/decap-cms-core/src/components/Collection/NestedCollection.js

@@ -79,8 +79,13 @@ function TreeNode(props) {
   const collectionName = collection.get('name');
 
   const sortedData = sortBy(treeData, getNodeTitle);
+  const subfolders = collection.get('nested')?.get('subfolders') !== false;
   return sortedData.map(node => {
-    const leaf = node.children.length === 0 && depth > 0;
+    const leaf =
+      depth > 0 &&
+      (subfolders
+        ? node.children.length <= 1 && !node.children[0]?.isDir
+        : node.children.length === 0);
     if (leaf) {
       return null;
     }
@@ -90,7 +95,11 @@ function TreeNode(props) {
     }
     const title = getNodeTitle(node);
 
-    const hasChildren = depth === 0 || node.children.some(c => c.isDir);
+    const hasChildren =
+      depth === 0 ||
+      (subfolders
+        ? node.children.some(c => c.children.some(c => c.isDir))
+        : node.children.some(c => c.isDir));
 
     return (
       <React.Fragment key={node.path}>

packages/decap-cms-core/src/components/Collection/__tests__/NestedCollection.spec.js

@@ -37,6 +37,9 @@ describe('NestedCollection', () => {
     label: 'Pages',
     folder: 'src/pages',
     fields: [{ name: 'title', widget: 'string' }],
+    nested: {
+      subfolders: false,
+    },
   });
 
   it('should render correctly with no entries', () => {

packages/decap-cms-core/src/constants/configSchema.js

@@ -260,6 +260,7 @@ function getConfigSchema() {
               type: 'object',
               properties: {
                 depth: { type: 'number', minimum: 1, maximum: 1000 },
+                subfolders: { type: 'boolean' },
                 summary: { type: 'string' },
               },
               required: ['depth'],

packages/decap-cms-core/src/types/redux.ts

@@ -582,7 +582,7 @@ export type CollectionFile = StaticallyTypedRecord<{
 
 export type CollectionFiles = List<CollectionFile>;
 
-type NestedObject = { depth: number };
+type NestedObject = { depth: number; subfolders?: boolean };
 
 type Nested = StaticallyTypedRecord<NestedObject>;