feat(nested collections): allow non-index files

cypress/e2e/editorial_workflow_spec_test_backend.js

@@ -207,17 +207,16 @@ describe('Test Backend Editorial Workflow', () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory'));
+    inSidebar(() => cy.contains('a', /^Directory$/));
     inGrid(() => cy.contains('a', 'Root Page'));
-    inGrid(() => cy.contains('a', 'Directory'));
 
-    inSidebar(() => cy.contains('a', 'Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
 
-    inGrid(() => cy.contains('a', 'Sub Directory'));
-    inGrid(() => cy.contains('a', 'Another Sub Directory'));
+    inSidebar(() => cy.contains('a', /^Sub Directory$/));
+    inSidebar(() => cy.contains('a', 'Another Sub Directory'));
 
-    inSidebar(() => cy.contains('a', 'Sub Directory').click());
-    inGrid(() => cy.contains('a', 'Nested Directory'));
+    inSidebar(() => cy.contains('a', /^Sub Directory$/).click());
+    inSidebar(() => cy.contains('a', 'Nested Directory'));
     cy.url().should(
       'eq',
       'http://localhost:8080/#/collections/pages/filter/directory/sub-directory',
@@ -233,21 +232,17 @@ describe('Test Backend Editorial Workflow', () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inGrid(() => cy.contains('a', 'Another Sub Directory').click());
-
-    cy.url().should(
-      'eq',
-      'http://localhost:8080/#/collections/pages/entries/directory/another-sub-directory/index',
-    );
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', 'Another Sub Directory').click());
+    inGrid(() => cy.contains('a', 'Another Sub Directory'));
   });
 
   it(`can create a new entry with custom path`, () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inSidebar(() => cy.contains('a', 'Sub Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', /^Sub Directory$/).click());
     cy.contains('a', 'New Page').click();
 
     cy.get('[id^="path-field"]').should('have.value', 'directory/sub-directory');
@@ -262,18 +257,18 @@ describe('Test Backend Editorial Workflow', () => {
     publishEntryInEditor(publishTypes.publishNow);
     exitEditor();
 
-    inGrid(() => cy.contains('a', 'New Path Title'));
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
+    inSidebar(() => cy.contains('a', 'New Path Title'));
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
     inGrid(() => cy.contains('a', 'New Path Title').should('not.exist'));
   });
 
   it(`can't create an entry with an existing path`, () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inSidebar(() => cy.contains('a', 'Sub Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', /^Sub Directory$/).click());
 
     cy.contains('a', 'New Page').click();
     cy.get('[id^="title-field"]').type('New Path Title');
@@ -292,7 +287,8 @@ describe('Test Backend Editorial Workflow', () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inGrid(() => cy.contains('a', 'Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inGrid(() => cy.contains('a', /^Directory$/).click());
 
     cy.get('[id^="path-field"]').should('have.value', 'directory');
     cy.get('[id^="path-field"]').clear();
@@ -310,7 +306,7 @@ describe('Test Backend Editorial Workflow', () => {
 
     inSidebar(() => cy.contains('a', 'New Directory').click());
 
-    inGrid(() => cy.contains('a', 'Sub Directory'));
-    inGrid(() => cy.contains('a', 'Another Sub Directory'));
+    inSidebar(() => cy.contains('a', /^Sub Directory$/));
+    inSidebar(() => cy.contains('a', 'Another Sub Directory'));
   });
 });

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

@@ -119,20 +119,19 @@ export class EntriesCollection extends React.Component {
 
 export function filterNestedEntries(path, collectionFolder, entries) {
   const filtered = entries.filter(e => {
-    const entryPath = e.get('path').slice(collectionFolder.length + 1);
+    let entryPath = e.get('path').slice(collectionFolder.length + 1);
     if (!entryPath.startsWith(path)) {
       return false;
     }
 
-    // only show immediate children
+    // for subdirectories, trim off the parent folder corresponding to
+    // this nested collection entry
     if (path) {
-      // non root path
-      const trimmed = entryPath.slice(path.length + 1);
-      return trimmed.split('/').length === 2;
-    } else {
-      // root path
-      return entryPath.split('/').length <= 2;
+      entryPath = entryPath.slice(path.length + 1);
     }
+
+    // only show immediate children
+    return !entryPath.includes('/');
   });
   return filtered;
 }

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

@@ -45,11 +45,11 @@ describe('filterNestedEntries', () => {
     ];
     const entries = fromJS(entriesArray);
     expect(filterNestedEntries('dir3', 'src/pages', entries).toJS()).toEqual([
-      { slug: 'dir3/dir4/index', path: 'src/pages/dir3/dir4/index.md', data: { title: 'File 4' } },
+      { slug: 'dir3/index', path: 'src/pages/dir3/index.md', data: { title: 'File 3' } },
     ]);
   });
 
-  it('should return immediate children and root for root path', () => {
+  it('should return only immediate children for root path', () => {
     const entriesArray = [
       { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
       { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
@@ -60,8 +60,6 @@ describe('filterNestedEntries', () => {
     const entries = fromJS(entriesArray);
     expect(filterNestedEntries('', 'src/pages', entries).toJS()).toEqual([
       { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
-      { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
-      { slug: 'dir3/index', path: 'src/pages/dir3/index.md', data: { title: 'File 3' } },
     ]);
   });
 });
@@ -126,7 +124,7 @@ describe('EntriesCollection', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render apply filter term for nested collections', () => {
+  it('should render with applied filter term for nested collections', () => {
     const entriesArray = [
       { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
       { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },

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

@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EntriesCollection should render apply filter term for nested collections 1`] = `
+exports[`EntriesCollection should render connected component 1`] = `
 <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\\" }"
     cursor="[object Object]"
-    entries="List []"
+    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } }, Map { \\"slug\\": \\"dir1/index\\", \\"path\\": \\"src/pages/dir1/index.md\\", \\"data\\": Map { \\"title\\": \\"File 1\\" } }, Map { \\"slug\\": \\"dir2/index\\", \\"path\\": \\"src/pages/dir2/index.md\\", \\"data\\": Map { \\"title\\": \\"File 2\\" } } ]"
     isfetching="false"
   />
 </DocumentFragment>
 `;
 
-exports[`EntriesCollection should render connected component 1`] = `
+exports[`EntriesCollection should render show only immediate children for nested collection 1`] = `
 <DocumentFragment>
   <mock-entries
     collectionname="Pages"
-    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\" }"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10 } }"
     cursor="[object Object]"
-    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } }, Map { \\"slug\\": \\"dir1/index\\", \\"path\\": \\"src/pages/dir1/index.md\\", \\"data\\": Map { \\"title\\": \\"File 1\\" } }, Map { \\"slug\\": \\"dir2/index\\", \\"path\\": \\"src/pages/dir2/index.md\\", \\"data\\": Map { \\"title\\": \\"File 2\\" } } ]"
+    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } } ]"
     isfetching="false"
   />
 </DocumentFragment>
 `;
 
-exports[`EntriesCollection should render show only immediate children for nested collection 1`] = `
+exports[`EntriesCollection should render with applied filter term for nested collections 1`] = `
 <DocumentFragment>
   <mock-entries
     collectionname="Pages"
     collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10 } }"
     cursor="[object Object]"
-    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } }, Map { \\"slug\\": \\"dir1/index\\", \\"path\\": \\"src/pages/dir1/index.md\\", \\"data\\": Map { \\"title\\": \\"File 1\\" } }, Map { \\"slug\\": \\"dir3/index\\", \\"path\\": \\"src/pages/dir3/index.md\\", \\"data\\": Map { \\"title\\": \\"File 3\\" } } ]"
+    entries="List [ Map { \\"slug\\": \\"dir3/dir4/index\\", \\"path\\": \\"src/pages/dir3/dir4/index.md\\", \\"data\\": Map { \\"title\\": \\"File 4\\" } } ]"
     isfetching="false"
   />
 </DocumentFragment>

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

@@ -80,7 +80,7 @@ function TreeNode(props) {
 
   const sortedData = sortBy(treeData, getNodeTitle);
   return sortedData.map(node => {
-    const leaf = node.children.length <= 1 && !node.children[0]?.isDir && depth > 0;
+    const leaf = node.children.length === 0 && depth > 0;
     if (leaf) {
       return null;
     }
@@ -90,7 +90,7 @@ function TreeNode(props) {
     }
     const title = getNodeTitle(node);
 
-    const hasChildren = depth === 0 || node.children.some(c => c.children.some(c => c.isDir));
+    const hasChildren = depth === 0 || node.children.some(c => c.isDir);
 
     return (
       <React.Fragment key={node.path}>

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

@@ -138,6 +138,20 @@ exports[`NestedCollection should render connected component 1`] = `
   margin-right: 4px;
 }
 
+.emotion-6 {
+  position: relative;
+  top: 2px;
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-left: 6px solid currentColor;
+  border-right: 0;
+  color: currentColor;
+  left: 2px;
+}
+
 <a
     class="emotion-0 emotion-1"
     data-testid="/a"
@@ -155,6 +169,9 @@ exports[`NestedCollection should render connected component 1`] = `
       >
         File 1
       </div>
+      <div
+        class="emotion-6 emotion-7"
+      />
     </div>
   </a>
   .emotion-0 {
@@ -207,6 +224,20 @@ exports[`NestedCollection should render connected component 1`] = `
   margin-right: 4px;
 }
 
+.emotion-6 {
+  position: relative;
+  top: 2px;
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-left: 6px solid currentColor;
+  border-right: 0;
+  color: currentColor;
+  left: 2px;
+}
+
 <a
     class="emotion-0 emotion-1"
     data-testid="/b"
@@ -224,6 +255,9 @@ exports[`NestedCollection should render connected component 1`] = `
       >
         File 2
       </div>
+      <div
+        class="emotion-6 emotion-7"
+      />
     </div>
   </a>
 </DocumentFragment>
@@ -367,6 +401,20 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   margin-right: 4px;
 }
 
+.emotion-6 {
+  position: relative;
+  top: 2px;
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-left: 6px solid currentColor;
+  border-right: 0;
+  color: currentColor;
+  left: 2px;
+}
+
 <a
     class="emotion-0 emotion-1"
     data-testid="/a"
@@ -384,6 +432,9 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
       >
         File 1
       </div>
+      <div
+        class="emotion-6 emotion-7"
+      />
     </div>
   </a>
   .emotion-0 {
@@ -436,6 +487,20 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   margin-right: 4px;
 }
 
+.emotion-6 {
+  position: relative;
+  top: 2px;
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-left: 6px solid currentColor;
+  border-right: 0;
+  color: currentColor;
+  left: 2px;
+}
+
 <a
     class="emotion-0 emotion-1"
     data-testid="/b"
@@ -453,6 +518,9 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
       >
         File 2
       </div>
+      <div
+        class="emotion-6 emotion-7"
+      />
     </div>
   </a>
 </DocumentFragment>