Expand regex to match attributes with single quotes

src/Components/IssueControl.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {render, screen} from '@testing-library/react'
 import {MockRoutes} from '../BaseRoutesMock.test'
-import {IssuesNavBar, Issues} from './IssuesControl'
+import {IssuesNavBar, Issues, extractImageFromIssue} from './IssuesControl'
 import {act, renderHook} from '@testing-library/react-hooks'
 import useStore from '../store/useStore'
 
@@ -107,3 +107,33 @@ test('Issues ', () => {
 })
 
 
+describe('extractImageFromIssue', () => {
+  test('null issue', () => {
+    const issue = null
+    expect(extractImageFromIssue(issue)).toEqual('')
+  })
+
+  test('null issue body', () => {
+    const issue = {
+      body: null,
+    }
+    expect(extractImageFromIssue(issue)).toEqual('')
+  })
+
+  test('issue body without image URL header + trailer', () => {
+    const issue = {
+      body: 'http://testing.dev/an/image.png',
+    }
+    expect(extractImageFromIssue(issue)).toEqual('')
+  })
+
+  test('issue body with valid image URL', () => {
+    const issue = {
+      // eslint-disable-next-line max-len
+      body: 'Test Issue body\r\n\r\n<img width=\'475\' alt=\'image\' src=\'https://user-images.githubusercontent.com/3433606/171650424-c9fa4450-684d-4f6c-8657-d80245116a5b.png\'>\r\n\r\nimageURL\r\nhttps://user-images.githubusercontent.com/3433606/171650424-c9fa4450-684d-4f6c-8657-d80245116a5b.png\r\nimageURL\r\n\r\ncamera=#c:-29.47,18.53,111.13,-30.27,20.97,-10.06\r\n\r\n\r\nurl = http://localhost:8080/share/v/p/index.ifc#c:-26.91,28.84,112.47,-22,16.21,-3.48',
+    }
+
+    const expectedImageURL = 'https://user-images.githubusercontent.com/3433606/171650424-c9fa4450-684d-4f6c-8657-d80245116a5b.png'
+    expect(extractImageFromIssue(issue)).toEqual(expectedImageURL)
+  })
+})

src/Components/IssuesControl.jsx

@@ -17,7 +17,6 @@ import {TooltipIconButton} from './Buttons'
 import {removeHashParams} from '../utils/location'
 import {setCameraFromEncodedPosition, addCameraUrlParams, removeCameraUrlParams} from './CameraControl'
 import {addHashParams} from '../utils/location'
-import {isRunningLocally} from '../utils/network'
 
 
 /** The prefix to use for issue id in the Url hash. */
@@ -109,6 +108,25 @@ export function IssuesNavBar() {
   )
 }
 
+/**
+ * Extracts the image URL from the issue body, if present
+ * @param {Object} issue
+ * @return {string} Issue image URL
+ */
+export const extractImageFromIssue = (issue) => {
+  if (issue === null || issue.body === null || !issue.body.includes('img')) {
+    return ''
+  }
+
+  const isolateImageSrc = issue.body.split('src')[1].split('imageURL')[0]
+
+  // Match either single or double quote-wrapped attribute
+  //   <img src = "..." /> OR <img src = '...' />
+  const imageSrc = isolateImageSrc.match(/"([^"]*)"|'([^']*)'/)
+
+  // Then filter out the non-matched capture group (as that value will be undefined)
+  return imageSrc.slice(1).filter((u) => u !== undefined)[0]
+}
 
 /**
  * @return {Object} list of issues and comments
@@ -127,20 +145,13 @@ export function Issues() {
       try {
         const issues = await getIssues()
         const issuesArr = []
-        let imageUrl = ''
 
         issues.data.map((issue, index) => {
           const lines = issue.body.split('\r\n')
           const embeddedUrl = lines.filter((line) => line.includes('url'))[0]
           const body = lines[0]
+          const imageUrl = extractImageFromIssue(issue)
 
-          if (issue.body.includes('img')) {
-            const isolateImageSrc = issue.body.split('src')[1].split('imageURL')[0]
-            const imageSrc = isolateImageSrc.match(/"([^"]*)"/)
-            imageUrl = isRunningLocally() ? imageUrl = isolateImageSrc : imageSrc[1]
-          } else {
-            imageUrl = ''
-          }
           const constructedIssueObj = {
             embeddedUrl: embeddedUrl,
             index: index,