Converts ClearBrowsingDataPanel into redux component

Resolves brave#9440

Auditors: @bridiver @bsclifton

Test Plan:

app/renderer/components/main/clearBrowsingDataPanel.js

@@ -3,10 +3,10 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const Immutable = require('immutable')
 const ipc = require('electron').ipcRenderer
 
 // Components
+const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const Button = require('../common/button')
 const SwitchControl = require('../common/switchControl')
@@ -20,6 +20,7 @@ const {
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
+const windowActions = require('../../../../js/actions/windowActions')
 
 // Constants
 const messages = require('../../../../js/constants/messages')
@@ -36,24 +37,48 @@ class ClearBrowsingDataPanel extends React.Component {
     this.onToggleAutofillData = this.onToggleSetting.bind(this, 'autofillData')
     this.onToggleSavedSiteSettings = this.onToggleSetting.bind(this, 'savedSiteSettings')
     this.onClear = this.onClear.bind(this)
-    this.state = {
-      clearBrowsingDataDetail: props.clearBrowsingDataDefaults ? props.clearBrowsingDataDefaults : Immutable.Map()
-    }
   }
+
   onToggleSetting (setting) {
     this.setState(({clearBrowsingDataDetail}) => ({
       clearBrowsingDataDetail: clearBrowsingDataDetail.update(setting, isChecked => !isChecked)
     }))
   }
+
   onClear () {
-    appActions.onClearBrowsingData(this.state.clearBrowsingDataDetail)
-    this.props.onHide()
-    let detail = this.state.clearBrowsingDataDetail
-    if (detail.get('allSiteCookies') && detail.get('browserHistory') &&
-        detail.get('cachedImagesAndFiles')) {
+    appActions.onClearBrowsingData()
+    this.onHide()
+
+    if (
+      this.props.allSiteCookies &&
+      this.props.browserHistory &&
+      this.props.cachedImagesAndFiles
+    ) {
       ipc.send(messages.PREFS_RESTART)
     }
   }
+
+  onHide () {
+    windowActions.setClearBrowsingDataPanelVisible(false)
+  }
+
+  mergeProps (state, ownProps) {
+    const clearBrowsingDataDefaults = state.get('clearBrowsingDataDefaults')
+
+    const props = {}
+    props.allSiteCookies = clearBrowsingDataDefaults.allSiteCookies
+    props.browserHistory = clearBrowsingDataDefaults.browserHistory
+    props.downloadHistory = clearBrowsingDataDefaults.downloadHistory
+    props.cachedImagesAndFiles = clearBrowsingDataDefaults.cachedImagesAndFiles
+    props.savedPasswords = clearBrowsingDataDefaults.savedPasswords
+    props.allSiteCookies = clearBrowsingDataDefaults.allSiteCookies
+    props.autocompleteData = clearBrowsingDataDefaults.autocompleteData
+    props.autofillData = clearBrowsingDataDefaults.autofillData
+    props.savedSiteSettings = clearBrowsingDataDefaults.savedSiteSettings
+
+    return props
+  }
+
   render () {
     return <Dialog onHide={this.props.onHide} testId='clearBrowsingDataPanel' isClickDismiss>
       <CommonFormSmall onClick={(e) => e.stopPropagation()}>
@@ -62,45 +87,45 @@ class ClearBrowsingDataPanel extends React.Component {
           <SwitchControl
             rightl10nId='browserHistory'
             testId='browserHistorySwitch'
-            checkedOn={this.state.clearBrowsingDataDetail.get('browserHistory')}
+            checkedOn={this.props.browserHistory}
             onClick={this.onToggleBrowserHistory} />
           <SwitchControl
             rightl10nId='downloadHistory'
-            checkedOn={this.state.clearBrowsingDataDetail.get('downloadHistory')}
+            checkedOn={this.props.downloadHistory}
             onClick={this.onToggleDownloadHistory} />
           <SwitchControl
             rightl10nId='cachedImagesAndFiles'
-            checkedOn={this.state.clearBrowsingDataDetail.get('cachedImagesAndFiles')}
+            checkedOn={this.props.cachedImagesAndFiles}
             onClick={this.onToggleCachedImagesAndFiles} />
           <SwitchControl
             rightl10nId='savedPasswords'
-            checkedOn={this.state.clearBrowsingDataDetail.get('savedPasswords')}
+            checkedOn={this.props.savedPasswords}
             onClick={this.onToggleSavedPasswords} />
           <SwitchControl
             rightl10nId='allSiteCookies'
-            checkedOn={this.state.clearBrowsingDataDetail.get('allSiteCookies')}
+            checkedOn={this.props.allSiteCookies}
             onClick={this.onToggleAllSiteCookies} />
           <SwitchControl
             rightl10nId='autocompleteData'
             testId='autocompleteDataSwitch'
-            checkedOn={this.state.clearBrowsingDataDetail.get('autocompleteData')}
+            checkedOn={this.props.autocompleteData}
             onClick={this.onToggleAutocompleteData} />
           <SwitchControl
             rightl10nId='autofillData'
             testId='autofillDataSwitch'
-            checkedOn={this.state.clearBrowsingDataDetail.get('autofillData')}
+            checkedOn={this.props.autofillData}
             onClick={this.onToggleAutofillData} />
           <SwitchControl
             rightl10nId='savedSiteSettings'
             testId='siteSettingsSwitch'
-            checkedOn={this.state.clearBrowsingDataDetail.get('savedSiteSettings')}
+            checkedOn={this.props.savedSiteSettings}
             onClick={this.onToggleSavedSiteSettings} />
         </CommonFormSection>
         <CommonFormButtonWrapper>
           <Button className='whiteButton'
             l10nId='cancel'
             testId='cancelButton'
-            onClick={this.props.onHide}
+            onClick={this.onHide}
           />
           <Button className='primaryButton'
             l10nId='clear'
@@ -116,4 +141,4 @@ class ClearBrowsingDataPanel extends React.Component {
   }
 }
 
-module.exports = ClearBrowsingDataPanel
+module.exports = ReduxComponent.connect(ClearBrowsingDataPanel)

app/renderer/components/main/main.js

@@ -537,10 +537,6 @@ class Main extends ImmutableComponent {
     windowActions.setBraveryPanelDetail()
   }
 
-  onHideClearBrowsingDataPanel () {
-    windowActions.setClearBrowsingDataPanelVisible(false)
-  }
-
   onHideImportBrowserDataPanel () {
     windowActions.setImportBrowserDataDetail()
   }
@@ -736,9 +732,7 @@ class Main extends ImmutableComponent {
         }
         {
          clearBrowsingDataPanelIsVisible
-          ? <ClearBrowsingDataPanel
-            clearBrowsingDataDefaults={this.props.appState.get('clearBrowsingDataDefaults')}
-            onHide={this.onHideClearBrowsingDataPanel} />
+          ? <ClearBrowsingDataPanel />
           : null
         }
         {

docs/appActions.md

@@ -477,14 +477,10 @@ Adds information about pending basic auth login requests
 
 
 
-### onClearBrowsingData(clearDataDetail) 
+### onClearBrowsingData() 
 
 Clears the data specified in clearDataDetail
 
-**Parameters**
-
-**clearDataDetail**: `object`, the app data to clear as per doc/state.md's clearBrowsingDataDefaults
-
 
 
 ### importBrowserData(selected) 

js/actions/appActions.js

@@ -587,12 +587,10 @@ const appActions = {
 
   /**
    * Clears the data specified in clearDataDetail
-   * @param {object} clearDataDetail - the app data to clear as per doc/state.md's clearBrowsingDataDefaults
    */
-  onClearBrowsingData: function (clearDataDetail) {
+  onClearBrowsingData: function () {
     dispatch({
-      actionType: appConstants.APP_ON_CLEAR_BROWSING_DATA,
-      clearDataDetail
+      actionType: appConstants.APP_ON_CLEAR_BROWSING_DATA
     })
   },
 

js/stores/appStore.js

@@ -662,8 +662,6 @@ const handleAppAction = (action) => {
       }
       break
     case appConstants.APP_ON_CLEAR_BROWSING_DATA:
-      // TODO: Maybe make storing this state optional?
-      appState = appState.set('clearBrowsingDataDefaults', action.clearDataDetail)
       if (action.clearDataDetail.get('browserHistory')) {
         appState = aboutNewTabState.setSites(appState, action)
         appState = aboutHistoryState.setHistory(appState, action)