Use AlertBanner for coder version notice

mafredri · mafredri · commit e1373c7293f3 · 2022-11-29T11:40:19.000Z
diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx
@@ -18,7 +18,8 @@ import { AlertBannerCtas } from "./AlertBannerCtas"
  * @param dismissible: determines whether or not the banner should have a `Dismiss` CTA
  * @param retry: a handler to retry the action that spawned the error
  */
-export const AlertBanner: FC<AlertBannerProps> = ({
+export const AlertBanner: FC<React.PropsWithChildren<AlertBannerProps>> = ({
+  children,
   severity,
   text,
   error,
@@ -55,6 +56,7 @@ export const AlertBanner: FC<AlertBannerProps> = ({
         <Stack direction="row" alignItems="center" spacing={1}>
           {severityConstants[severity].icon}
           <Stack spacing={0}>
+            {children}
             {alertMessage}
             {detail && (
               <Expander expanded={showDetails} setExpanded={setShowDetails}>
diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
@@ -6,6 +6,7 @@ import { XServiceContext } from "../../xServices/StateContext"
 import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
 import { RequireAuth } from "../RequireAuth/RequireAuth"
+import { UpdateCheckBanner } from "components/UpdateCheckBanner/UpdateCheckBanner"
 
 interface AuthAndFrameProps {
   children: JSX.Element
@@ -18,11 +19,13 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
   const styles = useStyles()
   const xServices = useContext(XServiceContext)
   const [buildInfoState] = useActor(xServices.buildInfoXService)
+  const [updateCheckState] = useActor(xServices.updateCheckXService)
 
   return (
     <RequireAuth>
       <div className={styles.site}>
         <Navbar />
+        <UpdateCheckBanner updateCheck={updateCheckState.context.updateCheck} />
         <div className={styles.siteContent}>
           <Suspense fallback={<Loader />}>{children}</Suspense>
         </div>
diff --git a/site/src/components/UpdateCheckBanner/UpdateCheckBanner.tsx b/site/src/components/UpdateCheckBanner/UpdateCheckBanner.tsx
@@ -0,0 +1,45 @@
+import Link from "@material-ui/core/Link"
+import { makeStyles } from "@material-ui/core/styles"
+import { AlertBanner } from "components/AlertBanner/AlertBanner"
+import { Margins } from "components/Margins/Margins"
+import { Trans, useTranslation } from "react-i18next"
+import * as TypesGen from "../../api/typesGenerated"
+
+export interface UpdateCheckBannerProps {
+  updateCheck?: TypesGen.UpdateCheckResponse
+}
+
+export const UpdateCheckBanner: React.FC<
+  React.PropsWithChildren<UpdateCheckBannerProps>
+> = ({ updateCheck }) => {
+  const styles = useStyles({})
+  const { t } = useTranslation("common")
+
+  return (
+    <div className={styles.root}>
+      {updateCheck && !updateCheck.current && (
+        <Margins>
+          <AlertBanner severity="info" text="" dismissible>
+            <div>
+              <Trans t={t} i18nKey="updateCheck.message">
+                Coder {updateCheck.version} is now available. View the{" "}
+                <Link href={updateCheck.url}>release notes</Link> and{" "}
+                <Link href="https://coder.com/docs/coder-oss/latest/admin/upgrade">
+                  upgrade instructions
+                </Link>{" "}
+                for more information.
+              </Trans>
+            </div>
+          </AlertBanner>
+        </Margins>
+      )}
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    // Common spacing between elements, adds separation from Navbar.
+    paddingTop: theme.spacing(2),
+  },
+}))
diff --git a/site/src/i18n/en/common.json b/site/src/i18n/en/common.json
@@ -35,5 +35,8 @@
   },
   "emojiPicker": {
     "select": "Select emoji"
+  },
+  "updateCheck": {
+    "message": "Coder {updateCheck.version} is now available. View the <4>release notes</4> and <7>upgrade instructions</7> for more information."
   }
 }
diff --git a/site/src/xServices/updateCheck/updateCheckXService.ts b/site/src/xServices/updateCheck/updateCheckXService.ts
@@ -1,7 +1,6 @@
 import { assign, createMachine } from "xstate"
-import * as API from "../../api/api"
-import * as TypesGen from "../../api/typesGenerated"
-import { displayMsg } from "../../components/GlobalSnackbar/utils"
+import * as API from "api/api"
+import * as TypesGen from "api/typesGenerated"
 
 export const Language = {
   updateAvailable: "New version available",
@@ -42,11 +41,7 @@ export const updateCheckMachine = createMachine(
           id: "getUpdateCheck",
           onDone: [
             {
-              actions: [
-                "assignUpdateCheck",
-                "clearGetUpdateCheckError",
-                "notifyUpdateAvailable",
-              ],
+              actions: ["assignUpdateCheck", "clearGetUpdateCheckError"],
               target: "#updateCheckState.success",
             },
           ],
@@ -85,19 +80,6 @@ export const updateCheckMachine = createMachine(
         ...context,
         getUpdateCheckError: undefined,
       })),
-      notifyUpdateAvailable: (context: UpdateCheckContext) => {
-        if (context.updateCheck && !context.updateCheck.current) {
-          // TODO(mafredri): HTML formatting, persistance?
-          displayMsg(
-            Language.updateAvailable,
-            Language.updateAvailableMessage(
-              context.updateCheck.version,
-              context.updateCheck.url,
-              "https://coder.com/docs/coder-oss/latest/admin/upgrade",
-            ),
-          )
-        }
-      },
     },
   },
 )

Original file line number	Diff line number	Diff line change
`@@ -35,5 +35,8 @@`
`35`	`35`	`},`
`36`	`36`	`"emojiPicker": {`
`37`	`37`	`"select": "Select emoji"`
	`38`	`+ },`
	`39`	`+ "updateCheck": {`
	`40`	`+ "message": "Coder {updateCheck.version} is now available. View the <4>release notes</4> and <7>upgrade instructions</7> for more information."`
`38`	`41`	`}`
`39`	`42`	`}`