Add contact_support on update status page

app/pages/system/UpdatePage.tsx

@@ -8,6 +8,7 @@
 
 import { differenceInMinutes } from 'date-fns'
 import { useMemo } from 'react'
+import { Link } from 'react-router'
 import * as R from 'remeda'
 import { lt as semverLt } from 'semver'
 
@@ -38,6 +39,7 @@ import { CardBlock } from '~/ui/lib/CardBlock'
 import { DateTime } from '~/ui/lib/DateTime'
 import { Divider } from '~/ui/lib/Divider'
 import * as DropdownMenu from '~/ui/lib/DropdownMenu'
+import { Message } from '~/ui/lib/Message'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { TipIcon } from '~/ui/lib/TipIcon'
@@ -193,6 +195,26 @@ export default function UpdatePage() {
         </PropertiesTable.Row>
       </PropertiesTable>
 
+      {status.contactSupport && (
+        <Message
+          className="mt-4"
+          variant="notice"
+          title="Support required"
+          content={
+            <>
+              The system has detected one or more known conditions that require Oxide
+              support to resolve. Contact support (
+              <Link to="mailto:support@oxide.computer">support@oxide.computer</Link>) before
+              starting any update, and immediately if an update has recently completed.
+            </>
+          }
+          cta={{
+            text: 'Contact Support',
+            link: 'mailto:support@oxide.computer',
+          }}
+        />
+      )}
+
       <Divider className="my-8" />
 
       <CardBlock>

app/ui/lib/Message.tsx

@@ -10,8 +10,8 @@ import type { ReactElement, ReactNode } from 'react'
 import { Link, type To } from 'react-router'
 
 import {
+  DirectionRightIcon,
   Error12Icon,
-  OpenLink12Icon,
   Success12Icon,
   Warning12Icon,
 } from '@oxide/design-system/icons/react'
@@ -21,6 +21,7 @@ type Variant = 'success' | 'error' | 'notice' | 'info'
 export interface MessageProps {
   title?: string
   content: ReactNode
+  append?: ReactNode
   className?: string
   variant?: Variant
   cta?: {
@@ -48,6 +49,7 @@ export const Message = ({
   title,
   // TODO: convert content to a children prop
   content,
+  append,
   className,
   variant = 'info',
   cta,
@@ -70,19 +72,21 @@ export const Message = ({
       <div className="flex-1">
         {title && <div className="text-sans-semi-md">{title}</div>}
         {/* group gives HL the right color */}
-        <div className="text-sans-md text-accent-secondary [&>a]:tint-underline group">
+        <div className="text-sans-md text-accent-secondary [&>a]:tint-underline group max-w-3xl">
           {content}
         </div>
 
         {cta && (
           <Link
-            className="text-sans-md text-accent-secondary hover:text-accent mt-1 flex items-center underline"
+            className="text-mono-xs text-accent group mt-3 flex items-center gap-2"
             to={cta.link}
           >
             {cta.text}
-            <OpenLink12Icon className="ml-1" />
+            <DirectionRightIcon className="translate-x-0 transition-transform group-hover:translate-x-0.5" />
           </Link>
         )}
+
+        {append}
       </div>
     </div>
   )

mock-api/system-update.ts

@@ -36,7 +36,7 @@ export const updateStatus: Json<UpdateStatus> = {
     '17.0.0': 12,
     '16.0.0': 5,
   },
-  contact_support: false,
+  contact_support: true,
   suspended: false,
   target_release: {
     version: '17.0.0',