Skip to content
This repository was archived by the owner on Jun 6, 2019. It is now read-only.

Update brave-ui to v0.10.6 + Tests #34

Merged
merged 7 commits into from
Jun 13, 2018
Merged

Update brave-ui to v0.10.6 + Tests #34

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
786b013
update brave-ui to v0.10.5
cezaraugusto Jun 12, 2018
48270de
add support for Enzyme + add more tests to BraveShieldsHeader
cezaraugusto Jun 12, 2018
3d98353
test BraveShieldsFooter with Enzyme
cezaraugusto Jun 12, 2018
d0de3a9
add tests for BravShieldsControls
cezaraugusto Jun 12, 2018
6f2b4b0
test BraveShieldsStats with Enzyme
cezaraugusto Jun 12, 2018
d8184d1
add basic support for NoScript unit tests
cezaraugusto Jun 12, 2018
f74d944
bump brave-ui to v0.10.6
cezaraugusto Jun 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/components/braveShields/braveShields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import BraveShieldsFooter from './braveShieldsFooter'
import * as shieldActions from '../../types/actions/shieldsPanelActions'
import { Tab } from '../../types/state/shieldsPannelState'

interface Props {
interface BraveShieldsProps {
actions: {
shieldsToggled: shieldActions.ShieldsToggled
blockAdsTrackers: shieldActions.BlockAdsTrackers
Expand All @@ -25,7 +25,7 @@ interface Props {
shieldsPanelTabData: Tab
}

export default class BraveShields extends React.Component<Props, object> {
export default class BraveShields extends React.Component<BraveShieldsProps, {}> {
render () {
const { shieldsPanelTabData, actions } = this.props

Expand Down
156 changes: 80 additions & 76 deletions app/components/braveShields/braveShieldsControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,19 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

import * as React from 'react'
import { Grid, Column, SwitchButton, BrowserSelect, ContentToggle } from 'brave-ui'
import { Grid, Column } from 'brave-ui/gridSystem'
import SwitchButton from 'brave-ui/switchButton'
import SelectOption from 'brave-ui/selectOption'
import ContentToggleArrow from 'brave-ui/contentToggleArrow'
import BoxedContent from 'brave-ui/boxedContent'
import * as shieldActions from '../../types/actions/shieldsPanelActions'
import { BlockOptions, BlockFPOptions, BlockCookiesOptions } from '../../types/other/blockTypes'
import { getMessage } from '../../background/api/localeAPI'
import { NoScriptInfo } from '../../types/other/noScriptInfo'
import NoScript from '../noScript/noScript'
import theme from '../../theme'

export interface Props {
export interface BraveShieldsControlsProps {
controlsOpen: boolean
braveShields: BlockOptions
httpUpgradableResources: BlockOptions
Expand All @@ -30,8 +35,8 @@ export interface Props {
changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
}

export default class BraveShieldsControls extends React.Component<Props, Object> {
constructor (props: Props) {
export default class BraveShieldsControls extends React.Component<BraveShieldsControlsProps, {}> {
constructor (props: BraveShieldsControlsProps) {
super(props)
this.onChangeAdControl = this.onChangeAdControl.bind(this)
this.onToggleControls = this.onToggleControls.bind(this)
Expand Down Expand Up @@ -78,92 +83,91 @@ export default class BraveShieldsControls extends React.Component<Props, Object>
render () {
const { braveShields, ads, trackers, controlsOpen, httpUpgradableResources, javascript, fingerprinting, cookies, noScriptInfo } = this.props
return (
<Grid
id='braveShieldsControls'
background='#eee'
padding='10px 10px 0'
gap='10px 5px'
>
<Grid id='braveShieldsControls' theme={theme.braveShieldsControls}>
<Column>
<ContentToggle
<ContentToggleArrow
id='advancedControlsToggle'
withSeparator={true}
open={controlsOpen}
summary={getMessage('shieldsControlsAdvancedControls')}
onClick={this.onToggleControls}
>
<BrowserSelect
disabled={braveShields === 'block'}
titleName={getMessage('shieldsControlsAdControl')}
value={braveShields !== 'block' && ads !== 'allow' && trackers !== 'allow' ? 'allow' : 'block'}
onChange={this.onChangeAdControl}
>
{/* TODO needs "show brave ads" */}
<option value='allow'>{getMessage('shieldsControlsAdControlOptionBlockAds')}</option>
<option value='block'>{getMessage('shieldsControlsAdControlOptionAllowAdsTracking')}</option>
</BrowserSelect>
<BoxedContent theme={theme.braveShieldsControlsContent}>
<SelectOption
id='shieldsControlsAdControl'
disabled={braveShields === 'block'}
titleName={getMessage('shieldsControlsAdControl')}
value={braveShields !== 'block' && ads !== 'allow' && trackers !== 'allow' ? 'allow' : 'block'}
onChange={this.onChangeAdControl}
>
{/* TODO needs "show brave ads" */}
<option value='allow'>{getMessage('shieldsControlsAdControlOptionBlockAds')}</option>
<option value='block'>{getMessage('shieldsControlsAdControlOptionAllowAdsTracking')}</option>
</SelectOption>

<BrowserSelect
disabled={braveShields === 'block'}
titleName={getMessage('shieldsControlsCookieControl')}
value={braveShields !== 'block' ? cookies : 'allow'}
onChange={this.onChangeCookiesProtection}
>
<option value='block_third_party'>{getMessage('shieldsControlsCookieOptionBlock3p')}</option>
<option value='block'>{getMessage('shieldsControlsCookieOptionBlockAll')}</option>
<option value='allow'>{getMessage('shieldsControlsCookieOptionAllowAll')}</option>
</BrowserSelect>
<SelectOption
id='shieldsControlsCookieControl'
disabled={braveShields === 'block'}
titleName={getMessage('shieldsControlsCookieControl')}
value={braveShields !== 'block' ? cookies : 'allow'}
onChange={this.onChangeCookiesProtection}
>
<option value='block_third_party'>{getMessage('shieldsControlsCookieOptionBlock3p')}</option>
<option value='block'>{getMessage('shieldsControlsCookieOptionBlockAll')}</option>
<option value='allow'>{getMessage('shieldsControlsCookieOptionAllowAll')}</option>
</SelectOption>

<BrowserSelect
disabled={braveShields === 'block'}
titleName={getMessage('shieldsControlsFingerprintingProtection')}
value={braveShields !== 'block' ? fingerprinting : 'allow'}
onChange={this.onChangeFingerprintingProtection}
>
<option value='block_third_party'>{getMessage('shieldsControlsFingerprintingOptionBlock3p')}</option>
<option value='block'>{getMessage('shieldsControlsFingerprintingOptionBlockAll')}</option>
<option value='allow'>{getMessage('shieldsControlsFingerprintingOptionAllowAll')}</option>
</BrowserSelect>
<Grid
gap='10px 5px'
padding='5px 0'
>
<Column>
{/* TODO @cezaraugusto */}
<SwitchButton
id='httpsEverywhere'
disabled={braveShields === 'block'}
rightText={getMessage('shieldsControlsHttpsEverywhereSwitch')}
checked={braveShields !== 'block' && httpUpgradableResources !== 'allow'}
onChange={this.onToggleHTTPSEverywhere}
/>
</Column>
<Column>
{/* TODO @cezaraugusto */}
<SwitchButton
id='blockScripts'
disabled={braveShields === 'block'}
rightText={getMessage('shieldsControlsBlockScriptsSwitch')}
checked={braveShields !== 'block' && javascript !== 'allow'}
onChange={this.onToggleJavaScript}
/>
</Column>
<Column>
{/* TODO @cezaraugusto */}
<SwitchButton
id='blockPhishingMalware'
checked={false}
disabled={braveShields === 'block'}
rightText={getMessage('shieldsControlsBlockPhishingMalwareSwitch')}
/>
</Column>
</Grid>
<SelectOption
id='shieldsControlsFingerprintingProtection'
disabled={braveShields === 'block'}
titleName={getMessage('shieldsControlsFingerprintingProtection')}
value={braveShields !== 'block' ? fingerprinting : 'allow'}
onChange={this.onChangeFingerprintingProtection}
>
<option value='block_third_party'>{getMessage('shieldsControlsFingerprintingOptionBlock3p')}</option>
<option value='block'>{getMessage('shieldsControlsFingerprintingOptionBlockAll')}</option>
<option value='allow'>{getMessage('shieldsControlsFingerprintingOptionAllowAll')}</option>
</SelectOption>

<Grid theme={theme.braveShieldsControlsSwitches}>
<Column>
{/* TODO @cezaraugusto */}
<SwitchButton
id='httpsEverywhere'
disabled={braveShields === 'block'}
rightText={getMessage('shieldsControlsHttpsEverywhereSwitch')}
checked={braveShields !== 'block' && httpUpgradableResources !== 'allow'}
onChange={this.onToggleHTTPSEverywhere}
/>
</Column>
<Column>
{/* TODO @cezaraugusto */}
<SwitchButton
id='blockScripts'
disabled={braveShields === 'block'}
rightText={getMessage('shieldsControlsBlockScriptsSwitch')}
checked={braveShields !== 'block' && javascript !== 'allow'}
onChange={this.onToggleJavaScript}
/>
</Column>
<Column>
{/* TODO @cezaraugusto */}
<SwitchButton
id='blockPhishingMalware'
checked={false}
disabled={braveShields === 'block'}
rightText={getMessage('shieldsControlsBlockPhishingMalwareSwitch')}
/>
</Column>
</Grid>
<NoScript
blocked={javascript !== 'allow'}
noScriptInfo={noScriptInfo}
onSubmit={this.onAllowScriptOriginsOnce}
onChangeNoScriptSettings={this.onChangeNoScriptSettings}
/>
</ContentToggle>
</BoxedContent>
</ContentToggleArrow>
</Column>
</Grid>
)
Expand Down
22 changes: 10 additions & 12 deletions app/components/braveShields/braveShieldsFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,26 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

import * as React from 'react'
import { Grid, Column, ActionButton, Anchor } from 'brave-ui'
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'

export default class BraveShieldsFooter extends React.Component<{}, object> {
export default class BraveShieldsFooter extends React.PureComponent<{}, {}> {
render () {
return (
<Grid
id='braveShieldsFooter'
gap='10px'
padding='0 10px 10px'
background='#eee'
>
<Column align='flex-start' size={9}>
<Grid id='braveShieldsFooter' theme={theme.braveShieldsFooter}>
<Column size={9} theme={theme.columnStart}>
<Anchor
noStyle={true}
theme={theme.editLink}
href='chrome://settings'
target='_blank'
text={getMessage('shieldsFooterEditDefault')}
/>
</Column>
<Column align='flex-end' size={3}>
<ActionButton text={getMessage('shieldsFooterReload')} />
<Column size={3} theme={theme.columnEnd}>
<UnstyledButton text={getMessage('shieldsFooterReload')} />
</Column>
</Grid>
)
Expand Down
33 changes: 19 additions & 14 deletions app/components/braveShields/braveShieldsHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,24 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

import * as React from 'react'
import { Grid, Column, Separator, SwitchButton, ActionButton, BrowserText } from 'brave-ui'
import { Grid, Column } from 'brave-ui/gridSystem'
import Separator from 'brave-ui/separator'
import SwitchButton from 'brave-ui/switchButton'
import UnstyledButton from 'brave-ui/unstyledButton'
import TextLabel from 'brave-ui/textLabel'
import * as shieldActions from '../../types/actions/shieldsPanelActions'
import { BlockOptions } from '../../types/other/blockTypes'
import { getMessage } from '../../background/api/localeAPI'
import theme from '../../theme'

export interface Props {
export interface BraveShieldsHeaderProps {
shieldsToggled: shieldActions.ShieldsToggled
hostname: string
braveShields: BlockOptions
}

export default class BraveShieldsHeader extends React.Component<Props, object> {
constructor (props: Props) {
export default class BraveShieldsHeader extends React.PureComponent<BraveShieldsHeaderProps, {}> {
constructor (props: BraveShieldsHeaderProps) {
super(props)
this.onToggleShields = this.onToggleShields.bind(this)
this.onClosePopup = this.onClosePopup.bind(this)
Expand All @@ -33,11 +38,11 @@ export default class BraveShieldsHeader extends React.Component<Props, object> {
render () {
const { braveShields, hostname } = this.props
return (
<Grid id='braveShieldsHeader' background='#808080' padding='10px' gap='0' textColor='#fafafa'>
<Column size={4} verticalAlign='center'>
<BrowserText noSelect={true} fontSize='14px' text={getMessage('shieldsHeaderShieldsToggle')} />
<Grid id='braveShieldsHeader' theme={theme.braveShieldsHeader}>
<Column size={4} theme={theme.columnVerticalCenter}>
<TextLabel theme={theme.title} text={getMessage('shieldsHeaderShieldsToggle')} />
</Column>
<Column size={6} verticalAlign='center'>
<Column size={6} theme={theme.columnVerticalCenter}>
<SwitchButton
id='shieldsToggle'
leftText={getMessage('shieldsHeaderToggleLeftPosition')}
Expand All @@ -46,19 +51,19 @@ export default class BraveShieldsHeader extends React.Component<Props, object> {
onChange={this.onToggleShields}
/>
</Column>
<Column size={2} align='flex-end' verticalAlign='center'>
<ActionButton
fontSize='20px'
<Column size={2} theme={theme.columnVerticalCenterEnd}>
<UnstyledButton
theme={theme.closeButton}
text='&times;'
onClick={this.onClosePopup}
/>
</Column>
<Column>
<Separator />
<BrowserText noSelect={true} text={getMessage('shieldsHeaderForSite')} />
</Column>
<Column verticalAlign='center'>
<BrowserText noSelect={true} fontSize='20px' text={hostname} />
<Column theme={theme.hostnameContent}>
<TextLabel text={getMessage('shieldsHeaderForSite')} />
<TextLabel id='hostname' theme={theme.hostname} text={hostname} />
</Column>
</Grid>
)
Expand Down
Loading