Add ability to delete all cookies

app/ui/components/cookie-list.js

@@ -7,10 +7,12 @@ import {cookieToString} from '../../common/cookies';
 import PromptButton from './base/prompt-button';
 import RenderedText from './rendered-text';
 import type {Cookie} from '../../models/cookie-jar';
+import {Dropdown, DropdownButton, DropdownItem} from './base/dropdown/index';
 
 type Props = {
-  onCookieAdd: Function,
-  onCookieDelete: Function,
+  handleCookieAdd: Function,
+  handleCookieDelete: Function,
+  handleDeleteAll: Function,
   cookies: Array<Cookie>,
   newCookieDomainName: string,
   handleShowModifyCookieModal: Function,
@@ -31,16 +33,17 @@ class CookieList extends React.PureComponent<Props> {
       httpOnly: false
     };
 
-    this.props.onCookieAdd(newCookie);
+    this.props.handleCookieAdd(newCookie);
   }
 
   _handleDeleteCookie (cookie: Cookie) {
-    this.props.onCookieDelete(cookie);
+    this.props.handleCookieDelete(cookie);
   }
 
   render () {
     const {
       cookies,
+      handleDeleteAll,
       handleShowModifyCookieModal,
       handleRender
     } = this.props;
@@ -53,11 +56,18 @@ class CookieList extends React.PureComponent<Props> {
             <th style={{minWidth: '10rem'}}>Domain</th>
             <th style={{width: '90%'}}>Cookie</th>
             <th style={{width: '2rem'}} className="text-right">
-              <button className="btn btn--super-duper-compact btn--outlined txt-md"
-                      onClick={this._handleCookieAdd}
-                      title="Add cookie">
-                Add Cookie
-              </button>
+              <Dropdown right>
+                <DropdownButton title="Add cookie"
+                                className="btn btn--super-duper-compact btn--outlined txt-md">
+                  Actions <i className="fa fa-caret-down"/>
+                </DropdownButton>
+                <DropdownItem onClick={this._handleCookieAdd}>
+                  <i className="fa fa-plus-circle"/> Add Cookie
+                </DropdownItem>
+                <DropdownItem onClick={handleDeleteAll} buttonClass={PromptButton}>
+                  <i className="fa fa-trash-o"/> Delete All
+                </DropdownItem>
+              </Dropdown>
             </th>
           </tr>
           </thead>

app/ui/components/modals/cookies-modal.js

@@ -61,15 +61,21 @@ class CookiesModal extends PureComponent<Props, State> {
     trackEvent('Cookie', 'Create');
   }
 
+  async _handleDeleteAllCookies () {
+    const {cookieJar} = this.props;
+    cookieJar.cookies = [];
+    await this._saveChanges();
+    trackEvent('Cookie', 'Delete All');
+  }
+
   async _handleCookieDelete (cookie: Cookie) {
     const {cookieJar} = this.props;
     const {cookies} = cookieJar;
 
     // NOTE: This is sketchy because it relies on the same reference
-    cookieJar.cookies = cookies.filter(c => c !== cookie);
+    cookieJar.cookies = cookies.filter(c => c.id !== cookie.id);
 
     await this._saveChanges();
-    trackEvent('Cookie', 'Delete');
   }
 
   async _handleFilterChange (e: Event) {
@@ -162,6 +168,8 @@ class CookiesModal extends PureComponent<Props, State> {
       filter
     } = this.state;
 
+    const cookies = this._getVisibleCookies();
+
     return (
       <Modal ref={this._setModalRef} wide tall {...this.props}>
         <ModalHeader>Manage Cookies</ModalHeader>
@@ -181,11 +189,12 @@ class CookiesModal extends PureComponent<Props, State> {
               </div>
               <div className="cookie-list__list border-tops pad">
                 <CookieList
+                  cookies={cookies}
                   handleShowModifyCookieModal={handleShowModifyCookieModal}
                   handleRender={handleRender}
-                  cookies={this._getVisibleCookies()}
-                  onCookieAdd={this._handleCookieAdd}
-                  onCookieDelete={this._handleCookieDelete}
+                  handleDeleteAll={this._handleDeleteAllCookies}
+                  handleCookieAdd={this._handleCookieAdd}
+                  handleCookieDelete={this._handleCookieDelete}
                   // Set the domain to the filter so that it shows up if we're filtering
                   newCookieDomainName={filter || 'domain.com'}
                 />