ENH Add action dropdown. Move delete button.

client/src/components/ElementEditor/Header.js

@@ -6,6 +6,7 @@ import { compose } from 'redux';
 import { inject } from 'lib/Injector';
 import deleteBlockMutation from 'state/editor/deleteBlockMutation';
 import i18n from 'i18n';
+import classNames from 'classnames';
 
 class Header extends Component {
   constructor(props) {
@@ -45,7 +46,17 @@ class Header extends Component {
   }
 
   render() {
-    const { id, title, elementType, fontIcon, FormActionComponent } = this.props;
+    const {
+      id,
+      title,
+      elementType,
+      fontIcon,
+      ActionMenuComponent,
+    } = this.props;
+
+    const deleteTitle = i18n._t('ElementHeader.DELETE', 'Delete');
+
+    const deleteButtonClassNames = classNames('dropdown-item', 'element-editor__actions-delete');
 
     return (
       <div className="element-editor-header">
@@ -63,14 +74,23 @@ class Header extends Component {
           </div>
           <h3 className="element-editor-header__title">{title}</h3>
         </div>
-        <FormActionComponent
-          onClick={this.handleDelete}
-          title={null}
-          icon="trash-bin"
-          attributes={{
-            title: i18n._t('ElementHeader.DELETE', 'Delete'),
-          }}
-        />
+        <div className="element-editor-header__actions">
+          <ActionMenuComponent
+            id={`element-editor-actions-${id}`}
+            className="element-editor-header__actions-dropdown"
+            dropdownMenuProps={{ right: true }}
+            toggleCallback={(event) => event.stopPropagation()}
+          >
+            <button
+              onClick={this.handleDelete}
+              title={deleteTitle}
+              type="button"
+              className={deleteButtonClassNames}
+            >
+              {deleteTitle}
+            </button>
+          </ActionMenuComponent>
+        </div>
       </div>
     );
   }
@@ -84,16 +104,17 @@ Header.propTypes = {
   actions: PropTypes.shape({
     handleDeleteBlock: PropTypes.func.isRequired,
   }),
-  FormActionComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  ActionMenuComponent: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.func]),
+
 };
 
 export { Header as Component };
 
 export default compose(
   inject(
-    ['FormAction'],
-    (FormActionComponent) => ({
-      FormActionComponent,
+    ['ActionMenu'],
+    (ActionMenuComponent) => ({
+      ActionMenuComponent,
     }),
     () => 'ElementEditor.ElementList.Element'
   ),

client/src/components/ElementEditor/Header.scss

@@ -8,12 +8,17 @@
     -webkit-font-smoothing: antialiased;
   }
 
-  &__info {
+  &__info,
+  &__actions {
     align-items: center;
     display: flex;
     flex-grow: 1;
   }
 
+  &__actions {
+    justify-content: flex-end;
+  }
+
   &__icon-container {
     color: $gray-600;
     font-size: 2.3rem;

tests/Behat/Context/FeatureContext.php

@@ -35,14 +35,6 @@ public function iClickOnBlock($position)
         $block->click();
     }
 
-    /**
-     * @When I click on the delete button for block :position
-     */
-    public function iClickOnTheDeleteButtonForBlock($position)
-    {
-        $this->getDeleteButton($position)->click();
-    }
-
     /**
      * @Then I should see :text as the title for block :position
      */
@@ -142,7 +134,7 @@ protected function getDeleteButton($position)
         $block = $this->getSpecificBlock($position);
         assertNotNull($block, 'Block ' . $position . ' was not found in the page.');
 
-        $button = $block->find('css', '.font-icon-trash-bin');
+        $button = $block->find('css', '.element-editor__actions-delete');
         assertNotNull($button, 'Delete button not found');
 
         return $button;

tests/Behat/features/element-editor.feature

@@ -77,8 +77,9 @@ Feature: View types of elements in a report
       And I wait 1 second
       And I should see "Second Sample Block"
       And I should see block 1
-      And I should see the delete button for block 1
-      And I click on the delete button for block 1
+      And I press the "View actions" button
+    Then I should see the delete button for block 1
+    When I press the "Delete" button
       And I see the text "Are you sure you want to delete this block?" in the alert
       And I confirm the dialog
       And I wait until I see the ".element-editor__element" element