diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx index 7fc76fb879a9c..a6c31fe97e3e4 100644 --- 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 ( + ({ + backgroundColor: theme.roles.info.background, + border: `1px solid ${theme.roles.info.outline}`, + color: theme.roles.info.text, + }), + ]} + > + Premium + + ); +}; + export const PreviewBadge: FC = () => { return ( = { export default meta; type Story = StoryObj; -const Example: Story = { +export const Enterprise: Story = { args: { message: "Black Lotus", description: @@ -17,4 +17,11 @@ const Example: Story = { }, }; -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 index 459d7c58fb22b..15f337d7a537e 100644 --- a/site/src/components/Paywall/PopoverPaywall.tsx +++ b/site/src/components/Paywall/PopoverPaywall.tsx @@ -3,7 +3,7 @@ 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"; @@ -11,19 +11,21 @@ export interface PopoverPaywallProps { message: string; description?: ReactNode; documentationLink?: string; + licenseType?: "enterprise" | "premium"; } export const PopoverPaywall: FC = ({ message, description, documentationLink, + licenseType = "enterprise", }) => { return (
{message}
- + {licenseType === "premium" ? : } {description &&

{description}

} @@ -51,6 +53,11 @@ export const PopoverPaywall: FC = ({
  • Audit logs
    • + {licenseType === "premium" && ( +
  • + Organizations +
    • + )}
    diff --git a/site/src/pages/DeploySettingsPage/Header.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx similarity index 96% rename from site/src/pages/DeploySettingsPage/Header.tsx rename to site/src/components/SettingsHeader/SettingsHeader.tsx index f84c35d518fa1..49ecc253f7b33 100644 --- a/site/src/pages/DeploySettingsPage/Header.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -11,7 +11,7 @@ interface HeaderProps { docsHref?: string; } -export const Header: FC = ({ +export const SettingsHeader: FC = ({ title, description, docsHref, diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx index d25e0733ee067..5b50f4b5046d8 100644 --- 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 index da2535f9fdcae..f450727dfa5fd 100644 --- 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 ( <> -
    diff --git a/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx b/site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx index 14b77ff550ca1..287114fdcc989 100644 --- 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 ? ( diff --git a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx index 8edb242860c21..ed6a593eb1314 100644 --- 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 ( <> -
    = ({ }) => { return ( <> -
    = ({ direction="row" justifyContent="space-between" > -
    diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 598e26f67e076..46decb307682a 100644 --- 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 = ({ direction="row" justifyContent="space-between" > -
    diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx index cb93cd269ddfc..b500848c95b31 100644 --- 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 = ({ }) => (
    -
    = ({
    -
    = ({ direction="row" justifyContent="space-between" > -
    diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx index 1c905deb65474..2c9c71c8f627b 100644 --- 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 = ({ direction="row" justifyContent="space-between" > -
    diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx index 179dc6b732dae..dfd73ae2fe3c7 100644 --- 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 = ({ justifyContent="space-between" >
    -
    diff --git a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx b/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx index 3d5e0be91206e..bcd31bc776ff9 100644 --- a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx +++ b/site/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< <>
    -
    -
    +
    -
    = ({ return (
    -
    @@ -47,7 +47,7 @@ export const SecuritySettingsPageView: FC = ({
    -
    = ({ {tlsOptions.length > 0 && (
    -
    -
    + -
    -
    { const navigate = useNavigate(); + const feats = useFeatureVisibility(); const queryClient = useQueryClient(); const createOrganizationMutation = useMutation( @@ -18,6 +20,7 @@ const CreateOrganizationPage: FC = () => { return ( { await createOrganizationMutation.mutateAsync(values); displaySuccess("Organization created."); diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.stories.tsx index 81cad38a407ea..d3e7a81208acc 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.stories.tsx @@ -5,6 +5,9 @@ import { CreateOrganizationPageView } from "./CreateOrganizationPageView"; const meta: Meta = { title: "pages/CreateOrganizationPageView", component: CreateOrganizationPageView, + args: { + isEntitled: true, + }, }; export default meta; @@ -12,6 +15,12 @@ type Story = StoryObj; export const Example: Story = {}; +export const NotEntitled: Story = { + args: { + isEntitled: false, + }, +}; + export const Error: Story = { args: { error: "Oh no!" }, }; diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx index 9b1c8632241ef..9a847dc42ad49 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx @@ -5,6 +5,12 @@ import * as Yup from "yup"; import { isApiValidationError } from "api/errors"; import type { CreateOrganizationRequest } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { + Badges, + DisabledBadge, + PremiumBadge, + EntitledBadge, +} from "components/Badges/Badges"; import { FormFields, FormSection, @@ -12,7 +18,14 @@ import { FormFooter, } from "components/Form/Form"; import { IconField } from "components/IconField/IconField"; -import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"; +import { PopoverPaywall } from "components/Paywall/PopoverPaywall"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "components/Popover/Popover"; +import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; +import { docs } from "utils/docs"; import { getFormHelpers, nameValidator, @@ -35,11 +48,12 @@ const validationSchema = Yup.object({ interface CreateOrganizationPageViewProps { error: unknown; onSubmit: (values: CreateOrganizationRequest) => Promise; + isEntitled: boolean; } export const CreateOrganizationPageView: FC< CreateOrganizationPageViewProps -> = ({ error, onSubmit }) => { +> = ({ error, onSubmit, isEntitled }) => { const form = useFormik({ initialValues: { name: "", @@ -54,9 +68,30 @@ export const CreateOrganizationPageView: FC< return (
    - - Organization settings - + + + + {isEntitled ? : } + + + + + + + + + + + {Boolean(error) && !isApiValidationError(error) && (
    @@ -70,7 +105,7 @@ export const CreateOrganizationPageView: FC< >
    = ({ return ( <> - - - - - ) - } + - - {role ? "Edit" : "Create"} custom role - - - {"Set a name and permissions for this role."} - - + + {canAssignOrgRole && ( + + + + + )} + + {Boolean(error) && !isApiValidationError(error) && ( diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx index e1529815796c0..46e04f790bf51 100644 --- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx +++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPage.tsx @@ -9,7 +9,8 @@ import { organizationPermissions } from "api/queries/organizations"; import { organizationRoles } from "api/queries/roles"; import { displayError } from "components/GlobalSnackbar/utils"; import { Loader } from "components/Loader/Loader"; -import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"; +import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; +import { Stack } from "components/Stack/Stack"; import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; import { pageTitle } from "utils/page"; import { useOrganizationSettings } from "../ManagementSettingsLayout"; @@ -50,23 +51,21 @@ export const CustomRolesPage: FC = () => { {pageTitle("Custom Roles")} - - {permissions.assignOrgRole && isCustomRolesEnabled && ( - - )} - - } + - Custom Roles - + + {permissions.assignOrgRole && isCustomRolesEnabled && ( + + )} + = ({ return ( <> - - Create a group - + + { <> {helmet} - - - - - - ) - } + + - - - {canUpdateGroup && groupData && !isEveryoneGroup(groupData) && ( - { - try { - await addMemberMutation.mutateAsync({ - groupId, - userId: user.id, - }); - reset(); - await groupQuery.refetch(); - } catch (error) { - displayError(getErrorMessage(error, "Failed to add member.")); - } + {canUpdateGroup && ( + + + + + )} + - - - - - User - Status - - - + + {canUpdateGroup && groupData && !isEveryoneGroup(groupData) && ( + { + try { + await addMemberMutation.mutateAsync({ + groupId, + userId: user.id, + }); + reset(); + await groupQuery.refetch(); + } catch (error) { + displayError(getErrorMessage(error, "Failed to add member.")); + } + }} + /> + )} + + + + + +
    + + + User + Status + + + - - {groupData?.members.length === 0 ? ( - - - - - - ) : ( - groupData?.members.map((member) => ( - { - try { - await removeMemberMutation.mutateAsync({ - groupId: groupData.id, - userId: member.id, - }); - await groupQuery.refetch(); - displaySuccess("Member removed successfully."); - } catch (error) { - displayError( - getErrorMessage(error, "Failed to remove member."), - ); - } - }} + + {groupData?.members.length === 0 ? ( + + + - )) - )} - -
    -     -     -     + + + ) : ( + groupData?.members.map((member) => ( + { + try { + await removeMemberMutation.mutateAsync({ + groupId: groupData.id, + userId: member.id, + }); + await groupQuery.refetch(); + displaySuccess("Member removed successfully."); + } catch (error) { + displayError( + getErrorMessage(error, "Failed to remove member."), + ); + } + }} + /> + )) + )} + + + + {groupQuery.data && ( { {pageTitle("Groups")} - - {permissions.createGroup && feats.template_rbac && ( - - )} - - } + - Groups - + + {permissions.createGroup && feats.template_rbac && ( + + )} + = (props) => { return (
    - - Organization members - + {Boolean(props.error) && } diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx index be2a5e7cf2365..8be81243a396d 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx @@ -18,7 +18,7 @@ import { FormFooter, } from "components/Form/Form"; import { IconField } from "components/IconField/IconField"; -import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"; +import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { getFormHelpers, nameValidator, @@ -67,9 +67,7 @@ export const OrganizationSettingsPageView: FC< return (
    - - Organization settings - + {Boolean(error) && !isApiValidationError(error) && (
    diff --git a/site/src/pages/ManagementSettingsPage/SidebarView.tsx b/site/src/pages/ManagementSettingsPage/SidebarView.tsx index 4417e40e3e8c0..57accc6fa1a5a 100644 --- a/site/src/pages/ManagementSettingsPage/SidebarView.tsx +++ b/site/src/pages/ManagementSettingsPage/SidebarView.tsx @@ -234,7 +234,7 @@ const OrganizationSettingsNavigation: FC< {organization.permissions.editOrganization && ( - Organization settings + Settings )} {organization.permissions.editMembers && ( diff --git a/site/src/pages/UsersPage/UsersLayout.tsx b/site/src/pages/UsersPage/UsersLayout.tsx index 1dc271074c1cd..49416057d3cd5 100644 --- a/site/src/pages/UsersPage/UsersLayout.tsx +++ b/site/src/pages/UsersPage/UsersLayout.tsx @@ -25,8 +25,7 @@ export const UsersLayout: FC = () => { const location = useLocation(); const activeTab = location.pathname.endsWith("groups") ? "groups" : "users"; - const canViewOrganizations = - feats.multiple_organizations && experiments.includes("multi-organization"); + const canViewOrganizations = experiments.includes("multi-organization"); return ( <> diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx index e8df1f50bde82..fd71a596299c5 100644 --- a/site/src/pages/UsersPage/UsersPage.tsx +++ b/site/src/pages/UsersPage/UsersPage.tsx @@ -29,7 +29,6 @@ import { isNonInitialPage } from "components/PaginationWidget/utils"; import { useAuthenticated } from "contexts/auth/RequireAuth"; import { usePaginatedQuery } from "hooks/usePaginatedQuery"; import { useDashboard } from "modules/dashboard/useDashboard"; -import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; import { pageTitle } from "utils/page"; import { generateRandomString } from "utils/random"; import { ResetPasswordDialog } from "./ResetPasswordDialog"; @@ -43,7 +42,6 @@ const UsersPage: FC = () => { const searchParamsResult = useSearchParams(); const { entitlements, experiments } = useDashboard(); const [searchParams] = searchParamsResult; - const feats = useFeatureVisibility(); const groupsByUserIdQuery = useQuery(groupsByUserId("default")); const authMethodsQuery = useQuery(authMethods()); @@ -104,8 +102,7 @@ const UsersPage: FC = () => { authMethodsQuery.isLoading || groupsByUserIdQuery.isLoading; - const canViewOrganizations = - feats.multiple_organizations && experiments.includes("multi-organization"); + const canViewOrganizations = experiments.includes("multi-organization"); if (canViewOrganizations && location.pathname !== "/deployment/users") { return ; }