[WIP] feat: commit media with post

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

@@ -1,6 +1,6 @@
 import { Base64 } from 'js-base64';
 import semaphore from 'semaphore';
-import { find, flow, get, hasIn, initial, last, partial, result, uniq } from 'lodash';
+import { find, flow, get, hasIn, initial, last, partial, result } from 'lodash';
 import { map } from 'lodash/fp';
 import {
   getAllResponses,
@@ -293,7 +293,7 @@ export default class API {
     return text;
   }
 
-  async getMediaDisplayURL(sha, path) {
+  async getMediaAsBlob(sha, path) {
     const response = await this.fetchBlob(sha, this.repoURL);
     let blob;
     if (path.match(/.svg$/)) {
@@ -302,6 +302,11 @@ export default class API {
     } else {
       blob = await response.blob();
     }
+    return blob;
+  }
+
+  async getMediaDisplayURL(sha, path) {
+    const blob = await this.getMediaAsBlob(sha, path);
 
     return URL.createObjectURL(blob);
   }
@@ -586,7 +591,7 @@ export default class API {
     return this.createPR(commitMessage, branchName);
   }
 
-  async editorialWorkflowGit(fileTree, entry, filesList, options) {
+  async editorialWorkflowGit(fileTree, entry, mediaFilesList, options) {
     const contentKey = this.generateContentKey(options.collectionName, entry.slug);
     const branchName = this.generateBranchName(contentKey);
     const unpublished = options.unpublished || false;
@@ -629,7 +634,7 @@ export default class API {
             path: entry.path,
             sha: entry.sha,
           },
-          files: filesList,
+          files: mediaFilesList,
         },
         timeStamp: new Date().toISOString(),
       });
@@ -641,12 +646,18 @@ export default class API {
       const metadataPromise = this.retrieveMetadata(contentKey);
       const [commit, metadata] = await Promise.all([commitPromise, metadataPromise]);
       const { title, description } = options.parsedData || {};
+
+      // remove any existing media files
       const metadataFiles = get(metadata.objects, 'files', []);
-      const files = [...metadataFiles, ...filesList];
+      await Promise.all(
+        metadataFiles.map(file =>
+          this.deleteFile(file.path, options.commitMessage, { branch: branchName }),
+        ),
+      );
       const pr = metadata.pr ? { ...metadata.pr, head: commit.sha } : undefined;
       const objects = {
         entry: { path: entry.path, sha: entry.sha },
-        files: uniq(files),
+        files: mediaFilesList,
       };
       const updatedMetadata = { ...metadata, pr, title, description, objects };
 

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

@@ -0,0 +1,118 @@
+import GitHubImplementation from '../implementation';
+
+describe('github backend implementation', () => {
+  describe('persistMedia', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const persistFiles = jest.fn();
+    const mockAPI = {
+      persistFiles,
+    };
+
+    persistFiles.mockImplementation((_, files) => {
+      files.forEach((file, index) => {
+        file.sha = index;
+      });
+    });
+
+    const createObjectURL = jest.fn();
+    global.URL = {
+      createObjectURL,
+    };
+
+    createObjectURL.mockReturnValue('displayURL');
+
+    const config = {
+      getIn: jest.fn().mockImplementation(array => {
+        if (array[0] === 'backend' && array[1] === 'repo') {
+          return 'owner/repo';
+        }
+        if (array[0] === 'backend' && array[1] === 'open_authoring') {
+          return false;
+        }
+        if (array[0] === 'backend' && array[1] === 'branch') {
+          return 'master';
+        }
+      }),
+    };
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should persist media file when not draft', async () => {
+      const gitHubImplementation = new GitHubImplementation(config);
+      gitHubImplementation.api = mockAPI;
+
+      const mediaFile = {
+        value: 'image.png',
+        fileObj: { size: 100 },
+        path: '/media/image.png',
+      };
+
+      expect.assertions(5);
+      await expect(gitHubImplementation.persistMedia(mediaFile)).resolves.toEqual({
+        id: 0,
+        name: 'image.png',
+        size: 100,
+        displayURL: 'displayURL',
+        path: 'media/image.png',
+        draft: undefined,
+      });
+
+      expect(persistFiles).toHaveBeenCalledTimes(1);
+      expect(persistFiles).toHaveBeenCalledWith(null, [mediaFile], {});
+      expect(createObjectURL).toHaveBeenCalledTimes(1);
+      expect(createObjectURL).toHaveBeenCalledWith(mediaFile.fileObj);
+    });
+
+    it('should not persist media file when draft', async () => {
+      const gitHubImplementation = new GitHubImplementation(config);
+      gitHubImplementation.api = mockAPI;
+
+      createObjectURL.mockReturnValue('displayURL');
+
+      const mediaFile = {
+        value: 'image.png',
+        fileObj: { size: 100 },
+        path: '/media/image.png',
+      };
+
+      expect.assertions(4);
+      await expect(gitHubImplementation.persistMedia(mediaFile, { draft: true })).resolves.toEqual({
+        id: undefined,
+        name: 'image.png',
+        size: 100,
+        displayURL: 'displayURL',
+        path: 'media/image.png',
+        draft: true,
+      });
+
+      expect(persistFiles).toHaveBeenCalledTimes(0);
+      expect(createObjectURL).toHaveBeenCalledTimes(1);
+      expect(createObjectURL).toHaveBeenCalledWith(mediaFile.fileObj);
+    });
+
+    it('should log and throw error on "persistFiles" error', async () => {
+      const gitHubImplementation = new GitHubImplementation(config);
+      gitHubImplementation.api = mockAPI;
+
+      const error = new Error('failed to persist files');
+      persistFiles.mockRejectedValue(error);
+
+      const mediaFile = {
+        value: 'image.png',
+        fileObj: { size: 100 },
+        path: '/media/image.png',
+      };
+
+      expect.assertions(5);
+      await expect(gitHubImplementation.persistMedia(mediaFile)).rejects.toThrowError(error);
+
+      expect(persistFiles).toHaveBeenCalledTimes(1);
+      expect(createObjectURL).toHaveBeenCalledTimes(0);
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledWith(error);
+    });
+  });
+});

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

@@ -4,6 +4,7 @@ import semaphore from 'semaphore';
 import { stripIndent } from 'common-tags';
 import { asyncLock } from 'netlify-cms-lib-util';
 import AuthenticationPage from './AuthenticationPage';
+import { get } from 'lodash';
 import API from './API';
 import GraphQLAPI from './GraphQLAPI';
 
@@ -322,7 +323,9 @@ export default class GitHub {
 
   async persistMedia(mediaFile, options = {}) {
     try {
-      await this.api.persistFiles(null, [mediaFile], options);
+      if (!options.draft) {
+        await this.api.persistFiles(null, [mediaFile], options);
+      }
 
       const { sha, value, path, fileObj } = mediaFile;
       const displayURL = URL.createObjectURL(fileObj);
@@ -332,6 +335,7 @@ export default class GitHub {
         size: fileObj.size,
         displayURL,
         path: trimStart(path, '/'),
+        draft: options.draft,
       };
     } catch (error) {
       console.error(error);
@@ -343,6 +347,24 @@ export default class GitHub {
     return this.api.deleteFile(path, commitMessage, options);
   }
 
+  async getMediaFiles(data) {
+    const files = get(data, 'metaData.objects.files', []);
+    const mediaFiles = await Promise.all(
+      files.map(file =>
+        this.api.getMediaAsBlob(file.sha, file.path).then(blob => {
+          const name = file.path.substring(file.path.lastIndexOf('/') + 1);
+          return {
+            ...file,
+            id: file.sha,
+            file: new File([blob], name),
+          };
+        }),
+      ),
+    );
+
+    return mediaFiles;
+  }
+
   unpublishedEntries() {
     return this.api
       .listUnpublishedBranches()
@@ -362,10 +384,9 @@ export default class GitHub {
                       resolve(null);
                       sem.leave();
                     } else {
-                      const path = data.metaData.objects.entry.path;
                       resolve({
                         slug,
-                        file: { path },
+                        file: { path: data.metaData.objects.entry.path },
                         data: data.fileData,
                         metaData: data.metaData,
                         isModification: data.isModification,
@@ -391,18 +412,18 @@ export default class GitHub {
       });
   }
 
-  unpublishedEntry(collection, slug) {
+  async unpublishedEntry(collection, slug) {
     const contentKey = this.api.generateContentKey(collection.get('name'), slug);
-    return this.api.readUnpublishedBranchFile(contentKey).then(data => {
-      if (!data) return null;
-      return {
-        slug,
-        file: { path: data.metaData.objects.entry.path },
-        data: data.fileData,
-        metaData: data.metaData,
-        isModification: data.isModification,
-      };
-    });
+    const data = await this.api.readUnpublishedBranchFile(contentKey);
+    const mediaFiles = await this.getMediaFiles(data);
+    return {
+      slug,
+      file: { path: data.metaData.objects.entry.path },
+      data: data.fileData,
+      metaData: data.metaData,
+      mediaFiles,
+      isModification: data.isModification,
+    };
   }
 
   /**