Storybook: De-duplicate Shields component

components/brave_extension/extension/brave_extension/background/api/localeAPI.ts

@@ -2,14 +2,19 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import rawMessages from '../../_locales/en_US/messages.json'
+
 /**
  * Gets the locale message specified in messages.json
  * @param {string} message - The locale string
  */
-export const getLocale = (message: string): string => {
+export const getLocale = (messageStr: string): string => {
   if (chrome.i18n) {
-    return chrome.i18n.getMessage(message)
+    return chrome.i18n.getMessage(messageStr)
   }
 
-  return message
+  // If no string is available then get
+  // the message from original (en-US) source.
+  // Otherwise just output the string, which is a bug.
+  return rawMessages[messageStr].message || messageStr
 }

components/brave_extension/extension/brave_extension/components/structure/index.ts

@@ -249,8 +249,8 @@ export const BlockedListContent = styled<{}, 'div'>('div')`
   top: 0;
   left: 0;
   background: ${p => p.theme.color.panelBackground};
-  width: 100%;
-  height: 100%;
+  width: 370px;
+  height: fit-content;
   z-index: 2;
   cursor: default;
 `

components/brave_extension/extension/brave_extension/containers/advancedView/controls/adsTrackersControl.tsx

@@ -32,14 +32,15 @@ import {
 } from '../../../helpers/shieldsUtils'
 
 // Types
-import { BlockAdsTrackers } from '../../../types/actions/shieldsPanelActions'
+import { ShieldsPanelActionTypes } from '../../../types/actions/shieldsPanelActions'
 import { BlockOptions } from '../../../types/other/blockTypes'
 
 interface CommonProps {
   isBlockedListOpen: boolean
   setBlockedListOpen: () => void
   hostname: string
   favicon: string
+  actions: ShieldsPanelActionTypes
 }
 
 interface AdsTrackersProps {
@@ -49,7 +50,6 @@ interface AdsTrackersProps {
   trackers: BlockOptions
   trackersBlocked: number
   trackersBlockedResources: Array<string>
-  blockAdsTrackers: BlockAdsTrackers
 }
 
 export type Props = CommonProps & AdsTrackersProps
@@ -114,7 +114,7 @@ export default class AdsTrackersControl extends React.PureComponent<Props, State
 
   onChange3rdPartyTrackersBlockedEnabled = (event: React.ChangeEvent<HTMLInputElement>) => {
     const shoudEnableAdsTracks = getToggleStateViaEventTarget(event)
-    this.props.blockAdsTrackers(shoudEnableAdsTracks)
+    this.props.actions.blockAdsTrackers(shoudEnableAdsTracks)
   }
 
   render () {

components/brave_extension/extension/brave_extension/containers/advancedView/controls/httpsUpgradesControl.tsx

@@ -30,21 +30,21 @@ import {
 } from '../../../helpers/shieldsUtils'
 
 // Types
-import { HttpsEverywhereToggled } from '../../../types/actions/shieldsPanelActions'
+import { ShieldsPanelActionTypes } from '../../../types/actions/shieldsPanelActions'
 import { BlockOptions } from '../../../types/other/blockTypes'
 
 interface CommonProps {
   isBlockedListOpen: boolean
   setBlockedListOpen: () => void
   hostname: string
   favicon: string
+  actions: ShieldsPanelActionTypes
 }
 
 interface HTTPSUpgradesProps {
   httpsRedirected: number
   httpUpgradableResources: BlockOptions
   httpsRedirectedResources: Array<string>
-  httpsEverywhereToggled: HttpsEverywhereToggled
 }
 
 export type Props = CommonProps & HTTPSUpgradesProps
@@ -101,7 +101,7 @@ export default class HTTPSUpgradesControl extends React.PureComponent<Props, Sta
 
   onChangeConnectionsUpgradedToHTTPSEnabled = (event: React.ChangeEvent<HTMLInputElement>) => {
     const shouldEnableHttpsEverywhere = getToggleStateViaEventTarget(event)
-    this.props.httpsEverywhereToggled(shouldEnableHttpsEverywhere)
+    this.props.actions.httpsEverywhereToggled(shouldEnableHttpsEverywhere)
   }
 
   render () {

components/brave_extension/extension/brave_extension/containers/advancedView/controls/scriptsControl.tsx

@@ -33,14 +33,7 @@ import {
 // Types
 import { BlockJSOptions } from '../../../types/other/blockTypes'
 import { NoScriptInfo } from '../../../types/other/noScriptInfo'
-import {
-  BlockJavaScript,
-  AllowScriptOriginsOnce,
-  SetScriptBlockedCurrentState,
-  SetGroupedScriptsBlockedCurrentState,
-  SetAllScriptsBlockedCurrentState,
-  SetFinalScriptsBlockedState
-} from '../../../types/actions/shieldsPanelActions'
+import { ShieldsPanelActionTypes } from '../../../types/actions/shieldsPanelActions'
 
 interface CommonProps {
   // Global props
@@ -54,12 +47,7 @@ interface JavaScriptProps {
   javascript: BlockJSOptions
   javascriptBlocked: number
   noScriptInfo: NoScriptInfo
-  blockJavaScript: BlockJavaScript
-  allowScriptOriginsOnce: AllowScriptOriginsOnce
-  setScriptBlockedCurrentState: SetScriptBlockedCurrentState
-  setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState
-  setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
-  setFinalScriptsBlockedState: SetFinalScriptsBlockedState
+  actions: ShieldsPanelActionTypes
 }
 
 export type Props = CommonProps & JavaScriptProps
@@ -116,26 +104,22 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
 
   onChangeScriptsBlockedEnabled = (event: React.ChangeEvent<HTMLInputElement>) => {
     const shouldBlockJavaScript = getToggleStateViaEventTarget(event)
-    this.props.blockJavaScript(shouldBlockJavaScript)
+    this.props.actions.blockJavaScript(shouldBlockJavaScript)
   }
 
   onClickAllowScriptsOnce = () => {
-    this.props.setAllScriptsBlockedCurrentState(false)
-    this.props.setFinalScriptsBlockedState()
-    this.props.allowScriptOriginsOnce()
+    this.props.actions.setAllScriptsBlockedCurrentState(false)
+    this.props.actions.setFinalScriptsBlockedState()
+    this.props.actions.allowScriptOriginsOnce()
   }
 
   render () {
     const {
       favicon,
       hostname,
       isBlockedListOpen,
-      allowScriptOriginsOnce,
       noScriptInfo,
-      setScriptBlockedCurrentState,
-      setGroupedScriptsBlockedCurrentState,
-      setAllScriptsBlockedCurrentState,
-      setFinalScriptsBlockedState
+      actions
     } = this.props
     const { scriptsBlockedOpen } = this.state
     return (
@@ -183,11 +167,7 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
               hostname={hostname}
               noScriptInfo={noScriptInfo}
               onClose={this.onOpenScriptsBlocked}
-              allowScriptOriginsOnce={allowScriptOriginsOnce}
-              setScriptBlockedCurrentState={setScriptBlockedCurrentState}
-              setGroupedScriptsBlockedCurrentState={setGroupedScriptsBlockedCurrentState}
-              setAllScriptsBlockedCurrentState={setAllScriptsBlockedCurrentState}
-              setFinalScriptsBlockedState={setFinalScriptsBlockedState}
+              actions={actions}
             />
         }
       </>

components/brave_extension/extension/brave_extension/containers/advancedView/header.tsx

@@ -33,15 +33,14 @@ import {
 
 // Types
 import { BlockOptions } from '../../types/other/blockTypes'
-import { ShieldsToggled } from '../../types/actions/shieldsPanelActions'
+import { ShieldsPanelActionTypes } from '../../types/actions/shieldsPanelActions'
 
 interface CommonProps {
   enabled: boolean
   favicon: string
   hostname: string
   isBlockedListOpen: boolean
-  shieldsToggled: ShieldsToggled
-  reportBrokenSite: () => void
+  actions: ShieldsPanelActionTypes
 }
 
 interface BlockedItemsProps {
@@ -73,11 +72,11 @@ export default class Header extends React.PureComponent<Props, {}> {
 
   onToggleShieldsMain = (event: React.ChangeEvent<HTMLInputElement>) => {
     const shieldsOption: BlockOptions = event.target.checked ? 'allow' : 'block'
-    this.props.shieldsToggled(shieldsOption)
+    this.props.actions.shieldsToggled(shieldsOption)
   }
 
   onReportBrokenSite = () => {
-    this.props.reportBrokenSite()
+    this.props.actions.reportBrokenSite()
     window.close()
   }
 

components/brave_extension/extension/brave_extension/containers/advancedView/index.tsx

@@ -20,38 +20,10 @@ import WebCompatWarning from './overlays/webCompatWarningOverlay'
 // Types
 import { Tab, PersistentData } from '../../types/state/shieldsPannelState'
 import { isShieldsEnabled, getFavicon } from '../../helpers/shieldsUtils'
-import {
-  ShieldsToggled,
-  ReportBrokenSite,
-  BlockAdsTrackers,
-  HttpsEverywhereToggled,
-  BlockJavaScript,
-  BlockFingerprinting,
-  BlockCookies,
-  AllowScriptOriginsOnce,
-  SetScriptBlockedCurrentState,
-  SetGroupedScriptsBlockedCurrentState,
-  SetAllScriptsBlockedCurrentState,
-  SetFinalScriptsBlockedState,
-  SetAdvancedViewFirstAccess
-} from '../../types/actions/shieldsPanelActions'
+import { ShieldsPanelActionTypes } from '../../types/actions/shieldsPanelActions'
 
 interface Props {
-  actions: {
-    shieldsToggled: ShieldsToggled
-    reportBrokenSite: ReportBrokenSite
-    blockAdsTrackers: BlockAdsTrackers
-    httpsEverywhereToggled: HttpsEverywhereToggled
-    blockJavaScript: BlockJavaScript
-    blockFingerprinting: BlockFingerprinting
-    blockCookies: BlockCookies
-    allowScriptOriginsOnce: AllowScriptOriginsOnce
-    setScriptBlockedCurrentState: SetScriptBlockedCurrentState
-    setGroupedScriptsBlockedCurrentState: SetGroupedScriptsBlockedCurrentState
-    setAllScriptsBlockedCurrentState: SetAllScriptsBlockedCurrentState
-    setFinalScriptsBlockedState: SetFinalScriptsBlockedState
-    setAdvancedViewFirstAccess: SetAdvancedViewFirstAccess
-  }
+  actions: ShieldsPanelActionTypes
   shieldsPanelTabData: Tab
   persistentData: PersistentData
   toggleAdvancedView: () => void
@@ -105,8 +77,7 @@ export default class Shields extends React.PureComponent<Props, State> {
           httpsUpgrades={shieldsPanelTabData.httpsRedirected}
           scriptsBlocked={shieldsPanelTabData.javascriptBlocked}
           fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
-          shieldsToggled={actions.shieldsToggled}
-          reportBrokenSite={actions.reportBrokenSite}
+          actions={actions}
         />
         {
           this.isShieldsEnabled && (
@@ -117,44 +88,36 @@ export default class Shields extends React.PureComponent<Props, State> {
                 setBlockedListOpen={this.setBlockedListOpen}
                 hostname={shieldsPanelTabData.hostname}
                 favicon={this.favicon}
+                actions={actions}
                 // Ads/Trackers
                 ads={shieldsPanelTabData.ads}
                 adsBlocked={shieldsPanelTabData.adsBlocked}
                 adsBlockedResources={shieldsPanelTabData.adsBlockedResources}
                 trackers={shieldsPanelTabData.trackers}
                 trackersBlocked={shieldsPanelTabData.trackersBlocked}
                 trackersBlockedResources={shieldsPanelTabData.trackersBlockedResources}
-                blockAdsTrackers={actions.blockAdsTrackers}
                 // HTTPS Upgrades
                 httpsRedirected={shieldsPanelTabData.httpsRedirected}
                 httpUpgradableResources={shieldsPanelTabData.httpUpgradableResources}
                 httpsRedirectedResources={shieldsPanelTabData.httpsRedirectedResources}
-                httpsEverywhereToggled={actions.httpsEverywhereToggled}
               />
               <PrivacyControls
                 // Global props
                 isBlockedListOpen={isBlockedListOpen}
                 setBlockedListOpen={this.setBlockedListOpen}
                 hostname={shieldsPanelTabData.hostname}
                 favicon={this.favicon}
+                actions={actions}
                 // JavaScript
                 javascript={shieldsPanelTabData.javascript}
                 javascriptBlocked={shieldsPanelTabData.javascriptBlocked}
                 noScriptInfo={shieldsPanelTabData.noScriptInfo}
-                blockJavaScript={actions.blockJavaScript}
-                allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
-                setScriptBlockedCurrentState={actions.setScriptBlockedCurrentState}
-                setGroupedScriptsBlockedCurrentState={actions.setGroupedScriptsBlockedCurrentState}
-                setAllScriptsBlockedCurrentState={actions.setAllScriptsBlockedCurrentState}
-                setFinalScriptsBlockedState={actions.setFinalScriptsBlockedState}
                 // Cookies
-                blockCookies={actions.blockCookies}
                 cookies={shieldsPanelTabData.cookies}
                 // Fingerprinting
                 fingerprinting={shieldsPanelTabData.fingerprinting}
                 fingerprintingBlocked={shieldsPanelTabData.fingerprintingBlocked}
                 fingerprintingBlockedResources={shieldsPanelTabData.fingerprintingBlockedResources}
-                blockFingerprinting={actions.blockFingerprinting}
               />
             </>
           )

components/brave_extension/extension/brave_extension/containers/advancedView/interfaceControls.tsx

@@ -9,14 +9,15 @@ import AdsTrackersControl from './controls/adsTrackersControl'
 import HTTPSUpgradesControl from './controls/httpsUpgradesControl'
 
 // Types
-import { BlockAdsTrackers, HttpsEverywhereToggled } from '../../types/actions/shieldsPanelActions'
+import { ShieldsPanelActionTypes } from '../../types/actions/shieldsPanelActions'
 import { BlockOptions } from '../../types/other/blockTypes'
 
 interface CommonProps {
   isBlockedListOpen: boolean
   setBlockedListOpen: () => void
   hostname: string
   favicon: string
+  actions: ShieldsPanelActionTypes
 }
 
 interface AdsTrackersProps {
@@ -26,22 +27,20 @@ interface AdsTrackersProps {
   trackers: BlockOptions
   trackersBlocked: number
   trackersBlockedResources: Array<string>
-  blockAdsTrackers: BlockAdsTrackers
 }
 
 interface HTTPSUpgradesProps {
   httpsRedirected: number
   httpUpgradableResources: BlockOptions
   httpsRedirectedResources: Array<string>
-  httpsEverywhereToggled: HttpsEverywhereToggled
 }
 
 export type Props = CommonProps & AdsTrackersProps & HTTPSUpgradesProps
 
 export default class InterfaceControls extends React.PureComponent<Props, {}> {
   get commonProps (): CommonProps {
-    const { favicon, hostname, isBlockedListOpen, setBlockedListOpen } = this.props
-    return { favicon, hostname, isBlockedListOpen, setBlockedListOpen }
+    const { favicon, hostname, isBlockedListOpen, setBlockedListOpen, actions } = this.props
+    return { favicon, hostname, isBlockedListOpen, setBlockedListOpen, actions }
   }
 
   render () {
@@ -55,14 +54,12 @@ export default class InterfaceControls extends React.PureComponent<Props, {}> {
           trackers={this.props.trackers}
           trackersBlocked={this.props.trackersBlocked}
           trackersBlockedResources={this.props.trackersBlockedResources}
-          blockAdsTrackers={this.props.blockAdsTrackers}
         />
         <HTTPSUpgradesControl
           {...this.commonProps}
           httpsRedirected={this.props.httpsRedirected}
           httpUpgradableResources={this.props.httpUpgradableResources}
           httpsRedirectedResources={this.props.httpsRedirectedResources}
-          httpsEverywhereToggled={this.props.httpsEverywhereToggled}
         />
       </>
     )