feat: add workflow status to entry card

Author: martinjagodic

packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { colors, colorsRaw, components, lengths, zIndex } from 'decap-cms-ui-default';
+import { colors, colorsRaw, components, lengths, zIndex, Icon } from 'decap-cms-ui-default';
 
 import { boundGetAsset } from '../../../actions/media';
 import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from '../../../constants/collectionViews';
@@ -56,10 +56,14 @@ const CollectionLabel = styled.h2`
 
 const ListCardTitle = styled.h2`
   margin-bottom: 0;
+  display: flex;
+  justify-content: space-between;
 `;
 
 const CardHeading = styled.h2`
   margin: 0 0 2px;
+  display: flex;
+  justify-content: space-between;
 `;
 
 const CardBody = styled.div`
@@ -89,21 +93,43 @@ const CardImage = styled.div`
   height: 150px;
 `;
 
+const TitleIcons = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const StatusIcon = styled(Icon)`
+  color: ${props => {
+    switch (props.workflowStatus) {
+      case 'pending_review': return colors.statusReviewBackground;
+      case 'pending_publish': return colors.statusReadyBackground;
+      default: return colors.statusDraftBackground;
+    }
+  }};
+`;
+
 function EntryCard({
   path,
   summary,
   image,
   imageField,
   collectionLabel,
   viewStyle = VIEW_STYLE_LIST,
+  workflowStatus,
   getAsset,
 }) {
   if (viewStyle === VIEW_STYLE_LIST) {
     return (
       <ListCard>
         <ListCardLink to={path}>
           {collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null}
-          <ListCardTitle>{summary}</ListCardTitle>
+          <ListCardTitle>
+            {summary}
+            <TitleIcons>
+              {workflowStatus && <StatusIcon type="circle" />}
+            </TitleIcons>
+          </ListCardTitle>
         </ListCardLink>
       </ListCard>
     );

packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js

@@ -4,7 +4,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 import { Waypoint } from 'react-waypoint';
 import { Map } from 'immutable';
+import { connect } from 'react-redux';
 
+import { selectUnpublishedEntry } from '../../../reducers';
 import { selectFields, selectInferredField } from '../../../reducers/collections';
 import EntryCard from './EntryCard';
 
@@ -17,7 +19,7 @@ const CardsGrid = styled.ul`
   margin-bottom: 16px;
 `;
 
-export default class EntryListing extends React.Component {
+class EntryListing extends React.Component {
   static propTypes = {
     collections: ImmutablePropTypes.iterable.isRequired,
     entries: ImmutablePropTypes.list,
@@ -53,7 +55,20 @@ export default class EntryListing extends React.Component {
     const { collections, entries, viewStyle } = this.props;
     const inferredFields = this.inferFields(collections);
     const entryCardProps = { collection: collections, inferredFields, viewStyle };
-    return entries.map((entry, idx) => <EntryCard {...entryCardProps} entry={entry} key={idx} />);
+
+    return entries.map((entry, idx) => {
+      const workflowStatus = this.props.getWorkflowStatus(collections.get('name'), entry.get('slug'));
+      console.log('workflowStatus', workflowStatus);
+
+      return (
+        <EntryCard
+          {...entryCardProps}
+          entry={entry}
+          workflowStatus={workflowStatus}
+          key={idx}
+        />
+      );
+    });
   };
 
   renderCardsForMultipleCollections = () => {
@@ -84,3 +99,16 @@ export default class EntryListing extends React.Component {
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    getWorkflowStatus: (collectionName, slug) => {
+
+      const unpublishedEntry = selectUnpublishedEntry(state, collectionName, slug);
+      console.log('getWorkflowStatus', unpublishedEntry);
+      return unpublishedEntry ? unpublishedEntry.get('status') : null;
+    }
+  };
+}
+
+export default connect(mapStateToProps)(EntryListing);