Change avatar on people page to use inst-ui avatar

Test Plan: -verify correct avatar is being shown -verify it is rendering via inst-ui flag=none fixes VICE-16 Change-Id: Ibc43d2a59808391ca6d1b6da482093839aa72c58 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/241806 Reviewed-by: Jeffrey Johnson <[email protected]> QA-Review: Jeffrey Johnson <[email protected]> Product-Review: Jeffrey Johnson <[email protected]> Tested-by: Service Cloud Jenkins <[email protected]>
ralacas · Jul 7, 2020 · d686113 · d686113
1 parent 36b4550
commit d686113
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/app/coffeescripts/views/courses/roster/RosterUserView.js b/app/coffeescripts/views/courses/roster/RosterUserView.js
@@ -24,6 +24,10 @@ import EditSectionsView from './EditSectionsView'
 import EditRolesView from './EditRolesView'
 import InvitationsView from './InvitationsView'
 import LinkToStudentsView from './LinkToStudentsView'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {Avatar} from '@instructure/ui-avatar'
+import {nanoid} from 'nanoid'
 import '../../../jquery.kylemenu'
 import 'jquery.disableWhileLoading'
 
@@ -52,6 +56,7 @@ export default class RosterUserView extends Backbone.View {
   }
 
   initialize(options) {
+    options.model.attributes.avatarId = `user-avatar-people-page-${nanoid()}`
     super.initialize(...arguments)
     // assumes this model only has enrollments for 1 role
     this.model.currentRole = __guard__(this.model.get('enrollments')[0], x => x.role)
@@ -292,6 +297,21 @@ export default class RosterUserView extends Backbone.View {
   blur() {
     return this.$el.removeClass('al-hover-container-active table-hover-row')
   }
+
+  afterRender() {
+    ReactDOM.render(
+      <a href={`users/${this.model.id}`}>
+        <Avatar
+          name={this.model.attributes.name}
+          src={this.model.attributes.avatar_url}
+          size="small"
+          alt={this.model.attributes.name}
+        />
+        <span className="screenreader-only">{this.model.attributes.name}</span>
+      </a>,
+      this.$el.find(`#${this.model.attributes.avatarId}`)[0]
+    )
+  }
 }
 RosterUserView.initClass()
 

diff --git a/app/views/jst/courses/roster/rosterUser.handlebars b/app/views/jst/courses/roster/rosterUser.handlebars
@@ -1,5 +1,5 @@
 <td class="center">
-  {{>avatar}}
+  <div id={{avatarId}}></div>
 </td>
 <td>
   <a href="{{html_url}}"