fix(workflow): label file collection entries in Workflow (#2566)

packages/netlify-cms-core/src/backend.js

@@ -7,6 +7,7 @@ import {
   selectListMethod,
   selectEntrySlug,
   selectEntryPath,
+  selectFileEntryLabel,
   selectAllowNewEntries,
   selectAllowDeletion,
   selectFolderEntryExtension,
@@ -73,11 +74,6 @@ function getEntryBackupKey(collectionName, slug) {
   return `${baseKey}.${collectionName}${suffix}`;
 }
 
-function getLabelForFileCollectionEntry(collection, path) {
-  const files = collection.get('files');
-  return files && files.find(f => f.get('file') === path).get('label');
-}
-
 function slugFormatter(collection, entryData, slugConfig) {
   const template = collection.get('slug') || '{{slug}}';
 
@@ -409,7 +405,7 @@ export class Backend {
       return;
     }
     const { raw, path } = backup;
-    const label = getLabelForFileCollectionEntry(collection, path);
+    const label = selectFileEntryLabel(collection, slug);
     return this.entryWithFormat(collection, slug)(
       createEntry(collection.get('name'), slug, path, { raw, label }),
     );
@@ -439,7 +435,7 @@ export class Backend {
 
   getEntry(collection, slug) {
     const path = selectEntryPath(collection, slug);
-    const label = getLabelForFileCollectionEntry(collection, path);
+    const label = selectFileEntryLabel(collection, slug);
     return this.implementation.getEntry(collection, slug, path).then(loadedEntry =>
       this.entryWithFormat(collection, slug)(
         createEntry(collection.get('name'), slug, loadedEntry.file.path, {
@@ -483,15 +479,13 @@ export class Backend {
       .then(loadedEntries => loadedEntries.filter(entry => entry !== null))
       .then(entries =>
         entries.map(loadedEntry => {
-          const entry = createEntry(
+          const collectionName = loadedEntry.metaData.collection;
-            loadedEntry.metaData.collection,
+          const collection = collections.find(c => c.get('name') === collectionName);
-            loadedEntry.slug,
+          const entry = createEntry(collectionName, loadedEntry.slug, loadedEntry.file.path, {
-            loadedEntry.file.path,
-            {
             raw: loadedEntry.data,
             isModification: loadedEntry.isModification,
-            },
+            label: selectFileEntryLabel(collection, loadedEntry.slug),
-          );
+          });
           entry.metaData = loadedEntry.metaData;
           return entry;
         }),

packages/netlify-cms-core/src/components/Workflow/WorkflowCard.js

@@ -43,7 +43,7 @@ const CardTitle = styled.h2`
   color: ${colors.textLead};
 `;
 
-const CardDate = styled.div`
+const CardDateContainer = styled.div`
   ${styles.text};
 `;
 
@@ -98,6 +98,25 @@ const WorkflowCardContainer = styled.div`
   }
 `;
 
+const lastChangePhraseKey = (date, author) => {
+  if (date && author) {
+    return 'lastChange';
+  } else if (date) {
+    return 'lastChangeNoAuthor';
+  } else if (author) {
+    return 'lastChangeNoDate';
+  }
+};
+
+const CardDate = translate()(({ t, date, author }) => {
+  const key = lastChangePhraseKey(date, author);
+  if (key) {
+    return (
+      <CardDateContainer>{t(`workflow.workflowCard.${key}`, { date, author })}</CardDateContainer>
+    );
+  }
+});
+
 const WorkflowCard = ({
   collectionName,
   title,
@@ -115,12 +134,7 @@ const WorkflowCard = ({
     <WorkflowLink to={editLink}>
       <CardCollection>{collectionName}</CardCollection>
       <CardTitle>{title}</CardTitle>
-      <CardDate>
+      {(timestamp || authorLastChange) && <CardDate date={timestamp} author={authorLastChange} />}
-        {t('workflow.workflowCard.lastChange', {
-          date: timestamp || '',
-          author: authorLastChange || '',
-        })}
-      </CardDate>
       <CardBody>{body}</CardBody>
     </WorkflowLink>
     <CardButtonContainer>
@@ -140,9 +154,9 @@ const WorkflowCard = ({
 
 WorkflowCard.propTypes = {
   collectionName: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
-  authorLastChange: PropTypes.string.isRequired,
+  authorLastChange: PropTypes.string,
-  body: PropTypes.string.isRequired,
+  body: PropTypes.string,
   isModification: PropTypes.bool,
   editLink: PropTypes.string.isRequired,
   timestamp: PropTypes.string.isRequired,

packages/netlify-cms-core/src/components/Workflow/WorkflowList.js

@@ -226,7 +226,7 @@ class WorkflowList extends React.Component {
                   <div>
                     <WorkflowCard
                       collectionName={collection}
-                      title={entry.getIn(['data', 'title'])}
+                      title={entry.get('label') || entry.getIn(['data', 'title'])}
                       authorLastChange={entry.getIn(['metaData', 'user'])}
                       body={entry.getIn(['data', 'body'])}
                       isModification={isModification}

packages/netlify-cms-core/src/constants/defaultPhrases.js

@@ -156,6 +156,8 @@ export function getPhrases() {
       },
       workflowCard: {
         lastChange: '%{date} by %{author}',
+        lastChangeNoAuthor: '%{date}',
+        lastChangeNoDate: 'by %{author}',
         deleteChanges: 'Delete changes',
         deleteNewEntry: 'Delete new entry',
         publishChanges: 'Publish changes',

packages/netlify-cms-core/src/reducers/collections.js

@@ -65,7 +65,7 @@ const selectors = {
   [FILES]: {
     fileForEntry(collection, slug) {
       const files = collection.get('files');
-      return files.filter(f => f.get('name') === slug).get(0);
+      return files && files.filter(f => f.get('name') === slug).get(0);
     },
     fields(collection, slug) {
       const file = this.fileForEntry(collection, slug);
@@ -82,6 +82,11 @@ const selectors = {
         .get(0);
       return file && file.get('name');
     },
+    entryLabel(collection, slug) {
+      const path = this.entryPath(collection, slug);
+      const files = collection.get('files');
+      return files && files.find(f => f.get('file') === path).get('label');
+    },
     listMethod() {
       return 'entriesByFiles';
     },
@@ -101,6 +106,8 @@ export const selectFields = (collection, slug) =>
   selectors[collection.get('type')].fields(collection, slug);
 export const selectFolderEntryExtension = collection =>
   selectors[FOLDER].entryExtension(collection);
+export const selectFileEntryLabel = (collection, slug) =>
+  selectors[FILES].entryLabel(collection, slug);
 export const selectEntryPath = (collection, slug) =>
   selectors[collection.get('type')].entryPath(collection, slug);
 export const selectEntrySlug = (collection, path) =>