Skip to content

Commit cafc8a7

Browse files
aslilacaslilac
committed
better entitlement handling
1 parent e22658d commit cafc8a7

File tree

4 files changed

+97
-63
lines changed

4 files changed

+97
-63
lines changed

‎site/src/modules/dashboard/NotificationBanners/NotificationBanners.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,14 @@ import { useDashboard } from "modules/dashboard/useDashboard";
33
import { NotificationBannerView } from "./NotificationBannerView";
44

55
export const NotificationBanners: FC = () => {
6-
const dashboard = useDashboard();
7-
const notificationBanners = dashboard.appearance.notification_banners;
6+
const { appearance, entitlements } = useDashboard();
7+
const notificationBanners = appearance.notification_banners;
8+
9+
const isEntitled =
10+
entitlements.features.appearance.entitlement !== "not_entitled";
11+
if (!isEntitled) {
12+
return null;
13+
}
814

915
return (
1016
<>

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export const AppearanceSettingsPageView: FC<
126126
</Fieldset>
127127

128128
<NotificationBannerSettings
129+
isEntitled={isEntitled}
129130
notificationBanners={appearance.notification_banners || []}
130131
onSubmit={(notificationBanners) =>
131132
onSaveAppearance({ notification_banners: notificationBanners })

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/NotificationBannerSettings.tsx

Lines changed: 87 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { type CSSObject, useTheme } from "@emotion/react";
22
import AddIcon from "@mui/icons-material/AddOutlined";
33
import Button from "@mui/material/Button";
4+
import Link from "@mui/material/Link";
45
import Table from "@mui/material/Table";
56
import TableBody from "@mui/material/TableBody";
67
import TableCell from "@mui/material/TableCell";
@@ -16,13 +17,14 @@ import { NotificationBannerDialog } from "./NotificationBannerDialog";
1617
import { NotificationBannerItem } from "./NotificationBannerItem";
1718

1819
interface NotificationBannerSettingsProps {
20+
isEntitled: boolean;
1921
notificationBanners: readonly BannerConfig[];
2022
onSubmit: (banners: readonly BannerConfig[]) => Promise<void>;
2123
}
2224

2325
export const NotificationBannerSettings: FC<
2426
NotificationBannerSettingsProps
25-
> = ({ notificationBanners, onSubmit }) => {
27+
> = ({ isEntitled, notificationBanners, onSubmit }) => {
2628
const theme = useTheme();
2729
const [banners, setBanners] = useState(notificationBanners);
2830
const [editingBannerId, setEditingBannerId] = useState<number | null>(null);
@@ -60,73 +62,97 @@ export const NotificationBannerSettings: FC<
6062
borderRadius: 8,
6163
border: `1px solid ${theme.palette.divider}`,
6264
marginTop: 32,
63-
padding: 24,
65+
overflow: "hidden",
6466
}}
6567
>
66-
<Stack
67-
direction="row"
68-
justifyContent="space-between"
69-
alignItems="center"
70-
>
71-
<h3
68+
<div css={{ padding: 24 }}>
69+
<Stack
70+
direction="row"
71+
justifyContent="space-between"
72+
alignItems="center"
73+
>
74+
<h3
75+
css={{
76+
fontSize: 20,
77+
margin: 0,
78+
fontWeight: 600,
79+
}}
80+
>
81+
Notification Banners
82+
</h3>
83+
<Button
84+
disabled={!isEntitled}
85+
onClick={() => addBanner()}
86+
startIcon={<AddIcon />}
87+
>
88+
New
89+
</Button>
90+
</Stack>
91+
<div
7292
css={{
73-
fontSize: 20,
74-
margin: 0,
75-
fontWeight: 600,
93+
color: theme.palette.text.secondary,
94+
fontSize: 14,
95+
marginTop: 8,
7696
}}
7797
>
78-
Notification Banners
79-
</h3>
80-
<Button onClick={() => addBanner()} startIcon={<AddIcon />}>
81-
New
82-
</Button>
83-
</Stack>
84-
<div
85-
css={{
86-
color: theme.palette.text.secondary,
87-
fontSize: 14,
88-
marginTop: 8,
89-
}}
90-
>
91-
Display message banners to all users.
92-
</div>
98+
Display message banners to all users.
99+
</div>
93100

94-
<div css={[theme.typography.body2 as CSSObject, { paddingTop: 16 }]}>
95-
<TableContainer>
96-
<Table>
97-
<TableHead>
98-
<TableRow>
99-
<TableCell width="1%">Enabled</TableCell>
100-
<TableCell>Message</TableCell>
101-
<TableCell>Color</TableCell>
102-
<TableCell width="1%" />
103-
</TableRow>
104-
</TableHead>
105-
<TableBody>
106-
{banners.length < 1 ? (
107-
<TableCell colSpan={999}>
108-
<EmptyState message="No notification banners" />
109-
</TableCell>
110-
) : (
111-
banners.map((banner, i) => (
112-
<NotificationBannerItem
113-
key={banner.message}
114-
enabled={banner.enabled}
115-
backgroundColor={banner.background_color}
116-
message={banner.message}
117-
onEdit={() => setEditingBannerId(i)}
118-
onUpdate={async (banner) => {
119-
const newBanners = updateBanner(i, banner);
120-
await onSubmit(newBanners);
121-
}}
122-
onDelete={() => setDeletingBannerId(i)}
123-
/>
124-
))
125-
)}
126-
</TableBody>
127-
</Table>
128-
</TableContainer>
101+
<div css={[theme.typography.body2 as CSSObject, { paddingTop: 16 }]}>
102+
<TableContainer>
103+
<Table>
104+
<TableHead>
105+
<TableRow>
106+
<TableCell width="1%">Enabled</TableCell>
107+
<TableCell>Message</TableCell>
108+
<TableCell>Color</TableCell>
109+
<TableCell width="1%" />
110+
</TableRow>
111+
</TableHead>
112+
<TableBody>
113+
{!isEntitled || banners.length < 1 ? (
114+
<TableCell colSpan={999}>
115+
<EmptyState message="No notification banners" />
116+
</TableCell>
117+
) : (
118+
banners.map((banner, i) => (
119+
<NotificationBannerItem
120+
key={banner.message}
121+
enabled={banner.enabled}
122+
backgroundColor={banner.background_color}
123+
message={banner.message}
124+
onEdit={() => setEditingBannerId(i)}
125+
onUpdate={async (banner) => {
126+
const newBanners = updateBanner(i, banner);
127+
await onSubmit(newBanners);
128+
}}
129+
onDelete={() => setDeletingBannerId(i)}
130+
/>
131+
))
132+
)}
133+
</TableBody>
134+
</Table>
135+
</TableContainer>
136+
</div>
129137
</div>
138+
139+
<footer
140+
css={[
141+
theme.typography.body2 as CSSObject,
142+
{
143+
background: theme.palette.background.paper,
144+
padding: "16px 24px",
145+
},
146+
]}
147+
>
148+
<div css={{ color: theme.palette.text.secondary }}>
149+
<p>
150+
Your license does not include Service Banners.{" "}
151+
<Link href="mailto:sales@coder.com">Contact sales</Link> to learn
152+
more.
153+
</p>
154+
</div>
155+
</footer>
130156
</div>
131157

132158
{editingBanner && (

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const Fieldset: FC<FieldsetProps> = ({
2929
borderRadius: 8,
3030
border: `1px solid ${theme.palette.divider}`,
3131
marginTop: 32,
32+
overflow: "hidden",
3233
}}
3334
onSubmit={onSubmit}
3435
>

0 commit comments

Comments
 (0)