Skip to content

Commit c546602

Browse files
ammarioammario
committed
Support unentitled flow
1 parent 35b41e7 commit c546602

File tree

1 file changed

+113
-87
lines changed

1 file changed

+113
-87
lines changed

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

Lines changed: 113 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import Switch from "@material-ui/core/Switch"
2323
import { BlockPicker } from "react-color"
2424
import { useTheme } from "@material-ui/core/styles"
2525
import FormHelperText from "@material-ui/core/FormHelperText"
26+
import { Button } from "@material-ui/core"
2627

2728
export const Language = {
2829
messageLabel: "Message",
@@ -107,105 +108,130 @@ const ServiceBannerSettingsPage: React.FC = () => {
107108

108109
<Header
109110
title="Service Banner"
110-
description="Configure the Service Banner"
111+
description="Configure a banner that displays a message to all users"
111112
docsHref="https://coder.com/docs/coder-oss/latest/admin/high-availability#service-banners"
112113
/>
113114
<Badges>
114115
{isEntitled ? <EntitledBadge /> : <DisabledBadge />}
115116
<EnterpriseBadge />
116117
</Badges>
117118

118-
<form className={styles.form} onSubmit={form.handleSubmit}>
119-
<Stack>
120-
<FormControlLabel
121-
control={
122-
<Switch
123-
{...getFieldHelpers("enabled")}
124-
color="primary"
125-
checked={form.values.enabled}
126-
onChange={() => {
127-
const newState = !form.values.enabled
128-
const newBanner = {
129-
...form.values,
130-
enabled: newState,
131-
}
132-
setBanner(newBanner, false)
133-
form.setFieldValue("enabled", newState)
119+
{isEntitled ? (
120+
<form className={styles.form} onSubmit={form.handleSubmit}>
121+
<Stack>
122+
<FormControlLabel
123+
control={
124+
<Switch
125+
{...getFieldHelpers("enabled")}
126+
color="primary"
127+
checked={form.values.enabled}
128+
onChange={() => {
129+
const newState = !form.values.enabled
130+
const newBanner = {
131+
...form.values,
132+
enabled: newState,
133+
}
134+
setBanner(newBanner, false)
135+
form.setFieldValue("enabled", newState)
136+
}}
137+
/>
138+
}
139+
label="Enabled"
140+
/>
141+
<Stack spacing={0}>
142+
<TextField
143+
{...getFieldHelpers("message")}
144+
fullWidth
145+
label={Language.messageLabel}
146+
variant="outlined"
147+
multiline
148+
onChange={(e) => {
149+
form.setFieldValue("message", e.target.value)
150+
setBanner(
151+
{
152+
...form.values,
153+
message: e.target.value,
154+
},
155+
true,
156+
)
134157
}}
135158
/>
136-
}
137-
label="Enabled"
138-
/>
139-
<Stack spacing={0}>
140-
<TextField
141-
{...getFieldHelpers("message")}
142-
fullWidth
143-
label={Language.messageLabel}
144-
variant="outlined"
145-
onChange={(e) => {
146-
form.setFieldValue("message", e.target.value)
147-
setBanner(
148-
{
149-
...form.values,
150-
message: e.target.value,
159+
<FormHelperText>
160+
Markdown bold, italics, and links are supported.
161+
</FormHelperText>
162+
</Stack>
163+
164+
<Stack spacing={0}>
165+
<h3>Background Color</h3>
166+
<BlockPicker
167+
color={backgroundColor}
168+
onChange={(color) => {
169+
setBackgroundColor(color.hex)
170+
form.setFieldValue("backgroundColor", color.hex)
171+
setBanner(
172+
{
173+
...form.values,
174+
backgroundColor: color.hex,
175+
},
176+
true,
177+
)
178+
}}
179+
triangle="hide"
180+
colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#5A00CF"]}
181+
styles={{
182+
default: {
183+
input: {
184+
color: "white",
185+
backgroundColor: theme.palette.background.default,
186+
},
187+
body: {
188+
backgroundColor: "black",
189+
color: "white",
190+
},
191+
card: {
192+
backgroundColor: "black",
193+
},
151194
},
152-
true,
153-
)
154-
}}
155-
/>
156-
<FormHelperText>
157-
Markdown bold, italics, and links are supported.
158-
</FormHelperText>
195+
}}
196+
/>
197+
</Stack>
198+
199+
<Stack direction="row">
200+
<LoadingButton
201+
loading={false}
202+
// aria-disabled={!editable}
203+
// disabled={!editable}
204+
type="submit"
205+
variant="contained"
206+
>
207+
{Language.updateBanner}
208+
</LoadingButton>
209+
</Stack>
159210
</Stack>
160-
161-
<Stack spacing={0}>
162-
<h3>Background Color</h3>
163-
<BlockPicker
164-
color={backgroundColor}
165-
onChange={(color) => {
166-
setBackgroundColor(color.hex)
167-
form.setFieldValue("backgroundColor", color.hex)
168-
setBanner(
169-
{
170-
...form.values,
171-
backgroundColor: color.hex,
172-
},
173-
true,
174-
)
175-
}}
176-
triangle="hide"
177-
colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#00BDD6"]}
178-
styles={{
179-
default: {
180-
input: {
181-
color: "white",
182-
backgroundColor: theme.palette.background.default,
183-
},
184-
body: {
185-
backgroundColor: "black",
186-
color: "white",
187-
},
188-
card: {
189-
backgroundColor: "black",
190-
},
211+
</form>
212+
) : (
213+
<>
214+
<p>
215+
Your license does not include Service Banners.{" "}
216+
<a href="mailto:sales@coder.com">Contact sales</a> to learn more.
217+
</p>
218+
<Button
219+
onClick={() => {
220+
setBanner(
221+
{
222+
message:
223+
"👋 **This** is a service banner. The banner's color and text is editable.",
224+
backgroundColor: "#004852",
225+
enabled: true,
191226
},
192-
}}
193-
/>
194-
</Stack>
195-
196-
<Stack direction="row">
197-
<LoadingButton
198-
loading={false}
199-
// aria-disabled={!editable}
200-
// disabled={!editable}
201-
type="submit"
202-
variant="contained"
203-
>
204-
{Language.updateBanner}
205-
</LoadingButton>
206-
</Stack>
207-
</Stack>
208-
</form>
227+
true,
228+
)
229+
}}
230+
>
231+
Show Preview
232+
</Button>
233+
</>
234+
)}
209235
</>
210236
)
211237
}

0 commit comments

Comments
 (0)