SONAR-7238 Display external identity information on user

4 files changed, 38 insertions, 6 deletions

diff --git a/server/sonar-web/src/main/js/apps/users/app.js b/server/sonar-web/src/main/js/apps/users/app.js
index f8d25051478..fcbe54cafb8 100644
--- a/server/sonar-web/src/main/js/apps/users/app.js
+++ b/server/sonar-web/src/main/js/apps/users/app.js
@@ -18,15 +18,18 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import Marionette from 'backbone.marionette';
+
 import Layout from './layout';
 import Users from './users';
 import HeaderView from './header-view';
 import SearchView from './search-view';
 import ListView from './list-view';
 import ListFooterView from './list-footer-view';
+import { getIdentityProviders } from '../../api/users';
 
 const App = new Marionette.Application();
-const init = function () {
+
+const init = function (providers) {
   const options = window.sonarqube;
 
   // Layout
@@ -45,7 +48,7 @@ const init = function () {
   this.layout.searchRegion.show(this.searchView);
 
   // List View
-  this.listView = new ListView({ collection: this.users });
+  this.listView = new ListView({ collection: this.users, providers });
   this.layout.listRegion.show(this.listView);
 
   // List Footer View
@@ -57,7 +60,7 @@ const init = function () {
 };
 
 App.on('start', function () {
-  init.call(App);
+  getIdentityProviders().then(r => init.call(App, r.identityProviders));
 });
 
 window.sonarqube.appStarted.then(options => App.start(options));
diff --git a/server/sonar-web/src/main/js/apps/users/list-item-view.js b/server/sonar-web/src/main/js/apps/users/list-item-view.js
index 6e06fd37557..e5b45bdaba7 100644
--- a/server/sonar-web/src/main/js/apps/users/list-item-view.js
+++ b/server/sonar-web/src/main/js/apps/users/list-item-view.js
@@ -128,9 +128,16 @@ export default Marionette.ItemView.extend({
   serializeData () {
     const scmAccounts = this.model.get('scmAccounts');
     const scmAccountsLimit = scmAccounts.length > this.scmLimit ? this.scmLimit - 1 : this.scmLimit;
+
     const groups = this.model.get('groups');
     const groupsLimit = groups.length > this.groupsLimit ? this.groupsLimit - 1 : this.groupsLimit;
+
+    const externalProvider = this.model.get('externalProvider');
+    const identityProvider = this.model.get('local') ? null :
+        this.options.providers.find(provider => externalProvider === provider.key);
+
     return _.extend(Marionette.ItemView.prototype.serializeData.apply(this, arguments), {
+      identityProvider,
       firstScmAccounts: _.first(scmAccounts, scmAccountsLimit),
       moreScmAccountsCount: scmAccounts.length - scmAccountsLimit,
       firstGroups: _.first(groups, groupsLimit),
diff --git a/server/sonar-web/src/main/js/apps/users/list-view.js b/server/sonar-web/src/main/js/apps/users/list-view.js
index 90f212af173..3bd5fd9060b 100644
--- a/server/sonar-web/src/main/js/apps/users/list-view.js
+++ b/server/sonar-web/src/main/js/apps/users/list-view.js
@@ -33,6 +33,10 @@ export default Marionette.CompositeView.extend({
     'sync': 'hideLoading'
   },
 
+  childViewOptions () {
+    return { providers: this.options.providers };
+  },
+
   showLoading () {
     this.$el.addClass('new-loading');
   },
diff --git a/server/sonar-web/src/main/js/apps/users/templates/users-list-item.hbs b/server/sonar-web/src/main/js/apps/users/templates/users-list-item.hbs
index fb5987fbbd8..d59d649d1c8 100644
--- a/server/sonar-web/src/main/js/apps/users/templates/users-list-item.hbs
+++ b/server/sonar-web/src/main/js/apps/users/templates/users-list-item.hbs
@@ -9,7 +9,23 @@
     <strong class="js-user-name">{{name}}</strong>
     <span class="js-user-login note little-spacer-left">{{login}}</span>
   </div>
-  <div class="js-user-email little-spacer-top">{{email}}</div>
+
+  {{#if email}}
+    <div class="js-user-email little-spacer-top">{{email}}</div>
+  {{/if}}
+
+  {{#unless local}}
+    <div class="js-user-identity-provider little-spacer-top">
+      {{#if identityProvider}}
+        <div class="identity-provider" style="background-color: {{identityProvider.backgroundColor}}">
+          <img src="{{link identityProvider.iconPath}}" width="14" height="14"/>
+          {{externalIdentity}}
+        </div>
+      {{else}}
+        {{externalProvider}}: {{externalIdentity}}
+      {{/if}}
+    </div>
+  {{/unless}}
 </td>
 
 <td>
@@ -46,7 +62,9 @@
 
 <td class="thin nowrap text-right">
   <a class="js-user-update icon-edit little-spacer-right" title="Update Details" data-toggle="tooltip" href="#"></a>
-  <a class="js-user-change-password icon-lock little-spacer-right" title="Change Password" data-toggle="tooltip"
-     href="#"></a>
+  {{#if local}}
+    <a class="js-user-change-password icon-lock little-spacer-right" title="Change Password" data-toggle="tooltip"
+       href="#"></a>
+  {{/if}}
   <a class="js-user-deactivate icon-delete" title="Deactivate" data-toggle="tooltip" href="#"></a>
 </td>