coder · code-asher · Aug 9, 2024 · Aug 8, 2024 · Aug 7, 2024 · Aug 9, 2024
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
@@ -123,6 +123,23 @@ export const EnterpriseBadge: FC = () => {
   );
 };
 
+export const PremiumBadge: FC = () => {
+  return (
+    <span
+      css={[
+        styles.badge,
+        (theme) => ({
+          backgroundColor: theme.roles.info.background,
+          border: `1px solid ${theme.roles.info.outline}`,
+          color: theme.roles.info.text,
+        }),
+      ]}
+    >
+      Premium
+    </span>
+  );
+};
+
 export const PreviewBadge: FC = () => {
   return (
     <span

diff --git a/site/src/components/Paywall/PopoverPaywall.stories.tsx b/site/src/components/Paywall/PopoverPaywall.stories.tsx
@@ -9,12 +9,19 @@ const meta: Meta<typeof PopoverPaywall> = {
 export default meta;
 type Story = StoryObj<typeof PopoverPaywall>;
 
-const Example: Story = {
+export const Enterprise: Story = {
   args: {
     message: "Black Lotus",
     description:
       "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.",
   },
 };
 
-export { Example as PopoverPaywall };
+export const Premium: Story = {
+  args: {
+    message: "Black Lotus",
+    description:
+      "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.",
+    licenseType: "premium",
+  },
+};
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -3,27 +3,29 @@ import TaskAltIcon from "@mui/icons-material/TaskAlt";
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import type { FC, ReactNode } from "react";
-import { EnterpriseBadge } from "components/Badges/Badges";
+import { EnterpriseBadge, PremiumBadge } from "components/Badges/Badges";
 import { Stack } from "components/Stack/Stack";
 import { docs } from "utils/docs";
 
 export interface PopoverPaywallProps {
   message: string;
   description?: ReactNode;
   documentationLink?: string;
+  licenseType?: "enterprise" | "premium";
 }
 
 export const PopoverPaywall: FC<PopoverPaywallProps> = ({
   message,
   description,
   documentationLink,
+  licenseType = "enterprise",
 }) => {
   return (
     <div css={styles.root}>
       <div>
         <Stack direction="row" alignItems="center" css={{ marginBottom: 18 }}>
           <h5 css={styles.title}>{message}</h5>
-          <EnterpriseBadge />
+          {licenseType === "premium" ? <PremiumBadge /> : <EnterpriseBadge />}
         </Stack>
 
         {description && <p css={styles.description}>{description}</p>}
@@ -51,6 +53,11 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
           <li css={styles.feature}>
             <FeatureIcon /> Audit logs
           </li>
+          {licenseType === "premium" && (
+            <li css={styles.feature}>
+              <FeatureIcon /> Organizations
+            </li>
+          )}
         </ul>
         <Button
           href={docs("/enterprise")}
@@ -60,7 +67,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
           variant="outlined"
           color="neutral"
         >
-          Learn about Enterprise
+          Learn about {licenseType === "premium" ? "Premium" : "Enterprise"}
         </Button>
       </Stack>
     </div>

diff --git a/site/src/pages/DeploySettingsPage/Header.tsx → ...ponents/SettingsHeader/SettingsHeader.tsx b/site/src/pages/DeploySettingsPage/Header.tsx → ...ponents/SettingsHeader/SettingsHeader.tsx
@@ -11,7 +11,7 @@ interface HeaderProps {
   docsHref?: string;
 }
 
-export const Header: FC<HeaderProps> = ({
+export const SettingsHeader: FC<HeaderProps> = ({
   title,
   description,
   docsHref,

diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -20,7 +20,6 @@ export const Navbar: FC = () => {
   const canViewDeployment = Boolean(permissions.viewDeploymentValues);
   const canViewOrganizations =
     Boolean(permissions.editAnyOrganization) &&
-    featureVisibility.multiple_organizations &&
     experiments.includes("multi-organization");
   const canViewAllUsers = Boolean(permissions.viewAllUsers);
   const proxyContextValue = useProxy();

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -16,9 +16,9 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "components/Popover/Popover";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { getFormHelpers } from "utils/formUtils";
 import { Fieldset } from "../Fieldset";
-import { Header } from "../Header";
 import { AnnouncementBannerSettings } from "./AnnouncementBannerSettings";
 
 export type AppearanceSettingsPageViewProps = {
@@ -54,7 +54,7 @@ export const AppearanceSettingsPageView: FC<
 
   return (
     <>
-      <Header
+      <SettingsHeader
         title="Appearance"
         description="Customize the look and feel of your Coder deployment."
       />

diff --git a/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx b/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx
@@ -9,7 +9,6 @@ import { Stack } from "components/Stack/Stack";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { RequirePermission } from "contexts/auth/RequirePermission";
 import { useDashboard } from "modules/dashboard/useDashboard";
-import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { ManagementSettingsLayout } from "pages/ManagementSettingsPage/ManagementSettingsLayout";
 import { Sidebar } from "./Sidebar";
 
@@ -34,9 +33,7 @@ export const useDeploySettings = (): DeploySettingsContextValue => {
 export const DeploySettingsLayout: FC = () => {
   const { experiments } = useDashboard();
 
-  const feats = useFeatureVisibility();
-  const canViewOrganizations =
-    feats.multiple_organizations && experiments.includes("multi-organization");
+  const canViewOrganizations = experiments.includes("multi-organization");
 
   return canViewOrganizations ? (
     <ManagementSettingsLayout />

diff --git a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
@@ -9,8 +9,8 @@ import type { FC } from "react";
 import type { DeploymentValues, ExternalAuthConfig } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { EnterpriseBadge } from "components/Badges/Badges";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { docs } from "utils/docs";
-import { Header } from "../Header";
 
 export type ExternalAuthSettingsPageViewProps = {
   config: DeploymentValues;
@@ -21,7 +21,7 @@ export const ExternalAuthSettingsPageView: FC<
 > = ({ config }) => {
   return (
     <>
-      <Header
+      <SettingsHeader
         title="External Authentication"
         description="Coder integrates with GitHub, GitLab, BitBucket, Azure Repos, and OpenID Connect to authenticate developers with external services."
         docsHref={docs("/admin/external-auth")}

diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -11,11 +11,11 @@ import {
   ActiveUsersTitle,
 } from "components/ActiveUserChart/ActiveUserChart";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { useDeploymentOptions } from "utils/deployOptions";
 import { docs } from "utils/docs";
 import { Alert } from "../../../components/Alert/Alert";
-import { Header } from "../Header";
 import OptionsTable from "../OptionsTable";
 import { ChartSection } from "./ChartSection";
 
@@ -38,7 +38,7 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 }) => {
   return (
     <>
-      <Header
+      <SettingsHeader
         title="General"
         description="Information about your Coder deployment."
         docsHref={docs("/admin/configure")}

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
@@ -6,9 +6,9 @@ import { Link as RouterLink } from "react-router-dom";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { FileUpload } from "components/FileUpload/FileUpload";
 import { displayError } from "components/GlobalSnackbar/utils";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { Fieldset } from "../Fieldset";
-import { Header } from "../Header";
 import { DividerWithText } from "./DividerWithText";
 
 type AddNewLicenseProps = {
@@ -50,7 +50,7 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
         direction="row"
         justifyContent="space-between"
       >
-        <Header
+        <SettingsHeader
           title="Add a license"
           description="Get access to high availability, RBAC, quotas, and more."
         />

diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -10,9 +10,9 @@ import type { FC } from "react";
 import Confetti from "react-confetti";
 import { Link } from "react-router-dom";
 import type { GetLicensesResponse } from "api/api";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { useWindowSize } from "hooks/useWindowSize";
-import { Header } from "../Header";
 import { LicenseCard } from "./LicenseCard";
 
 type Props = {
@@ -55,7 +55,7 @@ const LicensesSettingsPageView: FC<Props> = ({
         direction="row"
         justifyContent="space-between"
       >
-        <Header
+        <SettingsHeader
           title="Licenses"
           description="Manage licenses to unlock Enterprise features."
         />

diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx
@@ -1,13 +1,13 @@
 import type { FC } from "react";
 import type { SerpentOption } from "api/typesGenerated";
 import { Badges, EnabledBadge, DisabledBadge } from "components/Badges/Badges";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import {
   deploymentGroupHasParent,
   useDeploymentOptions,
 } from "utils/deployOptions";
 import { docs } from "utils/docs";
-import { Header } from "../Header";
 import OptionsTable from "../OptionsTable";
 
 export type NetworkSettingsPageViewProps = {
@@ -19,7 +19,7 @@ export const NetworkSettingsPageView: FC<NetworkSettingsPageViewProps> = ({
 }) => (
   <Stack direction="column" spacing={6}>
     <div>
-      <Header
+      <SettingsHeader
         title="Network"
         description="Configure your deployment connectivity."
         docsHref={docs("/networking")}
@@ -32,7 +32,7 @@ export const NetworkSettingsPageView: FC<NetworkSettingsPageViewProps> = ({
     </div>
 
     <div>
-      <Header
+      <SettingsHeader
         title="Port Forwarding"
         secondary
         description="Port forwarding lets developers securely access processes on their Coder workspace from a local machine."

diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx
@@ -4,8 +4,8 @@ import type { FC } from "react";
 import { Link } from "react-router-dom";
 import type * as TypesGen from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
-import { Header } from "../Header";
 import { OAuth2AppForm } from "./OAuth2AppForm";
 
 type CreateOAuth2AppProps = {
@@ -26,7 +26,7 @@ export const CreateOAuth2AppPageView: FC<CreateOAuth2AppProps> = ({
         direction="row"
         justifyContent="space-between"
       >
-        <Header
+        <SettingsHeader
           title="Add an OAuth2 application"
           description="Configure an application to use Coder as an OAuth2 provider."
         />

diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx
@@ -20,10 +20,10 @@ import { CopyableValue } from "components/CopyableValue/CopyableValue";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import { Loader } from "components/Loader/Loader";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import { createDayString } from "utils/createDayString";
-import { Header } from "../Header";
 import { OAuth2AppForm } from "./OAuth2AppForm";
 
 export type MutatingResource = {
@@ -75,7 +75,7 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
         direction="row"
         justifyContent="space-between"
       >
-        <Header
+        <SettingsHeader
           title="Edit OAuth2 application"
           description="Configure an application to use Coder as an OAuth2 provider."
         />

diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
@@ -14,10 +14,10 @@ import type * as TypesGen from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/AvatarData/AvatarData";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
-import { Header } from "../Header";
 
 type OAuth2AppsSettingsProps = {
   apps?: TypesGen.OAuth2ProviderApp[];
@@ -38,7 +38,7 @@ const OAuth2AppsSettingsPageView: FC<OAuth2AppsSettingsProps> = ({
         justifyContent="space-between"
       >
         <div>
-          <Header
+          <SettingsHeader
             title="OAuth2 Applications"
             description="Configure applications to use Coder as an OAuth2 provider."
           />

diff --git a/.../src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx b/.../src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx
@@ -6,10 +6,10 @@ import {
   EnabledBadge,
   EnterpriseBadge,
 } from "components/Badges/Badges";
+import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { deploymentGroupHasParent } from "utils/deployOptions";
 import { docs } from "utils/docs";
-import { Header } from "../Header";
 import OptionsTable from "../OptionsTable";
 
 export type ObservabilitySettingsPageViewProps = {
@@ -24,8 +24,8 @@ export const ObservabilitySettingsPageView: FC<
     <>
       <Stack direction="column" spacing={6}>
         <div>
-          <Header title="Observability" />
-          <Header
+          <SettingsHeader title="Observability" />
+          <SettingsHeader
             title="Audit Logging"
             secondary
             description="Allow auditors to monitor user operations in your deployment."
@@ -39,7 +39,7 @@ export const ObservabilitySettingsPageView: FC<
         </div>
 
         <div>
-          <Header
+          <SettingsHeader
             title="Monitoring"
             secondary
             description="Monitoring your Coder application with logs and metrics."