Skip to content

feat: add premium license behavior for create organization page #14650

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 5 commits into from
Sep 13, 2024
Merged

feat: add premium license behavior for create organization page #14650

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
791d88d
fix: type
jaaydenh Sep 11, 2024
164b65e
chore: paywall improvements
jaaydenh Sep 11, 2024
81f167e
feat: update create org for premium license
jaaydenh Sep 11, 2024
01ae143
fix: remove []
jaaydenh Sep 13, 2024
09a92cb
feat: update licensing pills to reflect new premium tier (#14670)
jaaydenh Sep 13, 2024
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
41 changes: 20 additions & 21 deletions site/src/components/Paywall/Paywall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,7 @@ export const Paywall: FC<PaywallProps> = ({
documentationLink,
}) => {
return (
<div
css={[
styles.root,
(theme) => ({
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
border: `1px solid ${theme.branding.border}`,
}),
]}
>
<div css={[styles.root]}>
<div>
<Stack direction="row" alignItems="center" css={{ marginBottom: 24 }}>
<h5 css={styles.title}>{message}</h5>
Expand All @@ -45,7 +37,7 @@ export const Paywall: FC<PaywallProps> = ({
</Link>
</div>
<div css={styles.separator} />
<Stack direction="column" alignItems="center" spacing={3}>
<Stack direction="column" alignItems="left" spacing={3}>
<ul css={styles.featureList}>
<li css={styles.feature}>
<FeatureIcon />
Expand All @@ -64,16 +56,18 @@ export const Paywall: FC<PaywallProps> = ({
Unlimited Git & external auth integrations
</li>
</ul>
<Button
href={docs("/enterprise")}
target="_blank"
rel="noreferrer"
startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
variant="outlined"
color="neutral"
>
Learn about Premium
</Button>
<div css={styles.learnButton}>
<Button
href={docs("/enterprise")}
target="_blank"
rel="noreferrer"
startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
variant="outlined"
color="neutral"
>
Learn about Premium
</Button>
</div>
</Stack>
</div>
);
Expand All @@ -92,7 +86,7 @@ const FeatureIcon: FC = () => {
};

const styles = {
root: () => ({
root: (theme) => ({
display: "flex",
flexDirection: "row",
justifyContent: "center",
Expand All @@ -101,6 +95,8 @@ const styles = {
padding: 24,
borderRadius: 8,
gap: 32,
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
border: `1px solid ${theme.branding.border}`,
}),
title: {
fontWeight: 600,
Expand All @@ -119,6 +115,9 @@ const styles = {
backgroundColor: theme.branding.divider,
marginLeft: 8,
}),
learnButton: {
padding: "0 28px",
},
featureList: {
listStyle: "none",
margin: 0,
Expand Down
137 changes: 63 additions & 74 deletions site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,17 @@ import TextField from "@mui/material/TextField";
import { isApiValidationError } from "api/errors";
import type { CreateOrganizationRequest } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import {
Badges,
DisabledBadge,
EntitledBadge,
PremiumBadge,
} from "components/Badges/Badges";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import {
FormFields,
FormFooter,
FormSection,
HorizontalForm,
} from "components/Form/Form";
import { IconField } from "components/IconField/IconField";
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "components/Popover/Popover";
import { Paywall } from "components/Paywall/Paywall";
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
import { Stack } from "components/Stack/Stack";
import { useFormik } from "formik";
import type { FC } from "react";
import { docs } from "utils/docs";
Expand Down Expand Up @@ -67,79 +58,77 @@ export const CreateOrganizationPageView: FC<
const getFieldHelpers = getFormHelpers(form, error);

return (
<div>
<Stack spacing={3}>
<SettingsHeader
title="New Organization"
description="Organize your deployment into multiple platform teams."
/>

<Badges>
{isEntitled ? <EntitledBadge /> : <DisabledBadge />}
<Popover mode="hover">
<PopoverTrigger>
<span>
<PremiumBadge />
</span>
</PopoverTrigger>
<PopoverContent css={{ transform: "translateY(-28px)" }}>
<PopoverPaywall
message="Organizations"
description="Organizations allow you to run a Coder deployment with multiple platform teams, all with unique use cases, templates, and even underlying infrastructure."
documentationLink={docs("/guides/using-organizations")}
/>
</PopoverContent>
</Popover>
</Badges>

{Boolean(error) && !isApiValidationError(error) && (
<div css={{ marginBottom: 32 }}>
<ErrorAlert error={error} />
</div>
)}

<HorizontalForm
onSubmit={form.handleSubmit}
aria-label="Organization settings form"
>
<FormSection
title="General info"
description="The name and description of the organization."
>
<fieldset
disabled={form.isSubmitting}
css={{ border: "unset", padding: 0, margin: 0, width: "100%" }}
<ChooseOne>
<Cond condition={!isEntitled}>
<Paywall
message="Organizations"
description="Create multiple organizations within a single Coder deployment, allowing several platform teams to operate with isolated users, templates, and distinct underlying infrastructure."
documentationLink={docs("/guides/using-organizations")}
/>
</Cond>
<Cond>
<HorizontalForm
onSubmit={form.handleSubmit}
aria-label="Organization settings form"
>
<FormFields>
<TextField
{...getFieldHelpers("name")}
onChange={onChangeTrimmed(form)}
autoFocus
fullWidth
label="Name"
/>
<TextField
{...getFieldHelpers("display_name")}
fullWidth
label="Display name"
/>
<TextField
{...getFieldHelpers("description")}
multiline
fullWidth
label="Description"
rows={2}
/>
<IconField
{...getFieldHelpers("icon")}
onChange={onChangeTrimmed(form)}
fullWidth
onPickEmoji={(value) => form.setFieldValue("icon", value)}
/>
</FormFields>
</fieldset>
</FormSection>
<FormFooter isLoading={form.isSubmitting} />
</HorizontalForm>
</div>
<FormSection
title="General info"
description="The name and description of the organization."
>
<fieldset
disabled={form.isSubmitting}
css={{
border: "unset",
padding: 0,
margin: 0,
width: "100%",
}}
>
<FormFields>
<TextField
{...getFieldHelpers("name")}
onChange={onChangeTrimmed(form)}
autoFocus
fullWidth
label="Name"
/>
<TextField
{...getFieldHelpers("display_name")}
fullWidth
label="Display name"
/>
<TextField
{...getFieldHelpers("description")}
multiline
fullWidth
label="Description"
rows={2}
/>
<IconField
{...getFieldHelpers("icon")}
onChange={onChangeTrimmed(form)}
fullWidth
onPickEmoji={(value) => form.setFieldValue("icon", value)}
/>
</FormFields>
</fieldset>
</FormSection>
<FormFooter isLoading={form.isSubmitting} />
</HorizontalForm>
</Cond>
</ChooseOne>
</Stack>
);
};
2 changes: 1 addition & 1 deletion site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
{!isCustomRolesEnabled && (
<Paywall
message="Custom Roles"
description="Custom Roles are available in the Premium plan and require an upgraded license. Please contact your Customer Success team for more information."
description="Create custom roles to grant users a tailored set of granular permissions."
documentationLink={docs("/admin/groups")}
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
css={{ marginTop: 16 }}
>
<PremiumBadge />
<span>Premium license required to enabled.</span>
<span>Premium license required to be enabled.</span>
</Stack>
)}
</StackLabelHelperText>
Expand Down
Loading