Pretty up form

coder · ammario · Dec 6, 2022 · Dec 2, 2022 · Dec 2, 2022 · Dec 3, 2022
commit 290a31d5361cbedd1777fdf1a035e31f537d462f
diff --git a/enterprise/coderd/servicebanner.go b/enterprise/coderd/servicebanner.go
@@ -2,11 +2,14 @@ package coderd
 
 import (
 	"database/sql"
+	"encoding/hex"
 	"encoding/json"
 	"errors"
 	"fmt"
 	"net/http"
 
+	"golang.org/x/xerrors"
+
 	"github.com/coder/coder/coderd/httpapi"
 	"github.com/coder/coder/coderd/rbac"
 	"github.com/coder/coder/codersdk"
@@ -53,6 +56,17 @@ func (api *API) serviceBanner(rw http.ResponseWriter, r *http.Request) {
 	httpapi.Write(r.Context(), rw, http.StatusOK, serviceBanner)
 }
 
+func validateHexColor(color string) error {
+	if len(color) != 7 {
+		return xerrors.New("expected 7 characters")
+	}
+	if color[0] != '#' {
+		return xerrors.New("no # prefix")
+	}
+	_, err := hex.DecodeString(color[1:])
+	return err
+}
+
 func (api *API) putServiceBanner(rw http.ResponseWriter, r *http.Request) {
 	ctx := r.Context()
 
@@ -68,6 +82,13 @@ func (api *API) putServiceBanner(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	if err := validateHexColor(serviceBanner.BackgroundColor); err != nil {
+		httpapi.Write(ctx, rw, http.StatusBadRequest, codersdk.Response{
+			Message: fmt.Sprintf("parse color: %+v", err),
+		})
+		return
+	}
+
 	serviceBannerJSON, err := json.Marshal(serviceBanner)
 	if err != nil {
 		httpapi.Write(ctx, rw, http.StatusBadRequest, codersdk.Response{

diff --git a/enterprise/coderd/servicebanner_test.go b/enterprise/coderd/servicebanner_test.go
@@ -52,9 +52,15 @@ func TestServiceBanners(t *testing.T) {
 	wantBanner := sb
 	wantBanner.Enabled = true
 	wantBanner.Message = "Hey"
+	wantBanner.BackgroundColor = "#00FF00"
 	err = adminClient.SetServiceBanner(ctx, wantBanner)
 	require.NoError(t, err)
 	gotBanner, err := adminClient.ServiceBanner(ctx)
 	require.NoError(t, err)
 	require.Equal(t, wantBanner, gotBanner)
+
+	// But even an admin can't give a bad color
+	wantBanner.BackgroundColor = "#bad color"
+	err = adminClient.SetServiceBanner(ctx, wantBanner)
+	require.Error(t, err)
 }
diff --git a/site/package.json b/site/package.json
@@ -33,6 +33,7 @@
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.42",
     "@testing-library/react-hooks": "8.0.1",
+    "@types/color-convert": "^2.0.0",
     "@types/react-color": "^3.0.6",
     "@vitejs/plugin-react": "2.1.0",
     "@xstate/inspect": "0.6.5",
@@ -41,6 +42,7 @@
     "can-ndjson-stream": "1.0.2",
     "chart.js": "3.9.1",
     "chartjs-adapter-date-fns": "2.0.0",
+    "color-convert": "^2.0.1",
     "cron-parser": "4.7.0",
     "cronstrue": "2.14.0",
     "date-fns": "2.29.3",

diff --git a/site/src/components/ServiceBanner/ServiceBannerView.tsx b/site/src/components/ServiceBanner/ServiceBannerView.tsx
@@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { Pill } from "components/Pill/Pill"
 import ReactMarkdown from "react-markdown"
 import { colors } from "theme/colors"
+import { hex } from "color-convert"
 
 export interface ServiceBannerViewProps {
   message: string
@@ -15,21 +16,31 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
   preview,
 }) => {
   const styles = useStyles()
+  // We don't want anything funky like an image or a heading in the service
+  // banner.
   const markdownElementsAllowed = [
     "text",
     "a",
+    "pre",
+    "ul",
     "strong",
-    "delete",
     "emphasis",
+    "italic",
     "link",
+    "em",
   ]
   return (
     <div
       className={`${styles.container}`}
       style={{ backgroundColor: backgroundColor }}
     >
-      {preview && <Pill text="Preview" type="primary" lightBorder />}
-      <div className={styles.centerContent}>
+      {preview && <Pill text="Preview" type="info" lightBorder />}
+      <div
+        className={styles.centerContent}
+        style={{
+          color: readableForegroundColor(backgroundColor),
+        }}
+      >
         <ReactMarkdown
           allowedElements={markdownElementsAllowed}
           linkTarget="_blank"
@@ -48,7 +59,6 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.warning.main,
     display: "flex",
     alignItems: "center",
-
     "&.error": {
       backgroundColor: colors.red[12],
     },
@@ -59,21 +69,14 @@ const useStyles = makeStyles((theme) => ({
   centerContent: {
     marginRight: "auto",
     marginLeft: "auto",
-    // Automatically pick high-contrast foreground text.
-    // "difference" is the most correct way of implementing this
-    // but "exclusion" looks prettier for most colors.
-    mixBlendMode: "exclusion",
-  },
-  link: {
-    color: "inherit",
-    textDecoration: "none",
-    fontWeight: "bold",
-  },
-  list: {
-    padding: theme.spacing(1),
-    margin: 0,
-  },
-  listItem: {
-    margin: theme.spacing(0.5),
+    fontWeight: 400,
   },
 }))
+
+const readableForegroundColor = (backgroundColor: string): string => {
+  const [_, __, lum] = hex.hsl(backgroundColor)
+  if (lum > 50) {
+    return "black"
+  }
+  return "white"
+}
diff --git a/site/src/pages/DeploySettingsPage/ServiceBannerSettingsPage.tsx b/site/src/pages/DeploySettingsPage/ServiceBannerSettingsPage.tsx
@@ -22,8 +22,7 @@ import FormControlLabel from "@material-ui/core/FormControlLabel"
 import Switch from "@material-ui/core/Switch"
 import { BlockPicker } from "react-color"
 import { useTheme } from "@material-ui/core/styles"
-
-import { colors } from "theme/colors"
+import FormHelperText from "@material-ui/core/FormHelperText"
 
 export const Language = {
   messageLabel: "Message",
@@ -36,7 +35,6 @@ export interface ServiceBannerFormValues {
   message?: string
   backgroundColor?: string
   enabled?: boolean
-  preview: boolean
 }
 
 // TODO:
@@ -62,13 +60,13 @@ const ServiceBannerSettingsPage: React.FC = () => {
     entitlementsState.context.entitlements.features[FeatureNames.ServiceBanners]
       .entitlement !== "not_entitled"
 
-  const onSubmit = (values: ServiceBannerFormValues) => {
+  const setBanner = (values: ServiceBannerFormValues, preview: boolean) => {
     const newBanner = {
       message: values.message,
       enabled: true,
       background_color: values.backgroundColor,
     }
-    if (values.preview) {
+    if (preview) {
       serviceBannerSend({
         type: "SET_PREVIEW_BANNER",
         serviceBanner: newBanner,
@@ -85,14 +83,13 @@ const ServiceBannerSettingsPage: React.FC = () => {
     message: serviceBanner.message,
     enabled: serviceBanner.enabled,
     backgroundColor: serviceBanner.background_color,
-    preview: false,
   }
 
   const form: FormikContextType<ServiceBannerFormValues> =
     useFormik<ServiceBannerFormValues>({
       initialValues,
       validationSchema,
-      onSubmit,
+      onSubmit: (values) => setBanner(values, false),
     })
   const getFieldHelpers = getFormHelpers<ServiceBannerFormValues>(form)
 
@@ -125,14 +122,19 @@ const ServiceBannerSettingsPage: React.FC = () => {
             control={<Switch {...getFieldHelpers("enabled")} color="primary" />}
             label="Enabled"
           />
-          <TextField
-            fullWidth
-            {...getFieldHelpers("message")}
-            label={Language.messageLabel}
-            variant="outlined"
-          />
+          <Stack spacing={0}>
+            <TextField
+              fullWidth
+              {...getFieldHelpers("message")}
+              label={Language.messageLabel}
+              variant="outlined"
+            />
+            <FormHelperText>
+              Markdown bold, italics, and links are supported.
+            </FormHelperText>
+          </Stack>
 
-          <Stack>
+          <Stack spacing={0}>
             <h3>Background Color</h3>
             <BlockPicker
               color={backgroundColor}
@@ -141,6 +143,7 @@ const ServiceBannerSettingsPage: React.FC = () => {
                 form.setFieldValue("backgroundColor", color.hex)
               }}
               triangle="hide"
+              colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#00BDD6"]}
               styles={{
                 default: {
                   input: {
@@ -151,6 +154,9 @@ const ServiceBannerSettingsPage: React.FC = () => {
                     backgroundColor: "black",
                     color: "white",
                   },
+                  card: {
+                    backgroundColor: "black",
+                  },
                 },
               }}
             />
@@ -162,8 +168,7 @@ const ServiceBannerSettingsPage: React.FC = () => {
               //   aria-disabled={!editable}
               //   disabled={!editable}
               onClick={() => {
-                form.setFieldValue("preview", true)
-                onSubmit(form.values)
+                setBanner(form.values, true)
               }}
               variant="contained"
             >
@@ -174,8 +179,7 @@ const ServiceBannerSettingsPage: React.FC = () => {
               //   aria-disabled={!editable}
               //   disabled={!editable}
               onClick={() => {
-                form.setFieldValue("preview", false)
-                onSubmit(form.values)
+                setBanner(form.values, false)
               }}
               variant="contained"
             >
@@ -187,6 +191,7 @@ const ServiceBannerSettingsPage: React.FC = () => {
     </>
   )
 }
+
 const useStyles = makeStyles(() => ({
   form: {
     maxWidth: "500px",

diff --git a/site/yarn.lock b/site/yarn.lock
@@ -2902,6 +2902,18 @@
     "@types/connect" "*"
     "@types/node" "*"
 
+"@types/color-convert@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.0.tgz#8f5ee6b9e863dcbee5703f5a517ffb13d3ea4e22"
+  integrity sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
 "@types/connect@*":
   version "3.4.35"
   resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"