only show hostname of HTTPS upgrades in details view

close brave/brave-browser#3367

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

@@ -15,7 +15,7 @@ import {
 } from 'brave-ui/features/shields'
 
 // Group Components
-import StaticList from '../list/static'
+import HTTPSUpgrades from '../list/httpsUpgrades'
 
 // Locale
 import { getLocale } from '../../background/api/localeAPI'
@@ -128,11 +128,10 @@ export default class HTTPSUpgradesControl extends React.PureComponent<Props, Sta
         </BlockedInfoRow>
         {
           connectionsUpgradedOpen &&
-            <StaticList
+            <HTTPSUpgrades
               favicon={favicon}
               hostname={hostname}
               stats={httpsRedirected}
-              name={getLocale('connectionsUpgradedHTTPS')}
               list={httpsRedirectedResources}
               onClose={this.onOpenConnectionsUpgradedToHTTPS}
             />

components/brave_extension/extension/brave_extension/components/list/httpsUpgrades.tsx

@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 * as React from 'react'
+
+import {
+  BlockedListHeader,
+  BlockedListSummary,
+  BlockedListContent,
+  BlockedListStatic,
+  BlockedListItem,
+  BlockedListFooter,
+  ArrowUpIcon,
+  Favicon,
+  SiteInfoText,
+  BlockedInfoRowStats,
+  BlockedListSummaryText,
+  ShieldsButton
+} from 'brave-ui/features/shields'
+
+// Helpers
+import { blockedResourcesSize } from '../../helpers/shieldsUtils'
+
+// Locale
+import { getLocale } from '../../background/api/localeAPI'
+
+interface Props {
+  favicon: string
+  hostname: string
+  stats: number
+  list: Array<string>
+  onClose?: (event?: React.MouseEvent<any>) => void
+}
+
+export default class HTTPSUpgrades extends React.PureComponent<Props, {}> {
+  get statsDisplay (): string {
+    const { stats } = this.props
+    return blockedResourcesSize(stats)
+  }
+
+  getHostname = (url: string): string => {
+    return new window.URL(url).hostname
+  }
+
+  render () {
+    const { favicon, hostname, list, onClose } = this.props
+    return (
+      <BlockedListContent>
+        <BlockedListHeader>
+          <Favicon src={favicon} />
+          <SiteInfoText title={hostname}>{hostname}</SiteInfoText>
+        </BlockedListHeader>
+        <details open={true}>
+          <BlockedListSummary onClick={onClose}>
+          <ArrowUpIcon />
+          <BlockedInfoRowStats>{this.statsDisplay}</BlockedInfoRowStats>
+          <BlockedListSummaryText>{getLocale('connectionsUpgradedHTTPS')}</BlockedListSummaryText>
+          </BlockedListSummary>
+          <BlockedListStatic>
+            {list.map((item, index) => <BlockedListItem key={index}>{this.getHostname(item)}</BlockedListItem>)}
+          </BlockedListStatic>
+        </details>
+        <BlockedListFooter>
+          <ShieldsButton level='primary' type='accent' onClick={onClose} text={getLocale('goBack')} />
+        </BlockedListFooter>
+      </BlockedListContent>
+    )
+  }
+}