From f1cd0193857b89c9576a7b87b02f2e967c953bad Mon Sep 17 00:00:00 2001
From: remo5000 <vigneshshankar@gmail.com>
Date: Thu, 23 Aug 2018 01:48:11 +0800
Subject: [PATCH 1/6] Add maxGrade and xp to state

---
 src/reducers/states.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/reducers/states.ts b/src/reducers/states.ts
index 9a0c85949c..2609b5f00e 100644
--- a/src/reducers/states.ts
+++ b/src/reducers/states.ts
@@ -78,10 +78,13 @@ export interface ISessionState {
   readonly gradingOverviews?: GradingOverview[]
   readonly gradings: Map<number, Grading>
   readonly historyHelper: HistoryHelper
+  readonly maxGrade: number
+  readonly maxXp: number
   readonly refreshToken?: string
   readonly role?: Role
   readonly story?: Story
   readonly name?: string
+  readonly xp: number
 }
 
 type ReplHistory = {
@@ -247,8 +250,12 @@ export const defaultSession: ISessionState = {
     lastAcademyLocations: [null, null],
     lastGeneralLocations: [null, null]
   },
+  maxGrade: 0,
+  maxXp: 0,
   refreshToken: undefined,
-  name: undefined
+  name: undefined,
+  xp: 0
+
 }
 
 export const defaultState: IState = {

From 6fc8828a41a05253ce72934d8da7144d28c23a52 Mon Sep 17 00:00:00 2001
From: remo5000 <vigneshshankar@gmail.com>
Date: Thu, 23 Aug 2018 01:48:38 +0800
Subject: [PATCH 2/6] Pass props to Profile from State

---
 src/containers/ProfileContainer.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/containers/ProfileContainer.ts b/src/containers/ProfileContainer.ts
index a18f4ba99e..c5298057e7 100644
--- a/src/containers/ProfileContainer.ts
+++ b/src/containers/ProfileContainer.ts
@@ -3,14 +3,13 @@ import { connect, MapStateToProps } from 'react-redux'
 import Profile, { StateProps } from '../components/dropdown/Profile'
 import { IState } from '../reducers/states'
 
-// TODO: connect to actual state once backend implements these features
 const mapStateToProps: MapStateToProps<StateProps, {}, IState> = state => ({
   grade: state.session.grade,
-  maxGrade: undefined,
-  maxXp: undefined,
+  maxGrade: state.session.maxGrade,
+  maxXp: state.session.maxXp,
   name: state.session.name,
   role: state.session.role,
-  xp: undefined
+  xp: state.session.xp
 })
 
 export default connect(mapStateToProps)(Profile)

From 8f4a99c0adc59bc305284b137b5e068c12e33d82 Mon Sep 17 00:00:00 2001
From: remo5000 <vigneshshankar@gmail.com>
Date: Thu, 23 Aug 2018 01:49:16 +0800
Subject: [PATCH 3/6] Remove IS_XP_IMPLEMENTED

---
 src/utils/constants.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index da3d9ed628..85c264beea 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -2,11 +2,6 @@ import * as dotenv from 'dotenv'
 
 dotenv.config()
 
-/* Remove this variable entirely when implemented. DO NOT just set to true;
- * also check that the CSS looks acceptable, since there will be className
- * changes. */
-export const IS_XP_IMPLEMENTED = false
-
 export const IVLE_KEY = process.env.REACT_APP_IVLE_KEY
 export const VERSION = process.env.REACT_APP_VERSION
 export const BACKEND_URL = process.env.REACT_APP_BACKEND_URL

From a16eaa9411ec9c89d5b10c28d920d8f7454b263c Mon Sep 17 00:00:00 2001
From: remo5000 <vigneshshankar@gmail.com>
Date: Thu, 23 Aug 2018 01:49:31 +0800
Subject: [PATCH 4/6] Unhide betcha

---
 src/components/assessment/index.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/assessment/index.tsx b/src/components/assessment/index.tsx
index 621b61f0af..b1973ec5ab 100644
--- a/src/components/assessment/index.tsx
+++ b/src/components/assessment/index.tsx
@@ -23,7 +23,6 @@ import { NavLink } from 'react-router-dom'
 
 import defaultCoverImage from '../../assets/default_cover_image.jpg'
 import AssessmentWorkspaceContainer from '../../containers/assessment/AssessmentWorkspaceContainer'
-import { IS_XP_IMPLEMENTED } from '../../utils/constants'
 import { beforeNow, getPrettyDate } from '../../utils/dateHelpers'
 import { assessmentCategoryLink, stringParamToInt } from '../../utils/paramParseHelpers'
 import {
@@ -312,16 +311,14 @@ const makeOverviewCardTitle = (
   setBetchaAssessment: (assessment: IAssessmentOverview | null) => void
 ) => (
   <div className="row listing-title">
-    <Text ellipsize={true} className={IS_XP_IMPLEMENTED ? 'col-xs-10' : 'col-xs-12'}>
+    <Text ellipsize={true} className={'col-xs-10'}>
       <h4>{overview.title}</h4>
     </Text>
-    {IS_XP_IMPLEMENTED ? (
-      <div className="col-xs-2">
-        <Popover content={makeMenu(overview, index, setBetchaAssessment)}>
-          <Button icon={IconNames.MENU} minimal={true} />
-        </Popover>
-      </div>
-    ) : null}
+    <div className="col-xs-2">
+      <Popover content={makeMenu(overview, index, setBetchaAssessment)}>
+        <Button icon={IconNames.MENU} minimal={true} />
+      </Popover>
+    </div>
   </div>
 )
 

From e485ab649efdfd085db5e04bcfff70917d43c491 Mon Sep 17 00:00:00 2001
From: remo5000 <vigneshshankar@gmail.com>
Date: Thu, 23 Aug 2018 01:49:54 +0800
Subject: [PATCH 5/6] Use xp and maxgrade for Profile

---
 src/components/dropdown/Profile.tsx | 42 ++++++++++-------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/components/dropdown/Profile.tsx b/src/components/dropdown/Profile.tsx
index e53b40d9d9..7c5316ffca 100644
--- a/src/components/dropdown/Profile.tsx
+++ b/src/components/dropdown/Profile.tsx
@@ -1,19 +1,18 @@
-import { Classes, Dialog, NonIdealState, ProgressBar, Spinner, Tooltip } from '@blueprintjs/core'
+import { Classes, Dialog, NonIdealState, ProgressBar, Spinner } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
 import * as React from 'react'
 
 import { Role } from '../../reducers/states'
-import { IS_XP_IMPLEMENTED } from '../../utils/constants'
 
 type ProfileProps = OwnProps & StateProps
 
 export type StateProps = {
-  grade?: number
-  maxGrade?: number
-  maxXp?: number
+  grade: number
+  maxGrade: number
+  maxXp: number
   name?: string
   role?: Role
-  xp?: number
+  xp: number
 }
 
 type OwnProps = {
@@ -38,30 +37,17 @@ class Profile extends React.Component<ProfileProps> {
             <div className="grade">
               <span className="label">Grade</span>
               <span className="value">
-                {this.props.grade !== undefined ? this.props.grade : '???'}
+                {this.props.grade}
               </span>
             </div>
-            {IS_XP_IMPLEMENTED ? (
-              <>
-                {/* TODO: Move tooltip out of this tenary once max grade for a
-                  user is implemented in GET /user.
-                  https://github.com/source-academy/cadet/issues/205 */}
-                <Tooltip content="Sorry, the grade progress bar is not ready yet">
-                  <ProgressBar className="grade" animate={false} stripes={false} />
-                </Tooltip>
-                <div className="xp">
-                  <span className="label">XP</span>
-                  <span className="value">
-                    <Tooltip content="Sorry, the XP display is not ready yet">
-                      {this.props.xp ? this.props.xp : '???'}
-                    </Tooltip>
-                  </span>
-                </div>
-                <Tooltip content="Sorry, the XP progress bar is not ready yet">
-                  <ProgressBar className="xp" animate={false} stripes={false} />
-                </Tooltip>
-              </>
-            ) : null}
+            <ProgressBar className="grade" animate={false} stripes={false} />
+            <div className="xp">
+              <span className="label">XP</span>
+              <span className="value">
+                {this.props.xp}
+              </span>
+            </div>
+            <ProgressBar className="xp" animate={false} stripes={false} />
           </div>
         </>
       )

From b82e3a76c5c038fab690db08127296b95613d9e7 Mon Sep 17 00:00:00 2001
From: remo5000 <vigneshshankar@gmail.com>
Date: Thu, 23 Aug 2018 01:52:11 +0800
Subject: [PATCH 6/6] Update tests and format

---
 .../__tests__/__snapshots__/index.tsx.snap    | 240 ++++++++++++++++--
 src/components/dropdown/Profile.tsx           |   8 +-
 src/reducers/states.ts                        |   1 -
 3 files changed, 226 insertions(+), 23 deletions(-)

diff --git a/src/components/assessment/__tests__/__snapshots__/index.tsx.snap b/src/components/assessment/__tests__/__snapshots__/index.tsx.snap
index aa7d5349d2..b5631c9349 100644
--- a/src/components/assessment/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/assessment/__tests__/__snapshots__/index.tsx.snap
@@ -80,13 +80,39 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                               </div>
                               <div className=\\"col-xs-9 listing-text\\">
                                 <div className=\\"row listing-title\\">
-                                  <Text ellipsize={true} className=\\"col-xs-12\\">
-                                    <div className=\\"pt-text-overflow-ellipsis col-xs-12\\" title={[undefined]}>
+                                  <Text ellipsize={true} className=\\"col-xs-10\\">
+                                    <div className=\\"pt-text-overflow-ellipsis col-xs-10\\" title={[undefined]}>
                                       <h4>
                                         An Odessey to Runes (Duplicate)
                                       </h4>
                                     </div>
                                   </Text>
+                                  <div className=\\"col-xs-2\\">
+                                    <Blueprint2.Popover content={{...}} defaultIsOpen={false} disabled={false} hasBackdrop={false} hoverCloseDelay={300} hoverOpenDelay={150} inheritDarkTheme={true} interactionKind=\\"click\\" minimal={false} modifiers={{...}} openOnTargetFocus={true} position=\\"auto\\" rootElementTag=\\"span\\" targetElementTag=\\"div\\" transitionDuration={300} usePortal={true}>
+                                      <Manager tag=\\"span\\" className=\\"pt-popover-wrapper\\">
+                                        <span className=\\"pt-popover-wrapper\\">
+                                          <Target onClick={[Function]} className=\\"pt-popover-target\\" component=\\"div\\" innerRef={[Function: target]}>
+                                            <div onClick={[Function]} className=\\"pt-popover-target\\">
+                                              <Blueprint2.Button icon=\\"menu\\" minimal={true} className=\\"\\" disabled={[undefined]} tabIndex={[undefined]}>
+                                                <button type=\\"button\\" className=\\"pt-button pt-minimal\\" disabled={[undefined]} tabIndex={[undefined]} onClick={[undefined]} onKeyDown={[Function]} onKeyUp={[Function]}>
+                                                  <Blueprint2.Icon icon=\\"menu\\">
+                                                    <svg className=\\"pt-icon\\" style={{...}} data-icon=\\"menu\\" width={16} height={16} viewBox=\\"0 0 16 16\\">
+                                                      <title>
+                                                        menu
+                                                      </title>
+                                                      <path d=\\"M1 4h14c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 8H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm0-5H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1z\\" fillRule=\\"evenodd\\" />
+                                                    </svg>
+                                                  </Blueprint2.Icon>
+                                                  <Blueprint2.Icon icon={[undefined]} />
+                                                </button>
+                                              </Blueprint2.Button>
+                                            </div>
+                                          </Target>
+                                          <Blueprint2.Overlay autoFocus={true} backdropClassName=\\"pt-popover-backdrop\\" backdropProps={{...}} canEscapeKeyClose={true} canOutsideClickClose={true} className={[undefined]} didOpen={[Function]} enforceFocus={true} hasBackdrop={false} usePortal={true} isOpen={false} onClose={[Function]} transitionDuration={300} transitionName=\\"pt-popover\\" lazy={true} />
+                                        </span>
+                                      </Manager>
+                                    </Blueprint2.Popover>
+                                  </div>
                                 </div>
                                 <div className=\\"row listing-order\\">
                                   <h6>
@@ -147,13 +173,39 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                               </div>
                               <div className=\\"col-xs-9 listing-text\\">
                                 <div className=\\"row listing-title\\">
-                                  <Text ellipsize={true} className=\\"col-xs-12\\">
-                                    <div className=\\"pt-text-overflow-ellipsis col-xs-12\\" title={[undefined]}>
+                                  <Text ellipsize={true} className=\\"col-xs-10\\">
+                                    <div className=\\"pt-text-overflow-ellipsis col-xs-10\\" title={[undefined]}>
                                       <h4>
                                         An Odessey to Runes
                                       </h4>
                                     </div>
                                   </Text>
+                                  <div className=\\"col-xs-2\\">
+                                    <Blueprint2.Popover content={{...}} defaultIsOpen={false} disabled={false} hasBackdrop={false} hoverCloseDelay={300} hoverOpenDelay={150} inheritDarkTheme={true} interactionKind=\\"click\\" minimal={false} modifiers={{...}} openOnTargetFocus={true} position=\\"auto\\" rootElementTag=\\"span\\" targetElementTag=\\"div\\" transitionDuration={300} usePortal={true}>
+                                      <Manager tag=\\"span\\" className=\\"pt-popover-wrapper\\">
+                                        <span className=\\"pt-popover-wrapper\\">
+                                          <Target onClick={[Function]} className=\\"pt-popover-target\\" component=\\"div\\" innerRef={[Function: target]}>
+                                            <div onClick={[Function]} className=\\"pt-popover-target\\">
+                                              <Blueprint2.Button icon=\\"menu\\" minimal={true} className=\\"\\" disabled={[undefined]} tabIndex={[undefined]}>
+                                                <button type=\\"button\\" className=\\"pt-button pt-minimal\\" disabled={[undefined]} tabIndex={[undefined]} onClick={[undefined]} onKeyDown={[Function]} onKeyUp={[Function]}>
+                                                  <Blueprint2.Icon icon=\\"menu\\">
+                                                    <svg className=\\"pt-icon\\" style={{...}} data-icon=\\"menu\\" width={16} height={16} viewBox=\\"0 0 16 16\\">
+                                                      <title>
+                                                        menu
+                                                      </title>
+                                                      <path d=\\"M1 4h14c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 8H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm0-5H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1z\\" fillRule=\\"evenodd\\" />
+                                                    </svg>
+                                                  </Blueprint2.Icon>
+                                                  <Blueprint2.Icon icon={[undefined]} />
+                                                </button>
+                                              </Blueprint2.Button>
+                                            </div>
+                                          </Target>
+                                          <Blueprint2.Overlay autoFocus={true} backdropClassName=\\"pt-popover-backdrop\\" backdropProps={{...}} canEscapeKeyClose={true} canOutsideClickClose={true} className={[undefined]} didOpen={[Function]} enforceFocus={true} hasBackdrop={false} usePortal={true} isOpen={false} onClose={[Function]} transitionDuration={300} transitionName=\\"pt-popover\\" lazy={true} />
+                                        </span>
+                                      </Manager>
+                                    </Blueprint2.Popover>
+                                  </div>
                                 </div>
                                 <div className=\\"row listing-order\\">
                                   <h6>
@@ -216,13 +268,39 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                               </div>
                               <div className=\\"col-xs-9 listing-text\\">
                                 <div className=\\"row listing-title\\">
-                                  <Text ellipsize={true} className=\\"col-xs-12\\">
-                                    <div className=\\"pt-text-overflow-ellipsis col-xs-12\\" title={[undefined]}>
+                                  <Text ellipsize={true} className=\\"col-xs-10\\">
+                                    <div className=\\"pt-text-overflow-ellipsis col-xs-10\\" title={[undefined]}>
                                       <h4>
                                         The Secret to Streams
                                       </h4>
                                     </div>
                                   </Text>
+                                  <div className=\\"col-xs-2\\">
+                                    <Blueprint2.Popover content={{...}} defaultIsOpen={false} disabled={false} hasBackdrop={false} hoverCloseDelay={300} hoverOpenDelay={150} inheritDarkTheme={true} interactionKind=\\"click\\" minimal={false} modifiers={{...}} openOnTargetFocus={true} position=\\"auto\\" rootElementTag=\\"span\\" targetElementTag=\\"div\\" transitionDuration={300} usePortal={true}>
+                                      <Manager tag=\\"span\\" className=\\"pt-popover-wrapper\\">
+                                        <span className=\\"pt-popover-wrapper\\">
+                                          <Target onClick={[Function]} className=\\"pt-popover-target\\" component=\\"div\\" innerRef={[Function: target]}>
+                                            <div onClick={[Function]} className=\\"pt-popover-target\\">
+                                              <Blueprint2.Button icon=\\"menu\\" minimal={true} className=\\"\\" disabled={[undefined]} tabIndex={[undefined]}>
+                                                <button type=\\"button\\" className=\\"pt-button pt-minimal\\" disabled={[undefined]} tabIndex={[undefined]} onClick={[undefined]} onKeyDown={[Function]} onKeyUp={[Function]}>
+                                                  <Blueprint2.Icon icon=\\"menu\\">
+                                                    <svg className=\\"pt-icon\\" style={{...}} data-icon=\\"menu\\" width={16} height={16} viewBox=\\"0 0 16 16\\">
+                                                      <title>
+                                                        menu
+                                                      </title>
+                                                      <path d=\\"M1 4h14c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 8H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm0-5H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1z\\" fillRule=\\"evenodd\\" />
+                                                    </svg>
+                                                  </Blueprint2.Icon>
+                                                  <Blueprint2.Icon icon={[undefined]} />
+                                                </button>
+                                              </Blueprint2.Button>
+                                            </div>
+                                          </Target>
+                                          <Blueprint2.Overlay autoFocus={true} backdropClassName=\\"pt-popover-backdrop\\" backdropProps={{...}} canEscapeKeyClose={true} canOutsideClickClose={true} className={[undefined]} didOpen={[Function]} enforceFocus={true} hasBackdrop={false} usePortal={true} isOpen={false} onClose={[Function]} transitionDuration={300} transitionName=\\"pt-popover\\" lazy={true} />
+                                        </span>
+                                      </Manager>
+                                    </Blueprint2.Popover>
+                                  </div>
                                 </div>
                                 <div className=\\"row listing-order\\">
                                   <h6>
@@ -285,13 +363,39 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                               </div>
                               <div className=\\"col-xs-9 listing-text\\">
                                 <div className=\\"row listing-title\\">
-                                  <Text ellipsize={true} className=\\"col-xs-12\\">
-                                    <div className=\\"pt-text-overflow-ellipsis col-xs-12\\" title={[undefined]}>
+                                  <Text ellipsize={true} className=\\"col-xs-10\\">
+                                    <div className=\\"pt-text-overflow-ellipsis col-xs-10\\" title={[undefined]}>
                                       <h4>
                                         A sample Sidequest
                                       </h4>
                                     </div>
                                   </Text>
+                                  <div className=\\"col-xs-2\\">
+                                    <Blueprint2.Popover content={{...}} defaultIsOpen={false} disabled={false} hasBackdrop={false} hoverCloseDelay={300} hoverOpenDelay={150} inheritDarkTheme={true} interactionKind=\\"click\\" minimal={false} modifiers={{...}} openOnTargetFocus={true} position=\\"auto\\" rootElementTag=\\"span\\" targetElementTag=\\"div\\" transitionDuration={300} usePortal={true}>
+                                      <Manager tag=\\"span\\" className=\\"pt-popover-wrapper\\">
+                                        <span className=\\"pt-popover-wrapper\\">
+                                          <Target onClick={[Function]} className=\\"pt-popover-target\\" component=\\"div\\" innerRef={[Function: target]}>
+                                            <div onClick={[Function]} className=\\"pt-popover-target\\">
+                                              <Blueprint2.Button icon=\\"menu\\" minimal={true} className=\\"\\" disabled={[undefined]} tabIndex={[undefined]}>
+                                                <button type=\\"button\\" className=\\"pt-button pt-minimal\\" disabled={[undefined]} tabIndex={[undefined]} onClick={[undefined]} onKeyDown={[Function]} onKeyUp={[Function]}>
+                                                  <Blueprint2.Icon icon=\\"menu\\">
+                                                    <svg className=\\"pt-icon\\" style={{...}} data-icon=\\"menu\\" width={16} height={16} viewBox=\\"0 0 16 16\\">
+                                                      <title>
+                                                        menu
+                                                      </title>
+                                                      <path d=\\"M1 4h14c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 8H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm0-5H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1z\\" fillRule=\\"evenodd\\" />
+                                                    </svg>
+                                                  </Blueprint2.Icon>
+                                                  <Blueprint2.Icon icon={[undefined]} />
+                                                </button>
+                                              </Blueprint2.Button>
+                                            </div>
+                                          </Target>
+                                          <Blueprint2.Overlay autoFocus={true} backdropClassName=\\"pt-popover-backdrop\\" backdropProps={{...}} canEscapeKeyClose={true} canOutsideClickClose={true} className={[undefined]} didOpen={[Function]} enforceFocus={true} hasBackdrop={false} usePortal={true} isOpen={false} onClose={[Function]} transitionDuration={300} transitionName=\\"pt-popover\\" lazy={true} />
+                                        </span>
+                                      </Manager>
+                                    </Blueprint2.Popover>
+                                  </div>
                                 </div>
                                 <div className=\\"row listing-order\\">
                                   <h6>
@@ -462,13 +566,39 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                               </div>
                               <div className=\\"col-xs-9 listing-text\\">
                                 <div className=\\"row listing-title\\">
-                                  <Text ellipsize={true} className=\\"col-xs-12\\">
-                                    <div className=\\"pt-text-overflow-ellipsis col-xs-12\\" title={[undefined]}>
+                                  <Text ellipsize={true} className=\\"col-xs-10\\">
+                                    <div className=\\"pt-text-overflow-ellipsis col-xs-10\\" title={[undefined]}>
                                       <h4>
                                         An Odessey to Runes (Duplicate)
                                       </h4>
                                     </div>
                                   </Text>
+                                  <div className=\\"col-xs-2\\">
+                                    <Blueprint2.Popover content={{...}} defaultIsOpen={false} disabled={false} hasBackdrop={false} hoverCloseDelay={300} hoverOpenDelay={150} inheritDarkTheme={true} interactionKind=\\"click\\" minimal={false} modifiers={{...}} openOnTargetFocus={true} position=\\"auto\\" rootElementTag=\\"span\\" targetElementTag=\\"div\\" transitionDuration={300} usePortal={true}>
+                                      <Manager tag=\\"span\\" className=\\"pt-popover-wrapper\\">
+                                        <span className=\\"pt-popover-wrapper\\">
+                                          <Target onClick={[Function]} className=\\"pt-popover-target\\" component=\\"div\\" innerRef={[Function: target]}>
+                                            <div onClick={[Function]} className=\\"pt-popover-target\\">
+                                              <Blueprint2.Button icon=\\"menu\\" minimal={true} className=\\"\\" disabled={[undefined]} tabIndex={[undefined]}>
+                                                <button type=\\"button\\" className=\\"pt-button pt-minimal\\" disabled={[undefined]} tabIndex={[undefined]} onClick={[undefined]} onKeyDown={[Function]} onKeyUp={[Function]}>
+                                                  <Blueprint2.Icon icon=\\"menu\\">
+                                                    <svg className=\\"pt-icon\\" style={{...}} data-icon=\\"menu\\" width={16} height={16} viewBox=\\"0 0 16 16\\">
+                                                      <title>
+                                                        menu
+                                                      </title>
+                                                      <path d=\\"M1 4h14c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 8H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm0-5H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1z\\" fillRule=\\"evenodd\\" />
+                                                    </svg>
+                                                  </Blueprint2.Icon>
+                                                  <Blueprint2.Icon icon={[undefined]} />
+                                                </button>
+                                              </Blueprint2.Button>
+                                            </div>
+                                          </Target>
+                                          <Blueprint2.Overlay autoFocus={true} backdropClassName=\\"pt-popover-backdrop\\" backdropProps={{...}} canEscapeKeyClose={true} canOutsideClickClose={true} className={[undefined]} didOpen={[Function]} enforceFocus={true} hasBackdrop={false} usePortal={true} isOpen={false} onClose={[Function]} transitionDuration={300} transitionName=\\"pt-popover\\" lazy={true} />
+                                        </span>
+                                      </Manager>
+                                    </Blueprint2.Popover>
+                                  </div>
                                 </div>
                                 <div className=\\"row listing-order\\">
                                   <h6>
@@ -553,13 +683,39 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                               </div>
                               <div className=\\"col-xs-9 listing-text\\">
                                 <div className=\\"row listing-title\\">
-                                  <Text ellipsize={true} className=\\"col-xs-12\\">
-                                    <div className=\\"pt-text-overflow-ellipsis col-xs-12\\" title={[undefined]}>
+                                  <Text ellipsize={true} className=\\"col-xs-10\\">
+                                    <div className=\\"pt-text-overflow-ellipsis col-xs-10\\" title={[undefined]}>
                                       <h4>
                                         An Odessey to Runes
                                       </h4>
                                     </div>
                                   </Text>
+                                  <div className=\\"col-xs-2\\">
+                                    <Blueprint2.Popover content={{...}} defaultIsOpen={false} disabled={false} hasBackdrop={false} hoverCloseDelay={300} hoverOpenDelay={150} inheritDarkTheme={true} interactionKind=\\"click\\" minimal={false} modifiers={{...}} openOnTargetFocus={true} position=\\"auto\\" rootElementTag=\\"span\\" targetElementTag=\\"div\\" transitionDuration={300} usePortal={true}>
+                                      <Manager tag=\\"span\\" className=\\"pt-popover-wrapper\\">
+                                        <span className=\\"pt-popover-wrapper\\">
+                                          <Target onClick={[Function]} className=\\"pt-popover-target\\" component=\\"div\\" innerRef={[Function: target]}>
+                                            <div onClick={[Function]} className=\\"pt-popover-target\\">
+                                              <Blueprint2.Button icon=\\"menu\\" minimal={true} className=\\"\\" disabled={[undefined]} tabIndex={[undefined]}>
+                                                <button type=\\"button\\" className=\\"pt-button pt-minimal\\" disabled={[undefined]} tabIndex={[undefined]} onClick={[undefined]} onKeyDown={[Function]} onKeyUp={[Function]}>
+                                                  <Blueprint2.Icon icon=\\"menu\\">
+                                                    <svg className=\\"pt-icon\\" style={{...}} data-icon=\\"menu\\" width={16} height={16} viewBox=\\"0 0 16 16\\">
+                                                      <title>
+                                                        menu
+                                                      </title>
+                                                      <path d=\\"M1 4h14c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 8H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm0-5H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1z\\" fillRule=\\"evenodd\\" />
+                                                    </svg>
+                                                  </Blueprint2.Icon>
+                                                  <Blueprint2.Icon icon={[undefined]} />
+                                                </button>
+                                              </Blueprint2.Button>
+                                            </div>
+                                          </Target>
+                                          <Blueprint2.Overlay autoFocus={true} backdropClassName=\\"pt-popover-backdrop\\" backdropProps={{...}} canEscapeKeyClose={true} canOutsideClickClose={true} className={[undefined]} didOpen={[Function]} enforceFocus={true} hasBackdrop={false} usePortal={true} isOpen={false} onClose={[Function]} transitionDuration={300} transitionName=\\"pt-popover\\" lazy={true} />
+                                        </span>
+                                      </Manager>
+                                    </Blueprint2.Popover>
+                                  </div>
                                 </div>
                                 <div className=\\"row listing-order\\">
                                   <h6>
@@ -622,13 +778,39 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                               </div>
                               <div className=\\"col-xs-9 listing-text\\">
                                 <div className=\\"row listing-title\\">
-                                  <Text ellipsize={true} className=\\"col-xs-12\\">
-                                    <div className=\\"pt-text-overflow-ellipsis col-xs-12\\" title={[undefined]}>
+                                  <Text ellipsize={true} className=\\"col-xs-10\\">
+                                    <div className=\\"pt-text-overflow-ellipsis col-xs-10\\" title={[undefined]}>
                                       <h4>
                                         The Secret to Streams
                                       </h4>
                                     </div>
                                   </Text>
+                                  <div className=\\"col-xs-2\\">
+                                    <Blueprint2.Popover content={{...}} defaultIsOpen={false} disabled={false} hasBackdrop={false} hoverCloseDelay={300} hoverOpenDelay={150} inheritDarkTheme={true} interactionKind=\\"click\\" minimal={false} modifiers={{...}} openOnTargetFocus={true} position=\\"auto\\" rootElementTag=\\"span\\" targetElementTag=\\"div\\" transitionDuration={300} usePortal={true}>
+                                      <Manager tag=\\"span\\" className=\\"pt-popover-wrapper\\">
+                                        <span className=\\"pt-popover-wrapper\\">
+                                          <Target onClick={[Function]} className=\\"pt-popover-target\\" component=\\"div\\" innerRef={[Function: target]}>
+                                            <div onClick={[Function]} className=\\"pt-popover-target\\">
+                                              <Blueprint2.Button icon=\\"menu\\" minimal={true} className=\\"\\" disabled={[undefined]} tabIndex={[undefined]}>
+                                                <button type=\\"button\\" className=\\"pt-button pt-minimal\\" disabled={[undefined]} tabIndex={[undefined]} onClick={[undefined]} onKeyDown={[Function]} onKeyUp={[Function]}>
+                                                  <Blueprint2.Icon icon=\\"menu\\">
+                                                    <svg className=\\"pt-icon\\" style={{...}} data-icon=\\"menu\\" width={16} height={16} viewBox=\\"0 0 16 16\\">
+                                                      <title>
+                                                        menu
+                                                      </title>
+                                                      <path d=\\"M1 4h14c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 8H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm0-5H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1z\\" fillRule=\\"evenodd\\" />
+                                                    </svg>
+                                                  </Blueprint2.Icon>
+                                                  <Blueprint2.Icon icon={[undefined]} />
+                                                </button>
+                                              </Blueprint2.Button>
+                                            </div>
+                                          </Target>
+                                          <Blueprint2.Overlay autoFocus={true} backdropClassName=\\"pt-popover-backdrop\\" backdropProps={{...}} canEscapeKeyClose={true} canOutsideClickClose={true} className={[undefined]} didOpen={[Function]} enforceFocus={true} hasBackdrop={false} usePortal={true} isOpen={false} onClose={[Function]} transitionDuration={300} transitionName=\\"pt-popover\\" lazy={true} />
+                                        </span>
+                                      </Manager>
+                                    </Blueprint2.Popover>
+                                  </div>
                                 </div>
                                 <div className=\\"row listing-order\\">
                                   <h6>
@@ -691,13 +873,39 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                               </div>
                               <div className=\\"col-xs-9 listing-text\\">
                                 <div className=\\"row listing-title\\">
-                                  <Text ellipsize={true} className=\\"col-xs-12\\">
-                                    <div className=\\"pt-text-overflow-ellipsis col-xs-12\\" title={[undefined]}>
+                                  <Text ellipsize={true} className=\\"col-xs-10\\">
+                                    <div className=\\"pt-text-overflow-ellipsis col-xs-10\\" title={[undefined]}>
                                       <h4>
                                         A sample Sidequest
                                       </h4>
                                     </div>
                                   </Text>
+                                  <div className=\\"col-xs-2\\">
+                                    <Blueprint2.Popover content={{...}} defaultIsOpen={false} disabled={false} hasBackdrop={false} hoverCloseDelay={300} hoverOpenDelay={150} inheritDarkTheme={true} interactionKind=\\"click\\" minimal={false} modifiers={{...}} openOnTargetFocus={true} position=\\"auto\\" rootElementTag=\\"span\\" targetElementTag=\\"div\\" transitionDuration={300} usePortal={true}>
+                                      <Manager tag=\\"span\\" className=\\"pt-popover-wrapper\\">
+                                        <span className=\\"pt-popover-wrapper\\">
+                                          <Target onClick={[Function]} className=\\"pt-popover-target\\" component=\\"div\\" innerRef={[Function: target]}>
+                                            <div onClick={[Function]} className=\\"pt-popover-target\\">
+                                              <Blueprint2.Button icon=\\"menu\\" minimal={true} className=\\"\\" disabled={[undefined]} tabIndex={[undefined]}>
+                                                <button type=\\"button\\" className=\\"pt-button pt-minimal\\" disabled={[undefined]} tabIndex={[undefined]} onClick={[undefined]} onKeyDown={[Function]} onKeyUp={[Function]}>
+                                                  <Blueprint2.Icon icon=\\"menu\\">
+                                                    <svg className=\\"pt-icon\\" style={{...}} data-icon=\\"menu\\" width={16} height={16} viewBox=\\"0 0 16 16\\">
+                                                      <title>
+                                                        menu
+                                                      </title>
+                                                      <path d=\\"M1 4h14c.55 0 1-.45 1-1s-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1zm14 8H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zm0-5H1c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1z\\" fillRule=\\"evenodd\\" />
+                                                    </svg>
+                                                  </Blueprint2.Icon>
+                                                  <Blueprint2.Icon icon={[undefined]} />
+                                                </button>
+                                              </Blueprint2.Button>
+                                            </div>
+                                          </Target>
+                                          <Blueprint2.Overlay autoFocus={true} backdropClassName=\\"pt-popover-backdrop\\" backdropProps={{...}} canEscapeKeyClose={true} canOutsideClickClose={true} className={[undefined]} didOpen={[Function]} enforceFocus={true} hasBackdrop={false} usePortal={true} isOpen={false} onClose={[Function]} transitionDuration={300} transitionName=\\"pt-popover\\" lazy={true} />
+                                        </span>
+                                      </Manager>
+                                    </Blueprint2.Popover>
+                                  </div>
                                 </div>
                                 <div className=\\"row listing-order\\">
                                   <h6>
diff --git a/src/components/dropdown/Profile.tsx b/src/components/dropdown/Profile.tsx
index 7c5316ffca..083eb1efc2 100644
--- a/src/components/dropdown/Profile.tsx
+++ b/src/components/dropdown/Profile.tsx
@@ -36,16 +36,12 @@ class Profile extends React.Component<ProfileProps> {
           <div className="progress">
             <div className="grade">
               <span className="label">Grade</span>
-              <span className="value">
-                {this.props.grade}
-              </span>
+              <span className="value">{this.props.grade}</span>
             </div>
             <ProgressBar className="grade" animate={false} stripes={false} />
             <div className="xp">
               <span className="label">XP</span>
-              <span className="value">
-                {this.props.xp}
-              </span>
+              <span className="value">{this.props.xp}</span>
             </div>
             <ProgressBar className="xp" animate={false} stripes={false} />
           </div>
diff --git a/src/reducers/states.ts b/src/reducers/states.ts
index 2609b5f00e..eff90a88f5 100644
--- a/src/reducers/states.ts
+++ b/src/reducers/states.ts
@@ -255,7 +255,6 @@ export const defaultSession: ISessionState = {
   refreshToken: undefined,
   name: undefined,
   xp: 0
-
 }
 
 export const defaultState: IState = {