Label cards in editorial workflow

src/backends/backend.js

@@ -124,7 +124,15 @@ class Backend {
     .then(loadedEntries => loadedEntries.filter(entry => entry !== null))
     .then(entries => (
       entries.map((loadedEntry) => {
-        const entry = createEntry(loadedEntry.metaData.collection, loadedEntry.slug, loadedEntry.file.path, { raw: loadedEntry.data });
+        const entry = createEntry(
+          loadedEntry.metaData.collection,
+          loadedEntry.slug,
+          loadedEntry.file.path,
+          {
+            raw: loadedEntry.data,
+            isModification: loadedEntry.isModification,
+          }
+        );
         entry.metaData = loadedEntry.metaData;
         return entry;
       })
@@ -138,7 +146,14 @@ class Backend {
   unpublishedEntry(collection, slug) {
     return this.implementation.unpublishedEntry(collection, slug)
     .then((loadedEntry) => {
-      const entry = createEntry("draft", loadedEntry.slug, loadedEntry.file.path, { raw: loadedEntry.data });
+      const entry = createEntry(
+        "draft",
+        loadedEntry.slug,
+        loadedEntry.file.path,
+        {
+          raw: loadedEntry.data,
+          isModification: loadedEntry.isModification,
+        });
       entry.metaData = loadedEntry.metaData;
       return entry;
     })

src/backends/github/API.js

@@ -159,7 +159,7 @@ export default class API {
   }
 
   readUnpublishedBranchFile(contentKey) {
-    let metaData;
+    let metaData, fileData;
     const unpublishedPromise = this.retrieveMetadata(contentKey)
     .then((data) => {
       metaData = data;
@@ -168,13 +168,28 @@ export default class API {
       }
       return Promise.reject(null);
     })
-    .then(fileData => ({ metaData, fileData }))
+    .then((file) => {
+      fileData = file;
+      return this.isUnpublishedEntryModification(metaData.objects.entry.path);
+    })
+    .then(isModification => ({ metaData, fileData, isModification }))
     .catch(() => {
       throw new EditorialWorkflowError('content is not under editorial workflow', true);
     });
     return unpublishedPromise;
   }
 
+  isUnpublishedEntryModification(path, branch) {
+    return this.readFile(path, null, branch)
+    .then(data => true)
+    .catch((err) => {
+      if (err.message && err.message === "Not Found") {
+        return false;
+      }
+      throw err;
+    });
+  }
+
   listUnpublishedBranches() {
     console.log("%c Checking for Unpublished entries", "line-height: 30px;text-align: center;font-weight: bold"); // eslint-disable-line
     return this.request(`${ this.repoURL }/git/refs/heads/cms`)

src/backends/github/implementation.js

@@ -99,6 +99,7 @@ export default class GitHub {
                 file: { path },
                 data: data.fileData,
                 metaData: data.metaData,
+                isModification: data.isModification,
               });
               sem.leave();
             }
@@ -127,6 +128,7 @@ export default class GitHub {
         file: { path: data.metaData.objects.entry.path },
         data: data.fileData,
         metaData: data.metaData,
+        isModification: data.isModification,
       };
     });
   }

src/components/UI/theme.css

@@ -2,12 +2,14 @@
   --defaultColor: #333;
   --defaultColorLight: #eee;
   --backgroundColor: #fff;
+  --backgroundColorShaded: #eee;
   --shadowColor: rgba(0, 0, 0, .25);
   --infoColor: #69c;
   --successColor: #1c7;
   --warningColor: #fa0;
   --errorColor: #f52;
   --borderRadius: 2px;
+  --borderRadiusLarge: 10px;
   --topmostZindex: 99999;
   --foregroundAltColor: #fff;
   --backgroundAltColor: #272e30;

src/components/UnpublishedListing/UnpublishedListing.js

@@ -3,8 +3,11 @@ import { DragSource, DropTarget, HTML5DragDrop } from 'react-simple-dnd';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router';
 import moment from 'moment';
+import pluralize from 'pluralize';
+import { capitalize } from 'lodash'
 import { Card, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
 import Button from 'react-toolbox/lib/button';
+import UnpublishedListingCardMeta from './UnpublishedListingCardMeta.js';
 import { status, statusDescriptions } from '../../constants/publishModes';
 import styles from './UnpublishedListing.css';
 
@@ -68,6 +71,7 @@ class UnpublishedListing extends React.Component {
             const slug = entry.get('slug');
             const ownStatus = entry.getIn(['metaData', 'status']);
             const collection = entry.getIn(['metaData', 'collection']);
+            const isModification = entry.get('isModification');
             return (
               <DragSource
                 key={slug}
@@ -77,6 +81,10 @@ class UnpublishedListing extends React.Component {
               >
                 <div className={styles.draggable}>
                   <Card className={styles.card}>
+                    <UnpublishedListingCardMeta
+                      meta={capitalize(pluralize(collection))}
+                      label={isModification ? "" : "New"}
+                    />
                     <CardTitle
                       title={entry.getIn(['data', 'title'])}
                       subtitle={`by ${ author }`}

src/components/UnpublishedListing/UnpublishedListingCardMeta.css

@@ -0,0 +1,25 @@
+@import '../UI/theme.css';
+
+.cardMeta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 34px;
+  padding: 0 16px;
+  margin-bottom: -6px;
+
+  font-size: .75em;
+  text-transform: uppercase;
+
+  background: var(--backgroundColorShaded);
+}
+
+.meta {}
+.label {
+  padding: 5px 8px 4px 8px;
+  border-radius: var(--borderRadiusLarge);
+
+  background: var(--backgroundAltColor);
+  color: var(--defaultColorLight)
+}

src/components/UnpublishedListing/UnpublishedListingCardMeta.js

@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+import styles from './UnpublishedListingCardMeta.css';
+
+const UnpublishedListingCardMeta = ({ meta, label }) =>
+  <div className={styles.cardMeta}>
+    <span className={styles.meta}>{meta}</span>
+    {(label && label.length > 0)
+      ? <span className={styles.label}>{label}</span>
+      : ""}
+  </div>;
+
+UnpublishedListingCardMeta.propTypes = {
+  meta: PropTypes.string.isRequired,
+  label: PropTypes.string,
+};
+
+export default UnpublishedListingCardMeta;

src/valueObjects/Entry.js

@@ -1,3 +1,5 @@
+import { isBoolean } from "lodash";
+
 export function createEntry(collection, slug = '', path = '', options = {}) {
   const returnObj = {};
   returnObj.collection = collection;
@@ -8,5 +10,8 @@ export function createEntry(collection, slug = '', path = '', options = {}) {
   returnObj.data = options.data || {};
   returnObj.label = options.label || null;
   returnObj.metaData = options.metaData || null;
+  returnObj.isModification = isBoolean(options.isModification)
+    ? options.isModification
+    : null;
   return returnObj;
 }