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-widget-file/src/FilePreview.js

@@ -2,21 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { List } from 'immutable';
-import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
+import { WidgetPreviewContainer, Asset } from 'netlify-cms-ui-default';
 
-const FileLink = styled(({ value, getAsset }) => (
-  <a href={getAsset(value)} rel="noopener noreferrer" target="_blank">
-    {value}
+const FileLink = styled(({ value: href, path }) => (
+  <a href={href} rel="noopener noreferrer" target="_blank">
+    {path}
   </a>
 ))`
   display: block;
 `;
 
+const FileLinkAsset = ({ value, getAsset }) => {
+  return <Asset path={value} getAsset={getAsset} component={FileLink} />;
+};
+
 function FileLinkList({ values, getAsset }) {
   return (
     <div>
       {values.map(value => (
-        <FileLink key={value} value={value} getAsset={getAsset} />
+        <FileLinkAsset key={value} value={value} getAsset={getAsset} />
       ))}
     </div>
   );
@@ -26,7 +30,7 @@ function FileContent({ value, getAsset }) {
   if (Array.isArray(value) || List.isList(value)) {
     return <FileLinkList values={value} getAsset={getAsset} />;
   }
-  return <FileLink value={value} getAsset={getAsset} />;
+  return <FileLinkAsset value={value} getAsset={getAsset} />;
 }
 
 const FilePreview = props => (

packages/netlify-cms-widget-file/src/withFileControl.js

@@ -6,7 +6,15 @@ import { Map, List } from 'immutable';
 import { once } from 'lodash';
 import uuid from 'uuid/v4';
 import { oneLine } from 'common-tags';
-import { lengths, components, buttons, borders, effects, shadows } from 'netlify-cms-ui-default';
+import {
+  lengths,
+  components,
+  buttons,
+  borders,
+  effects,
+  shadows,
+  Asset,
+} from 'netlify-cms-ui-default';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -22,12 +30,16 @@ const ImageWrapper = styled.div`
   ${shadows.inset};
 `;
 
-const Image = styled.img`
+const Image = styled(({ value: src }) => <img src={src || ''} role="presentation" />)`
   width: 100%;
   height: 100%;
   object-fit: contain;
 `;
 
+const ImageAsset = ({ getAsset, value }) => {
+  return <Asset path={value} getAsset={getAsset} component={Image} />;
+};
+
 const MultiImageWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -210,7 +222,7 @@ export default function withFileControl({ forImage } = {}) {
           <MultiImageWrapper>
             {value.map(val => (
               <ImageWrapper key={val}>
-                <Image src={getAsset(val)} />
+                <ImageAsset getAsset={getAsset} value={value} />
               </ImageWrapper>
             ))}
           </MultiImageWrapper>
@@ -218,7 +230,7 @@ export default function withFileControl({ forImage } = {}) {
       }
       return (
         <ImageWrapper>
-          <Image src={getAsset(value)} />
+          <ImageAsset getAsset={getAsset} value={value} />
         </ImageWrapper>
       );
     };