Add login link to error message in fileviewer (#3377)

src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.jsx

@@ -24,6 +24,20 @@ function ErrorDisplayMessage() {
     <p className="border border-solid border-ds-gray-tertiary p-4">
       There was a problem getting the source code from your provider. Unable to
       show line by line coverage.
+      <br />
+      <span>
+        If you continue to experience this issue, please try{' '}
+        <A
+          to={{
+            pageName: 'login',
+          }}
+          hook={undefined}
+          isExternal={undefined}
+        >
+          logging in
+        </A>{' '}
+        again to refresh your credentials.
+      </span>
     </p>
   )
 }

src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.test.jsx

@@ -338,5 +338,13 @@ describe('CommitFileDiff', () => {
       )
       expect(criticalFile).toBeInTheDocument()
     })
+
+    it('renders a login link', async () => {
+      render(<CommitFileDiff path={'random/path'} />, { wrapper })
+
+      const link = await screen.findByText(/logging in/)
+      expect(link).toBeVisible()
+      expect(link).toHaveAttribute('href', '/login')
+    })
   })
 })

src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.jsx

@@ -26,6 +26,20 @@ function ErrorDisplayMessage() {
     <p className="border border-solid border-ds-gray-tertiary p-4">
       There was a problem getting the source code from your provider. Unable to
       show line by line coverage.
+      <br />
+      <span>
+        If you continue to experience this issue, please try{' '}
+        <A
+          to={{
+            pageName: 'login',
+          }}
+          hook={undefined}
+          isExternal={undefined}
+        >
+          logging in
+        </A>{' '}
+        again to refresh your credentials.
+      </span>
     </p>
   )
 }

src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.test.jsx

@@ -346,6 +346,14 @@ describe('CommitFileDiff', () => {
       )
       expect(criticalFile).toBeInTheDocument()
     })
+
+    it('renders a login link', async () => {
+      render(<CommitFileDiff path={'random/path'} />, { wrapper })
+
+      const link = await screen.findByText(/logging in/)
+      expect(link).toBeVisible()
+      expect(link).toHaveAttribute('href', '/login')
+    })
   })
 
   describe('code renderer', () => {

src/shared/RawFileViewer/RawFileViewer.test.tsx

@@ -432,6 +432,16 @@ describe('RawFileViewer', () => {
       )
       expect(errorMessage).toBeInTheDocument()
     })
+
+    it('renders a login link', async () => {
+      render(
+        <RawFileViewer title="The FileViewer" commit="cool-commit-sha" />,
+        { wrapper: wrapper() }
+      )
+      const link = await screen.findByText(/logging in/)
+      expect(link).toBeVisible()
+      expect(link).toHaveAttribute('href', '/login')
+    })
   })
 
   describe('displaying unsupported file', () => {

src/shared/RawFileViewer/RawFileViewer.tsx

@@ -11,6 +11,7 @@ import { useFlags } from 'shared/featureFlags'
 import { CODE_RENDERER_TYPE } from 'shared/utils/fileviewer'
 import { unsupportedExtensionsMapper } from 'shared/utils/unsupportedExtensionsMapper'
 import { getFilenameFromFilePath } from 'shared/utils/url'
+import A from 'ui/A'
 import CodeRenderer from 'ui/CodeRenderer'
 import CodeRendererProgressHeader from 'ui/CodeRenderer/CodeRendererProgressHeader'
 import CriticalFileLabel from 'ui/CodeRenderer/CriticalFileLabel'
@@ -21,12 +22,24 @@ import { VirtualFileRenderer } from 'ui/VirtualFileRenderer'
 
 function ErrorDisplayMessage() {
   return (
-    <div className="border border-solid border-ds-gray-tertiary p-4">
-      <p>
-        There was a problem getting the source code from your provider. Unable
-        to show line by line coverage.
-      </p>
-    </div>
+    <p className="border border-solid border-ds-gray-tertiary p-4">
+      There was a problem getting the source code from your provider. Unable to
+      show line by line coverage.
+      <br />
+      <span>
+        If you continue to experience this issue, please try{' '}
+        <A
+          to={{
+            pageName: 'login',
+          }}
+          hook={undefined}
+          isExternal={undefined}
+        >
+          logging in
+        </A>{' '}
+        again to refresh your credentials.
+      </span>
+    </p>
   )
 }