chore: add extra runtime validation for colors

Parkreiner · Parkreiner · commit 115813e6f25d · 2023-09-27T15:41:16.000Z
diff --git a/site/src/components/Dashboard/DashboardProvider.tsx b/site/src/components/Dashboard/DashboardProvider.tsx
@@ -10,13 +10,16 @@ import {
 } from "api/typesGenerated";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
 import {
+  type FC,
+  type PropsWithChildren,
   createContext,
-  FC,
-  PropsWithChildren,
+  useCallback,
   useContext,
   useState,
 } from "react";
 import { appearance } from "api/queries/appearance";
+import { hslToHex, isHexColor, isHslColor } from "utils/colors";
+import { displayError } from "components/GlobalSnackbar/utils";
 
 interface Appearance {
   config: AppearanceConfig;
@@ -45,8 +48,35 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
     !entitlementsQuery.data ||
     !appearanceQuery.data ||
     !experimentsQuery.data;
+
   const [configPreview, setConfigPreview] = useState<AppearanceConfig>();
 
+  // Centralizing the logic for catching malformed configs in one spot, just to
+  // be on the safe side; don't want to expose raw setConfigPreview outside
+  // the provider
+  const setPreview = useCallback((newConfig: AppearanceConfig) => {
+    // Have runtime safety nets in place, just because so much of the codebase
+    // relies on HSL for formatting, but server expects hex values. Can't catch
+    // color format mismatches at the type level
+    const incomingBg = newConfig.service_banner.background_color;
+    let configForDispatch = newConfig;
+
+    if (typeof incomingBg === "string" && isHslColor(incomingBg)) {
+      configForDispatch = {
+        ...newConfig,
+        service_banner: {
+          ...newConfig.service_banner,
+          background_color: hslToHex(incomingBg),
+        },
+      };
+    } else if (typeof incomingBg === "string" && !isHexColor(incomingBg)) {
+      displayError(`The value ${incomingBg} is not a valid hex string`);
+      return;
+    }
+
+    setConfigPreview(configForDispatch);
+  }, []);
+
   if (isLoading) {
     return <FullScreenLoader />;
   }
@@ -59,7 +89,7 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
         experiments: experimentsQuery.data,
         appearance: {
           config: configPreview ?? appearanceQuery.data,
-          setPreview: setConfigPreview,
+          setPreview: setPreview,
           isPreview: configPreview !== undefined,
         },
       }}
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
@@ -17,21 +17,17 @@ const AppearanceSettingsPage: FC = () => {
   const { appearance, entitlements } = useDashboard();
   const queryClient = useQueryClient();
   const updateAppearanceMutation = useMutation(updateAppearance(queryClient));
-  const isEntitled =
-    entitlements.features["appearance"].entitlement !== "not_entitled";
 
   const onSaveAppearance = async (
     newConfig: Partial<UpdateAppearanceConfig>,
     preview: boolean,
   ) => {
-    const newAppearance = {
-      ...appearance.config,
-      ...newConfig,
-    };
+    const newAppearance = { ...appearance.config, ...newConfig };
     if (preview) {
       appearance.setPreview(newAppearance);
       return;
     }
+
     try {
       await updateAppearanceMutation.mutateAsync(newAppearance);
       displaySuccess("Successfully updated appearance settings!");
@@ -50,8 +46,10 @@ const AppearanceSettingsPage: FC = () => {
 
       <AppearanceSettingsPageView
         appearance={appearance.config}
-        isEntitled={isEntitled}
         onSaveAppearance={onSaveAppearance}
+        isEntitled={
+          entitlements.features.appearance.entitlement !== "not_entitled"
+        }
       />
     </>
   );
