Merge pull request #8 from creative-commoners/pulls/1.0/connect-versi…

…on-to-preview

NEW Implement React preview component when viewing a version detail

client/src/components/HistoryViewer/HistoryViewer.js

@@ -95,6 +95,7 @@ class HistoryViewer extends Component {
   renderVersionDetail() {
     const {
       currentVersion,
+      isPreviewable,
       recordId,
       recordClass,
       schemaUrl,
@@ -109,11 +110,16 @@ class HistoryViewer extends Component {
     };
 
     const props = {
+      isPreviewable,
       schemaUrl: schemaUrl.replace(/:id|:class|:version/g, (match) => schemaReplacements[match]),
       version: this.getVersions().filter((version) => version.Version === currentVersion)[0],
     };
 
-    return <VersionDetailComponent {...props} />;
+    return (
+      <div className="history-viewer fill-height">
+        <VersionDetailComponent {...props} />
+      </div>
+    );
   }
 
   /**
@@ -165,17 +171,19 @@ class HistoryViewer extends Component {
    * @returns {HistoryViewerVersionList}
    */
   renderVersionList() {
-    const { ListComponent, onSelect } = this.props;
+    const { isPreviewable, 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={isPreviewable ? 'panel panel--padded panel--scrollable' : ''}>
+          <ListComponent
+            onSelect={onSelect}
+            versions={this.getVersions()}
+          />
+
+          <div className="history-viewer__pagination">
+            {this.renderPagination()}
+          </div>
         </div>
       </div>
     );
@@ -202,6 +210,7 @@ HistoryViewer.propTypes = {
   offset: PropTypes.number,
   recordId: PropTypes.number.isRequired,
   currentVersion: PropTypes.number,
+  isPreviewable: PropTypes.bool,
   VersionDetailComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   versions: PropTypes.shape({
     Versions: PropTypes.shape({
@@ -221,6 +230,7 @@ HistoryViewer.propTypes = {
 
 HistoryViewer.defaultProps = {
   currentVersion: 0,
+  isPreviewable: false,
   schemaUrl: '',
   versions: {
     Versions: {

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,37 +1,104 @@
+/* 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();
+  }
+
+  /**
+   * If the preview panel is enabled, return the component
+   *
+   * @returns {Preview|null}
+   */
+  getPreview() {
+    const { version, isPreviewable } = this.props;
+
+    if (!isPreviewable) {
+      return null;
+    }
+
+    return (
+      <Preview
+        className="history-viewer__preview flexbox-area-grow" // removes default: fill-height
+        itemLinks={{
+          preview: {
+            Stage: {
+              href: `${version.AbsoluteLink}&archiveDate=${version.LastEdited}`,
+              type: 'text/html',
+            },
+          },
+        }}
+        itemId={version.Version}
+      />
+    );
+  }
+
+  /**
+   * 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() {
+    const { isPreviewable } = this.props;
+
+    const selector = document
+      .querySelector('.CMSPageHistoryViewerController div:not(.cms-content-tools) .cms-content-header');
+
+    if (selector && isPreviewable) {
+      selector
+        .classList
+        .toggle('history-viewer__toolbar--condensed');
+    }
+  }
+
   render() {
-    const { ListComponent, schemaUrl, version } = this.props;
+    const { isPreviewable, ListComponent, schemaUrl, version } = this.props;
 
     return (
-      <div className="history-viewer">
-        <ListComponent
-          extraClass="history-viewer__table--current"
-          versions={[version]}
-          isActive
-        />
-
-        <div className="history-viewer__version-detail">
-          <FormBuilderLoader
-            identifier="HistoryViewer.VersionDetail"
-            schemaUrl={schemaUrl}
-          />
+      <div className="flexbox-area-grow fill-width">
+        <div className="flexbox-area-grow fill-height">
+          <div className={isPreviewable ? '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>
+          </div>
         </div>
+
+        {this.getPreview()}
       </div>
     );
   }
 }
 
 HistoryViewerVersionDetail.propTypes = {
+  isPreviewable: PropTypes.bool,
   ListComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   schemaUrl: React.PropTypes.string.isRequired,
   version: versionType.isRequired,
 };
 
+HistoryViewerVersionDetail.defaultProps = {
+  isPreviewable: false,
+};
+
 export { HistoryViewerVersionDetail as Component };
 
 export default inject(

client/src/legacy/HistoryViewer/HistoryViewerEntwine.js

@@ -21,15 +21,13 @@ jQuery.entwine('ss', ($) => {
         <HistoryViewerComponent
           recordId={this.data('record-id')}
           recordClass={this.data('record-class')}
+          isPreviewable={!!parseInt(this.data('preview-enabled'), 10)}
           limit={30}
           offset={0}
           page={0}
         />,
         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(

src/Forms/HistoryViewerField.php

@@ -3,6 +3,7 @@
 namespace SilverStripe\VersionedAdmin\Forms;
 
 use SilverStripe\Forms\FormField;
+use SilverStripe\ORM\CMSPreviewable;
 use SilverStripe\ORM\DataObject;
 use SilverStripe\View\Requirements;
 
@@ -32,4 +33,16 @@ public function getSourceRecord()
     {
         return $this->getForm() ? $this->getForm()->getRecord() : null;
     }
+
+    /**
+     * Get whether the record is previewable
+     *
+     * @return boolean
+     */
+    public function getPreviewEnabled()
+    {
+        $record = $this->getSourceRecord();
+
+        return $record && $record instanceof CMSPreviewable;
+    }
 }

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,7 +1,8 @@
 <div
-    class="history-viewer__container"
+    class="history-viewer__container fill-height"
     data-record-id="{$getSourceRecord.ID}"
     data-record-class="{$getSourceRecord.ClassName}"
+    data-preview-enabled="$PreviewEnabled"
 >
     <%-- Rendered using the HistoryViewer React component --%>
 </div>

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"