Merge pull request #374 from creative-commoners/pulls/master/versione…

…d-state-display ENHANCEMENT Show state of elements draft/live/modified
silverstripe · Sep 5, 2018 · 9462cb3 · 9462cb3
2 parents e17ccfd + 90ddb5c
commit 9462cb3
Show file tree

Hide file tree

Showing 15 changed files with 244 additions and 69 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/ElementEditor/Element.js b/client/src/components/ElementEditor/Element.js
@@ -22,6 +22,27 @@ class Element extends Component {
     };
   }
 
+  /**
+   * Returns the applicable versioned state class names for the element
+   *
+   * @returns {string}
+   */
+  getVersionedStateClassName() {
+    const { element } = this.props;
+
+    const baseClassName = 'element-editor__element';
+
+    if (!element.IsPublished) {
+      return `${baseClassName}--draft`;
+    }
+
+    if (element.IsPublished && !element.IsLiveVersion) {
+      return `${baseClassName}--modified`;
+    }
+
+    return `${baseClassName}--published`;
+  }
+
   /**
    * Expand the element to show the  preview
    * If the element is not inline-editable, take user to the GridFieldDetailForm to edit the record
@@ -71,9 +92,13 @@ class Element extends Component {
       return null;
     }
 
-    const elementClassNames = classNames('element-editor__element', {
-      'element-editor__element--expandable': element.InlineEditable
-    });
+    const elementClassNames = classNames(
+      'element-editor__element',
+      {
+        'element-editor__element--expandable': element.InlineEditable,
+      },
+      this.getVersionedStateClassName()
+    );
 
     return (
       <span

diff --git a/client/src/components/ElementEditor/Header.js b/client/src/components/ElementEditor/Header.js
@@ -185,6 +185,40 @@ class Header extends Component {
     );
   }
 
+  /**
+   * Renders a message indicating the current versioned state of the element
+   *
+   * @returns {DOMElement|null}
+   */
+  renderVersionedStateMessage() {
+    const { isLiveVersion, isPublished } = this.props;
+
+    // No indication required for published elements
+    if (isPublished && isLiveVersion) {
+      return null;
+    }
+
+    let versionStateButtonTitle = '';
+    const stateClassNames = ['element-editor-header__version-state'];
+
+    if (!isPublished) {
+      versionStateButtonTitle = i18n._t('ElementHeader.STATE_DRAFT', 'Item has not been published yet');
+      stateClassNames.push('element-editor-header__version-state--draft');
+    }
+
+    if (isPublished && !isLiveVersion) {
+      versionStateButtonTitle = i18n._t('ElementHeader.STATE_MODIFIED', 'Item has unpublished changes');
+      stateClassNames.push('element-editor-header__version-state--modified');
+    }
+
+    return (
+      <span
+        className={classNames(stateClassNames)}
+        title={versionStateButtonTitle}
+      />
+    );
+  }
+
   render() {
     const {
       id,
@@ -212,6 +246,7 @@ class Header extends Component {
         <div className="element-editor-header__info">
           <div className="element-editor-header__icon-container">
             <i className={fontIcon} id={`element-editor-header__icon${id}`} />
+            {this.renderVersionedStateMessage()}
             <Tooltip
               placement="top"
               isOpen={this.state.tooltipOpen}

diff --git a/client/src/components/ElementEditor/Header.scss b/client/src/components/ElementEditor/Header.scss
@@ -21,9 +21,10 @@
   }
 
   &__icon-container {
-    color: $gray-600;
+    color: $text-muted;
     font-size: 2.3rem;
-    height: 40px;
+    height: 30px;
+    line-height: 1.5rem;
   }
 
   &__expand {
@@ -33,6 +34,30 @@
       margin-right: 0;
     }
   }
+
+  &__version-state {
+    box-shadow: $gallery-item-shadow;
+  }
 }
 
+// Draft/modified state icons copied from asset-admin - see GalleryItem.scss
+.element-editor-header__version-state {
+  border: 1px solid $state-draft;
+  border-radius: 100%;
+  bottom: 6px;
+  box-shadow: 0 0 1px .5px $white;
+  display: block;
+  height: 8px;
+  left: 22px;
+  position: relative;
+  width: 8px;
+  z-index: 1;
+
+  &--draft {
+    background-color: $state-draft-bg;
+  }
 
+  &--modified {
+    background-color: $state-modified-bg;
+  }
+}
diff --git a/client/src/components/ElementEditor/tests/Element-test.js b/client/src/components/ElementEditor/tests/Element-test.js
@@ -13,17 +13,19 @@ describe('Element', () => {
   const ContentComponent = () => <div />;
 
   const element = {
-      ID: '2',
-      Title: 'Block Title',
-      BlockSchema: {
-        actions: {
-          edit: 'admin/pages/edit/EditForm/7/field/ElementalArea/item/2/edit?stage=Stage'
-        },
-        content: 'Block Content',
-        iconClass: 'font-icon-block-content',
-        type: 'Content'
+    ID: '2',
+    Title: 'Block Title',
+    BlockSchema: {
+      actions: {
+        edit: 'admin/pages/edit/EditForm/7/field/ElementalArea/item/2/edit?stage=Stage'
       },
-      InlineEditable: true
+      content: 'Block Content',
+      iconClass: 'font-icon-block-content',
+      type: 'Content'
+    },
+    InlineEditable: true,
+    IsLiveVersion: true,
+    IsPublished: true,
   };
 
   describe('render()', () => {
@@ -61,4 +63,56 @@ describe('Element', () => {
       expect(wrapper.type()).toBeNull();
     });
   });
+
+  describe('getVersionedStateClassName()', () => {
+    it('identifies draft elements', () => {
+      const wrapper = shallow(
+        <Element
+          element={{
+            ...element,
+            IsPublished: false,
+          }}
+          link="/"
+          HeaderComponent={HeaderComponent}
+          ContentComponent={ContentComponent}
+        />
+      );
+
+      expect(wrapper.hasClass('element-editor__element--draft')).toBe(true);
+    });
+
+    it('identifies modified elements', () => {
+      const wrapper = shallow(
+        <Element
+          element={{
+            ...element,
+            IsPublished: true,
+            IsLiveVersion: false,
+          }}
+          link="/"
+          HeaderComponent={HeaderComponent}
+          ContentComponent={ContentComponent}
+        />
+      );
+
+      expect(wrapper.hasClass('element-editor__element--modified')).toBe(true);
+    });
+
+    it('identifies published elements', () => {
+      const wrapper = shallow(
+        <Element
+          element={{
+            ...element,
+            IsPublished: true,
+            IsLiveVersion: true,
+          }}
+          link="/"
+          HeaderComponent={HeaderComponent}
+          ContentComponent={ContentComponent}
+        />
+      );
+
+      expect(wrapper.hasClass('element-editor__element--published')).toBe(true);
+    });
+  });
 });
diff --git a/client/src/components/ElementEditor/tests/Header-test.js b/client/src/components/ElementEditor/tests/Header-test.js
@@ -124,4 +124,46 @@ describe('Header', () => {
       expect(wrapper.text()).not.toContain('ActionMenuComponent');
     });
   });
+
+  describe('renderVersionedStateMessage()', () => {
+    it('identifies draft versions', () => {
+      const wrapper = shallow(
+        <Header
+          ActionMenuComponent={ActionMenuComponent}
+          isPublished={false}
+          isLiveVersion={false}
+        />
+      );
+
+      const versionedState = wrapper.find('.element-editor-header__version-state');
+      expect(versionedState.prop('title')).toContain('not been published');
+      expect(versionedState.hasClass('element-editor-header__version-state--draft')).toBe(true);
+    });
+
+    it('identifies modified versions', () => {
+      const wrapper = shallow(
+        <Header
+          ActionMenuComponent={ActionMenuComponent}
+          isPublished
+          isLiveVersion={false}
+        />
+      );
+
+      const versionedState = wrapper.find('.element-editor-header__version-state');
+      expect(versionedState.prop('title')).toContain('has unpublished changes');
+      expect(versionedState.hasClass('element-editor-header__version-state--modified')).toBe(true);
+    });
+
+    it('ignores live versions', () => {
+      const wrapper = shallow(
+        <Header
+          ActionMenuComponent={ActionMenuComponent}
+          isPublished
+          isLiveVersion
+        />
+      );
+
+      expect(wrapper.find('.element-editor-header__version-state').length).toBe(0);
+    });
+  });
 });