Show correct description for empty Connected Sites modal (#8298)

app/_locales/en/messages.json

@@ -6,6 +6,10 @@
     "message": "$1 is connected to these sites. They can view your account address.",
     "description": "$1 is the account name"
   },
+  "connectedSitesEmptyDescription": {
+    "message": "$1 is not connected to any sites.",
+    "description": "$1 is the account name"
+  },
   "connectManually": {
     "message": "Manually connect to current site"
   },

ui/app/components/app/connected-sites-list/connected-sites-list.container.js

@@ -1,11 +0,0 @@
-import { connect } from 'react-redux'
-import ConnectedSitesList from './connected-sites-list.component'
-import { getRenderablePermissionsDomains } from '../../../selectors/selectors'
-
-const mapStateToProps = (state) => {
-  return {
-    connectedDomains: getRenderablePermissionsDomains(state),
-  }
-}
-
-export default connect(mapStateToProps)(ConnectedSitesList)

ui/app/components/app/connected-sites-list/index.js

@@ -1 +1 @@
-export { default } from './connected-sites-list.container'
+export { default } from './connected-sites-list.component'

ui/app/pages/connected-sites/connected-sites.component.js

@@ -15,6 +15,7 @@ export default class ConnectSites extends Component {
   }
 
   static propTypes = {
+    connectedDomains: PropTypes.arrayOf(PropTypes.object).isRequired,
     accountLabel: PropTypes.string.isRequired,
     disconnectAccount: PropTypes.func.isRequired,
     history: PropTypes.object.isRequired,
@@ -58,13 +59,14 @@ export default class ConnectSites extends Component {
   renderConnectedSites () {
     return (
       <ConnectedSitesList
+        connectedDomains={this.props.connectedDomains}
         onDisconnectSite={this.setSitePendingDisconnect}
       />
     )
   }
 
   render () {
-    const { accountLabel, history, legacyExposeAccount, tabToConnect } = this.props
+    const { accountLabel, history, legacyExposeAccount, tabToConnect, connectedDomains } = this.props
     const { t } = this.context
     const { sitePendingDisconnect } = this.state
     return (
@@ -90,7 +92,10 @@ export default class ConnectSites extends Component {
         : (
           <Popover
             title={t('connectedSites')}
-            subtitle={t('connectedSitesDescription', [accountLabel])}
+            subtitle={connectedDomains.length
+              ? t('connectedSitesDescription', [accountLabel])
+              : t('connectedSitesEmptyDescription', [accountLabel])
+            }
             onClose={() => history.push(DEFAULT_ROUTE)}
             footer={
               tabToConnect

ui/app/pages/connected-sites/connected-sites.container.js

@@ -5,6 +5,7 @@ import {
   getCurrentAccountWithSendEtherInfo,
   getPermissionsDomains,
   getPermittedAccountsForCurrentTab,
+  getRenderablePermissionsDomains,
   getSelectedAddress,
 } from '../../selectors/selectors'
 import { getOriginFromUrl } from '../../helpers/utils/util'
@@ -13,6 +14,7 @@ const mapStateToProps = (state) => {
   const { openMetaMaskTabs } = state.appState
   const { title, url, id } = state.activeTab
   const permittedAccounts = getPermittedAccountsForCurrentTab(state)
+  const connectedDomains = getRenderablePermissionsDomains(state)
 
   let tabToConnect
   if (url && permittedAccounts.length === 0 && !openMetaMaskTabs[id]) {
@@ -24,6 +26,7 @@ const mapStateToProps = (state) => {
 
   return {
     accountLabel: getCurrentAccountWithSendEtherInfo(state).name,
+    connectedDomains,
     domains: getPermissionsDomains(state),
     selectedAddress: getSelectedAddress(state),
     tabToConnect,