add masquerade link to student context cards

closes FALCOR-51

Test plan:
  When viewing student context cards, users that have masquerade
  permissions should see a link to masquerade on the context card

Change-Id: Id052bad1f218b46af14c8688a03add6050765009
Reviewed-on: https://gerrit.instructure.com/98960
Reviewed-by: John Corrigan <jcorrigan@instructure.com>
Tested-by: Jenkins
QA-Review: Dan Sasaki
Product-Review: Christi Wruck

app/jsx/context_cards/Avatar.jsx

@@ -1,22 +1,39 @@
 define([
   'react',
-  'instructure-ui/Avatar'
-], (React, { default: InstUIAvatar }) => {
+  'instructure-ui/Avatar',
+  'instructure-ui/Typography',
+], (React, { default: InstUIAvatar }, { default: Typography }) => {
 
   class Avatar extends React.Component {
     static propTypes = {
-      user: React.PropTypes.object.isRequired
+      user: React.PropTypes.object.isRequired,
+      courseId: React.PropTypes.oneOfType([
+        React.PropTypes.string.isRequired,
+        React.PropTypes.number.isRequired
+      ]),
+      canMasquerade: React.PropTypes.bool.isRequired,
     }
 
     render () {
-      if (Object.keys(this.props.user).includes('avatar_url')) {
+      const {user, courseId, canMasquerade} = this.props
+
+      if (Object.keys(user).includes('avatar_url')) {
         return (
           <div className="StudentContextTray__Avatar">
             <InstUIAvatar
               size="x-large"
-              userName={this.props.user.name}
-              userImgUrl={this.props.user.avatar_url}
+              userName={user.name}
+              userImgUrl={user.avatar_url}
             />
+            {
+              canMasquerade ? (
+                <Typography size="x-small" weight="bold" tag="div">
+                  <a href={`/courses/${courseId}?become_user_id=${user.id}`}>Masquerade</a>
+                </Typography>
+              ) : (
+                null
+              )
+            }
           </div>
         )
       } else { return null }

app/jsx/context_cards/StudentCardStore.jsx

@@ -13,7 +13,8 @@ define(['axios'], (axios) => {
           manage_grades: false,
           send_messages: false,
           view_all_grades: false,
-          view_analytics: false
+          view_analytics: false,
+          become_user: false,
         }
       };
     }

app/jsx/context_cards/StudentContextTray.jsx

@@ -206,7 +206,10 @@ define([
               ) : (
                 <div>
                   <header className="StudentContextTray-Header">
-                    <Avatar user={this.state.user} />
+                    <Avatar user={this.state.user}
+                      canMasquerade={this.state.permissions.become_user}
+                      courseId={this.props.courseId}
+                    />
 
                     <div className="StudentContextTray-Header__Layout">
                       <div className="StudentContextTray-Header__Content">