allow shields read-only view to show actual resources blocked

-
at the moment it shows a static/hard-coded version
fix brave/brave-browser#5355

components/brave_extension/extension/brave_extension/components/advancedView/controls/deviceRecognitionControl.tsx

@@ -36,14 +36,14 @@ interface CommonProps {
   setBlockedListOpen: () => void
 }
 
-interface HTTPSUpgradesProps {
+interface DeviceRecognitionProps {
   fingerprinting: BlockFPOptions
   fingerprintingBlocked: number
   fingerprintingBlockedResources: Array<string>
   blockFingerprinting: (event: string) => void
 }
 
-export type Props = CommonProps & HTTPSUpgradesProps
+export type Props = CommonProps & DeviceRecognitionProps
 
 interface State {
   deviceRecognitionOpen: boolean

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

@@ -71,9 +71,7 @@ interface State {
 export default class ScriptsControls extends React.PureComponent<Props, State> {
   constructor (props: Props) {
     super(props)
-    this.state = {
-      scriptsBlockedOpen: false
-    }
+    this.state = { scriptsBlockedOpen: false }
   }
 
   get maybeDisableResourcesRow (): boolean {

components/brave_extension/extension/brave_extension/components/readOnlyView/controls/adsTrackersControl.tsx

@@ -13,45 +13,86 @@ import {
   ArrowUpIcon,
   ArrowDownIcon,
   BlockedInfoRowStats,
-  BlockedListStatic,
-  dummyData
+  BlockedListStatic
 } from 'brave-ui/features/shields'
 
 // Group components
 import StaticResourcesList from '../../shared/resourcesBlockedList/staticResourcesList'
 
-// Helpers
+// Locale
 import { getLocale } from '../../../background/api/localeAPI'
 
+// Helpers
+import {
+  sumAdsAndTrackers,
+  blockedResourcesSize,
+  maybeDisableResourcesRow,
+  mergeAdsAndTrackersResources
+} from '../../../helpers/shieldsUtils'
+
+// Types
+import { BlockOptions } from '../../../types/other/blockTypes'
+
+interface Props {
+  ads: BlockOptions
+  adsBlocked: number
+  adsBlockedResources: Array<string>
+  trackers: BlockOptions
+  trackersBlocked: number
+  trackersBlockedResources: Array<string>
+}
+
 interface State {
-  dummyThirdPartyTrackersBlockedOpen: boolean
+  trackersBlockedOpen: boolean
 }
 
-export default class AdsTrackersControl extends React.PureComponent<{}, State> {
-  constructor (props: {}) {
+export default class AdsTrackersControl extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
     super(props)
-    this.state = { dummyThirdPartyTrackersBlockedOpen: false }
+    this.state = { trackersBlockedOpen: false }
   }
-  onClickFakeThirdPartyTrackersBlocked = () => {
-    this.setState({ dummyThirdPartyTrackersBlockedOpen: !this.state.dummyThirdPartyTrackersBlockedOpen })
+
+  get totalAdsTrackersBlocked (): number {
+    const { adsBlocked, trackersBlocked } = this.props
+    return sumAdsAndTrackers(adsBlocked, trackersBlocked)
   }
+
+  get totalAdsTrackersBlockedDisplay (): string {
+    return blockedResourcesSize(this.totalAdsTrackersBlocked)
+  }
+
+  get totalAdsTrackersBlockedList (): Array<string> {
+    const { adsBlockedResources, trackersBlockedResources } = this.props
+    return mergeAdsAndTrackersResources(adsBlockedResources, trackersBlockedResources)
+  }
+
+  get maybeDisableResourcesRow (): boolean {
+    return maybeDisableResourcesRow(this.totalAdsTrackersBlocked)
+  }
+
+  triggerOpen3rdPartyTrackersBlocked = () => {
+    if (!this.maybeDisableResourcesRow) {
+      this.setState({ trackersBlockedOpen: !this.state.trackersBlockedOpen })
+    }
+  }
+
   render () {
-    const { dummyThirdPartyTrackersBlockedOpen } = this.state
+    const { trackersBlockedOpen } = this.state
     return (
       <BlockedInfoRowDetails>
-        <BlockedInfoRowSummary onClick={this.onClickFakeThirdPartyTrackersBlocked}>
-          <BlockedInfoRowData disabled={false}>
+        <BlockedInfoRowSummary onClick={this.triggerOpen3rdPartyTrackersBlocked}>
+          <BlockedInfoRowData disabled={this.maybeDisableResourcesRow}>
             {
-              dummyThirdPartyTrackersBlockedOpen
+              trackersBlockedOpen
                 ? <ArrowUpIcon />
                 : <ArrowDownIcon />
             }
-            <BlockedInfoRowStats>{2}</BlockedInfoRowStats>
+            <BlockedInfoRowStats>{this.totalAdsTrackersBlockedDisplay}</BlockedInfoRowStats>
             <BlockedInfoRowText>{getLocale('thirdPartyTrackersBlocked')}</BlockedInfoRowText>
           </BlockedInfoRowData>
         </BlockedInfoRowSummary>
         <BlockedListStatic>
-          <StaticResourcesList list={dummyData.otherBlockedResources} />
+          <StaticResourcesList list={this.totalAdsTrackersBlockedList} />
         </BlockedListStatic>
       </BlockedInfoRowDetails>
     )

components/brave_extension/extension/brave_extension/components/readOnlyView/controls/deviceRecognitionControl.tsx

@@ -13,48 +13,76 @@ import {
   BlockedInfoRowForSelectSummary,
   BlockedInfoRowDataForSelect,
   BlockedListStatic,
-  BlockedInfoRowText,
-  dummyData
+  BlockedInfoRowText
 } from 'brave-ui/features/shields'
 
 // Group components
 import StaticResourcesList from '../../shared/resourcesBlockedList/staticResourcesList'
 
-// Helpers
+// Locale
 import { getLocale } from '../../../background/api/localeAPI'
 
+// Helpers
+import {
+  blockedResourcesSize,
+  maybeDisableResourcesRow
+} from '../../../helpers/shieldsUtils'
+
+// Types
+import { BlockFPOptions } from '../../../types/other/blockTypes'
+
+interface Props {
+  fingerprinting: BlockFPOptions
+  fingerprintingBlocked: number
+  fingerprintingBlockedResources: Array<string>
+}
+
 interface State {
-  dummyThirdPartyFingerprintingBlockedOpen: boolean
+  deviceRecognitionOpen: boolean
 }
 
-export default class AdsTrackersControl extends React.PureComponent<{}, State> {
-  constructor (props: {}) {
+export default class DeviceRecognitionControl extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
     super(props)
-    this.state = { dummyThirdPartyFingerprintingBlockedOpen: false }
+    this.state = { deviceRecognitionOpen: false }
+  }
+
+  get totalDeviceRecognitonAttemptsDisplay (): string {
+    const { fingerprintingBlocked } = this.props
+    return blockedResourcesSize(fingerprintingBlocked)
   }
 
-  onClickFakeThirdPartyFingerprintingBlocked = () => {
-    this.setState({ dummyThirdPartyFingerprintingBlockedOpen: !this.state.dummyThirdPartyFingerprintingBlockedOpen })
+  get maybeDisableResourcesRow (): boolean {
+    const { fingerprintingBlocked } = this.props
+    return maybeDisableResourcesRow(fingerprintingBlocked)
   }
+
+  triggerOpenDeviceRecognition = () => {
+    if (!this.maybeDisableResourcesRow) {
+      this.setState({ deviceRecognitionOpen: !this.state.deviceRecognitionOpen })
+    }
+  }
+
   render () {
-    const { dummyThirdPartyFingerprintingBlockedOpen } = this.state
+    const { deviceRecognitionOpen } = this.state
+    const { fingerprintingBlockedResources } = this.props
     return (
       <BlockedInfoRowDetails>
-        <BlockedInfoRowForSelectSummary onClick={this.onClickFakeThirdPartyFingerprintingBlocked}>
-          <BlockedInfoRowDataForSelect disabled={false}>
+        <BlockedInfoRowForSelectSummary onClick={this.triggerOpenDeviceRecognition}>
+          <BlockedInfoRowDataForSelect disabled={this.maybeDisableResourcesRow}>
             {
-              dummyThirdPartyFingerprintingBlockedOpen
+              deviceRecognitionOpen
                 ? <ArrowUpIcon />
                 : <ArrowDownIcon />
             }
-            <BlockedInfoRowStats>{2}</BlockedInfoRowStats>
+            <BlockedInfoRowStats>{this.totalDeviceRecognitonAttemptsDisplay}</BlockedInfoRowStats>
             <BlockedInfoRowText>
               <span>{getLocale('thirdPartyFingerprintingBlocked')}</span>
             </BlockedInfoRowText>
           </BlockedInfoRowDataForSelect>
         </BlockedInfoRowForSelectSummary>
         <BlockedListStatic>
-          <StaticResourcesList list={dummyData.otherBlockedResources} />
+          <StaticResourcesList list={fingerprintingBlockedResources} />
         </BlockedListStatic>
       </BlockedInfoRowDetails>
     )

components/brave_extension/extension/brave_extension/components/readOnlyView/controls/httpsUpgradesControl.tsx

@@ -13,47 +13,75 @@ import {
   ArrowUpIcon,
   ArrowDownIcon,
   BlockedInfoRowStats,
-  BlockedListStatic,
-  dummyData
+  BlockedListStatic
 } from 'brave-ui/features/shields'
 
 // Group components
 import StaticResourcesList from '../../shared/resourcesBlockedList/staticResourcesList'
 
-// Helpers
+// Locale
 import { getLocale } from '../../../background/api/localeAPI'
 
+// Helpers
+import {
+  blockedResourcesSize,
+  maybeDisableResourcesRow
+} from '../../../helpers/shieldsUtils'
+
+// Types
+import { BlockOptions } from '../../../types/other/blockTypes'
+
+interface Props {
+  httpsRedirected: number
+  httpUpgradableResources: BlockOptions
+  httpsRedirectedResources: Array<string>
+}
+
 interface State {
-  dummyConnectionsUpgradedHTTPSOpen: boolean
+  connectionsUpgradedOpen: boolean
 }
 
-export default class AdsTrackersControl extends React.PureComponent<{}, State> {
-  constructor (props: {}) {
+export default class AdsTrackersControl extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
     super(props)
-    this.state = { dummyConnectionsUpgradedHTTPSOpen: false }
+    this.state = { connectionsUpgradedOpen: false }
+  }
+
+  get maybeDisableResourcesRow (): boolean {
+    const { httpsRedirected } = this.props
+    return maybeDisableResourcesRow(httpsRedirected)
   }
 
-  onClickFakeConnectionsUpgradedHTTPS = () => {
-    this.setState({ dummyConnectionsUpgradedHTTPSOpen: !this.state.dummyConnectionsUpgradedHTTPSOpen })
+  get httpsRedirectedDisplay (): string {
+    const { httpsRedirected } = this.props
+    return blockedResourcesSize(httpsRedirected)
+  }
+
+  triggerConnectionsUpgradedToHTTPS = () => {
+    if (!this.maybeDisableResourcesRow) {
+      this.setState({ connectionsUpgradedOpen: !this.state.connectionsUpgradedOpen })
+    }
   }
 
   render () {
-    const { dummyConnectionsUpgradedHTTPSOpen } = this.state
+    const { connectionsUpgradedOpen } = this.state
+    const { httpsRedirectedResources } = this.props
+
     return (
       <BlockedInfoRowDetails>
-        <BlockedInfoRowSummary onClick={this.onClickFakeConnectionsUpgradedHTTPS}>
-          <BlockedInfoRowData disabled={false}>
+        <BlockedInfoRowSummary onClick={this.triggerConnectionsUpgradedToHTTPS}>
+          <BlockedInfoRowData disabled={this.maybeDisableResourcesRow}>
             {
-              dummyConnectionsUpgradedHTTPSOpen
+              connectionsUpgradedOpen
                 ? <ArrowUpIcon />
                 : <ArrowDownIcon />
             }
-            <BlockedInfoRowStats>{2}</BlockedInfoRowStats>
+            <BlockedInfoRowStats>{this.httpsRedirectedDisplay}</BlockedInfoRowStats>
             <BlockedInfoRowText>{getLocale('connectionsUpgradedHTTPS')}</BlockedInfoRowText>
           </BlockedInfoRowData>
         </BlockedInfoRowSummary>
         <BlockedListStatic>
-          <StaticResourcesList list={dummyData.otherBlockedResources} />
+          <StaticResourcesList list={httpsRedirectedResources} />
         </BlockedListStatic>
       </BlockedInfoRowDetails>
     )