Change inbox avatar to use inst-ui

Test Plan: -inspect avatar on inbox message is rendered from inst-ui fixes VICE-17 flag=none Change-Id: I92941e079b63a3a60468e1e894059c20e15b1251 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/241435 Tested-by: Service Cloud Jenkins <[email protected]> Reviewed-by: Jeffrey Johnson <[email protected]> QA-Review: Jeffrey Johnson <[email protected]> Product-Review: Jeffrey Johnson <[email protected]>
ralacas · Jul 1, 2020 · 0469b02 · 0469b02
1 parent 2e6e6bc
commit 0469b02
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/app/coffeescripts/views/conversations/MessageDetailView.js b/app/coffeescripts/views/conversations/MessageDetailView.js
@@ -23,6 +23,10 @@ import Message from '../../models/Message'
 import MessageItemView from './MessageItemView'
 import template from 'jst/conversations/messageDetail'
 import noMessage from 'jst/conversations/noMessage'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {Avatar} from '@instructure/ui-avatar'
+import {nanoid} from 'nanoid'
 
 export default class MessageDetailView extends View {
   static initClass() {
@@ -59,6 +63,7 @@ export default class MessageDetailView extends View {
           : this.messages.archive
       $template = $(template(context))
       this.model.messageCollection.each(message => {
+        message.attributes.avatarContainerId = `message-item-avatar-wrapper-${nanoid()}`
         if (!message.get('conversation_id')) {
           message.set('conversation_id', context.id)
         }
@@ -67,6 +72,10 @@ export default class MessageDetailView extends View {
         }
         const childView = new MessageItemView({model: message}).render()
         $template.find('.message-content').append(childView.$el)
+        ReactDOM.render(
+          <Avatar name={ENV.current_user.display_name} src={ENV.current_user.avatar_image_url} />,
+          $template.find(`#${message.attributes.avatarContainerId}`)[0]
+        )
         this.listenTo(childView, 'reply', () =>
           this.trigger('reply', message, `.message-item-view[data-id=${message.id}] .reply-btn`)
         )

diff --git a/app/views/jst/conversations/messageItem.handlebars b/app/views/jst/conversations/messageItem.handlebars
@@ -5,7 +5,7 @@
 <div class="row-fluid message-info">
   <div class="span8 user-info">
 {{/if}}
-    {{>avatar author}}
+    <div id={{avatarContainerId}} class="fs-exclude avatar"></div>
     <div class="message-author-and-participants">
       <b class="username">{{author.name}}{{#if author.pronouns}} <i>({{author.pronouns}})</i> {{/if}}</b>{{#if participants.length}},{{/if}}
 

diff --git a/package.json b/package.json
@@ -125,6 +125,7 @@
     "md5": "^2.2.1",
     "mediaelement": "https://github.com/instructure/mediaelement.git#master",
     "moment": "^2.10.6",
+    "nanoid": "^3.1.10",
     "newless": "^0.3.0",
     "normalize-scroll-left": "^0.2",
     "page": "^1.11",

diff --git a/yarn.lock b/yarn.lock
@@ -15081,6 +15081,11 @@ nanoid@^2.1.0, nanoid@^2.1.3:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
   integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
 
+nanoid@^3.1.10:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.10.tgz#69a8a52b77892de0d11cede96bc9762852145bc4"
+  integrity sha512-iZFMXKeXWkxzlfmMfM91gw7YhN2sdJtixY+eZh9V6QWJWTOiurhpKhBMgr82pfzgSqglQgqYSCowEYsz8D++6w==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"