Add 'Delete All' option to key/value editors (Closes #803)

packages/insomnia-app/app/ui/components/key-value-editor/editor.js

@@ -6,6 +6,8 @@ import {DEBOUNCE_MILLIS} from '../../../common/constants';
 import Lazy from '../base/lazy';
 import KeyValueEditorRow from './row';
 import {generateId, nullFn} from '../../../common/misc';
+import {Dropdown, DropdownItem, DropdownButton} from '../base/dropdown';
+import PromptButton from '../base/prompt-button';
 
 const NAME = 'name';
 const VALUE = 'value';
@@ -56,6 +58,10 @@ class Editor extends PureComponent {
     this._onChange(pairs);
   }
 
+  _handleDeleteAll () {
+    this._onChange([]);
+  }
+
   _handleMove (pairToMove, pairToTarget, targetOffset) {
     if (pairToMove.id === pairToTarget.id) {
       // Nothing to do
@@ -378,6 +384,16 @@ class Editor extends PureComponent {
               index={-1}
               onChange={nullFn}
               onDelete={nullFn}
+              renderLeftIcon={() => (
+                <Dropdown>
+                  <DropdownButton>
+                    <i className="fa fa-cog"/>
+                  </DropdownButton>
+                  <DropdownItem onClick={this._handleDeleteAll} buttonClass={PromptButton}>
+                    Delete All Items
+                  </DropdownItem>
+                </Dropdown>
+              )}
               className="key-value-editor__row-wrapper--clicker"
               namePlaceholder={`New ${namePlaceholder}`}
               valuePlaceholder={`New ${valuePlaceholder}`}

packages/insomnia-app/app/ui/components/key-value-editor/row.js

@@ -286,6 +286,7 @@ class KeyValueEditorRow extends PureComponent {
       isDragging,
       isDraggingOver,
       noDelete,
+      renderLeftIcon,
       connectDragSource,
       connectDragPreview,
       connectDropTarget
@@ -303,7 +304,11 @@ class KeyValueEditorRow extends PureComponent {
 
     let handle = null;
     if (sortable) {
-      handle = connectDragSource(
+      handle = renderLeftIcon ? (
+        <div className="key-value-editor__drag">
+          {renderLeftIcon()}
+        </div>
+      ) : connectDragSource(
         <div className="key-value-editor__drag">
           <i className={'fa ' + (hideButtons ? 'fa-empty' : 'fa-reorder')}/>
         </div>
@@ -420,6 +425,7 @@ KeyValueEditorRow.propTypes = {
   noDropZone: PropTypes.bool,
   hideButtons: PropTypes.bool,
   className: PropTypes.string,
+  renderLeftIcon: PropTypes.func,
 
   // For drag-n-drop
   connectDragSource: PropTypes.func,