fix(site): set default color and display error on appearance form (#9004)

site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

@@ -21,6 +21,7 @@ import { Stack } from "components/Stack/Stack"
 import { useFormik } from "formik"
 import { useTheme } from "@mui/styles"
 import Link from "@mui/material/Link"
+import { colors } from "theme/colors"
 
 export type AppearanceSettingsPageViewProps = {
   appearance: UpdateAppearanceConfig
@@ -53,7 +54,8 @@ export const AppearanceSettingsPageView = ({
       initialValues: {
         message: appearance.service_banner.message,
         enabled: appearance.service_banner.enabled,
-        background_color: appearance.service_banner.background_color,
+        background_color:
+          appearance.service_banner.background_color ?? colors.blue[7],
       },
       onSubmit: (values) =>
         updateAppearance(

site/src/xServices/appearance/appearanceXService.ts

@@ -1,12 +1,12 @@
-import { displaySuccess } from "components/GlobalSnackbar/utils"
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"
 import { assign, createMachine } from "xstate"
 import * as API from "../../api/api"
 import { AppearanceConfig } from "../../api/typesGenerated"
+import { getErrorMessage } from "api/errors"
 
 export type AppearanceContext = {
   appearance?: AppearanceConfig
   getAppearanceError?: unknown
-  setAppearanceError?: unknown
   preview: boolean
 }
 
@@ -39,11 +39,7 @@ export const appearanceMachine = createMachine(
       idle: {
         on: {
           SET_PREVIEW_APPEARANCE: {
-            actions: [
-              "clearGetAppearanceError",
-              "clearSetAppearanceError",
-              "assignPreviewAppearance",
-            ],
+            actions: ["clearGetAppearanceError", "assignPreviewAppearance"],
           },
           SAVE_APPEARANCE: "savingAppearance",
         },
@@ -64,7 +60,6 @@ export const appearanceMachine = createMachine(
         },
       },
       savingAppearance: {
-        entry: "clearSetAppearanceError",
         invoke: {
           id: "setAppearance",
           src: "setAppearance",
@@ -74,7 +69,11 @@ export const appearanceMachine = createMachine(
           },
           onError: {
             target: "idle",
-            actions: ["assignSetAppearanceError"],
+            actions: (_, error) => {
+              displayError(
+                getErrorMessage(error, "Failed to update appearance settings."),
+              )
+            },
           },
         },
       },
@@ -99,12 +98,6 @@ export const appearanceMachine = createMachine(
       clearGetAppearanceError: assign({
         getAppearanceError: (_) => undefined,
       }),
-      assignSetAppearanceError: assign({
-        setAppearanceError: (_, event) => event.data,
-      }),
-      clearSetAppearanceError: assign({
-        setAppearanceError: (_) => undefined,
-      }),
     },
     services: {
       getAppearance: async () => {