Skip to content

Commit abbcffe

Browse files
code-ashercode-asher
authored
fix: use multi-org settings layout even if not licensed (#14215)
* fix: only check flag for organization settings I added checks against the license but actually what we want is for these views to become the default even when not licensed (once the experimental flag is removed). * Move deployment settings header to components This will let us use it in the org settings pages, for a consistent look. * Add premium badge * Use settings header on org pages * Add license badges to create org page I am not sure if there is maybe a better place for this, but maybe this is good enough. * Change create org form description text It says "change", but there is nothing to change yet since this is a new organization. * Consistently capitalize org menu items and headings Also, remove the "organizations" prefix since it seems redundant.
1 parent 9a47ea1 commit abbcffe

31 files changed

+302
-238
lines changed

‎site/src/components/Badges/Badges.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,23 @@ export const EnterpriseBadge: FC = () => {
123123
);
124124
};
125125

126+
export const PremiumBadge: FC = () => {
127+
return (
128+
<span
129+
css={[
130+
styles.badge,
131+
(theme) => ({
132+
backgroundColor: theme.roles.info.background,
133+
border: `1px solid ${theme.roles.info.outline}`,
134+
color: theme.roles.info.text,
135+
}),
136+
]}
137+
>
138+
Premium
139+
</span>
140+
);
141+
};
142+
126143
export const PreviewBadge: FC = () => {
127144
return (
128145
<span

‎site/src/components/Paywall/PopoverPaywall.stories.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,19 @@ const meta: Meta<typeof PopoverPaywall> = {
99
export default meta;
1010
type Story = StoryObj<typeof PopoverPaywall>;
1111

12-
const Example: Story = {
12+
export const Enterprise: Story = {
1313
args: {
1414
message: "Black Lotus",
1515
description:
1616
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
1717
},
1818
};
1919

20-
export { Example as PopoverPaywall };
20+
export const Premium: Story = {
21+
args: {
22+
message: "Black Lotus",
23+
description:
24+
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
25+
licenseType: "premium",
26+
},
27+
};

‎site/src/components/Paywall/PopoverPaywall.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,29 @@ import TaskAltIcon from "@mui/icons-material/TaskAlt";
33
import Button from "@mui/material/Button";
44
import Link from "@mui/material/Link";
55
import type { FC, ReactNode } from "react";
6-
import { EnterpriseBadge } from "components/Badges/Badges";
6+
import { EnterpriseBadge, PremiumBadge } from "components/Badges/Badges";
77
import { Stack } from "components/Stack/Stack";
88
import { docs } from "utils/docs";
99

1010
export interface PopoverPaywallProps {
1111
message: string;
1212
description?: ReactNode;
1313
documentationLink?: string;
14+
licenseType?: "enterprise" | "premium";
1415
}
1516

1617
export const PopoverPaywall: FC<PopoverPaywallProps> = ({
1718
message,
1819
description,
1920
documentationLink,
21+
licenseType = "enterprise",
2022
}) => {
2123
return (
2224
<div css={styles.root}>
2325
<div>
2426
<Stack direction="row" alignItems="center" css={{ marginBottom: 18 }}>
2527
<h5 css={styles.title}>{message}</h5>
26-
<EnterpriseBadge />
28+
{licenseType === "premium" ? <PremiumBadge /> : <EnterpriseBadge />}
2729
</Stack>
2830

2931
{description && <p css={styles.description}>{description}</p>}
@@ -51,6 +53,11 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
5153
<li css={styles.feature}>
5254
<FeatureIcon /> Audit logs
5355
</li>
56+
{licenseType === "premium" && (
57+
<li css={styles.feature}>
58+
<FeatureIcon /> Organizations
59+
</li>
60+
)}
5461
</ul>
5562
<Button
5663
href={docs("/enterprise")}
@@ -60,7 +67,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
6067
variant="outlined"
6168
color="neutral"
6269
>
63-
Learn about Enterprise
70+
Learn about {licenseType === "premium" ? "Premium" : "Enterprise"}
6471
</Button>
6572
</Stack>
6673
</div>

‎site/src/pages/DeploySettingsPage/Header.tsx renamed to ‎site/src/components/SettingsHeader/SettingsHeader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface HeaderProps {
1111
docsHref?: string;
1212
}
1313

14-
export const Header: FC<HeaderProps> = ({
14+
export const SettingsHeader: FC<HeaderProps> = ({
1515
title,
1616
description,
1717
docsHref,

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export const Navbar: FC = () => {
2020
const canViewDeployment = Boolean(permissions.viewDeploymentValues);
2121
const canViewOrganizations =
2222
Boolean(permissions.editAnyOrganization) &&
23-
featureVisibility.multiple_organizations &&
2423
experiments.includes("multi-organization");
2524
const canViewAllUsers = Boolean(permissions.viewAllUsers);
2625
const proxyContextValue = useProxy();

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ import {
1616
PopoverContent,
1717
PopoverTrigger,
1818
} from "components/Popover/Popover";
19+
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
1920
import { getFormHelpers } from "utils/formUtils";
2021
import { Fieldset } from "../Fieldset";
21-
import { Header } from "../Header";
2222
import { AnnouncementBannerSettings } from "./AnnouncementBannerSettings";
2323

2424
export type AppearanceSettingsPageViewProps = {
@@ -54,7 +54,7 @@ export const AppearanceSettingsPageView: FC<
5454

5555
return (
5656
<>
57-
<Header
57+
<SettingsHeader
5858
title="Appearance"
5959
description="Customize the look and feel of your Coder deployment."
6060
/>

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { Stack } from "components/Stack/Stack";
99
import { useAuthenticated } from "contexts/auth/RequireAuth";
1010
import { RequirePermission } from "contexts/auth/RequirePermission";
1111
import { useDashboard } from "modules/dashboard/useDashboard";
12-
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
1312
import { ManagementSettingsLayout } from "pages/ManagementSettingsPage/ManagementSettingsLayout";
1413
import { Sidebar } from "./Sidebar";
1514

@@ -34,9 +33,7 @@ export const useDeploySettings = (): DeploySettingsContextValue => {
3433
export const DeploySettingsLayout: FC = () => {
3534
const { experiments } = useDashboard();
3635

37-
const feats = useFeatureVisibility();
38-
const canViewOrganizations =
39-
feats.multiple_organizations && experiments.includes("multi-organization");
36+
const canViewOrganizations = experiments.includes("multi-organization");
4037

4138
return canViewOrganizations ? (
4239
<ManagementSettingsLayout />

‎site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import type { FC } from "react";
99
import type { DeploymentValues, ExternalAuthConfig } from "api/typesGenerated";
1010
import { Alert } from "components/Alert/Alert";
1111
import { EnterpriseBadge } from "components/Badges/Badges";
12+
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
1213
import { docs } from "utils/docs";
13-
import { Header } from "../Header";
1414

1515
export type ExternalAuthSettingsPageViewProps = {
1616
config: DeploymentValues;
@@ -21,7 +21,7 @@ export const ExternalAuthSettingsPageView: FC<
2121
> = ({ config }) => {
2222
return (
2323
<>
24-
<Header
24+
<SettingsHeader
2525
title="External Authentication"
2626
description="Coder integrates with GitHub, GitLab, BitBucket, Azure Repos, and OpenID Connect to authenticate developers with external services."
2727
docsHref={docs("/admin/external-auth")}

‎site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ import {
1111
ActiveUsersTitle,
1212
} from "components/ActiveUserChart/ActiveUserChart";
1313
import { ErrorAlert } from "components/Alert/ErrorAlert";
14+
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
1415
import { Stack } from "components/Stack/Stack";
1516
import { useDeploymentOptions } from "utils/deployOptions";
1617
import { docs } from "utils/docs";
1718
import { Alert } from "../../../components/Alert/Alert";
18-
import { Header } from "../Header";
1919
import OptionsTable from "../OptionsTable";
2020
import { ChartSection } from "./ChartSection";
2121

@@ -38,7 +38,7 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
3838
}) => {
3939
return (
4040
<>
41-
<Header
41+
<SettingsHeader
4242
title="General"
4343
description="Information about your Coder deployment."
4444
docsHref={docs("/admin/configure")}

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { Link as RouterLink } from "react-router-dom";
66
import { ErrorAlert } from "components/Alert/ErrorAlert";
77
import { FileUpload } from "components/FileUpload/FileUpload";
88
import { displayError } from "components/GlobalSnackbar/utils";
9+
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
910
import { Stack } from "components/Stack/Stack";
1011
import { Fieldset } from "../Fieldset";
11-
import { Header } from "../Header";
1212
import { DividerWithText } from "./DividerWithText";
1313

1414
type AddNewLicenseProps = {
@@ -50,7 +50,7 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
5050
direction="row"
5151
justifyContent="space-between"
5252
>
53-
<Header
53+
<SettingsHeader
5454
title="Add a license"
5555
description="Get access to high availability, RBAC, quotas, and more."
5656
/>

0 commit comments

Comments
 (0)