chore: add proxy backend (#3126)

* feat(backends): add proxy backend

* feat: add proxy server initial commit

* fix: move from joi to @hapi/joi

* test: add joi validation tests

* feat: proxy server initial implementations

* test: add tests, fix build

* chore: update yarn.lock

* build: fix develop command

* fix(back-proxy): fix bugs

* test(backend-proxy): add cypress tests

* chore: cleanup

* chore: support node 10

* chore: code cleanup

* chore: run cypress on ubuntu 16.04

* test(e2e): fix proxy backend cypress tests

* chore: don't start proxy server on yarn develop
This commit is contained in:
Erez Rokah
2020-01-22 23:47:34 +02:00
committed by Shawn Erquhart
parent cf57da223d
commit 7e8084be87
38 changed files with 2895 additions and 106 deletions

View File

@ -0,0 +1,11 @@
# Docs coming soon!
Netlify CMS was recently converted from a single npm package to a "monorepo" of over 20 packages.
That's over 20 Readme's! We haven't created one for this package yet, but we will soon.
In the meantime, you can:
1. Check out the [main readme](https://github.com/netlify/netlify-cms/#readme) or the [documentation
site](https://www.netlifycms.org) for more info.
2. Reach out to the [community chat](https://netlifycms.org/chat/) if you need help.
3. Help out and [write the readme yourself](https://github.com/netlify/netlify-cms/edit/master/packages/netlify-cms-backend-proxy/README.md)!

View File

@ -0,0 +1,29 @@
{
"name": "netlify-cms-backend-proxy",
"description": "Proxy backend for Netlify CMS",
"version": "1.0.1",
"repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-backend-proxy",
"bugs": "https://github.com/netlify/netlify-cms/issues",
"license": "MIT",
"module": "dist/esm/index.js",
"main": "dist/netlify-cms-backend-proxy.js",
"keywords": [
"netlify",
"netlify-cms",
"backend"
],
"sideEffects": false,
"scripts": {
"develop": "yarn build:esm --watch",
"build": "cross-env NODE_ENV=production webpack",
"build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward --extensions \".js,.jsx,.ts,.tsx\""
},
"peerDependencies": {
"@emotion/core": "^10.0.9",
"@emotion/styled": "^10.0.9",
"netlify-cms-lib-util": "^2.3.0",
"netlify-cms-ui-default": "^2.6.0",
"prop-types": "^15.7.2",
"react": "^16.8.4"
}
}

View File

@ -0,0 +1,61 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { Icon, buttons, shadows, GoBackButton } from 'netlify-cms-ui-default';
const StyledAuthenticationPage = styled.section`
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
height: 100vh;
`;
const PageLogoIcon = styled(Icon)`
color: #c4c6d2;
margin-top: -300px;
`;
const LoginButton = styled.button`
${buttons.button};
${shadows.dropDeep};
${buttons.default};
${buttons.gray};
padding: 0 30px;
margin-top: -40px;
display: flex;
align-items: center;
position: relative;
${Icon} {
margin-right: 18px;
}
`;
export default class AuthenticationPage extends React.Component {
static propTypes = {
onLogin: PropTypes.func.isRequired,
inProgress: PropTypes.bool,
config: PropTypes.object.isRequired,
};
handleLogin = e => {
e.preventDefault();
this.props.onLogin(this.state);
};
render() {
const { config, inProgress } = this.props;
return (
<StyledAuthenticationPage>
<PageLogoIcon size="300px" type="netlify-cms" />
<LoginButton disabled={inProgress} onClick={this.handleLogin}>
{inProgress ? 'Logging in...' : 'Login'}
</LoginButton>
{config.site_url && <GoBackButton href={config.site_url}></GoBackButton>}
</StyledAuthenticationPage>
);
}
}

View File

@ -0,0 +1,215 @@
import {
Entry,
AssetProxy,
PersistOptions,
User,
Config,
Implementation,
ImplementationFile,
EditorialWorkflowError,
APIError,
} from 'netlify-cms-lib-util';
import AuthenticationPage from './AuthenticationPage';
const serializeAsset = async (assetProxy: AssetProxy) => {
const base64content = await assetProxy.toBase64!();
return { path: assetProxy.path, content: base64content, encoding: 'base64' };
};
type MediaFile = {
id: string;
content: string;
encoding: string;
name: string;
path: string;
};
const deserializeMediaFile = ({ id, content, encoding, path, name }: MediaFile) => {
let byteArray = new Uint8Array(0);
if (encoding !== 'base64') {
console.error(`Unsupported encoding '${encoding}' for file '${path}'`);
} else {
const decodedContent = atob(content);
byteArray = new Uint8Array(decodedContent.length);
for (let i = 0; i < decodedContent.length; i++) {
byteArray[i] = decodedContent.charCodeAt(i);
}
}
const file = new File([byteArray], name);
const url = URL.createObjectURL(file);
return { id, name, path, file, size: file.size, url, displayURL: url };
};
export default class ProxyBackend implements Implementation {
proxyUrl: string;
mediaFolder: string;
options: { initialWorkflowStatus?: string };
branch: string;
constructor(config: Config, options = {}) {
if (!config.backend.proxy_url) {
throw new Error('The Proxy backend needs a "proxy_url" in the backend configuration.');
}
this.branch = config.backend.branch || 'master';
this.proxyUrl = config.backend.proxy_url;
this.mediaFolder = config.media_folder;
this.options = options;
}
authComponent() {
return AuthenticationPage;
}
restoreUser() {
return this.authenticate();
}
authenticate() {
return (Promise.resolve() as unknown) as Promise<User>;
}
logout() {
return null;
}
getToken() {
return Promise.resolve('');
}
async request(payload: { action: string; params: Record<string, unknown> }) {
const response = await fetch(this.proxyUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json; charset=utf-8' },
body: JSON.stringify({ branch: this.branch, ...payload }),
});
const json = await response.json();
if (response.ok) {
return json;
} else {
throw new APIError(json.message, response.status, 'Proxy');
}
}
entriesByFolder(folder: string, extension: string, depth: number) {
return this.request({
action: 'entriesByFolder',
params: { branch: this.branch, folder, extension, depth },
});
}
entriesByFiles(files: ImplementationFile[]) {
return this.request({
action: 'entriesByFiles',
params: { branch: this.branch, files },
});
}
getEntry(path: string) {
return this.request({
action: 'getEntry',
params: { branch: this.branch, path },
});
}
unpublishedEntries() {
return this.request({
action: 'unpublishedEntries',
params: { branch: this.branch },
});
}
async unpublishedEntry(collection: string, slug: string) {
try {
const entry = await this.request({
action: 'unpublishedEntry',
params: { branch: this.branch, collection, slug },
});
const mediaFiles = entry.mediaFiles.map(deserializeMediaFile);
return { ...entry, mediaFiles };
} catch (e) {
if (e.status === 404) {
throw new EditorialWorkflowError('content is not under editorial workflow', true);
}
throw e;
}
}
deleteUnpublishedEntry(collection: string, slug: string) {
return this.request({
action: 'deleteUnpublishedEntry',
params: { branch: this.branch, collection, slug },
});
}
async persistEntry(entry: Entry, assetProxies: AssetProxy[], options: PersistOptions) {
const assets = await Promise.all(assetProxies.map(serializeAsset));
return this.request({
action: 'persistEntry',
params: {
branch: this.branch,
entry,
assets,
options: { ...options, status: options.status || this.options.initialWorkflowStatus },
},
});
}
updateUnpublishedEntryStatus(collection: string, slug: string, newStatus: string) {
return this.request({
action: 'updateUnpublishedEntryStatus',
params: { branch: this.branch, collection, slug, newStatus },
});
}
publishUnpublishedEntry(collection: string, slug: string) {
return this.request({
action: 'publishUnpublishedEntry',
params: { branch: this.branch, collection, slug },
});
}
async getMedia(mediaFolder = this.mediaFolder) {
const files: MediaFile[] = await this.request({
action: 'getMedia',
params: { branch: this.branch, mediaFolder },
});
return files.map(deserializeMediaFile);
}
async getMediaFile(path: string) {
const file = await this.request({
action: 'getMediaFile',
params: { branch: this.branch, path },
});
return deserializeMediaFile(file);
}
async persistMedia(assetProxy: AssetProxy, options: PersistOptions) {
const asset = await serializeAsset(assetProxy);
const file: MediaFile = await this.request({
action: 'persistMedia',
params: { branch: this.branch, asset, options: { commitMessage: options.commitMessage } },
});
return deserializeMediaFile(file);
}
deleteFile(path: string, commitMessage: string) {
return this.request({
action: 'deleteFile',
params: { branch: this.branch, path, options: { commitMessage } },
});
}
getDeployPreview(collection: string, slug: string) {
return this.request({
action: 'getDeployPreview',
params: { branch: this.branch, collection, slug },
});
}
}

View File

@ -0,0 +1,8 @@
import ProxyBackend from './implementation';
import AuthenticationPage from './AuthenticationPage';
export const NetlifyCmsBackendProxy = {
ProxyBackend,
AuthenticationPage,
};
export { ProxyBackend, AuthenticationPage };

View File

@ -0,0 +1,3 @@
const { getConfig } = require('../../scripts/webpack.js');
module.exports = getConfig();