Address review comments

ammario · ammario · commit 51809d75c4d8 · 2022-12-06T00:19:09.000Z
diff --git a/site/src/components/ServiceBanner/ServiceBannerView.tsx b/site/src/components/ServiceBanner/ServiceBannerView.tsx
@@ -77,9 +77,11 @@ const useStyles = makeStyles((theme) => ({
 }))
 
 const readableForegroundColor = (backgroundColor: string): string => {
-  const [_, __, lum] = hex.hsl(backgroundColor)
-  if (lum > 50) {
-    return "black"
-  }
-  return "white"
+  const rgb = hex.rgb(backgroundColor)
+
+  // Logic taken from here:
+  // https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/color.js#L56
+  // to be consistent with the color-picker label.
+  const yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
+  return yiq >= 128 ? "#000" : "#fff"
 }
diff --git a/site/src/pages/DeploySettingsPage/ServiceBannerSettingsPage.tsx b/site/src/pages/DeploySettingsPage/ServiceBannerSettingsPage.tsx
@@ -25,13 +25,6 @@ import { useTheme } from "@material-ui/core/styles"
 import FormHelperText from "@material-ui/core/FormHelperText"
 import Button from "@material-ui/core/Button"
 
-export const Language = {
-  messageLabel: "Message",
-  backgroundColorLabel: "Background Color",
-  updateBanner: "Update",
-  previewBanner: "Preview",
-}
-
 export interface ServiceBannerFormValues {
   message?: string
   backgroundColor?: string
@@ -109,7 +102,7 @@ const ServiceBannerSettingsPage: React.FC = () => {
       <Header
         title="Service Banner"
         description="Configure a banner that displays a message to all users"
-        docsHref="https://coder.com/docs/coder-oss/latest/admin/high-availability#service-banners"
+        docsHref="https://coder.com/docs/coder-oss/latest/admin/service-banners"
       />
       <Badges>
         {isEntitled ? <EntitledBadge /> : <DisabledBadge />}
@@ -122,7 +115,6 @@ const ServiceBannerSettingsPage: React.FC = () => {
             <FormControlLabel
               control={
                 <Switch
-                  {...getFieldHelpers("enabled")}
                   color="primary"
                   checked={form.values.enabled}
                   onChange={() => {
@@ -142,7 +134,7 @@ const ServiceBannerSettingsPage: React.FC = () => {
               <TextField
                 {...getFieldHelpers("message")}
                 fullWidth
-                label={Language.messageLabel}
+                label="Message"
                 variant="outlined"
                 multiline
                 onChange={(e) => {
@@ -162,7 +154,7 @@ const ServiceBannerSettingsPage: React.FC = () => {
             </Stack>
 
             <Stack spacing={0}>
-              <h3>Background Color</h3>
+              <h3>{"Background Color"}</h3>
               <BlockPicker
                 color={backgroundColor}
                 onChange={(color) => {
@@ -197,14 +189,8 @@ const ServiceBannerSettingsPage: React.FC = () => {
             </Stack>
 
             <Stack direction="row">
-              <LoadingButton
-                loading={false}
-                //   aria-disabled={!editable}
-                //   disabled={!editable}
-                type="submit"
-                variant="contained"
-              >
-                {Language.updateBanner}
+              <LoadingButton loading={false} type="submit" variant="contained">
+                {"Update"}
               </LoadingButton>
             </Stack>
           </Stack>
diff --git a/site/src/xServices/serviceBanner/serviceBannerXService.ts b/site/src/xServices/serviceBanner/serviceBannerXService.ts
@@ -1,3 +1,4 @@
+import { displaySuccess } from "components/GlobalSnackbar/utils"
 import { assign, createMachine } from "xstate"
 import * as API from "../../api/api"
 import { ServiceBanner } from "../../api/typesGenerated"
@@ -87,7 +88,7 @@ export const serviceBannerMachine = createMachine(
           src: "setBanner",
           onDone: {
             target: "idle",
-            actions: ["assignBanner"],
+            actions: ["assignBanner", "notifyUpdateBannerSuccess"],
           },
           onError: {
             target: "idle",
@@ -105,6 +106,9 @@ export const serviceBannerMachine = createMachine(
         // to find a way to do that that doesn't generate type errors.
         preview: (_, __) => true,
       }),
+      notifyUpdateBannerSuccess: () => {
+        displaySuccess("Successfully updated Service Banner!")
+      },
       assignBanner: assign({
         serviceBanner: (_, event) => event.data as ServiceBanner,
         preview: (_, __) => false,
