Merge branch 'react-pr' into dashboard-link

package.json

@@ -9,8 +9,18 @@
     "test:watch": "npm test -- --watch",
     "build": "webpack --config webpack.config.js",
     "storybook": "start-storybook -p 9001",
-    "storybook-build": "build-storybook -o dist"
+    "storybook-build": "build-storybook -o dist",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+    "lint:staged": "lint-staged"
   },
+  "lint-staged": {
+    "*.@(js|jsx)": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "pre-commit": "lint:staged",
   "keywords": [
     "netlify",
     "cms"
@@ -21,7 +31,7 @@
     "@kadira/storybook": "^1.36.0",
     "autoprefixer": "^6.3.3",
     "babel-core": "^6.5.1",
-    "babel-eslint": "^4.1.8",
+    "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.2",
     "babel-plugin-lodash": "^3.2.0",
     "babel-plugin-transform-class-properties": "^6.5.2",
@@ -32,20 +42,21 @@
     "babel-register": "^6.5.2",
     "babel-runtime": "^6.5.0",
     "css-loader": "^0.23.1",
-    "eslint": "^1.10.3",
-    "eslint-loader": "^1.2.1",
+    "eslint": "^3.5.0",
     "eslint-plugin-react": "^5.1.1",
     "exports-loader": "^0.6.3",
     "file-loader": "^0.8.5",
     "immutable": "^3.7.6",
     "imports-loader": "^0.6.5",
     "js-yaml": "^3.5.3",
+    "lint-staged": "^3.0.2",
     "mocha": "^2.4.5",
     "moment": "^2.11.2",
     "normalizr": "^2.0.0",
     "postcss-cssnext": "^2.7.0",
     "postcss-import": "^8.1.2",
     "postcss-loader": "^0.9.1",
+    "pre-commit": "^1.1.3",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
     "react-hot-loader": "^3.0.0-beta.2",
@@ -75,8 +86,10 @@
     "markup-it": "git+https://github.com/cassiozen/markup-it.git",
     "pluralize": "^3.0.0",
     "prismjs": "^1.5.1",
-    "react-datetime": "^2.6.0",
     "react-addons-css-transition-group": "^15.3.1",
+    "react-datetime": "^2.6.0",
+    "react-dnd": "^2.1.4",
+    "react-dnd-html5-backend": "^2.1.2",
     "react-portal": "^2.2.1",
     "selection-position": "^1.0.0",
     "semaphore": "^1.0.5",

src/actions/editorialWorkflow.js

@@ -1,4 +1,5 @@
 import { currentBackend } from '../backends/backend';
+import { getMedia } from '../reducers';
 import { EDITORIAL_WORKFLOW } from '../constants/publishModes';
 /*
  * Contant Declarations
@@ -10,6 +11,14 @@ export const UNPUBLISHED_ENTRIES_REQUEST = 'UNPUBLISHED_ENTRIES_REQUEST';
 export const UNPUBLISHED_ENTRIES_SUCCESS = 'UNPUBLISHED_ENTRIES_SUCCESS';
 export const UNPUBLISHED_ENTRIES_FAILURE = 'UNPUBLISHED_ENTRIES_FAILURE';
 
+export const UNPUBLISHED_ENTRY_PERSIST_REQUEST = 'UNPUBLISHED_ENTRY_PERSIST_REQUEST';
+export const UNPUBLISHED_ENTRY_PERSIST_SUCCESS = 'UNPUBLISHED_ENTRY_PERSIST_SUCCESS';
+
+export const UNPUBLISHED_ENTRY_STATUS_CHANGE_REQUEST = 'UNPUBLISHED_ENTRY_STATUS_CHANGE_REQUEST';
+export const UNPUBLISHED_ENTRY_STATUS_CHANGE_SUCCESS = 'UNPUBLISHED_ENTRY_STATUS_CHANGE_SUCCESS';
+
+export const UNPUBLISHED_ENTRY_PUBLISH_REQUEST = 'UNPUBLISHED_ENTRY_PUBLISH_REQUEST';
+export const UNPUBLISHED_ENTRY_PUBLISH_SUCCESS = 'UNPUBLISHED_ENTRY_PUBLISH_SUCCESS';
 
 /*
  * Simple Action Creators (Internal)
@@ -53,6 +62,56 @@ function unpublishedEntriesFailed(error) {
   };
 }
 
+
+function unpublishedEntryPersisting(entry) {
+  return {
+    type: UNPUBLISHED_ENTRY_PERSIST_REQUEST,
+    payload: { entry }
+  };
+}
+
+function unpublishedEntryPersisted(entry) {
+  return {
+    type: UNPUBLISHED_ENTRY_PERSIST_SUCCESS,
+    payload: { entry }
+  };
+}
+
+function unpublishedEntryPersistedFail(error) {
+  return {
+    type: UNPUBLISHED_ENTRY_PERSIST_SUCCESS,
+    payload: { error }
+  };
+}
+
+function unpublishedEntryStatusChangeRequest(collection, slug, oldStatus, newStatus) {
+  return {
+    type: UNPUBLISHED_ENTRY_STATUS_CHANGE_REQUEST,
+    payload: { collection, slug, oldStatus, newStatus }
+  };
+}
+
+function unpublishedEntryStatusChangePersisted(collection, slug, oldStatus, newStatus) {
+  return {
+    type: UNPUBLISHED_ENTRY_STATUS_CHANGE_SUCCESS,
+    payload: { collection, slug, oldStatus, newStatus }
+  };
+}
+
+function unpublishedEntryPublishRequest(collection, slug, status) {
+  return {
+    type: UNPUBLISHED_ENTRY_PUBLISH_REQUEST,
+    payload: { collection, slug, status }
+  };
+}
+
+function unpublishedEntryPublished(collection, slug, status) {
+  return {
+    type: UNPUBLISHED_ENTRY_PUBLISH_SUCCESS,
+    payload: { collection, slug, status }
+  };
+}
+
 /*
  * Exported Thunk Action Creators
  */
@@ -79,3 +138,42 @@ export function loadUnpublishedEntries() {
     );
   };
 }
+
+export function persistUnpublishedEntry(collection, entry) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const backend = currentBackend(state.config);
+    const MediaProxies = entry && entry.get('mediaFiles').map(path => getMedia(state, path));
+    dispatch(unpublishedEntryPersisting(entry));
+    backend.persistUnpublishedEntry(state.config, collection, entry, MediaProxies.toJS()).then(
+      () => {
+        dispatch(unpublishedEntryPersisted(entry));
+      },
+      (error) => dispatch(unpublishedEntryPersistedFail(error))
+    );
+  };
+}
+
+export function updateUnpublishedEntryStatus(collection, slug, oldStatus, newStatus) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const backend = currentBackend(state.config);
+    dispatch(unpublishedEntryStatusChangeRequest(collection, slug, oldStatus, newStatus));
+    backend.updateUnpublishedEntryStatus(collection, slug, newStatus)
+    .then(() => {
+      dispatch(unpublishedEntryStatusChangePersisted(collection, slug, oldStatus, newStatus));
+    });
+  };
+}
+
+export function publishUnpublishedEntry(collection, slug, status) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const backend = currentBackend(state.config);
+    dispatch(unpublishedEntryPublishRequest(collection, slug, status));
+    backend.publishUnpublishedEntry(collection, slug, status)
+    .then(() => {
+      dispatch(unpublishedEntryPublished(collection, slug, status));
+    });
+  };
+}

src/backends/backend.js

@@ -105,7 +105,7 @@ class Backend {
     });
   }
 
-  persistEntry(config, collection, entryDraft, MediaFiles) {
+  persistEntry(config, collection, entryDraft, MediaFiles, options) {
     const newEntry = entryDraft.getIn(['entry', 'newRecord']) || false;
 
     const parsedData = {
@@ -139,10 +139,23 @@ class Backend {
     const collectionName = collection.get('name');
 
     return this.implementation.persistEntry(entryObj, MediaFiles, {
-      newEntry, parsedData, commitMessage, collectionName, mode
+      newEntry, parsedData, commitMessage, collectionName, mode, ...options
     });
   }
 
+  persistUnpublishedEntry(config, collection, entryDraft, MediaFiles) {
+    return this.persistEntry(config, collection, entryDraft, MediaFiles, { unpublished: true });
+  }
+
+  updateUnpublishedEntryStatus(collection, slug, newStatus) {
+    return this.implementation.updateUnpublishedEntryStatus(collection, slug, newStatus);
+  }
+
+  publishUnpublishedEntry(collection, slug, status) {
+    return this.implementation.publishUnpublishedEntry(collection, slug, status);
+  }
+
+
   entryToRaw(collection, entry) {
     const format = resolveFormat(collection, entry);
     return format && format.toFile(entry);

src/backends/github/API.js

@@ -1,13 +1,12 @@
 import LocalForage from 'localforage';
 import MediaProxy from '../../valueObjects/MediaProxy';
 import { Base64 } from 'js-base64';
-import { EDITORIAL_WORKFLOW, status } from '../../constants/publishModes';
+import _ from 'lodash';
+import { SIMPLE, EDITORIAL_WORKFLOW, status } from '../../constants/publishModes';
 
 const API_ROOT = 'https://api.github.com';
 
 export default class API {
-
-
   constructor(token, repo, branch) {
     this.token = token;
     this.repo = repo;
@@ -54,7 +53,8 @@ export default class API {
     const headers = this.requestHeaders(options.headers || {});
     const url = this.urlFor(path, options);
     return fetch(url, { ...options, headers: headers }).then((response) => {
-      if (response.headers.get('Content-Type').match(/json/)) {
+      const contentType = response.headers.get('Content-Type');
+      if (contentType && contentType.match(/json/)) {
         return this.parseJsonResponse(response);
       }
 
@@ -98,17 +98,28 @@ export default class API {
       return this.uploadBlob(fileTree[`${key}.json`])
       .then(item => this.updateTree(branchData.sha, '/', fileTree))
       .then(changeTree => this.commit(`Updating “${key}” metadata`, changeTree))
-      .then(response => this.patchRef('meta', '_netlify_cms', response.sha));
+      .then(response => this.patchRef('meta', '_netlify_cms', response.sha))
+      .then(() => {
+        LocalForage.setItem(`gh.meta.${key}`, {
+          expires: Date.now() + 300000, // In 5 minutes
+          data
+        });
+      });
     });
   }
 
   retrieveMetadata(key) {
+    const cache = LocalForage.getItem(`gh.meta.${key}`);
+    return cache.then((cached) => {
+      if (cached && cached.expires > Date.now()) { return cached.data; }
+
       return this.request(`${this.repoURL}/contents/${key}.json`, {
         params: { ref: 'refs/meta/_netlify_cms' },
         headers: { Accept: 'application/vnd.github.VERSION.raw' },
         cache: 'no-store',
       })
       .then(response => JSON.parse(response));
+    });
   }
 
   readFile(path, sha, branch = this.branch) {
@@ -136,10 +147,6 @@ export default class API {
   }
 
   readUnpublishedBranchFile(contentKey) {
-    const cache = LocalForage.getItem(`gh.unpublished.${contentKey}`);
-    return cache.then((cached) => {
-      if (cached && cached.expires > Date.now()) { return cached.data; }
-
     let metaData;
     return this.retrieveMetadata(contentKey)
     .then(data => {
@@ -148,14 +155,6 @@ export default class API {
     })
     .then(file => {
       return { metaData, file };
-      })
-      .then((result) => {
-        LocalForage.setItem(`gh.unpublished.${contentKey}`, {
-          expires: Date.now() + 300000, // In 5 minutes
-          data: result,
-        });
-        return result;
-      });
     });
   }
 
@@ -183,19 +182,44 @@ export default class API {
       subtree[filename] = file;
       file.file = true;
     });
-    return Promise.all(uploadPromises)
-      .then(() => this.getBranch())
+    return Promise.all(uploadPromises).then(() => {
+      if (!options.mode || (options.mode && options.mode === SIMPLE)) {
+        return this.getBranch()
         .then(branchData => this.updateTree(branchData.commit.sha, '/', fileTree))
         .then(changeTree => this.commit(options.commitMessage, changeTree))
-      .then((response) => {
-        if (options.mode && options.mode === EDITORIAL_WORKFLOW) {
+        .then(response => this.patchBranch(this.branch, response.sha));
+      } else if (options.mode && options.mode === EDITORIAL_WORKFLOW) {
+        const mediaFilesList = mediaFiles.map(file => file.path);
+        return this.editorialWorkflowGit(fileTree, entry, mediaFilesList, options);
+      }
+    });
+  }
+
+  editorialWorkflowGit(fileTree, entry, filesList, options) {
     const contentKey = options.collectionName ? `${options.collectionName}-${entry.slug}` : entry.slug;
     const branchName = `cms/${contentKey}`;
+    const unpublished = options.unpublished || false;
+
+    if (!unpublished) {
+      // Open new editorial review workflow for this entry - Create new metadata and commit to new branch
+      const contentKey = options.collectionName ? `${options.collectionName}-${entry.slug}` : entry.slug;
+      const branchName = `cms/${contentKey}`;
+
+      return this.getBranch()
+      .then(branchData => this.updateTree(branchData.commit.sha, '/', fileTree))
+      .then(changeTree => this.commit(options.commitMessage, changeTree))
+      .then(commitResponse => this.createBranch(branchName, commitResponse.sha))
+      .then(branchResponse => this.createPR(options.commitMessage, branchName))
+      .then((prResponse) => {
         return this.user().then(user => {
           return user.name ? user.name : user.login;
         })
         .then(username => this.storeMetadata(contentKey, {
           type: 'PR',
+          pr: {
+            number: prResponse.number,
+            head: prResponse.head && prResponse.head.sha
+          },
           user: username,
           status: status.first(),
           branch: branchName,
@@ -204,16 +228,65 @@ export default class API {
           description: options.parsedData && options.parsedData.description,
           objects: {
             entry: entry.path,
-              files: mediaFiles.map(file => file.path)
+            files: filesList
           },
           timeStamp: new Date().toISOString()
-          }))
-          .then(this.createBranch(branchName, response.sha))
-          .then(this.createPR(options.commitMessage, `cms/${contentKey}`));
-        } else {
-          return this.patchBranch(this.branch, response.sha);
-        }
+        }));
       });
+    } else {
+      // Entry is already on editorial review workflow - just update metadata and commit to existing branch
+      return this.getBranch(branchName)
+      .then(branchData => this.updateTree(branchData.commit.sha, '/', fileTree))
+      .then(changeTree => this.commit(options.commitMessage, changeTree))
+      .then((response) => {
+        const contentKey = options.collectionName ? `${options.collectionName}-${entry.slug}` : entry.slug;
+        const branchName = `cms/${contentKey}`;
+        return this.user().then(user => {
+          return user.name ? user.name : user.login;
+        })
+        .then(username => this.retrieveMetadata(contentKey))
+        .then(metadata => {
+          let files = metadata.objects && metadata.objects.files || [];
+          files = files.concat(filesList);
+
+          return {
+            ...metadata,
+            title: options.parsedData && options.parsedData.title,
+            description: options.parsedData && options.parsedData.description,
+            objects: {
+              entry: entry.path,
+              files: _.uniq(files)
+            },
+            timeStamp: new Date().toISOString()
+          };
+        })
+        .then(updatedMetadata => this.storeMetadata(contentKey, updatedMetadata))
+        .then(this.patchBranch(branchName, response.sha));
+      });
+    }
+  }
+
+  updateUnpublishedEntryStatus(collection, slug, status) {
+    const contentKey = collection ? `${collection}-${slug}` : slug;
+    return this.retrieveMetadata(contentKey)
+    .then(metadata => {
+      return {
+        ...metadata,
+        status
+      };
+    })
+    .then(updatedMetadata => this.storeMetadata(contentKey, updatedMetadata));
+  }
+
+  publishUnpublishedEntry(collection, slug, status) {
+    const contentKey = collection ? `${collection}-${slug}` : slug;
+    return this.retrieveMetadata(contentKey)
+    .then(metadata => {
+      const headSha = metadata.pr && metadata.pr.head;
+      const number = metadata.pr && metadata.pr.number;
+      return this.mergePR(headSha, number);
+    })
+    .then(() => this.deleteBranch(`cms/${contentKey}`));
   }
 
   createRef(type, name, sha) {
@@ -223,10 +296,6 @@ export default class API {
     });
   }
 
-  createBranch(branchName, sha) {
-    return this.createRef('heads', branchName, sha);
-  }
-
   patchRef(type, name, sha) {
     return this.request(`${this.repoURL}/git/refs/${type}/${name}`, {
       method: 'PATCH',
@@ -234,12 +303,26 @@ export default class API {
     });
   }
 
+  deleteRef(type, name, sha) {
+    return this.request(`${this.repoURL}/git/refs/${type}/${name}`, {
+      method: 'DELETE',
+    });
+  }
+
+  getBranch(branch = this.branch) {
+    return this.request(`${this.repoURL}/branches/${branch}`);
+  }
+
+  createBranch(branchName, sha) {
+    return this.createRef('heads', branchName, sha);
+  }
+
   patchBranch(branchName, sha) {
     return this.patchRef('heads', branchName, sha);
   }
 
-  getBranch() {
-    return this.request(`${this.repoURL}/branches/${this.branch}`);
+  deleteBranch(branchName) {
+    return this.deleteRef('heads', branchName);
   }
 
   createPR(title, head, base = 'master') {
@@ -250,6 +333,16 @@ export default class API {
     });
   }
 
+  mergePR(headSha, number) {
+    return this.request(`${this.repoURL}/pulls/${number}/merge`, {
+      method: 'PUT',
+      body: JSON.stringify({
+        commit_message: 'Automatically generated. Merged on Netlify CMS.',
+        sha: headSha
+      }),
+    });
+  }
+
   getTree(sha) {
     return sha ? this.request(`${this.repoURL}/git/trees/${sha}`) : Promise.resolve({ tree: [] });
   }

src/backends/github/implementation.js

@@ -98,4 +98,12 @@ export default class GitHub {
       ))[0]
     ));
   }
+
+  updateUnpublishedEntryStatus(collection, slug, newStatus) {
+    return this.api.updateUnpublishedEntryStatus(collection, slug, newStatus);
+  }
+
+  publishUnpublishedEntry(collection, slug, status) {
+    return this.api.publishUnpublishedEntry(collection, slug, status);
+  }
 }

src/backends/netlify-git/AuthenticationPage.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import Authenticator from '../../lib/netlify-auth';
 
 export default class AuthenticationPage extends React.Component {
   static propTypes = {
@@ -32,8 +31,8 @@ export default class AuthenticationPage extends React.Component {
       }
       response.json().then((data) => {
         this.setState({ loginError: data.msg });
-      })
-    })
+      });
+    });
   }
 
   handleChange(key) {

src/components/EntryEditor.css

@@ -12,6 +12,7 @@
   height: 45px;
   border-top: 1px solid #e8eae8;
   padding: 10px 20px;
+  z-index: 10;
 }
 .controlPane {
   width: 50%;

src/components/PreviewPane.css

@@ -1,6 +1,6 @@
 .frame {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   border: none;
   background: #fff;
 }

src/components/UI/card/Card.css

@@ -1,8 +1,7 @@
+@import "../theme.css";
+
 .card {
-  composes: base from "../theme.css";
-  composes: container from "../theme.css";
-  composes: rounded from "../theme.css";
-  composes: depth from "../theme.css";
+  composes: base container rounded depth;
   overflow: hidden;
   width: 240px;
 }

src/components/UI/index.js

@@ -1,3 +1,4 @@
 export { default as Card } from './card/Card';
 export { default as Loader } from './loader/Loader';
 export { default as Icon } from './icon/Icon';
+export { default as Toast } from './toast/Toast';

src/components/UI/theme.css

@@ -1,5 +1,6 @@
 :root {
   --defaultColor: #333;
+  --defaultColorLight: #eee;
   --backgroundColor: #fff;
   --shadowColor: rgba(0, 0, 0, 0.117647);
   --successColor: #1c7;

src/components/UI/toast/Toast.css

@@ -0,0 +1,40 @@
+@import "../theme.css";
+
+.toast {
+  composes: base container rounded depth;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 100;
+  width: 350px;
+  padding: 20px 10px;
+  font-size: 0.9rem;
+  text-align: center;
+  color: var(--defaultColorLight);
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity .3s ease-in;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.icon {
+  position: absolute;
+  top: calc(50% - 15px);
+  left: 15px;
+  font-size: 30px;
+}
+
+.success {
+  background-color: var(--successColor);
+}
+
+.warning {
+  background-color: var(--warningColor);
+}
+
+.error {
+  background-color: var(--errorColor);
+}

src/components/UI/toast/Toast.js

@@ -0,0 +1,74 @@
+import React, { PropTypes } from 'react';
+import { Icon } from '../index';
+import styles from './Toast.css';
+
+export default class Toast extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      shown: false
+    };
+
+    this.autoHideTimeout = this.autoHideTimeout.bind(this);
+  }
+
+  componentWillMount() {
+    if (this.props.show) {
+      this.autoHideTimeout();
+      this.setState({ shown: true });
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps !== this.props) {
+      if (nextProps.show) this.autoHideTimeout();
+      this.setState({ shown: nextProps.show });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timeOut) {
+      clearTimeout(this.timeOut);
+    }
+  }
+
+  autoHideTimeout() {
+    clearTimeout(this.timeOut);
+    this.timeOut = setTimeout(() => {
+      this.setState({ shown: false });
+    }, 4000);
+  }
+
+  render() {
+    const { style, type, className, children } = this.props;
+    const icons = {
+      success: 'check',
+      warning: 'attention',
+      error: 'alert'
+    };
+    const classes = [styles.toast];
+    if (className) classes.push(className);
+
+    let icon = '';
+    if (type) {
+      classes.push(styles[type]);
+      icon = <Icon type={icons[type]} className={styles.icon} />;
+    }
+
+    if (!this.state.shown) {
+      classes.push(styles.hidden);
+    }
+
+    return (
+      <div className={classes.join(' ')} style={style}>{icon}{children}</div>
+    );
+  }
+}
+
+Toast.propTypes = {
+  style: PropTypes.object,
+  type: PropTypes.oneOf(['success', 'warning', 'error']).isRequired,
+  className: PropTypes.string,
+  show: PropTypes.bool,
+  children: PropTypes.node
+};

src/components/UnpublishedListing.css

@@ -1,23 +1,32 @@
+.container {
+  display: table;
+  width: 100%;
+}
+
 .column {
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
+  display: table-cell;
   text-align: center;
-  width: 28%;
+  width: 33%;
+  height: 100%;
+  transition: background-color .5s ease;
   & h2 {
     font-size: 16px;
   }
 }
 
+.highlighted {
+  background-color: #e1eeea;
+}
+
 .column:not(:last-child) {
-  margin-right: 8%;
+  padding-right: 20px;
 }
 
 .card {
   width: 100% !important;
   margin: 7px 0;
 
-  & h1 {
+  & h2 {
     font-size: 17px;
     & small {
       font-weight: normal;
@@ -29,4 +38,16 @@
     font-size: 12px;
     margin-top: 5px;
   }
+
+  & button {
+    margin: 10px 10px 0 0;
+    float: right;
+  }
+}
+
+
+.clear::after {
+    content:"";
+    display:block;
+    clear:both;
 }

src/components/UnpublishedListing.js

@@ -1,21 +1,104 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import moment from 'moment';
 import { Card } from './UI';
 import { Link } from 'react-router';
-import { statusDescriptions } from '../constants/publishModes';
+import { status, statusDescriptions } from '../constants/publishModes';
 import styles from './UnpublishedListing.css';
 
-export default class UnpublishedListing extends React.Component {
+const CARD = 'card';
+
+/*
+ * Column DropTarget Component
+ */
+function Column({ connectDropTarget, status, isOver, children }) {
+  const className = isOver ? `${styles.column} ${styles.highlighted}` : styles.column;
+  return connectDropTarget(
+    <div className={className}>
+      <h2>{statusDescriptions.get(status)}</h2>
+      {children}
+    </div>
+  );
+}
+const columnTargetSpec = {
+  drop(props, monitor) {
+    const slug = monitor.getItem().slug;
+    const collection = monitor.getItem().collection;
+    const oldStatus = monitor.getItem().ownStatus;
+    props.onChangeStatus(collection, slug, oldStatus, props.status);
+  }
+};
+function columnCollect(connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+}
+Column = DropTarget(CARD, columnTargetSpec, columnCollect)(Column);
+
+
+/*
+ * Card  DropTarget Component
+ */
+function EntryCard({ slug, collection, ownStatus, onRequestPublish, connectDragSource, children }) {
+  return connectDragSource(
+    <div>
+      <Card className={styles.card}>
+        {children}
+        {(ownStatus === status.last()) &&
+          <button onClick={onRequestPublish}>Publish now</button>
+        }
+      </Card>
+    </div>
+  );
+}
+const cardDragSpec = {
+  beginDrag(props) {
+    return {
+      slug: props.slug,
+      collection: props.collection,
+      ownStatus: props.ownStatus
+    };
+  }
+};
+function cardCollect(connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource()
+  };
+}
+EntryCard = DragSource(CARD, cardDragSpec, cardCollect)(EntryCard);
+
+/*
+ * The actual exported component implementation
+ */
+class UnpublishedListing extends React.Component {
+  constructor(props) {
+    super(props);
+    this.renderColumns = this.renderColumns.bind(this);
+    this.requestPublish = this.requestPublish.bind(this);
+  }
+
+  requestPublish(collection, slug, ownStatus) {
+    if (ownStatus !== status.last()) return;
+    if (window.confirm('Are you sure you want to publish this entry?')) {
+      this.props.handlePublish(collection, slug, ownStatus);
+    }
+  }
+
   renderColumns(entries, column) {
     if (!entries) return;
 
     if (!column) {
       return entries.entrySeq().map(([currColumn, currEntries]) => (
-        <div key={currColumn} className={styles.column}>
-          <h2>{statusDescriptions.get(currColumn)}</h2>
+        <Column
+            key={currColumn}
+            status={currColumn}
+            onChangeStatus={this.props.handleChangeStatus}
+        >
           {this.renderColumns(currEntries, currColumn)}
-        </div>
+        </Column>
       ));
     } else {
       return <div>
@@ -24,11 +107,20 @@ export default class UnpublishedListing extends React.Component {
           const author = entry.getIn(['data', 'author'], entry.getIn(['metaData', 'user']));
           const timeStamp = moment(entry.getIn(['metaData', 'timeStamp'])).format('llll');
           const link = `/editorialworkflow/${entry.getIn(['metaData', 'collection'])}/${entry.getIn(['metaData', 'status'])}/${entry.get('slug')}`;
+          const slug = entry.get('slug');
+          const status = entry.getIn(['metaData', 'status']);
+          const collection = entry.getIn(['metaData', 'collection']);
           return (
-            <Card key={entry.get('slug')} className={styles.card}>
-              <h1><Link to={link}>{entry.getIn(['data', 'title'])}</Link> <small>by {author}</small></h1>
+            <EntryCard
+                key={slug}
+                slug={slug}
+                ownStatus={status}
+                collection={collection}
+                onRequestPublish={this.requestPublish.bind(this, collection, slug, status)} // eslint-disable-line
+            >
+              <h2><Link to={link}>{entry.getIn(['data', 'title'])}</Link> <small>by {author}</small></h2>
               <p>Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}</p>
-            </Card>
+            </EntryCard>
           );
         }
         )}
@@ -38,16 +130,21 @@ export default class UnpublishedListing extends React.Component {
 
   render() {
     const columns = this.renderColumns(this.props.entries);
-
     return (
-      <div>
+      <div className={styles.clear}>
         <h1>Editorial Workflow</h1>
+        <div className={styles.container}>
         {columns}
         </div>
+      </div>
     );
   }
 }
 
 UnpublishedListing.propTypes = {
   entries: ImmutablePropTypes.orderedMap,
+  handleChangeStatus: PropTypes.func.isRequired,
+  handlePublish: PropTypes.func.isRequired,
 };
+
+export default DragDropContext(HTML5Backend)(UnpublishedListing);

src/components/Widgets/MarkdownControlElements/VisualEditor/schema.js

@@ -62,4 +62,4 @@ export const SCHEMA = {
       borderRadius: '4px'
     }
   }
-}
+};

src/components/stories/Card.js

@@ -39,4 +39,4 @@ storiesOf('Card', module)
       <p>header and footer elements are also not subject to margin</p>
       <footer style={styles.footer}>&copy; Thousand Cats Corp</footer>
     </Card>
-  ))
+  ));

src/components/stories/Toast.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Toast } from '../UI';
+import { storiesOf } from '@kadira/storybook';
+
+
+storiesOf('Toast', module)
+  .add('Success', () => (
+    <div>
+      <Toast type='success' show>A Toast Message</Toast>
+    </div>
+  )).add('Waring', () => (
+    <div>
+      <Toast type='warning' show>A Toast Message</Toast>
+    </div>
+  )).add('Error', () => (
+    <div>
+      <Toast type='error' show>A Toast Message</Toast>
+    </div>
+  ));

src/components/stories/index.js

@@ -1,2 +1,3 @@
 import './Card';
 import './Icon';
+import './Toast';

src/containers/App.js

@@ -4,6 +4,7 @@ import { IndexLink } from 'react-router';
 import { loadConfig } from '../actions/config';
 import { loginUser } from '../actions/auth';
 import { currentBackend } from '../backends/backend';
+import { Loader } from '../components/UI';
 import { SHOW_COLLECTION, CREATE_COLLECTION, HELP } from '../actions/findbar';
 import FindBar from './FindBar';
 import styles from './App.css';
@@ -27,7 +28,7 @@ class App extends React.Component {
 
   configLoading() {
     return <div>
-      <h1>Loading configuration...</h1>
+      <Loader active>Loading configuration...</Loader>
     </div>;
   }
 

src/containers/FindBar.js

@@ -13,7 +13,12 @@ class FindBar extends Component {
   constructor(props) {
     super(props);
     this._compiledCommands = [];
-    this._searchCommand = { search: true, regexp:`(?:${SEARCH})?(.*)`, param:{ name:'searchTerm', display:'' }, token: SEARCH };
+    this._searchCommand = {
+      search: true,
+      regexp: `(?:${SEARCH})?(.*)`,
+      param: { name: 'searchTerm', display: '' },
+      token: SEARCH
+    };
     this.state = {
       value: '',
       placeholder: PLACEHOLDER,
@@ -144,6 +149,7 @@ class FindBar extends Component {
   getSuggestions() {
     return this._getSuggestions(this.state.value, this.state.activeScope, this._compiledCommands, this.props.defaultCommands);
   }
+
   // Memoized version
   _getSuggestions(value, scope, commands, defaultCommands) {
     if (scope) return []; // No autocomplete for scoped input
@@ -299,7 +305,8 @@ class FindBar extends Component {
             <span><Icon type="search"/>Search... </span> :
             <span className={styles.faded}><Icon type="search"/>Search for: </span>
           }
-          <strong>{this.state.value}</strong></span>
+            <strong>{this.state.value}</strong>
+          </span>
         );
       }
       return (
@@ -358,6 +365,7 @@ class FindBar extends Component {
     );
   }
 }
+
 FindBar.propTypes = {
   commands: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,

src/containers/editorialWorkflow/CollectionPageHOC.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { OrderedMap } from 'immutable';
-import { loadUnpublishedEntries } from '../../actions/editorialWorkflow';
+import { loadUnpublishedEntries, updateUnpublishedEntryStatus, publishUnpublishedEntry } from '../../actions/editorialWorkflow';
 import { selectUnpublishedEntries } from '../../reducers';
 import { EDITORIAL_WORKFLOW, status } from '../../constants/publishModes';
 import UnpublishedListing from '../../components/UnpublishedListing';
@@ -20,12 +20,16 @@ export default function CollectionPageHOC(CollectionPage) {
     }
 
     render() {
-      const { isEditorialWorkflow, unpublishedEntries } = this.props;
+      const { isEditorialWorkflow, unpublishedEntries, updateUnpublishedEntryStatus, publishUnpublishedEntry } = this.props;
       if (!isEditorialWorkflow) return super.render();
 
       return (
         <div className={styles.alignable}>
-          <UnpublishedListing entries={unpublishedEntries}/>
+          <UnpublishedListing
+              entries={unpublishedEntries}
+              handleChangeStatus={updateUnpublishedEntryStatus}
+              handlePublish={publishUnpublishedEntry}
+          />
           {super.render()}
         </div>
       );
@@ -56,5 +60,8 @@ export default function CollectionPageHOC(CollectionPage) {
     return returnObj;
   }
 
-  return connect(mapStateToProps)(CollectionPageHOC);
+  return connect(mapStateToProps, {
+    updateUnpublishedEntryStatus,
+    publishUnpublishedEntry
+  })(CollectionPageHOC);
 }

src/containers/editorialWorkflow/EntryPageHOC.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EDITORIAL_WORKFLOW } from '../../constants/publishModes';
 import { selectUnpublishedEntry } from '../../reducers';
-import { loadUnpublishedEntry } from '../../actions/editorialWorkflow';
+import { loadUnpublishedEntry, persistUnpublishedEntry } from '../../actions/editorialWorkflow';
 import { connect } from 'react-redux';
 
 export default function EntryPageHOC(EntryPage) {
@@ -22,10 +22,6 @@ export default function EntryPageHOC(EntryPage) {
       const slug = ownProps.params.slug;
       const entry =  selectUnpublishedEntry(state, status, slug);
       returnObj.entry = entry;
-
-      returnObj.persistEntry = () => {
-        // TODO - for now, simply ignore
-      };
     }
     return returnObj;
   }
@@ -39,6 +35,10 @@ export default function EntryPageHOC(EntryPage) {
       returnObj.loadEntry = (collection, slug) => {
         dispatch(loadUnpublishedEntry(collection, status, slug));
       };
+
+      returnObj.persistEntry = (collection, entryDraft) => {
+        dispatch(persistUnpublishedEntry(collection, entryDraft));
+      };
     }
     return returnObj;
   }

src/reducers/editorialWorkflow.js

@@ -1,7 +1,12 @@
 import { Map, List, fromJS } from 'immutable';
 import { EDITORIAL_WORKFLOW } from '../constants/publishModes';
 import {
-  UNPUBLISHED_ENTRY_REQUEST, UNPUBLISHED_ENTRY_SUCCESS, UNPUBLISHED_ENTRIES_REQUEST, UNPUBLISHED_ENTRIES_SUCCESS
+  UNPUBLISHED_ENTRY_REQUEST,
+  UNPUBLISHED_ENTRY_SUCCESS,
+  UNPUBLISHED_ENTRIES_REQUEST,
+  UNPUBLISHED_ENTRIES_SUCCESS,
+  UNPUBLISHED_ENTRY_STATUS_CHANGE_SUCCESS,
+  UNPUBLISHED_ENTRY_PUBLISH_SUCCESS
 } from '../actions/editorialWorkflow';
 import { CONFIG_SUCCESS } from '../actions/config';
 
@@ -39,6 +44,23 @@ const unpublishedEntries = (state = null, action) => {
           ids: List(entries.map((entry) => entry.slug))
         }));
       });
+
+    case UNPUBLISHED_ENTRY_STATUS_CHANGE_SUCCESS:
+      return state.withMutations((map) => {
+        let entry = map.getIn(['entities', `${action.payload.oldStatus}.${action.payload.slug}`]);
+        entry = entry.setIn(['metaData', 'status'], action.payload.newStatus);
+
+        let entities = map.get('entities').filter((val, key) => (
+          key !== `${action.payload.oldStatus}.${action.payload.slug}`
+        ));
+        entities = entities.set(`${action.payload.newStatus}.${action.payload.slug}`, entry);
+
+        map.set('entities', entities);
+      });
+
+    case UNPUBLISHED_ENTRY_PUBLISH_SUCCESS:
+      return state.deleteIn(['entities', `${action.payload.status}.${action.payload.slug}`]);
+
     default:
       return state;
   }