@pranaysahith/decap-cms-core 3.9.1

package/src/components/Workflow/Workflow.js

@@ -0,0 +1,169 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import styled from '@emotion/styled';
+import { OrderedMap } from 'immutable';
+import { translate } from 'react-polyglot';
+import { connect } from 'react-redux';
+import {
+  Dropdown,
+  DropdownItem,
+  StyledDropdownButton,
+  Loader,
+  lengths,
+  components,
+  shadows,
+} from 'decap-cms-ui-default';
+
+import { createNewEntry } from '../../actions/collections';
+import {
+  loadUnpublishedEntries,
+  updateUnpublishedEntryStatus,
+  publishUnpublishedEntry,
+  deleteUnpublishedEntry,
+} from '../../actions/editorialWorkflow';
+import { selectUnpublishedEntriesByStatus } from '../../reducers';
+import { EDITORIAL_WORKFLOW, status } from '../../constants/publishModes';
+import WorkflowList from './WorkflowList';
+
+const WorkflowContainer = styled.div`
+  padding: ${lengths.pageMargin} 0;
+  height: 100vh;
+`;
+
+const WorkflowTop = styled.div`
+  ${components.cardTop};
+`;
+
+const WorkflowTopRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  span[role='button'] {
+    ${shadows.dropDeep};
+  }
+`;
+
+const WorkflowTopHeading = styled.h1`
+  ${components.cardTopHeading};
+`;
+
+const WorkflowTopDescription = styled.p`
+  ${components.cardTopDescription};
+`;
+
+class Workflow extends Component {
+  static propTypes = {
+    collections: ImmutablePropTypes.map.isRequired,
+    isEditorialWorkflow: PropTypes.bool.isRequired,
+    isOpenAuthoring: PropTypes.bool,
+    isFetching: PropTypes.bool,
+    unpublishedEntries: ImmutablePropTypes.map,
+    loadUnpublishedEntries: PropTypes.func.isRequired,
+    updateUnpublishedEntryStatus: PropTypes.func.isRequired,
+    publishUnpublishedEntry: PropTypes.func.isRequired,
+    deleteUnpublishedEntry: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(Workflow.propTypes, this.props, 'prop', 'Workflow');
+
+    const { loadUnpublishedEntries, isEditorialWorkflow, collections } = this.props;
+    if (isEditorialWorkflow) {
+      loadUnpublishedEntries(collections);
+    }
+  }
+
+  render() {
+    const {
+      isEditorialWorkflow,
+      isOpenAuthoring,
+      isFetching,
+      unpublishedEntries,
+      updateUnpublishedEntryStatus,
+      publishUnpublishedEntry,
+      deleteUnpublishedEntry,
+      collections,
+      t,
+    } = this.props;
+
+    if (!isEditorialWorkflow) return null;
+    if (isFetching) return <Loader active>{t('workflow.workflow.loading')}</Loader>;
+    const reviewCount = unpublishedEntries.get('pending_review').size;
+    const readyCount = unpublishedEntries.get('pending_publish').size;
+
+    return (
+      <WorkflowContainer>
+        <WorkflowTop>
+          <WorkflowTopRow>
+            <WorkflowTopHeading>{t('workflow.workflow.workflowHeading')}</WorkflowTopHeading>
+            <Dropdown
+              dropdownWidth="160px"
+              dropdownPosition="left"
+              dropdownTopOverlap="40px"
+              renderButton={() => (
+                <StyledDropdownButton>{t('workflow.workflow.newPost')}</StyledDropdownButton>
+              )}
+            >
+              {collections
+                .filter(collection => collection.get('create'))
+                .toList()
+                .map(collection => (
+                  <DropdownItem
+                    key={collection.get('name')}
+                    label={collection.get('label')}
+                    onClick={() => createNewEntry(collection.get('name'))}
+                  />
+                ))}
+            </Dropdown>
+          </WorkflowTopRow>
+          <WorkflowTopDescription>
+            {t('workflow.workflow.description', {
+              smart_count: reviewCount,
+              readyCount,
+            })}
+          </WorkflowTopDescription>
+        </WorkflowTop>
+        <WorkflowList
+          entries={unpublishedEntries}
+          handleChangeStatus={updateUnpublishedEntryStatus}
+          handlePublish={publishUnpublishedEntry}
+          handleDelete={deleteUnpublishedEntry}
+          isOpenAuthoring={isOpenAuthoring}
+          collections={collections}
+        />
+      </WorkflowContainer>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  const { collections, config, globalUI } = state;
+  const isEditorialWorkflow = config.publish_mode === EDITORIAL_WORKFLOW;
+  const isOpenAuthoring = globalUI.useOpenAuthoring;
+  const returnObj = { collections, isEditorialWorkflow, isOpenAuthoring };
+
+  if (isEditorialWorkflow) {
+    returnObj.isFetching = state.editorialWorkflow.getIn(['pages', 'isFetching'], false);
+
+    /*
+     * Generates an ordered Map of the available status as keys.
+     * Each key containing a Sequence of available unpubhlished entries
+     * Eg.: OrderedMap{'draft':Seq(), 'pending_review':Seq(), 'pending_publish':Seq()}
+     */
+    returnObj.unpublishedEntries = status.reduce((acc, currStatus) => {
+      const entries = selectUnpublishedEntriesByStatus(state, currStatus);
+      return acc.set(currStatus, entries);
+    }, OrderedMap());
+  }
+  return returnObj;
+}
+
+export default connect(mapStateToProps, {
+  loadUnpublishedEntries,
+  updateUnpublishedEntryStatus,
+  publishUnpublishedEntry,
+  deleteUnpublishedEntry,
+})(translate()(Workflow));

package/src/components/Workflow/WorkflowCard.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { translate } from 'react-polyglot';
+import { Link } from 'react-router-dom';
+import { components, colors, colorsRaw, transitions, buttons } from 'decap-cms-ui-default';
+
+const styles = {
+  text: css`
+    font-size: 13px;
+    font-weight: normal;
+    margin-top: 4px;
+  `,
+  button: css`
+    ${buttons.button};
+    width: auto;
+    flex: 1 0 0;
+    font-size: 13px;
+    padding: 6px 0;
+  `,
+};
+
+const WorkflowLink = styled(Link)`
+  display: block;
+  padding: 0 18px 18px;
+  height: 200px;
+  overflow: hidden;
+`;
+
+const CardCollection = styled.div`
+  font-size: 14px;
+  color: ${colors.textLead};
+  text-transform: uppercase;
+  margin-top: 12px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const CardTitle = styled.h2`
+  margin: 28px 0 0;
+  color: ${colors.textLead};
+`;
+
+const CardDateContainer = styled.div`
+  ${styles.text};
+`;
+
+const CardBody = styled.p`
+  ${styles.text};
+  color: ${colors.text};
+  margin: 24px 0 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+`;
+
+const CardButtonContainer = styled.div`
+  background-color: ${colors.foreground};
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 12px 18px;
+  display: flex;
+  opacity: 0;
+  transition: opacity ${transitions.main};
+  cursor: pointer;
+`;
+
+const DeleteButton = styled.button`
+  ${styles.button};
+  background-color: ${colorsRaw.redLight};
+  color: ${colorsRaw.red};
+  margin-right: 6px;
+`;
+
+const PublishButton = styled.button`
+  ${styles.button};
+  background-color: ${colorsRaw.teal};
+  color: ${colors.textLight};
+  margin-left: 6px;
+
+  &[disabled] {
+    ${buttons.disabled};
+  }
+`;
+
+const WorkflowCardContainer = styled.div`
+  ${components.card};
+  margin-bottom: 24px;
+  position: relative;
+  overflow: hidden;
+
+  &:hover ${CardButtonContainer} {
+    opacity: 1;
+  }
+`;
+
+function 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>
+    );
+  }
+});
+
+function WorkflowCard({
+  collectionLabel,
+  title,
+  authorLastChange,
+  body,
+  isModification,
+  editLink,
+  timestamp,
+  onDelete,
+  allowPublish,
+  canPublish,
+  onPublish,
+  postAuthor,
+  t,
+}) {
+  return (
+    <WorkflowCardContainer>
+      <WorkflowLink to={editLink}>
+        <CardCollection>{collectionLabel}</CardCollection>
+        {postAuthor}
+        <CardTitle>{title}</CardTitle>
+        {(timestamp || authorLastChange) && <CardDate date={timestamp} author={authorLastChange} />}
+        <CardBody>{body}</CardBody>
+      </WorkflowLink>
+      <CardButtonContainer>
+        <DeleteButton onClick={onDelete}>
+          {isModification
+            ? t('workflow.workflowCard.deleteChanges')
+            : t('workflow.workflowCard.deleteNewEntry')}
+        </DeleteButton>
+        {allowPublish && (
+          <PublishButton disabled={!canPublish} onClick={onPublish}>
+            {isModification
+              ? t('workflow.workflowCard.publishChanges')
+              : t('workflow.workflowCard.publishNewEntry')}
+          </PublishButton>
+        )}
+      </CardButtonContainer>
+    </WorkflowCardContainer>
+  );
+}
+
+WorkflowCard.propTypes = {
+  collectionLabel: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  authorLastChange: PropTypes.string,
+  body: PropTypes.string,
+  isModification: PropTypes.bool,
+  editLink: PropTypes.string.isRequired,
+  timestamp: PropTypes.string.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  allowPublish: PropTypes.bool.isRequired,
+  canPublish: PropTypes.bool.isRequired,
+  onPublish: PropTypes.func.isRequired,
+  postAuthor: PropTypes.string,
+  t: PropTypes.func.isRequired,
+};
+
+export default translate()(WorkflowCard);

package/src/components/Workflow/WorkflowList.js

@@ -0,0 +1,272 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import dayjs from 'dayjs';
+import { translate } from 'react-polyglot';
+import { colors, lengths } from 'decap-cms-ui-default';
+
+import { status } from '../../constants/publishModes';
+import { DragSource, DropTarget, HTML5DragDrop } from '../UI';
+import WorkflowCard from './WorkflowCard';
+import { selectEntryCollectionTitle } from '../../reducers/collections';
+
+const WorkflowListContainer = styled.div`
+  min-height: 60%;
+  display: grid;
+  grid-template-columns: 33.3% 33.3% 33.3%;
+`;
+
+const WorkflowListContainerOpenAuthoring = styled.div`
+  min-height: 60%;
+  display: grid;
+  grid-template-columns: 50% 50% 0%;
+`;
+
+const styles = {
+  columnPosition: idx =>
+    (idx === 0 &&
+      css`
+        margin-left: 0;
+      `) ||
+    (idx === 2 &&
+      css`
+        margin-right: 0;
+      `) ||
+    css`
+      &:before,
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 2px;
+        height: 80%;
+        top: 76px;
+        background-color: ${colors.textFieldBorder};
+      }
+
+      &:before {
+        left: -23px;
+      }
+
+      &:after {
+        right: -23px;
+      }
+    `,
+  column: css`
+    margin: 0 20px;
+    transition: background-color 0.5s ease;
+    border: 2px dashed transparent;
+    border-radius: 4px;
+    position: relative;
+    height: 100%;
+  `,
+  columnHovered: css`
+    border-color: ${colors.active};
+  `,
+  hiddenColumn: css`
+    display: none;
+  `,
+  hiddenRightBorder: css`
+    &:not(:first-child):not(:last-child) {
+      &:after {
+        display: none;
+      }
+    }
+  `,
+};
+
+const ColumnHeader = styled.h2`
+  font-size: 20px;
+  font-weight: normal;
+  padding: 4px 14px;
+  border-radius: ${lengths.borderRadius};
+  margin-bottom: 28px;
+
+  ${props =>
+    props.name === 'draft' &&
+    css`
+      background-color: ${colors.statusDraftBackground};
+      color: ${colors.statusDraftText};
+    `}
+
+  ${props =>
+    props.name === 'pending_review' &&
+    css`
+      background-color: ${colors.statusReviewBackground};
+      color: ${colors.statusReviewText};
+    `}
+
+  ${props =>
+    props.name === 'pending_publish' &&
+    css`
+      background-color: ${colors.statusReadyBackground};
+      color: ${colors.statusReadyText};
+    `}
+`;
+
+const ColumnCount = styled.p`
+  font-size: 13px;
+  font-weight: 500;
+  color: ${colors.text};
+  text-transform: uppercase;
+  margin-bottom: 6px;
+`;
+
+// This is a namespace so that we can only drop these elements on a DropTarget with the same
+const DNDNamespace = 'cms-workflow';
+
+function getColumnHeaderText(columnName, t) {
+  switch (columnName) {
+    case 'draft':
+      return t('workflow.workflowList.draftHeader');
+    case 'pending_review':
+      return t('workflow.workflowList.inReviewHeader');
+    case 'pending_publish':
+      return t('workflow.workflowList.readyHeader');
+  }
+}
+
+class WorkflowList extends React.Component {
+  static propTypes = {
+    entries: ImmutablePropTypes.orderedMap,
+    handleChangeStatus: PropTypes.func.isRequired,
+    handlePublish: PropTypes.func.isRequired,
+    handleDelete: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
+    isOpenAuthoring: PropTypes.bool,
+    collections: ImmutablePropTypes.map.isRequired,
+  };
+
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(WorkflowList.propTypes, this.props, 'prop', 'WorkflowList');
+  }
+
+  handleChangeStatus = (newStatus, dragProps) => {
+    const slug = dragProps.slug;
+    const collection = dragProps.collection;
+    const oldStatus = dragProps.ownStatus;
+    this.props.handleChangeStatus(collection, slug, oldStatus, newStatus);
+  };
+
+  requestDelete = (collection, slug, ownStatus) => {
+    if (window.confirm(this.props.t('workflow.workflowList.onDeleteEntry'))) {
+      this.props.handleDelete(collection, slug, ownStatus);
+    }
+  };
+
+  requestPublish = (collection, slug, ownStatus) => {
+    if (ownStatus !== status.last()) {
+      window.alert(this.props.t('workflow.workflowList.onPublishingNotReadyEntry'));
+      return;
+    } else if (!window.confirm(this.props.t('workflow.workflowList.onPublishEntry'))) {
+      return;
+    }
+    this.props.handlePublish(collection, slug);
+  };
+
+  // eslint-disable-next-line react/display-name
+  renderColumns = (entries, column) => {
+    const { isOpenAuthoring, collections, t } = this.props;
+    if (!entries) return null;
+
+    if (!column) {
+      return entries.entrySeq().map(([currColumn, currEntries], idx) => (
+        <DropTarget
+          namespace={DNDNamespace}
+          key={currColumn}
+          onDrop={this.handleChangeStatus.bind(this, currColumn)}
+        >
+          {(connect, { isHovered }) =>
+            connect(
+              <div style={{ height: '100%' }}>
+                <div
+                  css={[
+                    styles.column,
+                    styles.columnPosition(idx),
+                    isHovered && styles.columnHovered,
+                    isOpenAuthoring && currColumn === 'pending_publish' && styles.hiddenColumn,
+                    isOpenAuthoring && currColumn === 'pending_review' && styles.hiddenRightBorder,
+                  ]}
+                >
+                  <ColumnHeader name={currColumn}>
+                    {getColumnHeaderText(currColumn, this.props.t)}
+                  </ColumnHeader>
+                  <ColumnCount>
+                    {this.props.t('workflow.workflowList.currentEntries', {
+                      smart_count: currEntries.size,
+                    })}
+                  </ColumnCount>
+                  {this.renderColumns(currEntries, currColumn)}
+                </div>
+              </div>,
+            )
+          }
+        </DropTarget>
+      ));
+    }
+    return (
+      <div>
+        {entries.map(entry => {
+          const timestamp = dayjs(entry.get('updatedOn')).format(t('workflow.workflow.dateFormat'));
+          const slug = entry.get('slug');
+          const collectionName = entry.get('collection');
+          const editLink = `collections/${collectionName}/entries/${slug}?ref=workflow`;
+          const ownStatus = entry.get('status');
+          const collection = collections.find(
+            collection => collection.get('name') === collectionName,
+          );
+          const collectionLabel = collection?.get('label');
+          const isModification = entry.get('isModification');
+
+          const allowPublish = collection?.get('publish');
+          const canPublish = ownStatus === status.last() && !entry.get('isPersisting', false);
+          const postAuthor = entry.get('author');
+
+          return (
+            <DragSource
+              namespace={DNDNamespace}
+              key={`${collectionName}-${slug}`}
+              slug={slug}
+              collection={collectionName}
+              ownStatus={ownStatus}
+            >
+              {connect =>
+                connect(
+                  <div>
+                    <WorkflowCard
+                      collectionLabel={collectionLabel || collectionName}
+                      title={selectEntryCollectionTitle(collection, entry)}
+                      authorLastChange={entry.getIn(['metaData', 'user'])}
+                      body={entry.getIn(['data', 'body'])}
+                      isModification={isModification}
+                      editLink={editLink}
+                      timestamp={timestamp}
+                      onDelete={this.requestDelete.bind(this, collectionName, slug, ownStatus)}
+                      allowPublish={allowPublish}
+                      canPublish={canPublish}
+                      onPublish={this.requestPublish.bind(this, collectionName, slug, ownStatus)}
+                      postAuthor={postAuthor}
+                    />
+                  </div>,
+                )
+              }
+            </DragSource>
+          );
+        })}
+      </div>
+    );
+  };
+
+  render() {
+    const columns = this.renderColumns(this.props.entries);
+    const ListContainer = this.props.isOpenAuthoring
+      ? WorkflowListContainerOpenAuthoring
+      : WorkflowListContainer;
+    return <ListContainer>{columns}</ListContainer>;
+  }
+}
+
+export default HTML5DragDrop(translate()(WorkflowList));