NEW Implement React history viewer if available (SS 4.2 onwards)

_config/graphql.yml

@@ -0,0 +1,15 @@
+---
+Name: elementalgraphqlconfig
+---
+SilverStripe\GraphQL\Controller:
+  schema:
+    scaffolding:
+      types:
+        DNADesign\Elemental\Models\BaseElement:
+          fields: '*'
+          operations:
+            readOne: true
+        SilverStripe\Security\Member:
+          fields: [ID, FirstName, Surname]
+          operations:
+            readOne: true

client/src/boot/index.js

@@ -0,0 +1,7 @@
+/* global window */
+
+import registerComponents from 'boot/registerComponents';
+
+window.document.addEventListener('DOMContentLoaded', () => {
+  registerComponents();
+});

client/src/boot/registerComponents.js

@@ -0,0 +1,16 @@
+import Injector from 'lib/Injector';
+import readOneBlockQuery from 'state/history/readOneBlockQuery';
+
+export default () => {
+  Injector.transform(
+    'elements-history',
+    (updater) => {
+      // Add content block history to the HistoryViewer
+      updater.component(
+        'HistoryViewer.Form_ItemEditForm',
+        readOneBlockQuery,
+        'ElementHistoryViewer'
+      );
+    }
+  );
+};

client/src/bundles/BlockHistory.js

@@ -8,8 +8,11 @@ jQuery.entwine('ss', ($) => {
     toggleActionsBar() {
       const cmsActions = $('.cms-content-actions');
 
-      if ($(this).parent('li').attr('aria-controls') === 'Root_History'
-        && $('.elemental-block__history').length > 0
+      if (this.parent('li').attr('aria-controls') === 'Root_History'
+        && (
+          $('.elemental-block__history').length > 0
+          || $('.history-viewer__container').length > 0
+        )
       ) {
         cmsActions.hide();
       } else {
@@ -20,7 +23,7 @@ jQuery.entwine('ss', ($) => {
     onmatch() {
       this._super();
 
-      if ($(this).parent('li').hasClass('ui-state-active')) {
+      if (this.parent('li').hasClass('ui-state-active')) {
         this.toggleActionsBar();
       }
     },

client/src/bundles/bundle.js

@@ -1 +1,3 @@
 require('./BlockHistory.js');
+
+require('boot');

client/src/state/history/readOneBlockQuery.js

@@ -0,0 +1,96 @@
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
+
+// GraphQL query for retrieving the version history of a specific block. The results of
+// the query must be set to the "versions" prop on the component that this HOC is
+// applied to for binding implementation.
+const query = gql`
+query ReadHistoryViewerBlock ($block_id: ID!, $limit: Int!, $offset: Int!) {
+  readOneBlock(
+    Versioning: {
+      Mode: LATEST
+    },
+    ID: $block_id
+  ) {
+    ID
+    Versions (limit: $limit, offset: $offset) {
+      pageInfo {
+        totalCount
+      }
+      edges {
+        node {
+          Version
+          Author {
+            FirstName
+            Surname
+          }
+          Publisher {
+            FirstName
+            Surname
+          }
+          Published
+          LiveVersion
+          LastEdited
+        }
+      }
+    }
+  }
+}
+`;
+
+const config = {
+  options({ recordId, limit, page }) {
+    return {
+      variables: {
+        limit,
+        offset: ((page || 1) - 1) * limit,
+        block_id: recordId,
+      }
+    };
+  },
+  props(
+    {
+      data: {
+        error,
+        refetch,
+        readOneBlock,
+        loading: networkLoading,
+      },
+      ownProps: {
+        actions = {
+          versions: {}
+        },
+        limit,
+        recordId,
+      },
+    }
+  ) {
+    const versions = readOneBlock || null;
+
+    const errors = error && error.graphQLErrors &&
+      error.graphQLErrors.map((graphQLError) => graphQLError.message);
+
+    return {
+      loading: networkLoading || !versions,
+      versions,
+      graphQLErrors: errors,
+      actions: {
+        ...actions,
+        versions: {
+          ...versions,
+          goToPage(page) {
+            refetch({
+              offset: ((page || 1) - 1) * limit,
+              limit,
+              block_id: recordId,
+            });
+          }
+        },
+      },
+    };
+  },
+};
+
+export { query, config };
+
+export default graphql(query, config);

package.json

@@ -24,7 +24,12 @@
   },
   "homepage": "https://github.com/dnadesign/silverstripe-elemental#readme",
   "dependencies": {
-    "jquery": "^3.2.1"
+    "jquery": "^3.2.1",
+    "react": "15.3.1",
+    "react-apollo": "^0.7.1",
+    "graphql-tag": "^0.1.17",
+    "redux": "^3.3.1",
+    "react-redux": "^4.4.1"
   },
   "devDependencies": {
     "@silverstripe/webpack-config": "^0.4.1",

src/Models/BaseElement.php

@@ -34,6 +34,7 @@
 use SilverStripe\Security\Member;
 use SilverStripe\Security\Permission;
 use SilverStripe\Versioned\Versioned;
+use SilverStripe\VersionedAdmin\Forms\HistoryViewerField;
 use SilverStripe\View\ArrayData;
 use SilverStripe\View\Parsers\URLSegmentFilter;
 use SilverStripe\View\Requirements;
@@ -308,10 +309,21 @@ public function getCMSFields()
                 $fields->removeByName('Style');
             }
 
-            $history = $this->getHistoryFields();
+            // Support for new history viewer in SS 4.2+
+            if (class_exists(HistoryViewerField::class)) {
+                Requirements::javascript('dnadesign/silverstripe-elemental:client/dist/js/bundle.js');
 
-            if ($history) {
-                $fields->addFieldsToTab('Root.History', $history);
+                $historyViewer = HistoryViewerField::create('ElementHistory');
+                $fields->addFieldToTab('Root.History', $historyViewer);
+
+                $fields->fieldByName('Root.History')->addExtraClass('elemental-block__history-tab');
+            } else {
+                // PHP based GridField history viewer for SS < 4.2
+                $history = $this->getHistoryFields();
+
+                if ($history) {
+                    $fields->addFieldsToTab('Root.History', $history);
+                }
             }
         });