From e4410724e9bc8950789346f856d3d45b53a560cd Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Thu, 2 Jul 2020 14:08:43 -0300
Subject: [PATCH] Show `origin` in connect flow rather than site name (#8885)

The designs for the connect flow show the site `origin` below the site
icon rather than the site name. This was done for security reasons,
and because the site name is often set to an unwieldy long string.

This was accidentally undone in #8815 in the process of fixing a
separate bug. The origin has now been restored. More specific PropTypes
have been set on each use of the `domainMetadata` prop as well.
---
 ...ission-page-container-content.component.js |  9 ++++++++-
 .../permission-page-container.component.js    |  8 +++++++-
 .../permissions-connect-header.component.js   |  8 ++++----
 .../choose-account.component.js               |  9 ++++++++-
 .../permissions-connect.component.js          | 10 ++++++++--
 .../permissions-connect.container.js          | 19 +++++++++++++------
 .../permissions-redirect.component.js         |  8 +++++++-
 7 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js b/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
index 268c973bf..feb6eaa9a 100644
--- a/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
+++ b/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
@@ -7,7 +7,13 @@ import CheckBox from '../../../ui/check-box'
 export default class PermissionPageContainerContent extends PureComponent {
 
   static propTypes = {
-    domainMetadata: PropTypes.object.isRequired,
+    domainMetadata: PropTypes.shape({
+      extensionId: PropTypes.string,
+      icon: PropTypes.string,
+      host: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      origin: PropTypes.string.isRequired,
+    }),
     selectedPermissions: PropTypes.object.isRequired,
     onPermissionToggle: PropTypes.func.isRequired,
     selectedIdentities: PropTypes.array,
@@ -145,6 +151,7 @@ export default class PermissionPageContainerContent extends PureComponent {
               ? t('allowExternalExtensionTo', [domainMetadata.extensionId])
               : t('allowThisSiteTo')
             }
+            siteOrigin={domainMetadata.origin}
           />
           <section className="permission-approval-container__permissions-container">
             { this.renderRequestedPermissions() }
diff --git a/ui/app/components/app/permission-page-container/permission-page-container.component.js b/ui/app/components/app/permission-page-container/permission-page-container.component.js
index 3020b82b5..0779f2226 100644
--- a/ui/app/components/app/permission-page-container/permission-page-container.component.js
+++ b/ui/app/components/app/permission-page-container/permission-page-container.component.js
@@ -14,7 +14,13 @@ export default class PermissionPageContainer extends Component {
     allIdentitiesSelected: PropTypes.bool,
     request: PropTypes.object,
     requestMetadata: PropTypes.object,
-    targetDomainMetadata: PropTypes.object.isRequired,
+    targetDomainMetadata: PropTypes.shape({
+      extensionId: PropTypes.string,
+      icon: PropTypes.string,
+      host: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      origin: PropTypes.string.isRequired,
+    }),
   }
 
   static defaultProps = {
diff --git a/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
index e32f8a0b1..c1bc5d775 100644
--- a/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
+++ b/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
@@ -5,25 +5,25 @@ import SiteIcon from '../../ui/site-icon'
 export default class PermissionsConnectHeader extends Component {
   static propTypes = {
     icon: PropTypes.string,
-    iconName: PropTypes.string,
+    iconName: PropTypes.string.isRequired,
+    siteOrigin: PropTypes.string.isRequired,
     headerTitle: PropTypes.node,
     headerText: PropTypes.string,
   }
 
   static defaultProps = {
     icon: null,
-    iconName: '',
     headerTitle: '',
     headerText: '',
   }
 
   renderHeaderIcon () {
-    const { icon, iconName } = this.props
+    const { icon, iconName, siteOrigin } = this.props
 
     return (
       <div className="permissions-connect-header__icon">
         <SiteIcon icon={ icon } name={ iconName } size={64} />
-        <div className="permissions-connect-header__text">{iconName}</div>
+        <div className="permissions-connect-header__text">{siteOrigin}</div>
       </div>
     )
   }
diff --git a/ui/app/pages/permissions-connect/choose-account/choose-account.component.js b/ui/app/pages/permissions-connect/choose-account/choose-account.component.js
index 720fd0bb0..606b2ecc9 100644
--- a/ui/app/pages/permissions-connect/choose-account/choose-account.component.js
+++ b/ui/app/pages/permissions-connect/choose-account/choose-account.component.js
@@ -25,7 +25,13 @@ export default class ChooseAccount extends Component {
     cancelPermissionsRequest: PropTypes.func.isRequired,
     permissionsRequestId: PropTypes.string.isRequired,
     selectedAccountAddresses: PropTypes.object.isRequired,
-    targetDomainMetadata: PropTypes.object,
+    targetDomainMetadata: PropTypes.shape({
+      extensionId: PropTypes.string,
+      icon: PropTypes.string,
+      host: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      origin: PropTypes.string.isRequired,
+    }),
   }
 
   state = {
@@ -197,6 +203,7 @@ export default class ChooseAccount extends Component {
             ? t('selectAccounts')
             : t('connectAccountOrCreate')
           }
+          siteOrigin={targetDomainMetadata.origin}
         />
         {this.renderAccountsListHeader()}
         {this.renderAccountsList()}
diff --git a/ui/app/pages/permissions-connect/permissions-connect.component.js b/ui/app/pages/permissions-connect/permissions-connect.component.js
index 068d846dd..4119e04a6 100644
--- a/ui/app/pages/permissions-connect/permissions-connect.component.js
+++ b/ui/app/pages/permissions-connect/permissions-connect.component.js
@@ -31,7 +31,13 @@ export default class PermissionConnect extends Component {
     connectPath: PropTypes.string.isRequired,
     confirmPermissionPath: PropTypes.string.isRequired,
     page: PropTypes.string.isRequired,
-    targetDomainMetadata: PropTypes.object,
+    targetDomainMetadata: PropTypes.shape({
+      extensionId: PropTypes.string,
+      icon: PropTypes.string,
+      host: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      origin: PropTypes.string.isRequired,
+    }),
   }
 
   static defaultProps = {
@@ -95,7 +101,7 @@ export default class PermissionConnect extends Component {
 
     if (
       permissionsRequest &&
-      savedMetadata.name !== targetDomainMetadata?.name
+      savedMetadata.origin !== targetDomainMetadata?.origin
     ) {
       return { targetDomainMetadata }
     }
diff --git a/ui/app/pages/permissions-connect/permissions-connect.container.js b/ui/app/pages/permissions-connect/permissions-connect.container.js
index 31a727cb5..30a76ec55 100644
--- a/ui/app/pages/permissions-connect/permissions-connect.container.js
+++ b/ui/app/pages/permissions-connect/permissions-connect.container.js
@@ -43,13 +43,20 @@ const mapStateToProps = (state, ownProps) => {
   const nativeCurrency = getNativeCurrency(state)
 
   const domainMetadata = getDomainMetadata(state)
-  const targetDomainMetadata = origin
-    ? domainMetadata[origin] || {
-      origin,
-      name: (new URL(origin)).hostname,
-      icon: null,
+
+  let targetDomainMetadata = null
+  if (origin) {
+    if (domainMetadata[origin]) {
+      targetDomainMetadata = { ...domainMetadata[origin], origin }
+    } else {
+      const targetUrl = new URL(origin)
+      targetDomainMetadata = {
+        host: targetUrl.host,
+        name: targetUrl.hostname,
+        origin,
+      }
     }
-    : null
+  }
 
   const accountsWithLabels = getAccountsWithLabels(state)
 
diff --git a/ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js b/ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js
index 3795f348c..ac39de104 100644
--- a/ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js
+++ b/ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js
@@ -33,5 +33,11 @@ export default function PermissionsRedirect ({ domainMetadata }) {
 }
 
 PermissionsRedirect.propTypes = {
-  domainMetadata: PropTypes.object.isRequired,
+  domainMetadata: PropTypes.shape({
+    extensionId: PropTypes.string,
+    icon: PropTypes.string,
+    host: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    origin: PropTypes.string.isRequired,
+  }),
 }