Link student context tray avatar to student's page

closes FALCOR-96

test plan:
  - go to a course with students page
  - click on a student's name in the table
  - click on the student's avatar in the context tray that just slid out
  > expected: navigates to the student's page in the course at
    courses/<courseid>/users/<userid>

Change-Id: I222850cecf6b6528d44ea8dcc53e468b5cdb1f22
Reviewed-on: https://gerrit.instructure.com/104589
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: Dan Sasaki
Product-Review: Ed Schiebel <eschiebel@instructure.com>

app/jsx/context_cards/Avatar.jsx

@@ -2,7 +2,7 @@ define([
   'i18n!student_context_tray',
   'react',
   'instructure-ui',
-], (I18n, React, { Avatar: InstUIAvatar, Typography }) => {
+], (I18n, React, { Avatar: InstUIAvatar, Typography, Link }) => {
   class Avatar extends React.Component {
     static propTypes = {
       user: React.PropTypes.shape({
@@ -22,13 +22,16 @@ define([
       const {user, courseId, canMasquerade} = this.props
 
       if (Object.keys(user).includes('avatar_url')) {
+        const name = user.short_name || user.name || 'user';
         return (
           <div className="StudentContextTray__Avatar">
-            <InstUIAvatar
-              size="x-large"
-              userName={user.name}
-              userImgUrl={user.avatar_url}
-            />
+            <Link href={`/courses/${this.props.courseId}/users/${user.id}`} aria-label={I18n.t('Go to %{name}\'s profile', {name})}>
+              <InstUIAvatar
+                size="x-large"
+                userName={user.name}
+                userImgUrl={user.avatar_url}
+              />
+            </Link>
             {
               canMasquerade ? (
                 <Typography size="x-small" weight="bold" as="div">

app/jsx/context_cards/StudentContextTray.jsx

@@ -223,7 +223,7 @@ define([
                 <div>
                   <header className="StudentContextTray-Header">
                     <Avatar user={this.state.user}
-                      canMasquerade={this.state.permissions.become_user}
+                      canMasquerade={!!this.state.permissions.become_user}
                       courseId={this.props.courseId}
                     />
 
@@ -235,6 +235,7 @@ define([
                               <span className="StudentContextTray-Header__NameLink">
                                 <Link
                                   href={`/courses/${this.props.courseId}/users/${this.props.studentId}`}
+                                  aria-label={I18n.t('Go to %{name}\'s profile', {name: this.state.user.short_name})}
                                 >
                                   {this.state.user.short_name}
                                 </Link>

spec/javascripts/jsx/context_cards/AvatarSpec.jsx

@@ -5,7 +5,6 @@ define([
   'jsx/context_cards/Avatar',
   'instructure-ui'
 ], (React, ReactDOM, TestUtils, Avatar, { Avatar: InstUIAvatar }) => {
-
   QUnit.module('StudentContextTray/Avatar', (hooks) => {
     let subject
 
@@ -22,11 +21,11 @@ define([
     test('renders no avatars by default', () => {
       subject = TestUtils.renderIntoDocument(
         <Avatar
-          user={{}}
+          user={{}} courseId="1" canMasquerade
         />
       )
 
-      throws(() => {TestUtils.findRenderedComponentWithType(subject, InstUIAvatar) })
+      throws(() => { TestUtils.findRenderedComponentWithType(subject, InstUIAvatar) })
     })
 
     test('renders avatar with user object when provided', () => {
@@ -34,17 +33,21 @@ define([
       const avatarUrl = 'http://wooper.com/avatar.png'
       const user = {
         name: userName,
-        avatar_url: avatarUrl
+        avatar_url: avatarUrl,
+        id: '17'
       }
       subject = TestUtils.renderIntoDocument(
         <Avatar
-          user={{...user}}
+          user={{...user}} courseId="1" canMasquerade
         />
       )
 
       const avatar = TestUtils.findRenderedComponentWithType(subject, InstUIAvatar)
       equal(avatar.props.userName, user.name)
       equal(avatar.props.userImgUrl, user.avatar_url)
+      const componentNode = ReactDOM.findDOMNode(subject)
+      const link = componentNode.querySelector('a')
+      equal(link.getAttribute('href'), '/courses/1/users/17')
     })
   })
 })