Converts ClearBrowsingDataPanel into redux component

Resolves brave#9440

Auditors: @bridiver @bsclifton

Test Plan:

app/browser/menu.js

@@ -693,11 +693,11 @@ const doAction = (action) => {
       }
       break
     case appConstants.APP_ON_CLEAR_BROWSING_DATA:
-      if (action.clearDataDetail.get('browserHistory')) {
-        appDispatcher.waitFor([appStore.dispatchToken], () => {
+      appDispatcher.waitFor([appStore.dispatchToken], () => {
+        if (appStore.getState().getIn(['clearBrowsingDataDefaults', 'browserHistory'])) {
           createMenu()
-        })
-      }
+        }
+      })
       break
     case windowConstants.WINDOW_CLICK_MENUBAR_SUBMENU:
       appDispatcher.waitFor([appStore.dispatchToken], () => {

app/browser/reducers/sitesReducer.js

@@ -42,7 +42,7 @@ const sitesReducer = (state, action, immutableAction) => {
       state = siteCache.loadLocationSiteKeysCache(state)
       break
     case appConstants.APP_ON_CLEAR_BROWSING_DATA:
-      if (immutableAction.getIn(['clearDataDetail', 'browserHistory'])) {
+      if (state.getIn(['clearBrowsingDataDefaults', 'browserHistory'])) {
         state = state.set('sites', siteUtil.clearHistory(state.get('sites')))
         filtering.clearHistory()
       }

app/ledger.js

@@ -168,7 +168,8 @@ const doAction = (action) => {
       break
 
     case appConstants.APP_ON_CLEAR_BROWSING_DATA:
-      if (action.clearDataDetail.get('browserHistory') && !getSetting(settings.PAYMENTS_ENABLED)) reset(true)
+      // TODO
+      // if (action.clearDataDetail.get('browserHistory') && !getSetting(settings.PAYMENTS_ENABLED)) reset(true)
       break
 
     case appConstants.APP_IDLE_STATE_CHANGED:

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,71 +38,100 @@ 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()
-    }
+    this.onCancel = this.onCancel.bind(this)
   }
-  onToggleSetting (setting) {
-    this.setState(({clearBrowsingDataDetail}) => ({
-      clearBrowsingDataDetail: clearBrowsingDataDetail.update(setting, isChecked => !isChecked)
-    }))
+
+  onToggleSetting (setting, e) {
+    appActions.onToggleBrowsingData(setting, e.target.value)
   }
+
   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)
     }
   }
+
+  onCancel () {
+    appActions.onCancelBrowsingData()
+    this.onHide()
+  }
+
+  onHide () {
+    windowActions.setClearBrowsingDataPanelVisible(false)
+  }
+
+  mergeProps (state, ownProps) {
+    const tempData = state.get('tempClearBrowsingData', Immutable.Map())
+    const data = state.get('clearBrowsingDataDefaults', Immutable.Map()).merge(tempData)
+
+    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>
+    return <Dialog onHide={this.onHide} testId='clearBrowsingDataPanel' isClickDismiss>
       <CommonFormSmall onClick={(e) => e.stopPropagation()}>
         <CommonFormTitle data-l10n-id='clearBrowsingData' />
         <CommonFormSection>
           <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.onCancel}
           />
           <Button className='primaryButton'
             l10nId='clear'
@@ -116,4 +147,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) 
@@ -1126,6 +1122,12 @@ Dispatches a message to indicate that the update log is being opened
 
 
 
+### onToggleBrowsingData() 
+
+Save temp setting for clear browsing data
+
+
+
 
 * * *
 

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,27 @@ 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
+    })
+  },
+
+  /**
+   * Clear temp setting for clear browsing data
+   */
+  onCancelBrowsingData: function () {
+    dispatch({
+      actionType: appConstants.APP_ON_CANCEL_BROWSING_DATA
+    })
+  }
 }
 
 module.exports = appActions

js/constants/appConstants.js

@@ -132,7 +132,9 @@ 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: _,
+  APP_ON_CANCEL_BROWSING_DATA: _
 }
 
 module.exports = mapValuesByKeys(appConstants)

js/stores/appStore.js

@@ -662,38 +662,48 @@ 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)
+      const defaults = appState.get('clearBrowsingDataDefaults')
+      const temp = appState.get('tempClearBrowsingData')
+      const clearData = defaults ? defaults.merge(temp) : temp
+
+      if (clearData.get('browserHistory')) {
+        appState = aboutNewTabState.setSites(appState)
+        appState = aboutHistoryState.setHistory(appState)
         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()
       }
+      appState = appState.set('tempClearBrowsingData', Immutable.Map())
+      appState = appState.set('clearBrowsingDataDefaults', clearData)
+      break
+    case appConstants.APP_ON_TOGGLE_BROWSING_DATA:
+      appState = appState.setIn(['tempClearBrowsingData', action.property], action.newValue)
+      break
+    case appConstants.APP_ON_CANCEL_BROWSING_DATA:
+      appState = appState.set('tempClearBrowsingData', Immutable.Map())
       break
     case appConstants.APP_IMPORT_BROWSER_DATA:
       {

test/unit/app/browser/reducers/sitesReducerTest.js

@@ -43,8 +43,9 @@ describe('sitesReducerTest', function () {
         actionType: appConstants.APP_ON_CLEAR_BROWSING_DATA,
         clearDataDetail: {browserHistory: true}
       }
+      const newState = initState.setIn(['tempClearBrowsingData', 'browserHistory'], true)
       this.clearHistory = sinon.stub(this.fakeFiltering, 'clearHistory')
-      this.state = sitesReducer(initState, this.action, makeImmutable(this.action))
+      this.state = sitesReducer(newState, this.action, makeImmutable(this.action))
     })
 
     after(function () {