Begin integrating color picker

coder · ammario · Dec 6, 2022 · Dec 2, 2022 · Dec 2, 2022 · Dec 3, 2022
commit d3a4485a57e73949072d04d196f81a64414d8bdf
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/react-color": "^3.0.6",
     "@vitejs/plugin-react": "2.1.0",
     "@xstate/inspect": "0.6.5",
     "@xstate/react": "3.0.1",
@@ -54,6 +55,7 @@
     "just-debounce-it": "3.1.1",
     "react": "18.2.0",
     "react-chartjs-2": "4.3.1",
+    "react-color": "^2.19.3",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-i18next": "12.0.0",

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -668,3 +668,10 @@ export const getServiceBanner = async (): Promise<TypesGen.ServiceBanner> => {
   const response = await axios.get(`/api/v2/service-banner`)
   return response.data
 }
+
+export const setServiceBanner = async (
+  b: TypesGen.ServiceBanner,
+): Promise<TypesGen.ServiceBanner> => {
+  const response = await axios.put(`/api/v2/service-banner`, b)
+  return response.data
+}
diff --git a/site/src/pages/DeploySettingsPage/ServiceBannerSettingsPage.tsx b/site/src/pages/DeploySettingsPage/ServiceBannerSettingsPage.tsx
@@ -4,15 +4,14 @@ import { FeatureNames } from "api/types"
 import {
   Badges,
   DisabledBadge,
-  EnabledBadge,
   EnterpriseBadge,
   EntitledBadge,
 } from "components/DeploySettingsLayout/Badges"
 import { Header } from "components/DeploySettingsLayout/Header"
 import { LoadingButton } from "components/LoadingButton/LoadingButton"
 import { Stack } from "components/Stack/Stack"
 import { FormikContextType, useFormik } from "formik"
-import React, { useContext } from "react"
+import React, { useContext, useState } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import * as Yup from "yup"
@@ -21,17 +20,23 @@ import { getFormHelpers } from "util/formUtils"
 import makeStyles from "@material-ui/core/styles/makeStyles"
 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"
 
 export const Language = {
   messageLabel: "Message",
   backgroundColorLabel: "Background Color",
   updateBanner: "Update",
+  previewBanner: "Preview",
 }
 
 export interface ServiceBannerFormValues {
   message?: string
   backgroundColor?: string
   enabled?: boolean
+  preview: boolean
 }
 
 // TODO:
@@ -59,20 +64,19 @@ const ServiceBannerSettingsPage: React.FC = () => {
 
   const onSubmit = (values: ServiceBannerFormValues) => {
     const newBanner = {
-      ...serviceBanner,
-    }
-    if (values.message !== undefined) {
-      newBanner.message = values.message
+      message: values.message,
+      enabled: true,
+      background_color: values.backgroundColor,
     }
-    if (values.enabled !== undefined) {
-      newBanner.enabled = values.enabled
+    if (values.preview) {
+      serviceBannerSend({
+        type: "SET_PREVIEW_BANNER",
+        serviceBanner: newBanner,
+      })
+      return
     }
-    if (values.backgroundColor !== undefined) {
-      newBanner.background_color = values.backgroundColor
-    }
-
     serviceBannerSend({
-      type: "SET_PREVIEW",
+      type: "SET_BANNER",
       serviceBanner: newBanner,
     })
   }
@@ -81,6 +85,7 @@ const ServiceBannerSettingsPage: React.FC = () => {
     message: serviceBanner.message,
     enabled: serviceBanner.enabled,
     backgroundColor: serviceBanner.background_color,
+    preview: false,
   }
 
   const form: FormikContextType<ServiceBannerFormValues> =
@@ -91,6 +96,12 @@ const ServiceBannerSettingsPage: React.FC = () => {
     })
   const getFieldHelpers = getFormHelpers<ServiceBannerFormValues>(form)
 
+  const [backgroundColor, setBackgroundColor] = useState(
+    form.values.backgroundColor,
+  )
+
+  const theme = useTheme()
+
   return (
     <>
       <Helmet>
@@ -107,16 +118,12 @@ const ServiceBannerSettingsPage: React.FC = () => {
         <EnterpriseBadge />
       </Badges>
 
-      <form
-        className={styles.form}
-        onSubmit={form.handleSubmit}
-        // onChange={form.handleSubmit}
-      >
+      <form className={styles.form}>
         <Stack>
           <FormControlLabel
-            value="enable"
+            value="enabled"
             control={<Switch {...getFieldHelpers("enabled")} color="primary" />}
-            label="Enable"
+            label="Enabled"
           />
           <TextField
             fullWidth
@@ -125,15 +132,56 @@ const ServiceBannerSettingsPage: React.FC = () => {
             variant="outlined"
           />
 
-          <LoadingButton
-            loading={false}
-            //   aria-disabled={!editable}
-            //   disabled={!editable}
-            type="submit"
-            variant="contained"
-          >
-            {Language.updateBanner}
-          </LoadingButton>
+          <Stack>
+            <h3>Background Color</h3>
+            <BlockPicker
+              color={backgroundColor}
+              onChange={(color) => {
+                setBackgroundColor(color.hex)
+                form.setFieldValue("backgroundColor", color.hex)
+              }}
+              triangle="hide"
+              styles={{
+                default: {
+                  input: {
+                    color: "white",
+                    backgroundColor: theme.palette.background.default,
+                  },
+                  body: {
+                    backgroundColor: "black",
+                    color: "white",
+                  },
+                },
+              }}
+            />
+          </Stack>
+
+          <Stack direction="row">
+            <LoadingButton
+              loading={false}
+              //   aria-disabled={!editable}
+              //   disabled={!editable}
+              onClick={() => {
+                form.setFieldValue("preview", true)
+                onSubmit(form.values)
+              }}
+              variant="contained"
+            >
+              {Language.previewBanner}
+            </LoadingButton>
+            <LoadingButton
+              loading={false}
+              //   aria-disabled={!editable}
+              //   disabled={!editable}
+              onClick={() => {
+                form.setFieldValue("preview", false)
+                onSubmit(form.values)
+              }}
+              variant="contained"
+            >
+              {Language.updateBanner}
+            </LoadingButton>
+          </Stack>
         </Stack>
       </form>
     </>

diff --git a/site/src/xServices/serviceBanner/serviceBannerXService.ts b/site/src/xServices/serviceBanner/serviceBannerXService.ts
@@ -4,19 +4,22 @@ import { ServiceBanner } from "../../api/typesGenerated"
 
 export const Language = {
   getServiceBannerError: "Error getting service banner.",
+  setServiceBannerError: "Error setting service banner.",
 }
 
 export type ServiceBannerContext = {
   serviceBanner: ServiceBanner
   getServiceBannerError?: Error | unknown
+  setServiceBannerError?: Error | unknown
   preview: boolean
 }
 
 export type ServiceBannerEvent =
   | {
       type: "GET_BANNER"
     }
-  | { type: "SET_PREVIEW"; serviceBanner: ServiceBanner }
+  | { type: "SET_PREVIEW_BANNER"; serviceBanner: ServiceBanner }
+  | { type: "SET_BANNER"; serviceBanner: ServiceBanner }
 
 const emptyBanner = {
   enabled: false,
@@ -34,6 +37,9 @@ export const serviceBannerMachine = createMachine(
         getServiceBanner: {
           data: {} as ServiceBanner,
         },
+        setServiceBanner: {
+          data: {},
+        },
       },
     },
     context: {
@@ -45,7 +51,8 @@ export const serviceBannerMachine = createMachine(
       idle: {
         on: {
           GET_BANNER: "gettingBanner",
-          SET_PREVIEW: "settingPreview",
+          SET_PREVIEW_BANNER: "settingPreviewBanner",
+          SET_BANNER: "settingBanner",
         },
       },
       gettingBanner: {
@@ -63,12 +70,30 @@ export const serviceBannerMachine = createMachine(
           },
         },
       },
-      settingPreview: {
-        entry: ["clearGetBannerError", "assignPreviewBanner"],
+      settingPreviewBanner: {
+        entry: [
+          "clearGetBannerError",
+          "clearSetBannerError",
+          "assignPreviewBanner",
+        ],
         always: {
           target: "idle",
         },
       },
+      settingBanner: {
+        entry: "clearSetBannerError",
+        invoke: {
+          id: "setBanner",
+          src: "setBanner",
+          onDone: {
+            target: "gettingBanner",
+          },
+          onError: {
+            target: "idle",
+            actions: ["assignSetBannerError"],
+          },
+        },
+      },
     },
   },
   {
@@ -81,16 +106,24 @@ export const serviceBannerMachine = createMachine(
       }),
       assignBanner: assign({
         serviceBanner: (_, event) => event.data as ServiceBanner,
+        preview: (_, __) => false,
       }),
       assignGetBannerError: assign({
         getServiceBannerError: (_, event) => event.data,
       }),
       clearGetBannerError: assign({
         getServiceBannerError: (_) => undefined,
       }),
+      assignSetBannerError: assign({
+        setServiceBannerError: (_, event) => event.data,
+      }),
+      clearSetBannerError: assign({
+        setServiceBannerError: (_) => undefined,
+      }),
     },
     services: {
       getBanner: API.getServiceBanner,
+      setBanner: (_, event) => API.setServiceBanner(event.serviceBanner),
     },
   },
 )