Fix underlined links in Gradezilla Submission Tray

Fixes: UIDEV-274

Test plan:
- With New Gradebook enabled, click on an assignment
  in the main table, then click the Expand Tray icon.

- Confirm that the any links appearing in the tray are
  no longer underlined by default:
  https://www.screencast.com/t/qPUwxM2be

- Confirm all links still work.

Change-Id: I5de3627034a5fff9dcb6b16e23b1ff0ffe0df705
Reviewed-on: https://gerrit.instructure.com/198302
Tested-by: Jenkins
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
Reviewed-by: Pam Hiett <phiett@instructure.com>
Product-Review: Pam Hiett <phiett@instructure.com>

app/jsx/gradezilla/default_gradebook/components/SubmissionCommentListItem.js

@@ -56,6 +56,7 @@ export default class SubmissionCommentListItem extends React.Component {
 
   handleDeleteComment = () => {
     const message = I18n.t('Are you sure you want to delete this comment?')
+    // eslint-disable-next-line no-alert, no-restricted-globals
     if (confirm(message)) {
       this.props.deleteSubmissionComment(this.props.id)
     }
@@ -114,11 +115,14 @@ export default class SubmissionCommentListItem extends React.Component {
 
             <div>
               <div style={{margin: '0 0 0 0.375rem'}}>
-                <Text weight="bold" size="small" lineHeight="fit">
-                  <Link href={this.props.authorUrl}>
-                    {TextHelper.truncateText(this.props.author, {max: 22})}
-                  </Link>
-                </Text>
+                <Button
+                  href={this.props.authorUrl}
+                  variant="link"
+                  theme={{mediumPadding: '0', mediumHeight: 'normal'}}
+                  margin="none none xxx-small"
+                >
+                  {TextHelper.truncateText(this.props.author, {max: 22})}
+                </Button>
               </div>
 
               <div style={{margin: '0 0 0 0.375rem'}}>

app/jsx/gradezilla/default_gradebook/components/SubmissionTray.js

@@ -24,7 +24,6 @@ import Button from '@instructure/ui-buttons/lib/components/Button'
 import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton'
 import View from '@instructure/ui-layout/lib/components/View'
 import Heading from '@instructure/ui-elements/lib/components/Heading'
-import Link from '@instructure/ui-elements/lib/components/Link'
 import Spinner from '@instructure/ui-elements/lib/components/Spinner'
 import Tray from '@instructure/ui-overlays/lib/components/Tray'
 import Text from '@instructure/ui-elements/lib/components/Text'
@@ -290,7 +289,13 @@ export default class SubmissionTray extends React.Component {
                 onRightArrowClick={this.props.selectNextStudent}
                 rightArrowDescription={I18n.t('Next student')}
               >
-                <Link href={this.props.student.gradesUrl}>{name}</Link>
+                <Button
+                  href={this.props.student.gradesUrl}
+                  variant="link"
+                  theme={{mediumPadding: '0', mediumHeight: 'normal'}}
+                >
+                  {name}
+                </Button>
               </Carousel>
 
               <View as="div" margin="small 0" className="hr" />
@@ -305,7 +310,13 @@ export default class SubmissionTray extends React.Component {
                 onRightArrowClick={this.props.selectNextAssignment}
                 rightArrowDescription={I18n.t('Next assignment')}
               >
-                <Link href={this.props.assignment.htmlUrl}>{this.props.assignment.name}</Link>
+                <Button
+                  href={this.props.assignment.htmlUrl}
+                  variant="link"
+                  theme={{mediumPadding: '0', mediumHeight: 'normal'}}
+                >
+                  {this.props.assignment.name}
+                </Button>
               </Carousel>
 
               {this.props.speedGraderEnabled && this.renderSpeedGraderLink(speedGraderProps)}

spec/javascripts/jsx/gradezilla/default_gradebook/components/SubmissionCommentListItemSpec.js

@@ -87,8 +87,8 @@ test("links the author's name to the author's url", function() {
   this.wrapper = this.mountComponent()
   strictEqual(
     this.wrapper
-      .find('Link')
-      .at(1)
+      .find('Button')
+      .at(0)
       .prop('href'),
     this.defaultProps().authorUrl
   )
@@ -154,7 +154,7 @@ test('the comment timestamp includes the year if it does not match the current y
   this.wrapper = this.mountComponent({createdAt: new Date('Jan 8, 2003')})
   const dateText = this.wrapper
     .find('Text')
-    .at(1)
+    .at(0)
     .text()
   strictEqual(dateText.includes(', 2003'), true)
 })
@@ -163,7 +163,7 @@ test('the comment timestamp excludes the year if it matches the current year', f
   this.wrapper = this.mountComponent()
   const dateText = this.wrapper
     .find('Text')
-    .at(1)
+    .at(0)
     .text()
   const year = this.wrapper.instance().props.createdAt.getFullYear()
   strictEqual(dateText.includes(`, ${year}`), false)
@@ -177,7 +177,7 @@ test('uses the edited_at for the timestamp, if one exists', function() {
 
   const dateText = this.wrapper
     .find('Text')
-    .at(1)
+    .at(0)
     .text()
   strictEqual(dateText.includes('Feb 12'), true)
 })
@@ -190,7 +190,7 @@ test("starts with the text '(Edited)' if the comment has an edited_at", function
 
   const dateText = this.wrapper
     .find('Text')
-    .at(1)
+    .at(0)
     .text()
   strictEqual(/^\(Edited\)/.test(dateText), true)
 })
@@ -200,7 +200,7 @@ test('uses the created_at for the timestamp if edited_at is null', function() {
 
   const dateText = this.wrapper
     .find('Text')
-    .at(1)
+    .at(0)
     .text()
   strictEqual(dateText.includes('Jan 8'), true)
 })
@@ -210,7 +210,7 @@ test("does not start with the text '(Edited)' if the comment has a null edited_a
 
   const dateText = this.wrapper
     .find('Text')
-    .at(1)
+    .at(0)
     .text()
   strictEqual(/^\(Edited\)/.test(dateText), false)
 })