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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy