Redesigned report header (#381)

Author: davidjgoss

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Changed
 - Inherit font-size instead of setting at 14px ([#377](https://github.com/cucumber/react-components/pull/377))
+- Redesigned report header block ([#381](https://github.com/cucumber/react-components/pull/381))
 - BREAKING CHANGE: Remove props from `<StatusesSummary/>`, `<ExecutionSummary/>` and `<SearchBar/>` components, use contexts for state ([#374](https://github.com/cucumber/react-components/pull/374))
 
 ### Removed

package-lock.json

@@ -40,7 +40,7 @@ describe('ciCommitLink(ci)', () => {
         name: 'SuperCI',
       }
 
-      expect(ciCommitLink(ci)).to.eq(null)
+      expect(ciCommitLink(ci)).to.eq(undefined)
     })
   })
 })

src/ciCommitLink.spec.ts

@@ -1,14 +1,14 @@
-import * as messages from '@cucumber/messages'
+import { Ci } from '@cucumber/messages'
 
 import toRepositoryId from './toRepositoryId.js'
 
-export default function ciCommitLink(ci: messages.Ci): string | null {
+// TODO move upstream to create-meta
+export default function ciCommitLink(ci: Ci): string | undefined {
   if (ci.git && ci.git.remote) {
     const repositoryId = toRepositoryId(ci.git.remote)
     const github = repositoryId.startsWith('github.com') || ci.name === 'GitHub Actions'
     if (ci.git.revision && github) {
       return `https://${repositoryId}/commit/${ci.git.revision}`
     }
   }
-  return null
 }

src/ciCommitLink.ts

@@ -1,28 +1,34 @@
-import * as messages from '@cucumber/messages'
-import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { Ci } from '@cucumber/messages'
+import { faCodeCommit } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React from 'react'
+import React, { FC } from 'react'
 
 import ciCommitLink from '../../ciCommitLink.js'
 
-interface IProps {
-  ci: messages.Ci
-}
+export const CICommitLink: FC<{
+  ci: Ci
+}> = ({ ci }) => {
+  if (!ci.git) {
+    return null
+  }
 
-export const CICommitLink: React.FunctionComponent<IProps> = ({ ci: ci }) => {
+  const shortHash = ci.git.revision.substring(0, 7)
   const commitLink = ciCommitLink(ci)
 
-  if (commitLink && ci.git?.remote) {
+  if (commitLink) {
     return (
       <>
-        <FontAwesomeIcon icon={faLink} />
-        Git Ref <a href={commitLink}>{ci.git.revision.substring(0, 7)}</a>
+        <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faCodeCommit} />
+        <a href={commitLink} target="_blank" rel="noreferrer">
+          <code>{shortHash}</code>
+        </a>
       </>
     )
   }
   return (
     <>
-      <FontAwesomeIcon icon={faLink} /> Git Ref {ci.git?.revision.substring(0, 7)}
+      <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faCodeCommit} />
+      <code>{shortHash}</code>
     </>
   )
 }

src/components/app/CICommitLink.tsx

@@ -1,20 +1,25 @@
-import * as messages from '@cucumber/messages'
-import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { Ci } from '@cucumber/messages'
+import { faServer } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React from 'react'
+import React, { FC } from 'react'
 
-interface IProps {
-  ci: messages.Ci
-}
-
-export const CIJobLink: React.FunctionComponent<IProps> = ({ ci: ci }) => {
-  if (ci.url && ci.buildNumber) {
+export const CIJobLink: FC<{
+  ci: Ci
+}> = ({ ci }) => {
+  if (ci.url) {
     return (
       <>
-        <FontAwesomeIcon icon={faLink} />
-        Job <a href={ci.url}> {ci.buildNumber}</a>
+        <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faServer} />
+        <a href={ci.url} target="_blank" rel="noreferrer">
+          {ci.name}
+        </a>
       </>
     )
   }
-  return <></>
+  return (
+    <>
+      <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faServer} />
+      <span>{ci.name}</span>
+    </>
+  )
 }

src/components/app/CIJobLink.tsx

@@ -0,0 +1,14 @@
+@import '../../styles/theming';
+
+.button {
+  background-color: transparent;
+  font-size: inherit;
+  padding: 0;
+  border: none;
+  color: $anchorColor;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: unset;
+  }
+}

src/components/app/CopyButton.module.scss

@@ -0,0 +1,35 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { expect } from 'chai'
+import React from 'react'
+import sinon from 'sinon'
+
+import { CopyButton } from './CopyButton.js'
+
+describe('<CopyButton/>', () => {
+  const originalClipboard = navigator.clipboard
+
+  before(() => {
+    // @ts-expect-error overriding navigator.clipboard
+    navigator.clipboard = {
+      writeText: sinon.stub().resolves(),
+    }
+  })
+
+  after(() => {
+    // @ts-expect-error overriding navigator.clipboard
+    navigator.clipboard = originalClipboard
+  })
+
+  it('should copy text to clipboard, then disable and show checkmark', async () => {
+    render(<CopyButton text="test text" />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Copy' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Copied' })).to.be.visible
+      expect(screen.getByRole('button', { name: 'Copied' })).to.have.property('disabled', true)
+      expect(navigator.clipboard.writeText).to.have.been.calledOnceWithExactly('test text')
+    })
+  })
+})

src/components/app/CopyButton.spec.tsx

@@ -0,0 +1,34 @@
+import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { FC, useState } from 'react'
+
+import styles from './CopyButton.module.scss'
+
+export const CopyButton: FC<{ text: string }> = ({ text }) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        setCopied(true)
+        setTimeout(() => {
+          setCopied(false)
+        }, 3000)
+      })
+      .catch((err) => {
+        console.error('Failed to copy', err)
+      })
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      aria-label={copied ? 'Copied' : 'Copy'}
+      disabled={copied}
+      className={styles.button}
+    >
+      <FontAwesomeIcon icon={copied ? faCheck : faCopy} />
+    </button>
+  )
+}

src/components/app/CopyButton.tsx

@@ -1,60 +1,5 @@
 @import '../../styles/theming';
 
-.backdrop {
-  background-color: $panelAccentColor;
-  border: 1px solid transparent;
-}
-
-.list {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: 1fr 1fr;
-  gap: 1px;
-  margin: 0;
-  text-align: center;
-}
-
-.item {
-  grid-column-end: span 4;
-  display: flex;
-  flex-direction: column-reverse;
-  justify-content: center;
-  padding: 1.5em;
-  background-color: $backgroundColor;
-  color: $textColor;
-
-  &Ci,
-  &Ci ~ & {
-    grid-column-end: span 3;
-  }
-}
-
-.value {
-  font-weight: bold;
-  font-size: 1.25em;
-  margin: 0;
-
-  svg {
-    display: inline-block;
-    max-width: 2em;
-  }
-}
-
-.suffix {
-  font-size: 1em;
-  margin-top: 0.25em;
+.conjunction {
   color: $codeTextColor;
 }
-
-.gitItem {
-  display: inline-flex;
-  gap: 0.25em;
-
-  & + & {
-    margin-left: 1em;
-  }
-
-  a {
-    color: $anchorColor;
-  }
-}