add comment row

refs COMMS-1844

Test Plan:
- Go to the comments tab on A2 student view
  with a submission and submission comments
- click on the comments tab
- notice the comments that are shown and are accessible
- navigate to the page  with anynonmous peer review on
- notice the avatar and name show up correctly

Change-Id: I19b280e83b043ee170896c7f7b54ccc72e1442b9
Reviewed-on: https://gerrit.instructure.com/180321
Reviewed-by: Landon Gilbert-Bland <[email protected]>
QA-Review: Landon Gilbert-Bland <[email protected]>
Tested-by: Jenkins
Product-Review: Steven Burnett <[email protected]>

app/jsx/assignments_2/student/assignmentData.js

@@ -81,6 +81,7 @@ export const STUDENT_VIEW_QUERY = gql`
           nodes {
             commentsConnection {
               nodes {
+                _id
                 comment
                 updatedAt
                 author {
@@ -103,6 +104,7 @@ export const STUDENT_VIEW_QUERY = gql`
 `
 
 export const CommentShape = shape({
+  _id: string,
   comment: string,
   author: shape({
     avatarUrl: string,

app/jsx/assignments_2/student/components/Comments/CommentContent.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2018 - present Instructure, Inc.
+ * Copyright (C) 2019 - present Instructure, Inc.
  *
  * This file is part of Canvas.
  *
@@ -19,11 +19,17 @@
 import React from 'react'
 import NoComments from './NoComments'
 import {arrayOf} from 'prop-types'
+import CommentRow from './CommentRow'
 import {CommentShape} from '../../assignmentData'
 
 function CommentContent(props) {
   return (
-    <div className="comments-content-container">{!props.comments.length && <NoComments />}</div>
+    <div className="comments-content-container">
+      {!props.comments.length && <NoComments />}
+      {props.comments.map(comment => (
+        <CommentRow key={comment._id} comment={comment} />
+      ))}
+    </div>
   )
 }
 

app/jsx/assignments_2/student/components/Comments/CommentRow.js

@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2019 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import I18n from 'i18n!assignments_2'
+import React from 'react'
+import {CommentShape} from '../../assignmentData'
+import Avatar from '@instructure/ui-elements/lib/components/Avatar'
+import Text from '@instructure/ui-elements/lib/components/Text'
+import FriendlyDatetime from '../../../../shared/FriendlyDatetime'
+
+function CommentRow(props) {
+  const author = props.comment.author
+  return (
+    <div className="comment-row-container">
+      <div className="comment-avatar-container">
+        <Avatar
+          name={author ? author.shortName : I18n.t('Anonymous')}
+          src={author ? author.avatarUrl : ''}
+          margin="0 small 0 0"
+        />
+      </div>
+      <div className="comment-text-comment-container">
+        <Text weight="light" size="small">
+          {author ? author.shortName : I18n.t('Anonymous')}{' '}
+          <FriendlyDatetime
+            prefix={I18n.t('at')}
+            format={I18n.t('#date.formats.full_with_weekday')}
+            dateTime={props.comment.updatedAt}
+          />
+        </Text>
+        <Text>{props.comment.comment}</Text>
+      </div>
+    </div>
+  )
+}
+
+CommentRow.propTypes = {
+  comment: CommentShape.isRequired
+}
+
+export default React.memo(CommentRow)

app/jsx/assignments_2/student/components/__tests__/Comments.test.js

@@ -57,4 +57,28 @@ describe('Comments', () => {
     )
     expect(container).toHaveLength(1)
   })
+
+  it('renders comment rows when provided', () => {
+    const assignment = mockAssignment()
+    ReactDOM.render(<Comments assignment={assignment} />, document.getElementById('fixtures'))
+    const container = $('.comment-row-container')
+    expect(container).toHaveLength(1)
+  })
+
+  it('renders shortname when shortname is provided', () => {
+    const assignment = mockAssignment()
+    ReactDOM.render(<Comments assignment={assignment} />, document.getElementById('fixtures'))
+    const container = $('#fixtures:contains("bob builder")')
+    expect(container).toHaveLength(1)
+  })
+
+  it('renders Anonymous when shortname is not provided', () => {
+    const assignment = mockAssignment()
+    assignment.submissionsConnection.nodes[0].commentsConnection.nodes[0].author = null
+    ReactDOM.render(<Comments assignment={assignment} />, document.getElementById('fixtures'))
+    let container = $('#fixtures:contains("bob builder")')
+    expect(container).toHaveLength(0)
+    container = $('#fixtures:contains("Anonymous")')
+    expect(container).toHaveLength(1)
+  })
 })

app/jsx/assignments_2/student/test-utils.js

@@ -49,9 +49,8 @@ export function mockAssignment(overrides = {}) {
             nodes: [
               {
                 __typename: 'Comment',
+                _id: '1',
                 comment: 'comment comment',
-                title: 'the best comment title',
-
                 updatedAt: '12/13/91',
                 author: {
                   __typename: 'Author',

app/stylesheets/pages/assignments2_student/_students_comments.scss

@@ -24,3 +24,15 @@
 .comments-content-container {
   text-align: center;
 }
+
+.comment-row-container {
+  display: flex;
+  padding-top: 12px;
+}
+
+.comment-text-comment-container {
+  text-align: start;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}