NEW Implement React preview component when viewing a version detail

This commit also updates the versionType descriptors, overrides the CMS edit form
for the history viewer controller to remove unneeded markup and adds Bootstrap
as a dependency so we can use mixins.

client/src/components/HistoryViewer/HistoryViewer.js

@@ -113,7 +113,11 @@ class HistoryViewer extends Component {
       version: this.getVersions().filter((version) => version.Version === currentVersion)[0],
     };
 
-    return <VersionDetailComponent {...props} />;
+    return (
+      <div className="history-viewer fill-height">
+        <VersionDetailComponent {...props} />
+      </div>
+    );
   }
 
   /**
@@ -168,14 +172,16 @@ class HistoryViewer extends Component {
     const { ListComponent, onSelect } = this.props;
 
     return (
-      <div className="history-viewer">
-        <ListComponent
-          onSelect={onSelect}
-          versions={this.getVersions()}
-        />
-
-        <div className="history-viewer__pagination">
-          {this.renderPagination()}
+      <div className="history-viewer fill-height">
+        <div className="panel panel--padded panel--scrollable">
+          <ListComponent
+            onSelect={onSelect}
+            versions={this.getVersions()}
+          />
+
+          <div className="history-viewer__pagination">
+            {this.renderPagination()}
+          </div>
         </div>
       </div>
     );

client/src/components/HistoryViewer/HistoryViewer.scss

@@ -2,6 +2,16 @@
   td:first-child {
     width: 1%;
   }
+
+  > .panel--padded {
+    padding-top: 0;
+  }
+}
+
+// Used in conjunction with .panel--padded, removes top and bottom padding
+.panel--padded-side {
+  padding-bottom: 0;
+  padding-top: 0;
 }
 
 .history-viewer__form {
@@ -51,3 +61,20 @@
     font-size: 1.4rem;
   }
 }
+
+// Todo: remove this when the CMS is React driven and we don't need this hack
+.history-viewer__preview {
+  margin-top: -54px;
+}
+
+.history-viewer__toolbar--condensed {
+  min-width: 50%;
+  width: 50%;
+}
+
+// Hide preview on small devices. @todo replace this with a view toggle component
+@include media-breakpoint-down(md) {
+  .history-viewer__preview {
+    display: none;
+  }
+}

client/src/components/HistoryViewer/HistoryViewerVersionDetail.js

@@ -1,26 +1,66 @@
+/* global document */
+
 import React, { PropTypes, PureComponent } from 'react';
 import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
+import Preview from 'components/Preview/Preview';
 import { inject } from 'lib/Injector';
 import { versionType } from 'types/versionType';
 
 class HistoryViewerVersionDetail extends PureComponent {
+  componentWillMount() {
+    this.toggleToolbarClass();
+  }
+
+  componentWillUnmount() {
+    this.toggleToolbarClass();
+  }
+
+  /**
+   * Until the CMS is fully React driven, we must control certain aspects of the CMS DOM with
+   * manual CSS tweaks. @todo remove this when React drives the CMS.
+   */
+  toggleToolbarClass() {
+    document
+      .querySelector('.CMSPageHistoryViewerController div:not(.cms-content-tools) .cms-content-header')
+      .classList
+      .toggle('history-viewer__toolbar--condensed');
+  }
+
   render() {
     const { ListComponent, schemaUrl, version } = this.props;
 
     return (
-      <div className="history-viewer">
-        <ListComponent
-          extraClass="history-viewer__table--current"
-          versions={[version]}
-          isActive
-        />
+      <div className="flexbox-area-grow fill-width">
+        <div className="flexbox-area-grow fill-height">
+          <div className="panel panel--padded panel--padded-side panel--scrollable">
+            <ListComponent
+              extraClass="history-viewer__table--current"
+              versions={[version]}
+              isActive
+            />
 
-        <div className="history-viewer__version-detail">
-          <FormBuilderLoader
-            identifier="HistoryViewer.VersionDetail"
-            schemaUrl={schemaUrl}
-          />
+            <div className="history-viewer__version-detail">
+              <FormBuilderLoader
+                identifier="HistoryViewer.VersionDetail"
+                schemaUrl={schemaUrl}
+              />
+            </div>
+          </div>
         </div>
+
+        <Preview
+          className="history-viewer__preview"
+          extraClass="" // removes default: fill-height
+          itemLinks={{
+            preview: {
+              Stage: {
+                href: `${version.AbsoluteLink}&archiveDate=${version.LastEdited}`,
+                type: 'text/html',
+              },
+            },
+          }}
+          itemId={2} // arbitrary, just needs to be truthy
+        />
       </div>
     );
   }

client/src/legacy/HistoryViewer/HistoryViewerEntwine.js

@@ -27,9 +27,6 @@ jQuery.entwine('ss', ($) => {
         />,
         this[0]
       );
-
-      // Hide the CMS actions when in the history viewer
-      $('.CMSPageHistoryViewerController .toolbar--south.cms-content-actions').hide();
     },
 
     onunmatch() {

client/src/styles/bundle.scss

@@ -1,5 +1,8 @@
 // Variables
 @import "variables";
 
+// Thirdparty
+@import "~bootstrap/scss/mixins";
+
 // Components
 @import "../components/HistoryViewer/HistoryViewer";

client/src/types/versionType.js

@@ -9,6 +9,7 @@ const memberShape = PropTypes.shape({
 // Describes the data structure for a Version, returned via GraphQL scaffolding
 const versionType = PropTypes.shape({
   Version: PropTypes.number,
+  AbsoluteLink: PropTypes.string,
   LastEdited: PropTypes.string,
   Published: PropTypes.boolean,
   LiveVersion: PropTypes.boolean,
@@ -20,6 +21,7 @@ const versionType = PropTypes.shape({
 // A default (empty) data set for a version
 const defaultVersion = {
   Version: 0,
+  AbsoluteLink: '',
   LastEdited: '',
   Published: false,
   LiveVersion: false,

package.json

@@ -60,6 +60,7 @@
     "@storybook/react": "^3.2.16",
     "apollo-client": "^0.5.22",
     "babel-polyfill": "6.7.4",
+    "bootstrap": "4.0.0",
     "classnames": "^2.2.5",
     "graphql-fragments": "^0.1.0",
     "graphql-tag": "^0.1.17",

src/Controllers/CMSPageHistoryViewerController.php

@@ -36,6 +36,8 @@ public function getEditForm($id = null, $fields = null)
         /** @var Form $form */
         $form = parent::getEditForm($id);
         $form->addExtraClass('history-viewer__form');
+        // Disable default CMS preview
+        $form->removeExtraClass('cms-previewable');
 
         if ($record) {
             $fieldList = FieldList::create(

templates/SilverStripe/VersionedAdmin/Controllers/Includes/CMSPageHistoryViewerController_EditForm.ss

@@ -0,0 +1,5 @@
+<form $FormAttributes data-layout-type="border">
+    <% loop $Fields %>
+        $FieldHolder
+    <% end_loop %>
+</form>

templates/SilverStripe/VersionedAdmin/Forms/HistoryViewerField.ss

@@ -1,5 +1,5 @@
 <div
-    class="history-viewer__container"
+    class="history-viewer__container fill-height"
     data-record-id="{$getSourceRecord.ID}"
     data-record-class="{$getSourceRecord.ClassName}"
 >

yarn.lock

@@ -1732,6 +1732,10 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
+bootstrap@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
+
 bowser@^1.0.0, bowser@^1.7.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.3.tgz#6643ae4d783f31683f6d23156976b74183862162"