Add link to submission comment in inbox

closes VICE-2681
flag=none

Test Plan:
 - turn inbox redesign ff on
 - create a submission comment as a teacher
 - as a student respond

As a teacher and as a student:
 - go to the submission comment thread in inbox
 - click title link
 > should be directed to submission page

Change-Id: I80a9d359194312c259be5b38ca4acd9bcaac6238
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/289995
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Jason Gillett <jason.gillett@instructure.com>
Reviewed-by: Omar Soto-Fortuño <omar.soto@instructure.com>
Product-Review: Omar Soto-Fortuño <omar.soto@instructure.com>

ui/features/inbox/graphql/Queries.js

@@ -215,6 +215,9 @@ export const SUBMISSION_COMMENTS_QUERY = gql`
             ...SubmissionComment
           }
         }
+        user {
+          _id
+        }
       }
     }
   }

ui/features/inbox/graphql/mswHandlers.js

@@ -207,6 +207,10 @@ export const handlers = [
           ],
           __typename: 'SubmissionCommentConnection'
         },
+        user: {
+          _id: '75',
+          __typename: 'User'
+        },
         __typename: 'Submission'
       }
     }

ui/features/inbox/react/components/MessageDetailHeader/MessageDetailHeader.js

@@ -28,6 +28,7 @@ import {responsiveQuerySizes} from '../../../util/utils'
 import {Tooltip} from '@instructure/ui-tooltip'
 import {useScope as useI18nScope} from '@canvas/i18n'
 import {ConversationContext} from '../../../util/constants'
+import {Link} from '@instructure/ui-link'
 
 const I18n = useI18nScope('conversations_2')
 
@@ -59,7 +60,16 @@ export const MessageDetailHeader = ({...props}) => {
               as={responsiveProps.as}
               data-testid={responsiveProps.datatestId}
             >
-              {props.text}
+              {isSubmissionCommentsType && props.submissionCommentURL ? (
+                <Link
+                  href={props.submissionCommentURL}
+                  data-testid="submission-comment-header-line"
+                >
+                  {props.text}
+                </Link>
+              ) : (
+                props.text
+              )}
             </Heading>
           </Flex.Item>
           <Flex.Item>
@@ -120,7 +130,8 @@ MessageDetailHeader.propTypes = {
   onReplyAll: PropTypes.func,
   onDelete: PropTypes.func,
   focusRef: PropTypes.any,
-  onForward: PropTypes.func
+  onForward: PropTypes.func,
+  submissionCommentURL: PropTypes.string
 }
 
 MessageDetailHeader.defaultProps = {

ui/features/inbox/react/containers/MessageDetailContainer/MessageDetailContainer.js

@@ -128,6 +128,7 @@ export const MessageDetailContainer = props => {
         onReply={props.onReply}
         onReplyAll={props.onReplyAll}
         onDelete={() => props.onDelete([props.conversation._id])}
+        submissionCommentURL={inboxMessageData?.submissionCommentURL}
       />
       {inboxMessageData?.inboxMessages.map(message => (
         <View as="div" borderWidth="small none none none" padding="small" key={message.id}>

ui/features/inbox/react/containers/MessageDetailContainer/__tests__/MessageDetailContainer.test.js

@@ -26,7 +26,7 @@ import {mswServer} from '../../../../../../shared/msw/mswServer'
 import React from 'react'
 import waitForApolloLoading from '../../../../util/waitForApolloLoading'
 import {responsiveQuerySizes} from '../../../../util/utils'
-import {render, fireEvent} from '@testing-library/react'
+import {render, fireEvent, waitFor} from '@testing-library/react'
 import {ConversationContext} from '../../../../util/constants'
 
 jest.mock('../../../../util/utils', () => ({
@@ -97,6 +97,7 @@ describe('MessageDetailContainer', () => {
       it('should render', () => {
         const container = setup()
         expect(container).toBeTruthy()
+        expect(container.queryByTestId('submission-comment-header-line')).toBeNull()
       })
 
       it('should render conversation information correctly', async () => {
@@ -186,6 +187,17 @@ describe('MessageDetailContainer', () => {
         expect(await container.findByText('my student comment')).toBeInTheDocument()
       })
 
+      it('should render with link in title', async () => {
+        const container = setup({
+          isSubmissionCommentsType: true,
+          conversation: mockSubmissionComment
+        })
+        expect(container).toBeTruthy()
+        await waitFor(() =>
+          expect(container.getByTestId('submission-comment-header-line')).toBeTruthy()
+        )
+      })
+
       it('should not render reply option', async () => {
         const container = setup({
           isSubmissionCommentsType: true,

ui/features/inbox/util/utils.js

@@ -83,6 +83,7 @@ export const inboxConversationsWrapper = (data, isSubmissionComments = false) =>
 export const inboxMessagesWrapper = (data, isSubmissionComments = false) => {
   const inboxMessages = []
   let contextName = ''
+  const submissionCommentURL = `/courses/${data?.commentsConnection?.nodes[0]?.course._id}/assignments/${data?.commentsConnection?.nodes[0]?.assignment._id}/submissions/${data?.user?._id}`
   if (data) {
     const messages = isSubmissionComments
       ? data?.commentsConnection?.nodes
@@ -115,7 +116,7 @@ export const inboxMessagesWrapper = (data, isSubmissionComments = false) => {
       inboxMessages.push(inboxMessage)
     })
   }
-  return {inboxMessages, contextName}
+  return {inboxMessages, contextName, submissionCommentURL}
 }
 
 const getSubmissionCommentsParticipantString = messages => {