Skip to content

Add Service Banners #5272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Dec 6, 2022
Merged

Add Service Banners #5272

Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
a83a5e6
Finish rendering
ammario Dec 2, 2022
0a7a030
Begin form work
ammario Dec 2, 2022
ba450b3
Backend WIP
ammario Dec 3, 2022
afd8fb9
Finish backend
ammario Dec 3, 2022
d3a4485
Begin integrating color picker
ammario Dec 3, 2022
290a31d
Pretty up form
ammario Dec 3, 2022
84735e3
Automatic live preview
ammario Dec 3, 2022
35b41e7
Reduce round trip on SET_BANNER
ammario Dec 3, 2022
c546602
Support unentitled flow
ammario Dec 3, 2022
e4255d9
Write storybook
ammario Dec 3, 2022
96a5b70
Add docs
ammario Dec 3, 2022
1ce7d08
docs: add Service Banners to enterprise.md
ammario Dec 3, 2022
e79916a
Remove old comment
ammario Dec 3, 2022
335fdc4
Fix go tests
ammario Dec 3, 2022
8b8cf0a
Merge remote-tracking branch 'origin/main' into service-banners
ammario Dec 3, 2022
51809d7
Address review comments
ammario Dec 6, 2022
e5484d4
Use translations
ammario Dec 6, 2022
2f46ad5
fixup! Use translations
ammario Dec 6, 2022
c28931e
Merge remote-tracking branch 'origin/main' into service-banners
ammario Dec 6, 2022
a49120f
make fmt
ammario Dec 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Support unentitled flow
  • Loading branch information
@ammario
ammario committed Dec 3, 2022
commit c5466027b981b6edfae6dac78202e37ec9fc8f31
200 changes: 113 additions & 87 deletions site/src/pages/DeploySettingsPage/ServiceBannerSettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import Switch from "@material-ui/core/Switch"
import { BlockPicker } from "react-color"
import { useTheme } from "@material-ui/core/styles"
import FormHelperText from "@material-ui/core/FormHelperText"
import { Button } from "@material-ui/core"

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

<Header
title="Service Banner"
description="Configure the Service Banner"
description="Configure a banner that displays a message to all users"
docsHref="https://coder.com/docs/coder-oss/latest/admin/high-availability#service-banners"
/>
<Badges>
{isEntitled ? <EntitledBadge /> : <DisabledBadge />}
<EnterpriseBadge />
</Badges>

<form className={styles.form} onSubmit={form.handleSubmit}>
<Stack>
<FormControlLabel
control={
<Switch
{...getFieldHelpers("enabled")}
color="primary"
checked={form.values.enabled}
onChange={() => {
const newState = !form.values.enabled
const newBanner = {
...form.values,
enabled: newState,
}
setBanner(newBanner, false)
form.setFieldValue("enabled", newState)
{isEntitled ? (
<form className={styles.form} onSubmit={form.handleSubmit}>
<Stack>
<FormControlLabel
control={
<Switch
{...getFieldHelpers("enabled")}
color="primary"
checked={form.values.enabled}
onChange={() => {
const newState = !form.values.enabled
const newBanner = {
...form.values,
enabled: newState,
}
setBanner(newBanner, false)
form.setFieldValue("enabled", newState)
}}
/>
}
label="Enabled"
/>
<Stack spacing={0}>
<TextField
{...getFieldHelpers("message")}
fullWidth
label={Language.messageLabel}
variant="outlined"
multiline
onChange={(e) => {
form.setFieldValue("message", e.target.value)
setBanner(
{
...form.values,
message: e.target.value,
},
true,
)
}}
/>
}
label="Enabled"
/>
<Stack spacing={0}>
<TextField
{...getFieldHelpers("message")}
fullWidth
label={Language.messageLabel}
variant="outlined"
onChange={(e) => {
form.setFieldValue("message", e.target.value)
setBanner(
{
...form.values,
message: e.target.value,
<FormHelperText>
Markdown bold, italics, and links are supported.
</FormHelperText>
</Stack>

<Stack spacing={0}>
<h3>Background Color</h3>
<BlockPicker
color={backgroundColor}
onChange={(color) => {
setBackgroundColor(color.hex)
form.setFieldValue("backgroundColor", color.hex)
setBanner(
{
...form.values,
backgroundColor: color.hex,
},
true,
)
}}
triangle="hide"
colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#5A00CF"]}
styles={{
default: {
input: {
color: "white",
backgroundColor: theme.palette.background.default,
},
body: {
backgroundColor: "black",
color: "white",
},
card: {
backgroundColor: "black",
},
},
true,
)
}}
/>
<FormHelperText>
Markdown bold, italics, and links are supported.
</FormHelperText>
}}
/>
</Stack>

<Stack direction="row">
<LoadingButton
loading={false}
// aria-disabled={!editable}
// disabled={!editable}
type="submit"
variant="contained"
>
{Language.updateBanner}
</LoadingButton>
</Stack>
</Stack>

<Stack spacing={0}>
<h3>Background Color</h3>
<BlockPicker
color={backgroundColor}
onChange={(color) => {
setBackgroundColor(color.hex)
form.setFieldValue("backgroundColor", color.hex)
setBanner(
{
...form.values,
backgroundColor: color.hex,
},
true,
)
}}
triangle="hide"
colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#00BDD6"]}
styles={{
default: {
input: {
color: "white",
backgroundColor: theme.palette.background.default,
},
body: {
backgroundColor: "black",
color: "white",
},
card: {
backgroundColor: "black",
},
</form>
) : (
<>
<p>
Your license does not include Service Banners.{" "}
<a href="mailto:sales@coder.com">Contact sales</a> to learn more.
</p>
<Button
onClick={() => {
setBanner(
{
message:
"👋 **This** is a service banner. The banner's color and text is editable.",
backgroundColor: "#004852",
enabled: true,
},
}}
/>
</Stack>

<Stack direction="row">
<LoadingButton
loading={false}
// aria-disabled={!editable}
// disabled={!editable}
type="submit"
variant="contained"
>
{Language.updateBanner}
</LoadingButton>
</Stack>
</Stack>
</form>
true,
)
}}
>
Show Preview
</Button>
</>
)}
</>
)
}
Expand Down