Converts ClearBrowsingDataPanel into redux component

Resolves brave#9440

Auditors: @bridiver @bsclifton

Test Plan:

app/renderer/components/main/clearBrowsingDataPanel.js

@@ -7,6 +7,7 @@ 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 +21,7 @@ const {
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
+const windowActions = require('../../../../js/actions/windowActions')
 
 // Constants
 const messages = require('../../../../js/constants/messages')
@@ -36,24 +38,47 @@ 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)
-    }))
+
+  onToggleSetting (setting, e) {
+    console.log(e)
+    appActions.onToggleBrowsingData(setting, true)
   }
+
   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 data = state.get('clearBrowsingDataDefaults', Immutable.Map())
+
+    const props = {}
+    props.allSiteCookies = data.get('allSiteCookies')
+    props.browserHistory = data.get('browserHistory')
+    props.downloadHistory = data.get('downloadHistory')
+    props.cachedImagesAndFiles = data.get('cachedImagesAndFiles')
+    props.savedPasswords = data.get('savedPasswords')
+    props.allSiteCookies = data.get('allSiteCookies')
+    props.autocompleteData = data.get('autocompleteData')
+    props.autofillData = data.get('autofillData')
+    props.savedSiteSettings = data.get('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

@@ -77,7 +77,6 @@ class Main extends ImmutableComponent {
     this.onClickWindow = this.onClickWindow.bind(this)
     this.onHideSiteInfo = this.onHideSiteInfo.bind(this)
     this.onHideBraveryPanel = this.onHideBraveryPanel.bind(this)
-    this.onHideClearBrowsingDataPanel = this.onHideClearBrowsingDataPanel.bind(this)
     this.onHideImportBrowserDataPanel = this.onHideImportBrowserDataPanel.bind(this)
     this.onHideWidevinePanel = this.onHideWidevinePanel.bind(this)
     this.onHideAutofillAddressPanel = this.onHideAutofillAddressPanel.bind(this)
@@ -538,10 +537,6 @@ class Main extends ImmutableComponent {
     windowActions.setBraveryPanelDetail()
   }
 
-  onHideClearBrowsingDataPanel () {
-    windowActions.setClearBrowsingDataPanelVisible(false)
-  }
-
   onHideImportBrowserDataPanel () {
     windowActions.setImportBrowserDataDetail()
   }
@@ -736,9 +731,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
     })
   },
 
@@ -1428,8 +1426,18 @@ const appActions = {
     dispatch({
       actionType: appConstants.APP_UPDATE_LOG_OPENED
     })
-  }
+  },
 
+  /**
+   * Save temp setting for clear browsing data
+   */
+  onToggleBrowsingData: function (property, newValue) {
+    dispatch({
+      actionType: appConstants.APP_ON_TOGGLE_BROWSING_DATA,
+      property,
+      newValue
+    })
+  }
 }
 
 module.exports = appActions

js/constants/appConstants.js

@@ -132,7 +132,8 @@ const appConstants = {
   APP_REMOVE_PASSWORD_SITE: _, /** @param {Object} passwordDetail */
   APP_CLEAR_PASSWORDS: _,
   APP_UPDATE_LOG_OPENED: _,
-  APP_URL_BAR_SELECTED_INDEX_CHANGED: _
+  APP_URL_BAR_SELECTED_INDEX_CHANGED: _,
+  APP_ON_TOGGLE_BROWSING_DATA: _
 }
 
 module.exports = mapValuesByKeys(appConstants)

js/stores/appStore.js

@@ -662,39 +662,41 @@ 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')) {
+      const clearData = appState.get('clearBrowsingDataDefaults').merge('clearBrowsingData')
+      if (clearData.get('browserHistory')) {
         appState = aboutNewTabState.setSites(appState, action)
         appState = aboutHistoryState.setHistory(appState, action)
         syncActions.clearHistory()
         BrowserWindow.getAllWindows().forEach((wnd) => wnd.webContents.send(messages.CLEAR_CLOSED_FRAMES))
       }
-      if (action.clearDataDetail.get('downloadHistory')) {
+      if (clearData.get('downloadHistory')) {
         handleAppAction({actionType: appConstants.APP_CLEAR_COMPLETED_DOWNLOADS})
       }
-      // Site cookies clearing should also clear cache so that evercookies will be properly removed
-      if (action.clearDataDetail.get('cachedImagesAndFiles') || action.clearDataDetail.get('allSiteCookies')) {
+      // Site cookies clearing should also clear cache so that every cookies will be properly removed
+      if (clearData.get('cachedImagesAndFiles') || clearData.get('allSiteCookies')) {
         filtering.clearCache()
       }
-      if (action.clearDataDetail.get('savedPasswords')) {
+      if (clearData.get('savedPasswords')) {
         handleAppAction({actionType: appConstants.APP_CLEAR_PASSWORDS})
       }
-      if (action.clearDataDetail.get('allSiteCookies')) {
+      if (clearData.get('allSiteCookies')) {
         filtering.clearStorageData()
       }
-      if (action.clearDataDetail.get('autocompleteData')) {
+      if (clearData.get('autocompleteData')) {
         autofill.clearAutocompleteData()
       }
-      if (action.clearDataDetail.get('autofillData')) {
+      if (clearData.get('autofillData')) {
         autofill.clearAutofillData()
       }
-      if (action.clearDataDetail.get('savedSiteSettings')) {
+      if (clearData.get('savedSiteSettings')) {
         appState = appState.set('siteSettings', Immutable.Map())
         appState = appState.set('temporarySiteSettings', Immutable.Map())
         syncActions.clearSiteSettings()
       }
       break
+    case appConstants.APP_ON_TOGGLE_BROWSING_DATA:
+      appState = appState.setIn(['clearBrowsingData', action.property], action.newValue)
+      break
     case appConstants.APP_IMPORT_BROWSER_DATA:
       {
         const importer = require('../../app/importer')