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
This commit is contained in:
Erez Rokah
2019-12-18 18:16:02 +02:00
committed by Shawn Erquhart
parent 7e4d4c1cc4
commit 2b41d8a838
231 changed files with 37961 additions and 18373 deletions

View File

@ -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 => (

View File

@ -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>
);
};