SUP-2150, Clicking on external account cards (profile) does nothing

-- Added click listener to open the profile URL, if available for external accounts cards (not for external web links)

Author: vikasrohit

app/directives/external-account/external-link-data.directive.jade

@@ -1,5 +1,5 @@
 .external-link-list
-  div.external-link-tile(ng-repeat="account in linkedAccountsData", ng-class="{'external-link-tile--editable' : editable}")
+  div.external-link-tile(ng-repeat="account in linkedAccountsData", ng-class="{'external-link-tile--editable' : editable, 'external-link-tile--pending' : account.status === 'PENDING' || account.data.status === 'PENDING'}", ng-click="openLink(account)")
     .top
       .ext-link-tile_edit-header(ng-show="editable && account.provider === 'weblink'")
         .ext-link-tile_edit-header_delete(ng-click="confirmDeletion(account)", ng-class="{'ext-link-tile_edit-header_delete--disabled': account.deletingAccount || account.status === 'PENDING'}")

app/directives/external-account/external-links-data.directive.js

@@ -18,12 +18,24 @@
         editable: '=',
         userHandle: '@'
       },
-      controller: ['$log', '$scope', 'ExternalWebLinksService', 'toaster', 'ngDialog',
-        function($log, $scope, ExternalWebLinksService, toaster, ngDialog) {
+      controller: ['$log', '$scope', '$window', '$filter', 'ExternalWebLinksService', 'toaster', 'ngDialog',
+        function($log, $scope, $window, $filter, ExternalWebLinksService, toaster, ngDialog) {
 
           $log = $log.getInstance("ExternalLinksDataCtrl");
           $scope.deletionDialog = null;
 
+          $scope.openLink = function(account) {
+            var url = null;
+            if (account) {
+              if (account.data && account.data.profileURL && account.data.status !== 'PENDING') {
+                url = account.data.profileURL;
+              }
+            }
+            if (url) {
+              $window.open($filter('urlProtocol')(url), '_blank');
+            }
+          }
+
           $scope.confirmDeletion = function(account) {
             $scope.deletionDialog = ngDialog.open({
               className: 'ngdialog-theme-default tc-dialog',

assets/css/directives/external-link-data.scss

@@ -313,5 +313,11 @@ external-accounts {
     .external-link-tile--editable {
       // height: 285px;
     }
+
+    .external-link-tile--pending {
+      &:hover {
+        cursor: default;
+      }
+    }
   }
 }