diff --git a/app/pages/system/UpdatePage.tsx b/app/pages/system/UpdatePage.tsx index 4fd9ca524..bf2753aae 100644 --- a/app/pages/system/UpdatePage.tsx +++ b/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() { + {status.contactSupport && ( + + The system has detected one or more known conditions that require Oxide + support to resolve. Contact support ( + support@oxide.computer) before + starting any update, and immediately if an update has recently completed. + + } + cta={{ + text: 'Contact Support', + link: 'mailto:support@oxide.computer', + }} + /> + )} + diff --git a/app/ui/lib/Message.tsx b/app/ui/lib/Message.tsx index 4c5f50e0c..4aefc4169 100644 --- a/app/ui/lib/Message.tsx +++ b/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 = ({
{title &&
{title}
} {/* group gives HL the right color */} -
+
{content}
{cta && ( {cta.text} - + )} + + {append}
) diff --git a/mock-api/system-update.ts b/mock-api/system-update.ts index 5285352ef..fd127164a 100644 --- a/mock-api/system-update.ts +++ b/mock-api/system-update.ts @@ -36,7 +36,7 @@ export const updateStatus: Json = { '17.0.0': 12, '16.0.0': 5, }, - contact_support: false, + contact_support: true, suspended: false, target_release: { version: '17.0.0',