feat(media dir nav): navigation through sub directories and breadcrumbs

dev-test/config.yml

@@ -1,10 +1,11 @@
 backend:
-  name: test-repo
+  name: github
+  repo: andrew-paterson/netlify-cms-hugo-test-site
 
 site_url: https://example.com
 
 publish_mode: editorial_workflow
-media_folder: assets/uploads
+media_folder: static/images
 
 collections: # A list of collections the CMS should be able to edit
   - name: 'posts' # Used in routes, ie.: /admin/collections/:slug/edit
@@ -13,7 +14,8 @@ collections: # A list of collections the CMS should be able to edit
     description: >
       The description is a great place for tone setting, high level information, and editing
       guidelines that are specific to a collection.
-    folder: '_posts'
+    folder: 'content/posts'
+    media_folder: '/static/images/one'
     slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
     summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
     create: true # Allow users to create new documents in this collection
@@ -44,14 +46,19 @@ collections: # A list of collections the CMS should be able to edit
           time_format: 'HH:mm',
           format: 'YYYY-MM-DD HH:mm',
         }
+      - label: 'Other Image'
+        name: 'other'
+        widget: 'image'
+        required: false
+        tagname: ''
       - label: 'Cover Image'
         name: 'image'
         widget: 'image'
         required: false
         tagname: ''
-
+        media_folder: '/static/images/one/one-deeper'
+        disable_media_folder_navigation: true
       - { label: 'Body', name: 'body', widget: 'markdown', hint: 'Main content goes here.' }
-
   - name: 'faq' # Used in routes, ie.: /admin/collections/:slug/edit
     label: 'FAQ' # Used in the UI
     folder: '_faqs'

packages/netlify-cms-backend-github/src/API.ts

@@ -55,8 +55,13 @@ export interface Config {
   cmsLabelPrefix: string;
 }
 
+export enum TreeFileType {
+  TREE = 'tree',
+  BLOB = 'blob',
+}
+
 interface TreeFile {
-  type: 'blob' | 'tree';
+  type: TreeFileType;
   sha: string;
   path: string;
   raw?: string;
@@ -375,7 +380,9 @@ export default class API {
             this.request(`${this.repoURL}/git/trees`, {
               method: 'POST',
               body: JSON.stringify({
-                tree: [{ path: 'README.md', mode: '100644', type: 'blob', sha: item.sha }],
+                tree: [
+                  { path: 'README.md', mode: '100644', type: TreeFileType.BLOB, sha: item.sha },
+                ],
               }),
             }),
           )
@@ -653,8 +660,8 @@ export default class API {
 
   async listFiles(
     path: string,
-    { repoURL = this.repoURL, branch = this.branch, depth = 1 } = {},
-  ): Promise<{ type: string; id: string; name: string; path: string; size: number }[]> {
+    { repoURL = this.repoURL, branch = this.branch, depth = 1, types = [TreeFileType.BLOB] } = {},
+  ): Promise<{ type: TreeFileType; id: string; name: string; path: string; size: number }[]> {
     const folder = trim(path, '/');
     try {
       const result: Octokit.GitGetTreeResponse = await this.request(
@@ -668,9 +675,12 @@ export default class API {
       return (
         result.tree
           // filter only files and up to the required depth
-          .filter(file => file.type === 'blob' && file.path.split('/').length <= depth)
+          .filter(
+            file =>
+              types.includes(file.type as TreeFileType) && file.path.split('/').length <= depth,
+          )
           .map(file => ({
-            type: file.type,
+            type: file.type as TreeFileType,
             id: file.sha,
             name: basename(file.path),
             path: `${folder}/${file.path}`,
@@ -1373,7 +1383,7 @@ export default class API {
       const entry = {
         path: trimStart(file.path, '/'),
         mode: '100644',
-        type: 'blob',
+        type: TreeFileType.BLOB,
         sha: file.sha,
       } as TreeEntry;
 
@@ -1395,14 +1405,14 @@ export default class API {
         tree.push({
           path: file.path,
           mode: '100644',
-          type: 'blob',
+          type: TreeFileType.BLOB,
           sha: null,
         });
         // create in new path
         tree.push({
           path: file.path.replace(sourceDir, destDir),
           mode: '100644',
-          type: 'blob',
+          type: TreeFileType.BLOB,
           sha: file.path === from ? sha : file.id,
         });
       }

packages/netlify-cms-backend-github/src/GraphQLAPI.ts

@@ -18,7 +18,14 @@ import {
 } from 'netlify-cms-lib-util';
 import { trim, trimStart } from 'lodash';
 import introspectionQueryResultData from './fragmentTypes';
-import API, { Config, BlobArgs, API_NAME, PullRequestState, MOCK_PULL_REQUEST } from './API';
+import API, {
+  Config,
+  BlobArgs,
+  API_NAME,
+  PullRequestState,
+  MOCK_PULL_REQUEST,
+  TreeFileType,
+} from './API';
 import * as queries from './queries';
 import * as mutations from './mutations';
 import { GraphQLError } from 'graphql';
@@ -35,7 +42,7 @@ interface TreeEntry {
   object?: {
     entries: TreeEntry[];
   };
-  type: 'blob' | 'tree';
+  type: TreeFileType;
   name: string;
   sha: string;
   blob?: {
@@ -47,7 +54,7 @@ interface TreeFile {
   path: string;
   id: string;
   size: number;
-  type: string;
+  type: TreeFileType;
   name: string;
 }
 
@@ -337,30 +344,35 @@ export default class GraphQLAPI extends API {
     }
   }
 
-  getAllFiles(entries: TreeEntry[], path: string) {
+  getAllFiles(entries: TreeEntry[], path: string, types: TreeFileType[]) {
     const allFiles: TreeFile[] = entries.reduce((acc, item) => {
-      if (item.type === 'tree') {
+      const itemToAdd = {
+        name: item.name,
+        type: item.type,
+        id: item.sha,
+        path: `${path}/${item.name}`,
+        size: item.blob ? item.blob.size : 0,
+      };
+      if (item.type === TreeFileType.BLOB) {
+        return [...acc, itemToAdd];
+      }
+
+      if (item.type === TreeFileType.TREE) {
         const entries = item.object?.entries || [];
-        return [...acc, ...this.getAllFiles(entries, `${path}/${item.name}`)];
-      } else if (item.type === 'blob') {
-        return [
-          ...acc,
-          {
-            name: item.name,
-            type: item.type,
-            id: item.sha,
-            path: `${path}/${item.name}`,
-            size: item.blob ? item.blob.size : 0,
-          },
-        ];
+        const currentDir = types.includes(TreeFileType.TREE) ? [itemToAdd] : [];
+        const subFiles = this.getAllFiles(entries, `${path}/${item.name}`, types);
+        return [...acc, ...currentDir, ...subFiles];
       }
 
       return acc;
     }, [] as TreeFile[]);
     return allFiles;
   }
 
-  async listFiles(path: string, { repoURL = this.repoURL, branch = this.branch, depth = 1 } = {}) {
+  async listFiles(
+    path: string,
+    { repoURL = this.repoURL, branch = this.branch, depth = 1, types = [TreeFileType.BLOB] } = {},
+  ) {
     const { owner, name } = this.getOwnerAndNameFromRepoUrl(repoURL);
     const folder = trim(path, '/');
     const { data } = await this.query({
@@ -369,7 +381,7 @@ export default class GraphQLAPI extends API {
     });
 
     if (data.repository.object) {
-      const allFiles = this.getAllFiles(data.repository.object.entries, folder);
+      const allFiles = this.getAllFiles(data.repository.object.entries, folder, types);
       return allFiles;
     } else {
       return [];

packages/netlify-cms-backend-github/src/__tests__/GraphQLAPI.spec.js

@@ -41,7 +41,7 @@ describe('github GraphQL API', () => {
       ];
       const path = 'posts';
 
-      expect(api.getAllFiles(entries, path)).toEqual([
+      expect(api.getAllFiles(entries, path, ['blob'])).toEqual([
         {
           name: 'post-1.md',
           id: 'sha-1',
@@ -65,5 +65,70 @@ describe('github GraphQL API', () => {
         },
       ]);
     });
+
+    it('should should return directories when types includes `tree`', () => {
+      const api = new GraphQLAPI({ branch: 'gh-pages', repo: 'owner/my-repo' });
+      const entries = [
+        {
+          name: 'post-1.md',
+          sha: 'sha-1',
+          type: 'blob',
+          blob: { size: 1 },
+        },
+        {
+          name: 'post-2.md',
+          sha: 'sha-2',
+          type: 'blob',
+          blob: { size: 2 },
+        },
+        {
+          name: '2019',
+          sha: 'dir-sha',
+          type: 'tree',
+          object: {
+            entries: [
+              {
+                name: 'nested-post.md',
+                sha: 'nested-post-sha',
+                type: 'blob',
+                blob: { size: 3 },
+              },
+            ],
+          },
+        },
+      ];
+      const path = 'posts';
+
+      expect(api.getAllFiles(entries, path, ['blob', 'tree'])).toEqual([
+        {
+          name: 'post-1.md',
+          id: 'sha-1',
+          type: 'blob',
+          size: 1,
+          path: 'posts/post-1.md',
+        },
+        {
+          name: 'post-2.md',
+          id: 'sha-2',
+          type: 'blob',
+          size: 2,
+          path: 'posts/post-2.md',
+        },
+        {
+          name: '2019',
+          id: 'dir-sha',
+          type: 'tree',
+          size: 0,
+          path: 'posts/2019',
+        },
+        {
+          name: 'nested-post.md',
+          id: 'nested-post-sha',
+          type: 'blob',
+          size: 3,
+          path: 'posts/2019/nested-post.md',
+        },
+      ]);
+    });
   });
 });

packages/netlify-cms-backend-github/src/implementation.tsx

@@ -34,7 +34,7 @@ import {
 } from 'netlify-cms-lib-util';
 import AuthenticationPage from './AuthenticationPage';
 import { Octokit } from '@octokit/rest';
-import API, { API_NAME } from './API';
+import API, { API_NAME, TreeFileType } from './API';
 import GraphQLAPI from './GraphQLAPI';
 
 type GitHubUser = Octokit.UsersGetAuthenticatedResponse;
@@ -436,14 +436,25 @@ export default class GitHub implements Implementation {
       .catch(() => ({ file: { path, id: null }, data: '' }));
   }
 
-  getMedia(mediaFolder = this.mediaFolder) {
-    return this.api!.listFiles(mediaFolder).then(files =>
-      files.map(({ id, name, size, path }) => {
-        // load media using getMediaDisplayURL to avoid token expiration with GitHub raw content urls
-        // for private repositories
-        return { id, name, size, displayURL: { id, path }, path };
-      }),
-    );
+  async getMedia(mediaFolder = this.mediaFolder) {
+    const files = await this.api!.listFiles(mediaFolder, {
+      types: [TreeFileType.BLOB, TreeFileType.TREE],
+      depth: 100,
+    });
+    const withDisplayUrls = files.map(({ id, name, size, path, type }) => {
+      // load media using getMediaDisplayURL to avoid token expiration with GitHub raw content urls
+      // for private repositories
+      return {
+        id,
+        name,
+        size,
+        displayURL: { id, path },
+        path,
+        isDirectory: type === TreeFileType.TREE,
+        hasChildren: files.filter(file => file.path.startsWith(path)).length > 1,
+      };
+    });
+    return withDisplayUrls;
   }
 
   async getMediaFile(path: string) {

packages/netlify-cms-core/src/actions/mediaLibrary.ts

@@ -209,15 +209,24 @@ function createMediaFileFromAsset({
 }
 
 export function persistMedia(file: File, opts: MediaOptions = {}) {
-  const { privateUpload, field } = opts;
+  const { privateUpload, field, currentMediaFolder } = opts;
   return async (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
     const state = getState();
     const backend = currentBackend(state.config);
     const integration = selectIntegration(state, null, 'assetStore');
     const files: MediaFile[] = selectMediaFiles(state, field);
     const fileName = sanitizeSlug(file.name.toLowerCase(), state.config.get('slug'));
-    const existingFile = files.find(existingFile => existingFile.name.toLowerCase() === fileName);
-
+    const entry = state.entryDraft.get('entry');
+    const collection = state.collections.get(entry?.get('collection'));
+    const path = selectMediaFilePath(
+      state.config,
+      collection,
+      entry,
+      fileName,
+      field,
+      currentMediaFolder,
+    );
+    const existingFile = files.find(existingFile => existingFile.path.toLowerCase() === path);
     const editingDraft = selectEditingDraft(state.entryDraft);
 
     /**
@@ -263,7 +272,14 @@ export function persistMedia(file: File, opts: MediaOptions = {}) {
       } else {
         const entry = state.entryDraft.get('entry');
         const collection = state.collections.get(entry?.get('collection'));
-        const path = selectMediaFilePath(state.config, collection, entry, fileName, field);
+        const path = selectMediaFilePath(
+          state.config,
+          collection,
+          entry,
+          fileName,
+          field,
+          currentMediaFolder,
+        );
         assetProxy = createAssetProxy({
           file,
           path,
@@ -413,6 +429,7 @@ export function mediaLoading(page: number) {
 interface MediaOptions {
   privateUpload?: boolean;
   field?: EntryField;
+  currentMediaFolder?: string;
 }
 
 export function mediaLoaded(files: ImplementationMediaFile[], opts: MediaOptions = {}) {