Skip to content

Commit d3a4485

Browse files
ammarioammario
committed
Begin integrating color picker
1 parent afd8fb9 commit d3a4485

File tree

5 files changed

+176
-36
lines changed

5 files changed

+176
-36
lines changed

‎site/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"@material-ui/icons": "4.5.1",
3434
"@material-ui/lab": "4.0.0-alpha.42",
3535
"@testing-library/react-hooks": "8.0.1",
36+
"@types/react-color": "^3.0.6",
3637
"@vitejs/plugin-react": "2.1.0",
3738
"@xstate/inspect": "0.6.5",
3839
"@xstate/react": "3.0.1",
@@ -54,6 +55,7 @@
5455
"just-debounce-it": "3.1.1",
5556
"react": "18.2.0",
5657
"react-chartjs-2": "4.3.1",
58+
"react-color": "^2.19.3",
5759
"react-dom": "18.2.0",
5860
"react-helmet-async": "1.3.0",
5961
"react-i18next": "12.0.0",

‎site/src/api/api.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -668,3 +668,10 @@ export const getServiceBanner = async (): Promise<TypesGen.ServiceBanner> => {
668668
const response = await axios.get(`/api/v2/service-banner`)
669669
return response.data
670670
}
671+
672+
export const setServiceBanner = async (
673+
b: TypesGen.ServiceBanner,
674+
): Promise<TypesGen.ServiceBanner> => {
675+
const response = await axios.put(`/api/v2/service-banner`, b)
676+
return response.data
677+
}

‎site/src/pages/DeploySettingsPage/ServiceBannerSettingsPage.tsx

Lines changed: 77 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import { FeatureNames } from "api/types"
44
import {
55
Badges,
66
DisabledBadge,
7-
EnabledBadge,
87
EnterpriseBadge,
98
EntitledBadge,
109
} from "components/DeploySettingsLayout/Badges"
1110
import { Header } from "components/DeploySettingsLayout/Header"
1211
import { LoadingButton } from "components/LoadingButton/LoadingButton"
1312
import { Stack } from "components/Stack/Stack"
1413
import { FormikContextType, useFormik } from "formik"
15-
import React, { useContext } from "react"
14+
import React, { useContext, useState } from "react"
1615
import { Helmet } from "react-helmet-async"
1716
import { pageTitle } from "util/page"
1817
import * as Yup from "yup"
@@ -21,17 +20,23 @@ import { getFormHelpers } from "util/formUtils"
2120
import makeStyles from "@material-ui/core/styles/makeStyles"
2221
import FormControlLabel from "@material-ui/core/FormControlLabel"
2322
import Switch from "@material-ui/core/Switch"
23+
import { BlockPicker } from "react-color"
24+
import { useTheme } from "@material-ui/core/styles"
25+
26+
import { colors } from "theme/colors"
2427

2528
export const Language = {
2629
messageLabel: "Message",
2730
backgroundColorLabel: "Background Color",
2831
updateBanner: "Update",
32+
previewBanner: "Preview",
2933
}
3034

3135
export interface ServiceBannerFormValues {
3236
message?: string
3337
backgroundColor?: string
3438
enabled?: boolean
39+
preview: boolean
3540
}
3641

3742
// TODO:
@@ -59,20 +64,19 @@ const ServiceBannerSettingsPage: React.FC = () => {
5964

6065
const onSubmit = (values: ServiceBannerFormValues) => {
6166
const newBanner = {
62-
...serviceBanner,
63-
}
64-
if (values.message !== undefined) {
65-
newBanner.message = values.message
67+
message: values.message,
68+
enabled: true,
69+
background_color: values.backgroundColor,
6670
}
67-
if (values.enabled !== undefined) {
68-
newBanner.enabled = values.enabled
71+
if (values.preview) {
72+
serviceBannerSend({
73+
type: "SET_PREVIEW_BANNER",
74+
serviceBanner: newBanner,
75+
})
76+
return
6977
}
70-
if (values.backgroundColor !== undefined) {
71-
newBanner.background_color = values.backgroundColor
72-
}
73-
7478
serviceBannerSend({
75-
type: "SET_PREVIEW",
79+
type: "SET_BANNER",
7680
serviceBanner: newBanner,
7781
})
7882
}
@@ -81,6 +85,7 @@ const ServiceBannerSettingsPage: React.FC = () => {
8185
message: serviceBanner.message,
8286
enabled: serviceBanner.enabled,
8387
backgroundColor: serviceBanner.background_color,
88+
preview: false,
8489
}
8590

8691
const form: FormikContextType<ServiceBannerFormValues> =
@@ -91,6 +96,12 @@ const ServiceBannerSettingsPage: React.FC = () => {
9196
})
9297
const getFieldHelpers = getFormHelpers<ServiceBannerFormValues>(form)
9398

99+
const [backgroundColor, setBackgroundColor] = useState(
100+
form.values.backgroundColor,
101+
)
102+
103+
const theme = useTheme()
104+
94105
return (
95106
<>
96107
<Helmet>
@@ -107,16 +118,12 @@ const ServiceBannerSettingsPage: React.FC = () => {
107118
<EnterpriseBadge />
108119
</Badges>
109120

110-
<form
111-
className={styles.form}
112-
onSubmit={form.handleSubmit}
113-
// onChange={form.handleSubmit}
114-
>
121+
<form className={styles.form}>
115122
<Stack>
116123
<FormControlLabel
117-
value="enable"
124+
value="enabled"
118125
control={<Switch {...getFieldHelpers("enabled")} color="primary" />}
119-
label="Enable"
126+
label="Enabled"
120127
/>
121128
<TextField
122129
fullWidth
@@ -125,15 +132,56 @@ const ServiceBannerSettingsPage: React.FC = () => {
125132
variant="outlined"
126133
/>
127134

128-
<LoadingButton
129-
loading={false}
130-
// aria-disabled={!editable}
131-
// disabled={!editable}
132-
type="submit"
133-
variant="contained"
134-
>
135-
{Language.updateBanner}
136-
</LoadingButton>
135+
<Stack>
136+
<h3>Background Color</h3>
137+
<BlockPicker
138+
color={backgroundColor}
139+
onChange={(color) => {
140+
setBackgroundColor(color.hex)
141+
form.setFieldValue("backgroundColor", color.hex)
142+
}}
143+
triangle="hide"
144+
styles={{
145+
default: {
146+
input: {
147+
color: "white",
148+
backgroundColor: theme.palette.background.default,
149+
},
150+
body: {
151+
backgroundColor: "black",
152+
color: "white",
153+
},
154+
},
155+
}}
156+
/>
157+
</Stack>
158+
159+
<Stack direction="row">
160+
<LoadingButton
161+
loading={false}
162+
// aria-disabled={!editable}
163+
// disabled={!editable}
164+
onClick={() => {
165+
form.setFieldValue("preview", true)
166+
onSubmit(form.values)
167+
}}
168+
variant="contained"
169+
>
170+
{Language.previewBanner}
171+
</LoadingButton>
172+
<LoadingButton
173+
loading={false}
174+
// aria-disabled={!editable}
175+
// disabled={!editable}
176+
onClick={() => {
177+
form.setFieldValue("preview", false)
178+
onSubmit(form.values)
179+
}}
180+
variant="contained"
181+
>
182+
{Language.updateBanner}
183+
</LoadingButton>
184+
</Stack>
137185
</Stack>
138186
</form>
139187
</>

‎site/src/xServices/serviceBanner/serviceBannerXService.ts

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,22 @@ import { ServiceBanner } from "../../api/typesGenerated"
44

55
export const Language = {
66
getServiceBannerError: "Error getting service banner.",
7+
setServiceBannerError: "Error setting service banner.",
78
}
89

910
export type ServiceBannerContext = {
1011
serviceBanner: ServiceBanner
1112
getServiceBannerError?: Error | unknown
13+
setServiceBannerError?: Error | unknown
1214
preview: boolean
1315
}
1416

1517
export type ServiceBannerEvent =
1618
| {
1719
type: "GET_BANNER"
1820
}
19-
| { type: "SET_PREVIEW"; serviceBanner: ServiceBanner }
21+
| { type: "SET_PREVIEW_BANNER"; serviceBanner: ServiceBanner }
22+
| { type: "SET_BANNER"; serviceBanner: ServiceBanner }
2023

2124
const emptyBanner = {
2225
enabled: false,
@@ -34,6 +37,9 @@ export const serviceBannerMachine = createMachine(
3437
getServiceBanner: {
3538
data: {} as ServiceBanner,
3639
},
40+
setServiceBanner: {
41+
data: {},
42+
},
3743
},
3844
},
3945
context: {
@@ -45,7 +51,8 @@ export const serviceBannerMachine = createMachine(
4551
idle: {
4652
on: {
4753
GET_BANNER: "gettingBanner",
48-
SET_PREVIEW: "settingPreview",
54+
SET_PREVIEW_BANNER: "settingPreviewBanner",
55+
SET_BANNER: "settingBanner",
4956
},
5057
},
5158
gettingBanner: {
@@ -63,12 +70,30 @@ export const serviceBannerMachine = createMachine(
6370
},
6471
},
6572
},
66-
settingPreview: {
67-
entry: ["clearGetBannerError", "assignPreviewBanner"],
73+
settingPreviewBanner: {
74+
entry: [
75+
"clearGetBannerError",
76+
"clearSetBannerError",
77+
"assignPreviewBanner",
78+
],
6879
always: {
6980
target: "idle",
7081
},
7182
},
83+
settingBanner: {
84+
entry: "clearSetBannerError",
85+
invoke: {
86+
id: "setBanner",
87+
src: "setBanner",
88+
onDone: {
89+
target: "gettingBanner",
90+
},
91+
onError: {
92+
target: "idle",
93+
actions: ["assignSetBannerError"],
94+
},
95+
},
96+
},
7297
},
7398
},
7499
{
@@ -81,16 +106,24 @@ export const serviceBannerMachine = createMachine(
81106
}),
82107
assignBanner: assign({
83108
serviceBanner: (_, event) => event.data as ServiceBanner,
109+
preview: (_, __) => false,
84110
}),
85111
assignGetBannerError: assign({
86112
getServiceBannerError: (_, event) => event.data,
87113
}),
88114
clearGetBannerError: assign({
89115
getServiceBannerError: (_) => undefined,
90116
}),
117+
assignSetBannerError: assign({
118+
setServiceBannerError: (_, event) => event.data,
119+
}),
120+
clearSetBannerError: assign({
121+
setServiceBannerError: (_) => undefined,
122+
}),
91123
},
92124
services: {
93125
getBanner: API.getServiceBanner,
126+
setBanner: (_, event) => API.setServiceBanner(event.serviceBanner),
94127
},
95128
},
96129
)

0 commit comments

Comments
 (0)