NEW Elements can be deleted via the inline delete button. Fix version…

…ing state in readBlocks query

_config/graphql.yml

@@ -14,6 +14,7 @@ SilverStripe\GraphQL\Manager:
             operations:
               copyToStage: true
               readOne: true
+              delete: true
           # Expose access to Elements via Page -> ElementalArea -> Elements (see resolver)
           DNADesign\Elemental\Models\ElementalArea:
             fields: [ID]

client/src/components/ElementEditor/Element.js

@@ -1,4 +1,6 @@
-import React, { PureComponent, PropTypes } from 'react';
+/* global window */
+
+import React, { Component, PropTypes } from 'react';
 import { elementType } from 'types/elementType';
 import { inject } from 'lib/Injector';
 import i18n from 'i18n';
@@ -7,14 +9,41 @@ import i18n from 'i18n';
  * The Element component used in the context of an ElementEditor shows the summary
  * of an element's details when used in the CMS, including ID, Title and Summary.
  */
-class Element extends PureComponent {
+class Element extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+  }
+
+  /**
+   * Take the user to the GridFieldDetailForm to edit the record
+   */
+  handleClick() {
+    const { link } = this.props;
+
+    window.location = link;
+  }
+
+  /**
+   * If pressing enter key, treat it like a mouse click
+   *
+   * @param {Object} event
+   */
+  handleKeyUp(event) {
+    if (event.keyCode === 13) {
+      this.handleClick();
+    }
+  }
+
   render() {
     const {
       element: { ID, Title, BlockSchema },
       HeaderComponent,
       ContentComponent,
-      link,
     } = this.props;
+
     const linkTitle = i18n.inject(
       i18n._t('ElementalElement.TITLE', 'Edit this {type} block'), { type: BlockSchema.type }
     );
@@ -24,7 +53,14 @@ class Element extends PureComponent {
     }
 
     return (
-      <a className="element-editor__element" href={link} title={linkTitle}>
+      <span
+        className="element-editor__element"
+        onClick={this.handleClick}
+        onKeyUp={this.handleKeyUp}
+        role="button"
+        tabIndex={0}
+        title={linkTitle}
+      >
         <HeaderComponent
           id={ID}
           title={Title}
@@ -36,7 +72,7 @@ class Element extends PureComponent {
           fileTitle={BlockSchema.fileTitle}
           content={BlockSchema.content}
         />
-      </a>
+      </span>
     );
   }
 }

client/src/components/ElementEditor/Element.scss

@@ -1,6 +1,7 @@
 .element-editor__element {
   display: block;
   color: inherit;
+  cursor: pointer;
   padding: $panel-padding-x;
 
   &:hover {

client/src/components/ElementEditor/Header.js

@@ -1,24 +1,51 @@
+/* global confirm */
+
 import React, { Component, PropTypes } from 'react';
 import { Tooltip } from 'reactstrap';
+import { compose } from 'redux';
+import { inject } from 'lib/Injector';
+import deleteBlockMutation from 'state/editor/deleteBlockMutation';
+import i18n from 'i18n';
 
 class Header extends Component {
   constructor(props) {
     super(props);
 
     this.toggle = this.toggle.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+
     this.state = {
       tooltipOpen: false
     };
   }
 
+  /**
+   * Handle the deletion of a block, passing the block ID in
+   */
+  handleDelete(event) {
+    event.stopPropagation();
+
+    const { id, actions: { handleDeleteBlock } } = this.props;
+
+    const deleteMessage = i18n._t(
+      'ElementHeader.CONFIRM_DELETE',
+      'Are you sure you want to delete this block?'
+    );
+
+    // eslint-disable-next-line no-alert
+    if (handleDeleteBlock && confirm(deleteMessage)) {
+      handleDeleteBlock(id);
+    }
+  }
+
   toggle() {
     this.setState({
       tooltipOpen: !this.state.tooltipOpen
     });
   }
 
   render() {
-    const { id, title, elementType, fontIcon } = this.props;
+    const { id, title, elementType, fontIcon, FormActionComponent } = this.props;
 
     return (
       <div className="element-editor-header">
@@ -36,19 +63,39 @@ class Header extends Component {
           </div>
           <h3 className="element-editor-header__title">{title}</h3>
         </div>
+        <FormActionComponent
+          onClick={this.handleDelete}
+          title={null}
+          icon="trash-bin"
+          attributes={{
+            title: i18n._t('ElementHeader.DELETE', 'Delete'),
+          }}
+        />
       </div>
     );
   }
 }
 
-Header.defaultProps = {
-};
-
 Header.propTypes = {
   id: PropTypes.number,
   title: PropTypes.string,
   elementType: PropTypes.string,
   fontIcon: PropTypes.string,
+  actions: PropTypes.shape({
+    handleDeleteBlock: PropTypes.func.isRequired,
+  }),
+  FormActionComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
 };
 
-export default Header;
+export { Header as Component };
+
+export default compose(
+  inject(
+    ['FormAction'],
+    (FormActionComponent) => ({
+      FormActionComponent,
+    }),
+    () => 'ElementEditor.ElementList.Element'
+  ),
+  deleteBlockMutation
+)(Header);

client/src/components/ElementEditor/tests/Header-test.js

@@ -2,12 +2,14 @@
 /* global jest, describe, it, expect */
 
 import React from 'react';
-import Header from '../Header';
+import { Component as Header } from '../Header';
 import Enzyme, { shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-15.4/build/index';
 
 Enzyme.configure({ adapter: new Adapter() });
 
+const mockFormAction = jest.fn();
+
 describe('Header', () => {
   describe('render()', () => {
     it('should render the icon', () => {
@@ -17,6 +19,7 @@ describe('Header', () => {
           title="Sample File Block"
           elementType="File"
           fontIcon="font-icon-block-file"
+          FormActionComponent={mockFormAction}
         />
       );
 
@@ -32,6 +35,7 @@ describe('Header', () => {
           title="Sample File Block"
           elementType="File"
           fontIcon="font-icon-block-file"
+          FormActionComponent={mockFormAction}
         />
       );
 
@@ -46,6 +50,7 @@ describe('Header', () => {
           title="Sample File Block"
           elementType="File"
           fontIcon="font-icon-block-file"
+          FormActionComponent={mockFormAction}
         />
       );
 

client/src/state/editor/deleteBlockMutation.js

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

client/src/state/editor/readBlocksForPageQuery.js

@@ -7,7 +7,7 @@ import gql from 'graphql-tag';
 const query = gql`
 query ReadBlocksForPage($id:ID!) {
   readOnePage(ID: $id, Versioning: {
-    Mode: LATEST
+    Mode: DRAFT
   }){
     ID
     ElementalAreaIfExists {