FIX Clicking dropdown actions now closes the actions menu. Move click…

… bubbling logic to Element

client/src/components/ElementActions/AbstractAction.js

@@ -1,28 +1,28 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { DropdownItem } from 'reactstrap';
 
 /**
  * Renders an action item for the "more actions" dropdown on elements
  */
 const AbstractAction = (props) => {
-  const { disabled, extraClass, title, onClick } = props;
+  const { className, title } = props;
+
+  const itemProps = {
+    className: classNames(className, 'dropdown-item'),
+    ...props,
+  };
 
   return (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      title={title}
-      type="button"
-      className={classNames(extraClass, 'dropdown-item')}
-    >
+    <DropdownItem {...itemProps}>
       {title}
-    </button>
+    </DropdownItem>
   );
 };
 
 AbstractAction.propTypes = {
   disabled: PropTypes.bool,
-  extraClass: PropTypes.string,
+  className: PropTypes.string,
   onClick: PropTypes.func,
   title: PropTypes.string,
 };

client/src/components/ElementActions/ArchiveAction.js

@@ -34,8 +34,9 @@ const ArchiveAction = (MenuComponent) => (props) => {
 
   const newProps = {
     title: i18n._t('ArchiveAction.ARCHIVE', 'Archive'),
-    extraClass: 'element-editor__actions-archive',
+    className: 'element-editor__actions-archive',
     onClick: handleClick,
+    toggle: props.toggle,
   };
 
   return (

client/src/components/ElementActions/PublishAction.js

@@ -46,8 +46,9 @@ const PublishAction = (MenuComponent) => (props) => {
 
   const newProps = {
     title: i18n._t('PublishAction.PUBLISH', 'Publish'),
-    extraClass: 'element-editor__actions-publish',
+    className: 'element-editor__actions-publish',
     onClick: handleClick,
+    toggle: props.toggle,
   };
 
   return (

client/src/components/ElementActions/SaveAction.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import backend from 'lib/Backend';
 import i18n from 'i18n';
@@ -13,27 +15,28 @@ const SaveAction = (MenuComponent) => (props) => {
   const handleClick = (event) => {
     event.stopPropagation();
 
-    const { id } = this.props;
+    const { id, securityId } = props;
 
     const formData = getSerializedFormData(`Form_ElementForm_${id}`);
 
     const endpointSpec = {
       url: loadElementSchemaValue('saveUrl', id),
       method: loadElementSchemaValue('saveMethod'),
       payloadFormat: loadElementSchemaValue('payloadFormat'),
+      defaultData: {
+        SecurityID: securityId
+      },
     };
 
-    // @todo add CSRF SecurityID token
     const endpoint = backend.createEndpointFetcher(endpointSpec);
-    endpoint(formData).then((result) => {
-      console.log(result);
-      // @todo update apollo cache?
+    endpoint(formData).then(() => {
+      // @todo update apollo cache? `result` argument is available
     });
   };
 
   const newProps = {
     title: i18n._t('SaveAction.SAVE', 'Save'),
-    extraClass: 'element-editor__actions-save',
+    className: 'element-editor__actions-save',
     onClick: handleClick,
   };
 
@@ -46,4 +49,12 @@ const SaveAction = (MenuComponent) => (props) => {
   );
 };
 
-export default SaveAction;
+function mapStateToProps(state) {
+  return {
+    securityId: state.config.SecurityID,
+  };
+}
+
+export { SaveAction as Component };
+
+export default compose(connect(mapStateToProps), SaveAction);

client/src/components/ElementActions/UnpublishAction.js

@@ -46,8 +46,9 @@ const UnpublishAction = (MenuComponent) => (props) => {
 
   const newProps = {
     title: i18n._t('UnpublishAction.UNPUBLISH', 'Unpublish'),
-    extraClass: 'element-editor__actions-unpublish',
+    className: 'element-editor__actions-unpublish',
     onClick: handleClick,
+    toggle: props.toggle,
   };
 
   return (

client/src/components/ElementActions/tests/AbstractAction-test.js

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import AbstractAction from '../AbstractAction';
-import Enzyme, { shallow } from 'enzyme';
+import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-15.4/build/index';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -13,18 +13,19 @@ describe('AbstractAction', () => {
   let wrapper = null;
 
   beforeEach(() => {
-    wrapper = shallow(
+    wrapper = mount(
       <AbstractAction
         onClick={clickHandler}
         title="My abstract action"
         disabled={false}
-        extraClass="foo-bar"
+        className="foo-bar"
+        toggle={false}
       />
     );
   });
 
-  it('renders a button', () => {
-    expect(wrapper.find('button').length).toBe(1);
+  it('renders a DropdownItem', () => {
+    expect(wrapper.find('DropdownItem').length).toBe(1);
   });
 
   it('includes the title text', () => {

client/src/components/ElementActions/tests/ArchiveAction-test.js

@@ -20,6 +20,7 @@ describe('ArchiveAction', () => {
         id={123}
         isPublished
         actions={{ handleArchiveBlock: mockMutation }}
+        toggle={false}
       />
     );
   });
@@ -55,6 +56,7 @@ describe('ArchiveAction', () => {
         id={123}
         isPublished={false}
         actions={{ handleArchiveBlock: mockMutation }}
+        toggle={false}
       />
     );
     const mockConfirm = jest.fn();

client/src/components/ElementActions/tests/PublishAction-test.js

@@ -23,6 +23,7 @@ describe('PublishAction', () => {
         version={234}
         isLiveVersion={false}
         actions={{ handlePublishBlock: mockMutation }}
+        toggle={false}
       />
     );
 

client/src/components/ElementActions/tests/UnpublishAction-test.js

@@ -22,6 +22,7 @@ describe('UnpublishAction', () => {
         id={123}
         isPublished
         actions={{ handleUnpublishBlock: mockMutation }}
+        toggle={false}
       />
     );
 

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

@@ -57,14 +57,12 @@ class ElementActions extends Component {
       'font-icon-dot-3',
     ];
 
-    // Remove btn-icon-xl make btn-sm
     return (
       <ActionMenuComponent
         id={`element-editor-actions-${id}`}
         className={'element-editor-header__actions-dropdown'}
         dropdownMenuProps={{ right: true }}
         dropdownToggleClassNames={dropdownToggleClassNames}
-        toggleCallback={(event) => event.stopPropagation()}
       >
         { this.renderEditTabs() }
         { this.renderDivider() }

client/src/state/editor/getSerializedFormData.js

@@ -7,6 +7,10 @@
  */
 export const getSerializedFormData = (formName) => {
   const form = document.getElementById(formName);
+  if (!form) {
+    return {};
+  }
+
   const fields = form.querySelectorAll('input, select, textarea, checkbox');
 
   const output = {};