Merge pull request #365 from creative-commoners/pulls/master/unpublis…

…h-an-element

Unpublish an element via inline button

_config/graphql.yml

@@ -10,12 +10,13 @@ SilverStripe\GraphQL\Manager:
         types:
           # Expose common static fields for the ElementEditor component to use for preview summaries
           DNADesign\Elemental\Models\BaseElement:
-            fields: [ID, LastEdited, AbsoluteLink, Title, ShowTitle, Sort, BlockSchema, InlineEditable, IsPublished]
+            fields: [ID, LastEdited, AbsoluteLink, Title, ShowTitle, Sort, BlockSchema, InlineEditable, IsPublished, IsLiveVersion]
             operations:
               copyToStage: true
               readOne: true
               delete: true
               publish: true
+              unpublish: true
           # Expose access to Elements via Page -> ElementalArea -> Elements (see resolver)
           DNADesign\Elemental\Models\ElementalArea:
             fields: [ID]

client/src/components/ElementEditor/Element.js

@@ -88,6 +88,7 @@ class Element extends Component {
           id={element.ID}
           title={element.Title}
           version={element.Version}
+          isLiveVersion={element.IsLiveVersion}
           isPublished={element.IsPublished}
           elementType={element.BlockSchema.type}
           fontIcon={element.BlockSchema.iconClass}

client/src/components/ElementEditor/Header.js

@@ -6,6 +6,7 @@ import { compose } from 'redux';
 import { inject } from 'lib/Injector';
 import archiveBlockMutation from 'state/editor/archiveBlockMutation';
 import publishBlockMutation from 'state/editor/publishBlockMutation';
+import unpublishBlockMutation from 'state/editor/unpublishBlockMutation';
 import i18n from 'i18n';
 import classNames from 'classnames';
 
@@ -16,6 +17,7 @@ class Header extends Component {
     this.handleArchive = this.handleArchive.bind(this);
     this.handleCaretClick = this.handleCaretClick.bind(this);
     this.handlePublish = this.handlePublish.bind(this);
+    this.handleUnpublish = this.handleUnpublish.bind(this);
     this.renderActionsMenu = this.renderActionsMenu.bind(this);
     this.toggle = this.toggle.bind(this);
 
@@ -58,13 +60,24 @@ class Header extends Component {
 
     const { id, version, actions: { handlePublishBlock } } = this.props;
 
-    // eslint-disable-next-line no-alert
     if (handlePublishBlock) {
-      // blockId, fromStage, toStage, fromVersion
       handlePublishBlock(id, 'DRAFT', 'LIVE', version);
     }
   }
 
+  /**
+   * Handle unpublishing of a block, passing the block ID in
+   */
+  handleUnpublish(event) {
+    event.stopPropagation();
+
+    const { id, actions: { handleUnpublishBlock } } = this.props;
+
+    if (handleUnpublishBlock) {
+      handleUnpublishBlock(id);
+    }
+  }
+
   /**
    * Handle the opening/closing of the block preview
    */
@@ -91,11 +104,11 @@ class Header extends Component {
    * @returns {DOMElement|null}
    */
   renderPublishButton() {
-    const { isPublished } = this.props;
+    const { isLiveVersion } = this.props;
 
     const publishTitle = i18n._t('ElementHeader.PUBLISH', 'Publish');
 
-    if (isPublished) {
+    if (isLiveVersion) {
       return null;
     }
 
@@ -111,6 +124,31 @@ class Header extends Component {
     );
   }
 
+  /**
+   * Render the unpublish button if the current state of the button is published
+   *
+   * @returns {DOMElement|null}
+   */
+  renderUnpublishButton() {
+    const { isPublished } = this.props;
+    const unpublishTitle = i18n._t('ElementHeader.UNPUBLISH', 'Unpublish');
+
+    if (!isPublished) {
+      return null;
+    }
+
+    return (
+      <button
+        onClick={this.handleUnpublish}
+        title={unpublishTitle}
+        type="button"
+        className={classNames('element-editor__actions-unpublish', 'dropdown-item')}
+      >
+        {unpublishTitle}
+      </button>
+    );
+  }
+
   /**
    * If inline editing is enabled, render the "more actions" menu
    *
@@ -141,9 +179,8 @@ class Header extends Component {
         >
           {archiveTitle}
         </button>
-
         {this.renderPublishButton()}
-
+        {this.renderUnpublishButton()}
       </ActionMenuComponent>
     );
   }
@@ -205,12 +242,14 @@ Header.propTypes = {
   id: PropTypes.string,
   title: PropTypes.string,
   version: PropTypes.number,
+  isLiveVersion: PropTypes.bool,
   isPublished: PropTypes.bool,
   elementType: PropTypes.string,
   fontIcon: PropTypes.string,
   actions: PropTypes.shape({
-    handlePublishBlock: PropTypes.func,
     handleArchiveBlock: PropTypes.func.isRequired,
+    handlePublishBlock: PropTypes.func,
+    handleUnpublishBlock: PropTypes.func
   }),
   ActionMenuComponent: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.func]),
   expandable: PropTypes.bool,
@@ -232,6 +271,7 @@ export default compose(
     }),
     () => 'ElementEditor.ElementList.Element'
   ),
+  archiveBlockMutation,
   publishBlockMutation,
-  archiveBlockMutation
+  unpublishBlockMutation,
 )(Header);

client/src/state/editor/readBlocksForPageQuery.js

@@ -21,6 +21,7 @@ query ReadBlocksForPage($id:ID!) {
             Title
             BlockSchema
             InlineEditable
+            IsLiveVersion
             IsPublished
             Version
           }

client/src/state/editor/unpublishBlockMutation.js

@@ -0,0 +1,41 @@
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
+
+// GraphQL query for unpublishing a specific block
+const mutation = gql`
+mutation UnpublishBlock($blockId:ID!) {
+  unpublishBlock(
+    ID: $blockId
+      ) {
+    ID
+  }
+}
+`;
+
+const config = {
+  props: ({ mutate, ownProps: { actions } }) => {
+    const handleUnpublishBlock = (blockId, fromStage, toStage, fromVersion) => mutate({
+      variables: {
+        blockId,
+        fromStage,
+        toStage,
+        fromVersion
+      },
+    });
+
+    return {
+      actions: {
+        ...actions,
+        handleUnpublishBlock,
+      },
+    };
+  },
+  options: {
+    // Refetch versions after mutation is completed
+    refetchQueries: ['ReadBlocksForPage']
+  }
+};
+
+export { mutation, config };
+
+export default graphql(mutation, config);

client/src/types/elementType.js

@@ -7,6 +7,7 @@ const elementType = PropTypes.shape({
   BlockSchema: PropTypes.object,
   InlineEditable: PropTypes.bool,
   IsPublished: PropTypes.bool,
+  IsLiveVersion: PropTypes.bool,
   Version: PropTypes.number
 });
 

src/Models/BaseElement.php

@@ -78,7 +78,8 @@ class BaseElement extends DataObject
     private static $casting = [
         'BlockSchema' => DBObjectType::class,
         'InlineEditable' => DBBoolean::class,
-        'IsPublished' => DBBoolean::class
+        'IsLiveVersion' => DBBoolean::class,
+        'IsPublished' => DBBoolean::class,
     ];
 
     private static $versioned_gridfield_extensions = true;