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

packages/netlify-cms-backend-proxy/README.md

@@ -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)!

packages/netlify-cms-backend-proxy/package.json

@@ -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"
+  }
+}

packages/netlify-cms-backend-proxy/src/AuthenticationPage.js

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

packages/netlify-cms-backend-proxy/src/implementation.ts

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

packages/netlify-cms-backend-proxy/src/index.ts

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

packages/netlify-cms-backend-proxy/webpack.config.js

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