NEW Show CMS field (top-level) tabs in more actions dropdown

_config/cache.yml

@@ -0,0 +1,11 @@
+---
+Name: elementalcache
+---
+SilverStripe\Core\Injector\Injector:
+  Psr\SimpleCache\CacheInterface.ElementTabCache:
+    factory: SilverStripe\Core\Cache\CacheFactory
+    constructor:
+      namespace: 'ElementTabCache'
+  DNADesign\Elemental\Services\ElementTabProvider:
+    properties:
+      cache: '%$Psr\SimpleCache\CacheInterface.ElementTabCache'

client/src/components/ElementEditor/AddElementPopoverContent.js

@@ -1,8 +1,7 @@
-/* global window */
-
 import React, { Component, PropTypes } from 'react';
 import { Button } from 'reactstrap';
 import classNames from 'classnames';
+import { elementTypeType } from 'types/elementTypeType';
 
 /**
  * The AddElementPopoverContent component used in the context of an ElementEditor shows the
@@ -28,7 +27,7 @@ class AddElementPopoverContent extends Component {
               'element-editor-add-element-content__button'
             )
           }
-          key={elementType.ID}
+          key={elementType.name}
         >
           {elementType.title}
         </Button>
@@ -47,14 +46,7 @@ class AddElementPopoverContent extends Component {
   }
 }
 AddElementPopoverContent.propTypes = {
-  elementTypes: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    icon: PropTypes.string,
-  })),
-};
-
-AddElementPopoverContent.defaultProps = {
-
+  elementTypes: PropTypes.arrayOf(elementTypeType),
 };
 
 export default AddElementPopoverContent;

client/src/components/ElementEditor/AddNewButton.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { InputGroup, Input, InputGroupAddon, Button } from 'reactstrap';
 import i18n from 'i18n';
+import { elementTypeType } from 'types/elementTypeType';
 
 class AddNewButton extends Component {
   constructor(props) {
@@ -20,7 +21,7 @@ class AddNewButton extends Component {
   handleTypeChange(event) {
     const type = event.target
       ? this.props.elementTypes.find(
-          candidateType => candidateType.value === event.target.value
+          candidateType => candidateType.name === event.target.value
         ) || null
       : null;
 
@@ -35,7 +36,7 @@ class AddNewButton extends Component {
    */
   renderAddButton() {
     const { selectedType } = this.state;
-    const buttonHref = selectedType ? `${this.props.baseAddHref}/${selectedType.value}` : '#';
+    const buttonHref = selectedType ? `${this.props.baseAddHref}/${selectedType.name}` : '#';
     const title = selectedType
       ? i18n.inject(i18n._t('ElementalAddNewButton.TITLE', 'Add a "{type}" block'), { type: selectedType.title })
       : '';
@@ -67,7 +68,7 @@ class AddNewButton extends Component {
     }
 
     return elementTypes.map(type => (
-      <option key={type.value} value={type.value}>{type.title}</option>
+      <option key={type.name} value={type.name}>{type.title}</option>
     ));
   }
 
@@ -97,7 +98,7 @@ class AddNewButton extends Component {
 AddNewButton.defaultProps = {};
 AddNewButton.propTypes = {
   baseAddHref: PropTypes.string.isRequired,
-  elementTypes: PropTypes.array.isRequired,
+  elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
 };
 
 export default AddNewButton;

client/src/components/ElementEditor/Element.js

@@ -79,6 +79,7 @@ class Element extends Component {
       HeaderComponent,
       ContentComponent,
       link,
+      editTabs,
     } = this.props;
 
     const { previewExpanded } = this.state;
@@ -118,6 +119,7 @@ class Element extends Component {
           elementType={element.BlockSchema.type}
           fontIcon={element.BlockSchema.iconClass}
           link={link}
+          editTabs={editTabs}
           caretClickCallback={this.handleExpand}
           previewExpanded={previewExpanded}
           expandable={element.InlineEditable}
@@ -136,6 +138,7 @@ class Element extends Component {
 Element.propTypes = {
   element: elementType,
   link: PropTypes.string.isRequired,
+  editTabs: PropTypes.arrayOf(PropTypes.string),
 };
 
 Element.defaultProps = {

client/src/components/ElementEditor/ElementEditor.js

@@ -1,5 +1,6 @@
 import React, { PureComponent, PropTypes } from 'react';
 import { inject } from 'lib/Injector';
+import { elementTypeType } from 'types/elementTypeType';
 
 /**
  * The ElementEditor is used in the CMS to manage a list or nested lists of
@@ -19,7 +20,7 @@ class ElementEditor extends PureComponent {
 }
 
 ElementEditor.propTypes = {
-  elementTypes: PropTypes.array.isRequired,
+  elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
   pageId: PropTypes.number.isRequired,
   baseAddHref: PropTypes.string.isRequired,
 };

client/src/components/ElementEditor/ElementList.js

@@ -2,8 +2,27 @@ import React, { Component, PropTypes } from 'react';
 import { elementType } from 'types/elementType';
 import { inject } from 'lib/Injector';
 import AddElementPopoverContent from 'components/ElementEditor/AddElementPopoverContent';
+import { elementTypeType } from 'types/elementTypeType';
 
 class ElementList extends Component {
+  /**
+   * Given an elementType, return a list of tabs that should be available in the edit form for an
+   * element.
+   *
+   * @param {elementTypeType} element
+   * @returns {string[]}
+   */
+  getEditTabs(element) {
+    const { elementTypes } = this.props;
+    const matchingType = elementTypes.find(type => element.BlockSchema.type === type.title);
+
+    if (!matchingType || !matchingType.tabs) {
+      return [];
+    }
+
+    return matchingType.tabs;
+  }
+
   /**
    * Renders a list of Element components, each with an elementType object
    * of data mapped into it. The data is provided by a GraphQL HOC registered
@@ -16,10 +35,12 @@ class ElementList extends Component {
       return null;
     }
 
+
     return blocks.map((element) => (
       <ElementComponent
         key={element.ID}
         element={element}
+        editTabs={this.getEditTabs(element)}
         link={element.BlockSchema.actions.edit}
       />
     ));
@@ -54,7 +75,7 @@ class ElementList extends Component {
 ElementList.propTypes = {
   // @todo support either ElementList or Element children in an array (or both)
   blocks: PropTypes.arrayOf(elementType),
-  elementTypes: PropTypes.array.isRequired,
+  elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
   loading: PropTypes.bool,
 };
 

client/src/components/ElementEditor/Header.js

@@ -1,7 +1,7 @@
 /* global confirm */
 
 import React, { Component, PropTypes } from 'react';
-import { Tooltip } from 'reactstrap';
+import { Tooltip, DropdownItem } from 'reactstrap';
 import { compose } from 'redux';
 import { inject } from 'lib/Injector';
 import archiveBlockMutation from 'state/editor/archiveBlockMutation';
@@ -155,7 +155,7 @@ class Header extends Component {
    * @returns {ActionMenuComponent|null}
    */
   renderActionsMenu() {
-    const { id, expandable, ActionMenuComponent } = this.props;
+    const { id, expandable, editTabs, ActionMenuComponent } = this.props;
 
     // Don't show the menu when inline editing is not enabled
     if (!expandable) {
@@ -171,6 +171,8 @@ class Header extends Component {
         dropdownMenuProps={{ right: true }}
         toggleCallback={(event) => event.stopPropagation()}
       >
+        { this.renderEditTabs() }
+        { !editTabs || !editTabs.length || <DropdownItem divider /> }
         <button
           onClick={this.handleArchive}
           title={archiveTitle}
@@ -185,6 +187,21 @@ class Header extends Component {
     );
   }
 
+  /**
+   * Render buttons for the edit form tabs that will be a part of the edit form (if they exist)
+   *
+   * @returns {DOMElement[]|null}
+   */
+  renderEditTabs() {
+    const { editTabs } = this.props;
+
+    if (!editTabs || !editTabs.length) {
+      return null;
+    }
+
+    return editTabs.map((tab) => <button key={tab} className="dropdown-item">{tab}</button>);
+  }
+
   /**
    * Renders a message indicating the current versioned state of the element
    *
@@ -281,6 +298,7 @@ Header.propTypes = {
   isPublished: PropTypes.bool,
   elementType: PropTypes.string,
   fontIcon: PropTypes.string,
+  editTabs: PropTypes.arrayOf(PropTypes.string),
   actions: PropTypes.shape({
     handleArchiveBlock: PropTypes.func.isRequired,
     handlePublishBlock: PropTypes.func,

client/src/components/ElementEditor/Toolbar.js

@@ -1,5 +1,6 @@
 import React, { PureComponent, PropTypes } from 'react';
 import { inject } from 'lib/Injector';
+import { elementTypeType } from 'types/elementTypeType';
 
 // eslint-disable-next-line react/prefer-stateless-function
 class Toolbar extends PureComponent {
@@ -15,7 +16,7 @@ class Toolbar extends PureComponent {
 
 Toolbar.defaultProps = {};
 Toolbar.propTypes = {
-  elementTypes: PropTypes.array.isRequired,
+  elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
   baseAddHref: PropTypes.string.isRequired,
   AddNewButtonComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
 };

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

@@ -11,6 +11,12 @@ Enzyme.configure({ adapter: new Adapter() });
 describe('ElementEditor', () => {
   const ToolbarComponent = () => <div />;
   const ListComponent = () => <div className="elemental-editor__list" />;
+  const testElementType = {
+    name: 'TestElement',
+    title: 'Test Block',
+    icon: 'nothing',
+    tabs: ['Content', 'History'],
+  };
 
   describe('render()', () => {
     it('should render ElementList and Toolbar', () => {
@@ -20,7 +26,7 @@ describe('ElementEditor', () => {
           ListComponent={ListComponent}
           pageId={8}
           baseAddHref="#"
-          elementTypes={['TestElement']}
+          elementTypes={[testElementType]}
         />
       );
 

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

@@ -10,6 +10,7 @@ Enzyme.configure({ adapter: new Adapter() });
 
 describe('Header', () => {
   const ActionMenuComponent = () => <div />;
+  const testTabs = ['Content', 'Settings', 'History'];
 
   describe('render()', () => {
     it('should render the icon', () => {
@@ -35,6 +36,7 @@ describe('Header', () => {
           title="Sample File Block"
           elementType="File"
           fontIcon="font-icon-block-file"
+          editTabs={testTabs}
           ActionMenuComponent={ActionMenuComponent}
         />
       );
@@ -50,6 +52,7 @@ describe('Header', () => {
           title="Sample File Block"
           elementType="File"
           fontIcon="font-icon-block-file"
+          editTabs={testTabs}
           ActionMenuComponent={ActionMenuComponent}
         />
       );
@@ -123,6 +126,23 @@ describe('Header', () => {
 
       expect(wrapper.text()).not.toContain('ActionMenuComponent');
     });
+
+    it('should render the given "edit tabs" in the action menu', () => {
+      const wrapper = shallow(
+        <Header
+          expandable
+          editTabs={testTabs}
+          ActionMenuComponent={ActionMenuComponent}
+        />
+      );
+
+      // See the dropdown separator
+      expect(wrapper.find(ActionMenuComponent).children().find('DropdownItem').length).toBe(1);
+      // See all the relevant action menu options
+      expect(wrapper.find(ActionMenuComponent).children().map(node => node.text())).toEqual(
+        expect.arrayContaining(testTabs)
+      );
+    });
   });
 
   describe('renderVersionedStateMessage()', () => {

client/src/types/elementTypeType.js

@@ -0,0 +1,11 @@
+import { PropTypes } from 'react';
+
+// Describes the structure of an element coming in via GraphQL
+const elementTypeType = PropTypes.shape({
+  name: PropTypes.string,
+  title: PropTypes.string,
+  icon: PropTypes.string,
+  tabs: PropTypes.arrayOf(PropTypes.string),
+});
+
+export { elementTypeType };

src/Forms/ElementalAreaField.php

@@ -4,6 +4,7 @@
 
 use DNADesign\Elemental\Models\BaseElement;
 use DNADesign\Elemental\Models\ElementalArea;
+use DNADesign\Elemental\Services\ElementTabProvider;
 use SilverStripe\Control\Controller;
 use SilverStripe\Core\Config\Config;
 use SilverStripe\Core\Injector\Injector;
@@ -115,11 +116,16 @@ public function getSchemaDataDefaults()
 
         $blockTypes = [];
 
+        // Use the internal (temporary) provider to get cached tab names.
+        /** @var ElementTabProvider $tabProvider */
+        $tabProvider = Injector::inst()->get(ElementTabProvider::class);
+
         foreach ($this->getTypes() as $className => $blockTitle) {
             $blockTypes[] = [
-                'value' => str_replace('\\', '-', $className),
+                'name' => str_replace('\\', '-', $className),
                 'title' => $blockTitle,
                 'icon' => Config::inst()->get($className, 'icon'),
+                'tabs' => array_values($tabProvider->getTabsForElement($className)),
             ];
         }