feat: bundle assets with content (#2958)

* fix(media_folder_relative): use collection name in unpublished entry

* refactor: pass arguments as object to AssetProxy ctor

* feat: support media folders per collection

* feat: resolve media files path based on entry path

* fix: asset public path resolving

* refactor: introduce typescript for AssetProxy

* refactor: code cleanup

* refactor(asset-proxy): add tests,switch to typescript,extract arguments

* refactor: typescript for editorialWorkflow

* refactor: add typescript for media library actions

* refactor: fix type error on map set

* refactor: move locale selector into reducer

* refactor: add typescript for entries actions

* refactor: remove duplication between asset store and media lib

* feat: load assets from backend using API

* refactor(github): add typescript, cache media files

* fix: don't load media URL if already loaded

* feat: add media folder config to collection

* fix: load assets from API when not in UI state

* feat: load entry media files when opening media library

* fix: editorial workflow draft media files bug fixes

* test(unit): fix unit tests

* fix: editor control losing focus

* style: add eslint object-shorthand rule

* test(cypress): re-record mock data

* fix: fix non github backends, large media

* test: uncomment only in tests

* fix(backend-test): add missing displayURL property

* test(e2e): add media library tests

* test(e2e): enable visual testing

* test(e2e): add github backend media library tests

* test(e2e): add git-gateway large media tests

* chore: post rebase fixes

* test: fix tests

* test: fix tests

* test(cypress): fix tests

* docs: add media_folder docs

* test(e2e): add media library delete test

* test(e2e): try and fix image comparison on CI

* ci: reduce test machines from 9 to 8

* test: add reducers and selectors unit tests

* test(e2e): disable visual regression testing for now

* test: add getAsset unit tests

* refactor: use Asset class component instead of hooks

* build: don't inline source maps

* test: add more media path tests

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

@@ -248,14 +248,14 @@ export default class API {
       commitParams.author_email = email;
     }
 
-    await this.request({
+    const response = await this.requestJSON({
       url: `${this.repoURL}/repository/commits`,
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(commitParams),
     });
 
-    return { ...item, uploaded: true };
+    return { ...item, sha: response.id };
   };
 
   persistFiles = (files, { commitMessage, newEntry }) =>

packages/netlify-cms-backend-gitlab/src/__tests__/gitlab.spec.js

@@ -380,7 +380,12 @@ describe('gitlab backend', () => {
 
       interceptFiles(backend, entryTree.path);
       interceptCollection(backend, collectionContentConfig);
-      const entry = await backend.getEntry(fromJS(collectionContentConfig), slug);
+
+      const entry = await backend.getEntry(
+        { config: fromJS({}), integrations: fromJS([]), entryDraft: fromJS({}) },
+        fromJS(collectionContentConfig),
+        slug,
+      );
 
       expect(entry).toEqual(expect.objectContaining({ path: entryTree.path }));
     });

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

@@ -1,7 +1,7 @@
 import trimStart from 'lodash/trimStart';
 import semaphore from 'semaphore';
 import { stripIndent } from 'common-tags';
-import { CURSOR_COMPATIBILITY_SYMBOL } from 'netlify-cms-lib-util';
+import { CURSOR_COMPATIBILITY_SYMBOL, basename } from 'netlify-cms-lib-util';
 import AuthenticationPage from './AuthenticationPage';
 import API from './API';
 
@@ -142,28 +142,30 @@ export default class GitLab {
     }));
   }
 
-  getMedia() {
-    return this.api.listAllFiles(this.config.get('media_folder')).then(files =>
+  getMedia(mediaFolder = this.config.get('media_folder')) {
+    return this.api.listAllFiles(mediaFolder).then(files =>
       files.map(({ id, name, path }) => {
         return { id, name, path, displayURL: { id, name, path } };
       }),
     );
   }
 
+  async getMediaAsBlob(path, id, name) {
+    let blob = await this.api.readFile(path, id, { parseText: false });
+    // svgs are returned with mimetype "text/plain" by gitlab
+    if (blob.type === 'text/plain' && name.match(/\.svg$/i)) {
+      blob = new window.Blob([blob], { type: 'image/svg+xml' });
+    }
+
+    return blob;
+  }
+
   getMediaDisplayURL(displayURL) {
     this._mediaDisplayURLSem = this._mediaDisplayURLSem || semaphore(MAX_CONCURRENT_DOWNLOADS);
     const { id, name, path } = displayURL;
     return new Promise((resolve, reject) =>
       this._mediaDisplayURLSem.take(() =>
-        this.api
-          .readFile(path, id, { parseText: false })
-          .then(blob => {
-            // svgs are returned with mimetype "text/plain" by gitlab
-            if (blob.type === 'text/plain' && name.match(/\.svg$/i)) {
-              return new window.Blob([blob], { type: 'image/svg+xml' });
-            }
-            return blob;
-          })
+        this.getMediaAsBlob(path, id, name)
           .then(blob => URL.createObjectURL(blob))
           .then(resolve, reject)
           .finally(() => this._mediaDisplayURLSem.leave()),
@@ -171,14 +173,40 @@ export default class GitLab {
     );
   }
 
+  async getMediaFile(path) {
+    const name = basename(path);
+    const blob = await this.getMediaAsBlob(path, null, name);
+    const fileObj = new File([blob], name);
+    const url = URL.createObjectURL(fileObj);
+
+    return {
+      displayURL: url,
+      path,
+      name,
+      size: fileObj.size,
+      file: fileObj,
+      url,
+    };
+  }
+
   async persistEntry(entry, mediaFiles, options = {}) {
     return this.api.persistFiles([entry], options);
   }
 
   async persistMedia(mediaFile, options = {}) {
-    await this.api.persistFiles([mediaFile], options);
-    const { value, path, fileObj } = mediaFile;
-    return { name: value, size: fileObj.size, path: trimStart(path, '/') };
+    const [{ sha }] = await this.api.persistFiles([mediaFile], options);
+    const { path, fileObj } = mediaFile;
+    const url = URL.createObjectURL(fileObj);
+
+    return {
+      displayURL: url,
+      path: trimStart(path, '/'),
+      name: fileObj.name,
+      size: fileObj.size,
+      file: fileObj,
+      url,
+      id: sha,
+    };
   }
 
   deleteFile(path, commitMessage, options) {