Job url (#151)

Author: ludeknovy

src/components/app/CICommitLink.tsx

@@ -16,13 +16,13 @@ export const CICommitLink: React.FunctionComponent<IProps> = ({ ci: ci }) => {
     return (
       <>
         <FontAwesomeIcon icon={faLink} />
-        <a href={commitLink}>{ci.git.revision.substring(0, 7)}</a>
+        Git Ref <a href={commitLink}>{ci.git.revision.substring(0, 7)}</a>
       </>
     )
   }
   return (
     <>
-      <FontAwesomeIcon icon={faLink} /> {ci.git?.revision.substring(0, 7)}
+      <FontAwesomeIcon icon={faLink} /> Git Ref {ci.git?.revision.substring(0, 7)}
     </>
   )
 }

src/components/app/CIJobLink.tsx

@@ -0,0 +1,20 @@
+import * as messages from '@cucumber/messages'
+import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+
+interface IProps {
+  ci: messages.Ci
+}
+
+export const CIJobLink: React.FunctionComponent<IProps> = ({ ci: ci }) => {
+  if (ci.url && ci.buildNumber) {
+    return (
+      <>
+        <FontAwesomeIcon icon={faLink} />
+        Job <a href={ci.url}> {ci.buildNumber}</a>
+      </>
+    )
+  }
+  return <></>
+}

src/components/app/ExecutionSummary.spec.tsx

@@ -128,5 +128,11 @@ describe('ExecutionSummary', () => {
 
       expect(getByText('cucumber-js 8.0.0-rc.1')).toBeVisible()
     })
+    it('should include the job link', () => {
+      const { getByText } = render(<ExecutionSummary {...DEFAULT_PROPS} />)
+      const jobLinkElement = getByText(DEFAULT_PROPS.meta?.ci?.buildNumber as string)
+      expect(jobLinkElement).toBeVisible()
+      expect(jobLinkElement.getAttribute('href')).toEqual(DEFAULT_PROPS.meta?.ci?.url)
+    })
   })
 })

src/components/app/ExecutionSummary.tsx

@@ -11,6 +11,7 @@ import { formatDistanceStrict, formatDuration, intervalToDuration } from 'date-f
 import React from 'react'
 
 import { CICommitLink } from './CICommitLink'
+import { CIJobLink } from './CIJobLink'
 import styles from './ExecutionSummary.module.scss'
 import { CucumberLogo } from './icons/CucumberLogo'
 import { OSIcon } from './OSIcon'
@@ -98,6 +99,9 @@ export const ExecutionSummary: React.FunctionComponent<IExecutionSummaryProps> =
                   <span className={styles.gitItem}>
                     <CICommitLink ci={meta.ci} />
                   </span>
+                  <span className={styles.gitItem}>
+                    <CIJobLink ci={meta.ci} />
+                  </span>
                 </>
               ) : (
                 '-'