From 6bed473036fa9f1bbdf04c69c4229c39e72a9b60 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Tue, 24 Jul 2018 19:25:03 -0300
Subject: [PATCH 1/2] support open settings and reload actions - closes
 https://github.com/brave/brave-browser/issues/561 closes
 https://github.com/brave/brave-browser/issues/417

---
 app/components/braveShields/braveShields.tsx  |  2 +-
 .../braveShields/braveShieldsFooter.tsx       | 37 +++++++++++++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/app/components/braveShields/braveShields.tsx b/app/components/braveShields/braveShields.tsx
index 10add9eb1835..33b9204119e1 100644
--- a/app/components/braveShields/braveShields.tsx
+++ b/app/components/braveShields/braveShields.tsx
@@ -73,7 +73,7 @@ export default class BraveShields extends React.Component<BraveShieldsProps, {}>
           allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
           changeNoScriptSettings={actions.changeNoScriptSettings}
         />
-        <BraveShieldsFooter />
+        <BraveShieldsFooter tabId={shieldsPanelTabData.id} />
       </div>
     )
   }
diff --git a/app/components/braveShields/braveShieldsFooter.tsx b/app/components/braveShields/braveShieldsFooter.tsx
index c528a13ac5b0..fe96d25bc70e 100644
--- a/app/components/braveShields/braveShieldsFooter.tsx
+++ b/app/components/braveShields/braveShieldsFooter.tsx
@@ -4,25 +4,48 @@
 
 import * as React from 'react'
 import { Grid, Column } from 'brave-ui/gridSystem'
-import Anchor from 'brave-ui/anchor'
 import UnstyledButton from 'brave-ui/unstyledButton'
 import { getMessage } from '../../background/api/localeAPI'
 import theme from '../../theme'
+import * as tabsAPI from '../../background/api/tabsAPI'
+
+export interface BraveShieldsStatsProps {
+  tabId: number
+}
+
+export default class BraveShieldsFooter extends React.PureComponent<BraveShieldsStatsProps, {}> {
+  constructor (props: BraveShieldsStatsProps) {
+    super(props)
+    this.openSettings = this.openSettings.bind(this)
+    this.reloadShields = this.reloadShields.bind(this)
+  }
+
+  openSettings () {
+    tabsAPI.createTab({ url: 'chrome://settings' })
+      .catch((err) => console.log(err))
+  }
+
+  reloadShields () {
+    tabsAPI.reloadTab(this.props.tabId, true)
+      .catch((err) => console.log(err))
+  }
 
-export default class BraveShieldsFooter extends React.PureComponent<{}, {}> {
   render () {
     return (
       <Grid id='braveShieldsFooter' theme={theme.braveShieldsFooter}>
         <Column size={9} theme={theme.columnStart}>
-          <Anchor
-            theme={theme.editLink}
-            href='chrome://settings'
-            target='_blank'
+          <UnstyledButton
+            theme={theme.noUserSelect}
+            onClick={this.openSettings}
             text={getMessage('shieldsFooterEditDefault')}
           />
         </Column>
         <Column size={3} theme={theme.columnEnd}>
-          <UnstyledButton theme={theme.noUserSelect} text={getMessage('shieldsFooterReload')} />
+          <UnstyledButton
+            onClick={this.reloadShields}
+            theme={theme.noUserSelect}
+            text={getMessage('shieldsFooterReload')}
+          />
         </Column>
       </Grid>
     )

From 21018e57d124f83dbe26b47c0fe3f1dd5066c1c1 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Tue, 24 Jul 2018 19:38:41 -0300
Subject: [PATCH 2/2] add tests for clicking reload and edit default settings

---
 .../braveShields/braveShieldsFooterTest.tsx   | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/test/app/components/braveShields/braveShieldsFooterTest.tsx b/test/app/components/braveShields/braveShieldsFooterTest.tsx
index 256ce66fbb80..a53f4a8ab88c 100644
--- a/test/app/components/braveShields/braveShieldsFooterTest.tsx
+++ b/test/app/components/braveShields/braveShieldsFooterTest.tsx
@@ -5,16 +5,54 @@
 
 import 'mocha'
 import * as React from 'react'
+import * as sinon from 'sinon'
 import * as assert from 'assert'
 import BraveShieldsFooter from '../../../../app/components/braveShields/braveShieldsFooter'
+import * as tabsAPI from '../../../../app/background/api/tabsAPI'
 import { shallow } from 'enzyme'
 
 describe('BraveShieldsFooter component', () => {
-  const baseComponent = () => <BraveShieldsFooter />
+  const tabId = 123123
+  const baseComponent = () => <BraveShieldsFooter tabId={tabId} />
 
   it('renders the component', () => {
     const wrapper = shallow(baseComponent())
     const assertion = wrapper.find('#braveShieldsFooter').length === 1
     assert.equal(assertion, true)
   })
+
+  describe('when reload is clicked', () => {
+    before(function () {
+      this.spy = sinon.spy(chrome.tabs, 'reload')
+      tabsAPI.reloadTab(tabId, true)
+    })
+
+    after(function () {
+      this.spy.restore()
+    })
+
+    it('calls chrome.tab.reload', function () {
+      assert(this.spy.calledOnce)
+      assert.deepEqual(this.spy.getCall(0).args[0], tabId)
+    })
+  })
+
+  describe('when edit default settings is clicked', () => {
+    before(function () {
+      this.spy = sinon.spy(chrome.tabs, 'create')
+      this.url = 'https://clifton-is-a-mercedes-benz-ambassador.com'
+      tabsAPI.createTab({ url: this.url })
+    })
+
+    after(function () {
+      this.spy.restore()
+    })
+
+    it('calls chrome.tab.create', function () {
+      assert(this.spy.calledOnce)
+      assert.deepEqual(this.spy.getCall(0).args[0], {
+        url: this.url
+      })
+    })
+  })
 })