Add hash icon and tweak update meta

Author: benjaminleonard

app/pages/system/UpdatePage.tsx

@@ -6,15 +6,13 @@
  * Copyright Oxide Computer Company
  */
 
-import { useMemo } from 'react'
+import { useMemo, type SVGProps } from 'react'
 import * as R from 'remeda'
 
 import {
   Images24Icon,
-  SizeOutline12Icon,
   SoftwareUpdate16Icon,
   SoftwareUpdate24Icon,
-  TimeOutline12Icon,
 } from '@oxide/design-system/icons/react'
 import { Badge } from '@oxide/design-system/ui'
 
@@ -179,9 +177,9 @@ export default function UpdatePage() {
               return (
                 <li
                   key={repo.hash}
-                  className="border-default @container flex items-center gap-3 rounded border pl-4"
+                  className="border-default @container flex items-center gap-2 rounded border pl-4"
                 >
-                  <Images24Icon className="text-tertiary shrink-0" aria-hidden />
+                  <Images24Icon className="text-quaternary shrink-0" aria-hidden />
                   <div className="flex min-w-0 flex-1 flex-col flex-wrap items-start gap-x-4 gap-y-1 py-3 @md:flex-row @md:items-center">
                     <div className="flex-1">
                       <div className="flex items-center gap-1.5">
@@ -191,14 +189,18 @@ export default function UpdatePage() {
                         {isTarget && <Badge color="default">Target</Badge>}
                       </div>
                     </div>
-                    <div className="flex flex-col items-start gap-0.5 @md:items-end">
-                      <div className="flex items-center gap-1.5">
-                        <DateTime date={repo.timeCreated} />
-                        <TimeOutline12Icon className="text-quaternary" aria-hidden />
-                      </div>
-                      <div className="flex items-center gap-1.5">
-                        <div>{repo.fileName}</div>
-                        <SizeOutline12Icon className="text-quaternary" aria-hidden />
+                    <div className="flex flex-col items-start gap-0.5 pr-2 @md:items-end">
+                      <DateTime date={repo.timeCreated} />
+                      <div className="flex items-center gap-0.5">
+                        <HashIcon className="text-quaternary" aria-hidden />
+                        <a
+                          href={`https://github.com/oxidecomputer/omicron/commits/${repo.hash}`}
+                          className="link-with-underline text-default"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {repo.hash.substring(0, 7)}
+                        </a>
                       </div>
                     </div>
                   </div>
@@ -242,3 +244,19 @@ export default function UpdatePage() {
     </>
   )
 }
+
+const HashIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8.8338 0.967163L9.16681 1.03357C9.34546 1.06923 9.46113 1.24262 9.4256 1.42126L9.00958 3.50037H10.1707C10.3529 3.5005 10.5008 3.64827 10.5008 3.83044V4.17029C10.5008 4.35245 10.3528 4.50023 10.1707 4.50037H8.81036L8.20978 7.50037H9.17072C9.35285 7.5005 9.50079 7.64827 9.50079 7.83044V8.17029C9.50079 8.35245 9.35285 8.50023 9.17072 8.50037H8.01056L7.55548 10.7748C7.51965 10.9533 7.34537 11.0691 7.16681 11.0336L6.8338 10.9672C6.65508 10.9314 6.53926 10.7572 6.57501 10.5785L6.99103 8.50037H4.01056L3.55548 10.7748C3.51965 10.9533 3.34537 11.0691 3.16681 11.0336L2.8338 10.9672C2.65508 10.9314 2.53926 10.7572 2.57501 10.5785L2.99103 8.50037H1.83087C1.64862 8.50037 1.5008 8.35254 1.50079 8.17029V7.83044C1.50079 7.64819 1.64862 7.50037 1.83087 7.50037H3.19025L3.79083 4.50037H2.83087C2.64862 4.50037 2.5008 4.35254 2.50079 4.17029V3.83044C2.50079 3.64819 2.64862 3.50037 2.83087 3.50037H3.99005L4.44513 1.22595C4.48085 1.04733 4.65516 0.931576 4.8338 0.967163L5.16681 1.03357C5.34546 1.06923 5.46113 1.24262 5.4256 1.42126L5.00958 3.50037H7.99005L8.44513 1.22595C8.48085 1.04733 8.65516 0.931576 8.8338 0.967163ZM4.81036 4.50037L4.20978 7.50037H7.19025L7.79083 4.50037H4.81036Z"
+      fill="currentColor"
+    />
+  </svg>
+)

mock-api/system-update.ts

@@ -13,19 +13,19 @@ export const tufRepos: Json<TufRepo>[] = [
   {
     system_version: '18.0.0',
     file_name: 'rack-18.0.0.zip',
-    hash: 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6',
+    hash: '163acd11ef5b14aac27d04b2080393826e832714',
     time_created: new Date('2024-03-15T14:30:00Z').toISOString(),
   },
   {
     system_version: '17.0.0',
     file_name: 'rack-17.0.0.zip',
-    hash: '7d793037a0760186574b0282f2f435e7',
+    hash: '6510e87da6a6078509836e8faa27dc20272b472e',
     time_created: new Date('2024-02-20T14:30:00Z').toISOString(),
   },
   {
     system_version: '16.0.0',
     file_name: 'rack-16.0.0.zip',
-    hash: '5d41402abc4b2a76b9719d911017c592',
+    hash: '58f95ded7eed49fd30659035c5c16b5bb9e63a76',
     time_created: new Date('2024-01-15T10:00:00Z').toISOString(),
   },
 ]