NEW Allow edit tabs to dispatch TabsActions

client/src/components/ElementEditor/Element.js

@@ -47,9 +47,15 @@ class Element extends Component {
    * Expand the element to show the  preview
    * If the element is not inline-editable, take user to the GridFieldDetailForm to edit the record
    */
-  handleExpand() {
+  handleExpand(event) {
     const { element, link } = this.props;
 
+    if (event.target.type === 'button') {
+      // Stop bubbling if the click target was a button within this container
+      event.stopPropagation();
+      return;
+    }
+
     if (element.InlineEditable) {
       this.setState({
         previewExpanded: !this.state.previewExpanded
@@ -69,7 +75,7 @@ class Element extends Component {
    */
   handleKeyUp(event) {
     if (event.keyCode === 13) {
-      this.handleExpand();
+      this.handleExpand(event);
     }
   }
 

client/src/components/ElementEditor/ElementActions.js

@@ -3,12 +3,34 @@ import { compose } from 'redux';
 import { DropdownItem } from 'reactstrap';
 import { inject } from 'lib/Injector';
 import AbstractAction from 'components/ElementActions/AbstractAction';
+import { setActiveTab } from 'state/tabs/TabsActions';
+import { connect } from 'react-redux';
 
 /**
  * Element actions is a dropdown menu containing links to inline editing forms for each
  * of the element's primary tabs, as well as operations such as save, publish, archive etc
  */
 class ElementActions extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleEditTabsClick = this.handleEditTabsClick.bind(this);
+  }
+
+  /**
+   * Set the active tab
+   *
+   * @param activeTab
+   */
+  handleEditTabsClick(event) {
+    const { onSetActiveTab, editTabs, activeTab } = this.props;
+    const selectedTab = editTabs.find(tab => tab.title === event.target.title);
+
+    if (selectedTab && activeTab !== selectedTab.name) {
+      onSetActiveTab(selectedTab.name);
+    }
+  }
+
   /**
    * Render buttons for the edit form tabs that will be a part of the edit form (if they exist)
    *
@@ -22,8 +44,13 @@ class ElementActions extends Component {
     }
 
     return editTabs.map(
-      (tab) => <AbstractAction key={tab} title={tab} />
-    );
+      (tab) =>
+        (<AbstractAction
+          key={tab.name}
+          title={tab.title}
+          onClick={this.handleEditTabsClick}
+        />)
+  );
   }
 
   /**
@@ -76,16 +103,39 @@ class ElementActions extends Component {
 
 ElementActions.propTypes = {
   id: PropTypes.string,
-  editTabs: PropTypes.arrayOf(PropTypes.string),
+  editTabs: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    name: PropTypes.string,
+  })),
+  onSetActiveTab: PropTypes.func,
 };
 
 ElementActions.defaultProps = {
   editTabs: [],
 };
 
+function mapStateToProps(state) {
+  const {
+    activeTab,
+  } = state.tabs;
+
+  return {
+    activeTab,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    onSetActiveTab(activeTab) {
+      dispatch(setActiveTab(activeTab));
+    },
+  };
+}
+
 export { ElementActions as Component };
 
 export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
   inject(
     ['ActionMenu'],
     (ActionMenuComponent) => ({

client/src/types/elementTypeType.js

@@ -5,7 +5,10 @@ const elementTypeType = PropTypes.shape({
   name: PropTypes.string,
   title: PropTypes.string,
   icon: PropTypes.string,
-  tabs: PropTypes.arrayOf(PropTypes.string),
+  tabs: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    name: PropTypes.string,
+  })),
 });
 
 export { elementTypeType };

src/Forms/ElementalAreaField.php

@@ -125,7 +125,7 @@ public function getSchemaDataDefaults()
                 'name' => str_replace('\\', '-', $className),
                 'title' => $blockTitle,
                 'icon' => Config::inst()->get($className, 'icon'),
-                'tabs' => array_values($tabProvider->getTabsForElement($className)),
+                'tabs' => $tabProvider->getTabsForElement($className),
             ];
         }
 

src/Services/ElementTabProvider.php

@@ -7,6 +7,7 @@
 use SilverStripe\Core\Config\Configurable;
 use SilverStripe\Core\Flushable;
 use SilverStripe\Core\Injector\Injector;
+use SilverStripe\Forms\Tab;
 use SilverStripe\Forms\TabSet;
 
 /**
@@ -115,8 +116,15 @@ protected function generateTabsForElement($elementClass)
         /** @var TabSet $tabset */
         $tabset = $element->getCMSFields()->fieldByName('Root');
 
-        // Get and map (ID => name) the tab names
-        $tabs = $tabset->Tabs()->map()->toArray();
+        // Get and map the tab names/titles into an associative array
+        $tabs = [];
+        /** @var Tab $tabDefinition */
+        foreach($tabset->Tabs() as $tabDefinition) {
+            $tabs[] = [
+                'name' => $tabDefinition->getName(),
+                'title' => $tabDefinition->Title(),
+            ];
+        }
 
         // Cache them for next time
         $this->getCache()->set($this->getCacheKey($elementClass), $tabs);

webpack.config.js

@@ -31,7 +31,13 @@ const config = [
     },
     devtool: (ENV !== 'production') ? 'source-map' : '',
     resolve: resolveJS(ENV, PATHS),
-    externals: externalJS(ENV, PATHS),
+    externals: Object.assign(
+      {},
+      externalJS(ENV, PATHS),
+      {
+        'state/tabs/ActionTabs' : 'ActionTabs'
+      }
+    ),
     module: moduleJS(ENV, PATHS),
     plugins: pluginJS(ENV, PATHS),
   },