getredash/redash#2375 Show gray icon for disabled users

client/app/assets/images/avatar.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="630" height="630" viewBox="0 0 630 630" version="1.1">
+  <g transform="translate(-56.611934,-184.36221)">
+    <path fill="#a7a7a7" d="m 58.467329,810.92426 c 0,-10.37237 6.53079,-28.55017 15.29935,-42.58418 9.70782,-15.53729 28.965401,-35.11964 51.655121,-52.52627 7.21357,-5.53395 6.57284,-5.08564 22.23877,-15.56023 20.2393,-13.53245 55.34935,-32.58361 79.80676,-43.30416 19.72995,-8.64834 57.2268,-21.58721 62.55974,-21.58721 0.76988,0 3.09659,-0.67892 5.17046,-1.50872 7.3197,-2.92876 12.5713,-16.1286 13.89202,-34.91737 l 0.64689,-9.20257 -8.38455,-10.04931 c -7.66622,-9.18836 -11.59308,-14.62897 -20.80286,-28.82203 -9.85543,-15.1881 -22.91997,-47.26171 -24.69185,-60.61889 -0.56037,-4.22429 -1.0976,-5.21546 -3.27999,-6.05157 -10.15146,-3.88918 -15.7489,-9.08881 -20.96084,-19.47118 -6.6162,-13.17971 -8.62087,-36.5618 -4.2711,-49.81738 2.29242,-6.98599 4.4873,-10.89589 8.72413,-15.54098 2.11744,-2.32146 2.22102,-2.9999 1.45041,-9.5 -2.58899,-21.83821 -3.34954,-41.36055 -2.18394,-56.05862 3.87891,-48.91259 20.17112,-81.47548 50.89033,-101.71339 16.68129,-10.98968 34.4196,-16.74492 62.2113,-20.1846 32.20647,-3.98609 68.82401,0.75436 93.8318,12.14731 14.67849,6.68717 28.98155,17.91433 38.99893,30.61215 19.81832,25.12131 29.57328,66.42856 26.24603,111.13853 -0.69821,9.38224 -1.63714,20.17477 -2.08651,23.9834 -0.81425,6.90129 -0.80559,6.93815 2.55469,10.86388 7.03777,8.22205 10.02312,18.44949 9.84447,33.72599 -0.27308,23.35114 -10.37432,43.49379 -24.44339,48.74202 l -5.34465,1.99373 -1.18738,6.3748 c -4.9831,26.75313 -22.71761,61.14702 -45.76986,88.76506 l -7.88572,9.44759 0.64805,9.21931 c 1.18682,16.88381 6.49256,31.6953 12.30203,34.34227 1.23595,0.56314 6.42637,1.99946 11.53427,3.19182 35.45428,8.27628 97.76078,37.16683 137.59386,63.80012 15.66594,10.47459 15.02521,10.02628 22.23877,15.56023 22.46534,17.23449 41.43241,36.56563 52.11597,53.1163 7.31528,11.33263 13.49882,27.98884 14.54335,39.17447 l 0.58435,6.25763 -313.14461,0 -313.144601,0 0,-3.43795 z"/>
+  </g>
+</svg>

client/app/components/app-header/app-header.html

@@ -57,7 +57,7 @@
         <!--</li>-->
         <li class="dropdown" uib-dropdown>
           <a href="#" class="dropdown-toggle dropdown--profile" uib-dropdown-toggle>
-            <img ng-src="{{$ctrl.currentUser.profile_image_url}}" class="profile__image--navbar" width="20"/>
+            <img ng-src="{{ $ctrl.currentUser | profileImage }}" class="profile__image--navbar" width="20"/>
             <span class="dropdown--profile__username" ng-bind="$ctrl.currentUser.name"></span> <span
             class="caret caret--nav"></span></a>
           <ul class="dropdown-menu dropdown-menu--profile">

client/app/components/permissions-editor/permissions-editor.html

@@ -11,7 +11,8 @@
                          refresh-delay="0"
                          ui-disable-choice="user.alreadyGrantee">
         <div>
-          <img ng-src="{{user.profile_image_url}}" height="24px">&nbsp;{{user.name}}
+          <img ng-src="{{ user | profileImage }}" class="profile__image" height="24px">&nbsp;<span
+            ng-class="{'text-muted': user.is_disabled}">{{user.name}}</span>
           <small ng-if="user.alreadyGrantee">(already has permission)</small>
         </div>
        </ui-select-choices>
@@ -28,8 +29,8 @@
         </thead>
         <tbody>
         <tr ng-repeat="grantee in $ctrl.grantees">
-          <td width="50px"><img ng-src="{{grantee.profile_image_url}}" height="40px"/></td>
-          <td>{{grantee.name}} </td>
+          <td width="50px"><img ng-src="{{ grantee | profileImage }}" class="profile__image" height="40px"/></td>
+          <td ng-class="{'text-muted': grantee.is_disabled}">{{grantee.name}}</td>
           <td>{{grantee.access_type}}</td>
           <td><button class="pull-right btn btn-sm btn-danger" ng-click="$ctrl.removeGrantee(grantee)">Remove</button></td>
         </tr>

client/app/config/index.js

@@ -25,6 +25,7 @@ import * as filters from '@/filters';
 import registerDirectives from '@/directives';
 import markdownFilter from '@/filters/markdown';
 import dateTimeFilter from '@/filters/datetime';
+import profileImageFilter from '@/filters/profile-image';
 import dashboardGridOptions from './dashboard-grid-options';
 
 const logger = debug('redash:config');
@@ -127,6 +128,7 @@ registerServices();
 registerFilters();
 markdownFilter(ngModule);
 dateTimeFilter(ngModule);
+profileImageFilter(ngModule);
 registerComponents();
 registerPages();
 registerVisualizations(ngModule);

client/app/filters/profile-image.js

@@ -0,0 +1,9 @@
+import defaultProfileImageUrl from '@/assets/images/avatar.svg';
+
+function getUserProfileImageUrl(user) {
+  return user.is_disabled ? defaultProfileImageUrl : user.profile_image_url;
+}
+
+export default function init(ngModule) {
+  ngModule.filter('profileImage', () => getUserProfileImageUrl);
+}

client/app/pages/groups/show.html

@@ -16,8 +16,9 @@
                            refresh="findUser($select.search)"
                            refresh-delay="0"
                            ui-disable-choice="user.alreadyMember">
-          <div>
-            <img ng-src="{{user.profile_image_url}}" height="24px">&nbsp;{{user.name}}
+          <div class="d-flex align-items-center">
+            <img ng-src="{{ user | profileImage }}" class="profile__image" height="24px">&nbsp;<span
+              ng-class="{'text-muted': user.is_disabled}">{{user.name}}</span>
             <small ng-if="user.alreadyMember">(already member in this group)</small>
           </div>
         </ui-select-choices>
@@ -29,8 +30,13 @@
       <table class="table table-condensed table-hover" ng-show="members">
         <tbody>
         <tr ng-repeat="member in members">
-          <td width="50px"><img ng-src="{{member.profile_image_url}}" height="40px"/></td>
-          <td>{{member.name}} <button class="pull-right btn btn-sm btn-danger" ng-click="removeMember(member)" ng-if="currentUser.isAdmin && (group.type != 'builtin' || currentUser.id != member.id)">Remove</button></td>
+          <td width="50px"><img ng-src="{{ member | profileImage }}" class="profile__image" height="40px"/></td>
+          <td ng-class="{'text-muted': member.is_disabled}">{{member.name}}
+            <button class="pull-right btn btn-sm btn-danger"
+              ng-click="removeMember(member)"
+              ng-if="currentUser.isAdmin && (group.type != 'builtin' || currentUser.id != member.id)"
+            >Remove</button>
+          </td>
         </tr>
         </tbody>
       </table>

client/app/pages/queries-list/queries-list.html

@@ -26,7 +26,8 @@
               <span class="label label-default" ng-if="query.is_draft">Unpublished</span>
             </td>
             <td>
-              <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb" /> {{query.user.name}}
+              <img ng-src="{{ query.user | profileImage }}" class="profile__image_thumb" />
+              <span ng-class="{'text-muted': query.user.is_disabled}">{{query.user.name}}</span>
             </td>
             <td>{{query.created_at | dateTime}}</td>
             <td>{{query.runtime | durationHumanize}}</td>

client/app/pages/queries/queries-search-results-page.html

@@ -27,8 +27,9 @@
           <tr ng-repeat="query in $ctrl.paginator.getPageRows()">
             <td><a href="queries/{{query.id}}">{{query.name}}</a> <span class="label label-default" ng-if="query.is_draft">Unpublished</span></td>
             <td>
-              <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb"/>
-              {{query.user.name}}</td>
+              <img ng-src="{{ query.user | profileImage }}" class="profile__image_thumb"/>
+              <span ng-class="{'text-muted': query.user.is_disabled}">{{query.user.name}}</span>
+            </td>
             <td>{{query.created_at | dateTime}}</td>
             <td>{{query.schedule | scheduleHumanize}}</td>
           </tr>

client/app/pages/queries/query.html

@@ -90,7 +90,8 @@
         <table>
           <tr>
             <td>
-              <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb"/> <strong class="meta__name">{{query.user.name}}</strong>
+              <img ng-src="{{ query.user | profileImage }}" class="profile__image_thumb"/>
+              <strong class="meta__name" ng-class="{'text-muted': query.user.is_disabled}">{{query.user.name}}</strong>
             </td>
             <td class="text-right">
               created <strong><rd-time-ago value="query.created_at"></rd-time-ago></strong>
@@ -98,7 +99,9 @@
           </tr>
           <tr>
             <td>
-              <img ng-src="{{query.last_modified_by.profile_image_url}}" class="profile__image_thumb"/> <strong class="meta__name">{{query.last_modified_by.name}}</strong>
+              <img ng-src="{{ query.last_modified_by | profileImage }}" class="profile__image_thumb"/>
+              <strong class="meta__name"
+                ng-class="{'text-muted': query.last_modified_by.is_disabled}">{{query.last_modified_by.name}}</strong>
             </td>
             <td class="text-right">
               updated <strong><rd-time-ago value="query.updated_at"></rd-time-ago></strong>
@@ -168,11 +171,13 @@
           <div class="row query-metadata__mobile">
             <div class="col-xs-4 text-left">
               <span class="m-r-5">Created by</span>
-              <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb"/> <strong><rd-time-ago value="query.created_at"></rd-time-ago></strong>
+              <img ng-src="{{ query.user | profileImage }}" class="profile__image_thumb">
+              <strong><rd-time-ago value="query.created_at"></rd-time-ago></strong>
             </div>
             <div class="col-xs-4 text-center">
               <span class="m-r-5">Updated by</span>
-              <img ng-src="{{query.last_modified_by.profile_image_url}}" class="profile__image_thumb"/> <strong><rd-time-ago value="query.updated_at"></rd-time-ago></strong>
+              <img ng-src="{{ query.last_modified_by | profileImage }}" class="profile__image_thumb">
+              <strong><rd-time-ago value="query.updated_at"></rd-time-ago></strong>
             </div>
             <div class="col-xs-4 text-right">
               <span class="query-metadata__property"></span> Refresh Schedule</span>

client/app/pages/query-snippets/edit.html

@@ -22,9 +22,9 @@
         <button class="btn btn-danger" ng-if="$ctrl.snippet.id" ng-click="$ctrl.delete()">Delete</button>
       </div>
       <small ng-if="$ctrl.snippet.user">
-        Created by: 
-        <img ng-src="{{$ctrl.snippet.user.profile_image_url}}" class="profile__image_thumb"/>
-        {{$ctrl.snippet.user.name}}
+        Created by:
+        <img ng-src="{{ $ctrl.snippet.user | profileImage }}" class="profile__image_thumb"/>
+        <span ng-class="{'text-muted': $ctrl.snippet.user.is_disabled}">{{$ctrl.snippet.user.name}}</span>
       </small>
     </form>
   </div>

client/app/pages/query-snippets/list.html

@@ -16,22 +16,22 @@
               </tr>
             </thead>
             <tbody>
-              <tr ng-repeat="row in $ctrl.snippets.getPageRows()">
+              <tr ng-repeat="snippet in $ctrl.snippets.getPageRows()">
                 <td>
-                  <a href="query_snippets/{{row.id}}">{{row.trigger}}</a>
+                  <a href="query_snippets/{{snippet.id}}">{{snippet.trigger}}</a>
                 </td>
                 <td>
-                  {{row.description}}
+                  {{snippet.description}}
                 </td>
                 <td>
-                  {{row.snippet}}
+                  {{snippet.snippet}}
                 </td>
                 <td>
-                  <img ng-src="{{row.user.profile_image_url}}" class="profile__image_thumb"/>
-                  {{row.user.name}}
+                  <img ng-src="{{ snippet.user | profileImage }}" class="profile__image_thumb"/>
+                  <span ng-class="{'text-muted': snippet.user.is_disabled}">{{snippet.user.name}}</span>
                 </td>
                 <td>
-                  <span am-time-ago="row.created_at"></span>
+                  <span am-time-ago="snippet.created_at"></span>
                 </td>
               </tr>
             </tbody>

client/app/pages/users/list.html

@@ -27,8 +27,8 @@
         <tbody>
           <tr ng-repeat="user in $ctrl.users.getPageRows()">
             <td>
-              <img ng-src="{{ user.profile_image_url }}" height="32px" class="profile__image--settings"/>
-              <a href="users/{{ user.id }}">{{ user.name }}</a>
+              <img ng-src="{{ user | profileImage }}" height="32px" class="profile__image--settings"/>
+              <a href="users/{{ user.id }}" ng-class="{'text-muted': user.is_disabled}">{{ user.name }}</a>
             </td>
             <td>
               <span am-time-ago="user.created_at"></span>

client/app/pages/users/show.html

@@ -5,7 +5,7 @@
     <div class="row">
       <div class="col-md-4 col-md-offset-4 profile__container">
 
-        <img ng-src="{{user.profile_image_url}}" class="profile__image"/>
+        <img ng-src="{{ user | profileImage }}" class="profile__image" width="40">
 
         <h3 class="profile__h3">{{user.name}}</h3>