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-ui-default/src/Asset.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Asset extends React.Component {
+  static propTypes = {
+    path: PropTypes.string.isRequired,
+    getAsset: PropTypes.func.isRequired,
+    component: PropTypes.elementType.isRequired,
+  };
+
+  subscribed = true;
+
+  state = {
+    value: null,
+  };
+
+  _fetchAsset() {
+    const { getAsset, path } = this.props;
+    getAsset(path).then(value => {
+      if (this.subscribed) {
+        this.setState({ value });
+      }
+    });
+  }
+
+  componentDidMount() {
+    this._fetchAsset();
+  }
+
+  componentWillUnmount() {
+    this.subscribed = false;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.path !== this.props.path || prevProps.getAsset !== this.props.getAsset) {
+      this._fetchAsset();
+    }
+  }
+
+  render() {
+    const { component, ...props } = this.props;
+    return React.createElement(component, { ...props, value: this.state.value });
+  }
+}
+
+export default Asset;

packages/netlify-cms-ui-default/src/index.js

@@ -9,6 +9,7 @@ import AuthenticationPage from './AuthenticationPage';
 import WidgetPreviewContainer from './WidgetPreviewContainer';
 import ObjectWidgetTopBar from './ObjectWidgetTopBar';
 import GoBackButton from './GoBackButton';
+import Asset from './Asset';
 import {
   fonts,
   colorsRaw,
@@ -55,6 +56,7 @@ export const NetlifyCmsUiDefault = {
   effects,
   reactSelectStyles,
   GlobalStyles,
+  Asset,
 };
 export {
   Dropdown,
@@ -87,4 +89,5 @@ export {
   reactSelectStyles,
   GlobalStyles,
   GoBackButton,
+  Asset,
 };