diff --git a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.stories.tsx index c59ffeb0a7dcc..b3cfdbdb19a4f 100644 --- a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; +import { expect, within } from "storybook/test"; import { PremiumPageView } from "./PremiumPageView"; const meta: Meta = { @@ -10,14 +11,30 @@ export default meta; type Story = StoryObj; +const expectHeaderBadge = async (canvasElement: HTMLElement) => { + const canvas = within(canvasElement); + + await expect( + canvas.getByRole("heading", { name: "Premium", level: 1 }), + ).toBeVisible(); + // The title and the badge beside it are the only exact "Premium" matches. + await expect(canvas.getAllByText("Premium")).toHaveLength(2); +}; + export const Enterprise: Story = { args: { isEnterprise: true, }, + play: async ({ canvasElement }) => { + await expectHeaderBadge(canvasElement); + }, }; export const OSS: Story = { args: { isEnterprise: false, }, + play: async ({ canvasElement }) => { + await expectHeaderBadge(canvasElement); + }, }; diff --git a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx index a01a2c288403b..b48f101027b68 100644 --- a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx @@ -5,6 +5,7 @@ import { SquareArrowOutUpRightIcon, } from "lucide-react"; import type { FC } from "react"; +import { PremiumBadge } from "#/components/Badges/Badges"; import { Button } from "#/components/Button/Button"; import { Link } from "#/components/Link/Link"; import { docs } from "#/utils/docs"; @@ -20,7 +21,10 @@ const EnterpriseVersion: FC = () => {

Premium

+ +

As an Enterprise license holder, you already benefit from Coder’s features for secure, large-scale deployments. Upgrade to Coder @@ -86,9 +90,12 @@ const OSSVersion: FC = () => {

- Premium -

+ Premium +

+ +

Coder Premium is designed for enterprises that need to scale their Coder deployment efficiently, securely, and with full control. By diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx index b1fd6d89f508e..0f78309106556 100644 --- a/site/src/pages/GroupsPage/GroupsPage.tsx +++ b/site/src/pages/GroupsPage/GroupsPage.tsx @@ -17,6 +17,7 @@ import { SettingsHeaderDescription, SettingsHeaderTitle, } from "#/components/SettingsHeader/SettingsHeader"; +import { useAuthenticated } from "#/hooks/useAuthenticated"; import { useFeatureVisibility } from "#/modules/dashboard/useFeatureVisibility"; import { RequirePermission } from "#/modules/permissions/RequirePermission"; import { pageTitle } from "#/utils/page"; @@ -24,6 +25,7 @@ import { useGroupsSettings } from "./GroupsPageProvider"; import { GroupsPageView, joinGroupsSpend } from "./GroupsPageView"; const GroupsPage: FC = () => { + const { permissions: authPermissions } = useAuthenticated(); const { template_rbac: groupsEnabled, aibridge } = useFeatureVisibility(); const { organization, showOrganizations } = useGroupsSettings(); const aibridgeVisible = Boolean(aibridge); @@ -128,6 +130,7 @@ const GroupsPage: FC = () => { canCreateGroup={permissions.createGroup} groupsEnabled={groupsEnabled} showAIBudget={aibridgeVisible} + permissions={authPermissions} />

); diff --git a/site/src/pages/GroupsPage/GroupsPageView.stories.tsx b/site/src/pages/GroupsPage/GroupsPageView.stories.tsx index 454f184f62006..adb97a9b13d96 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.stories.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.stories.tsx @@ -1,11 +1,14 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { expect, within } from "storybook/test"; -import { MockGroup } from "#/testHelpers/entities"; +import { MockGroup, MockPermissions } from "#/testHelpers/entities"; import { GroupsPageView, type GroupWithSpend } from "./GroupsPageView"; const meta: Meta = { title: "pages/OrganizationGroupsPage", component: GroupsPageView, + args: { + permissions: MockPermissions, + }, }; export default meta; @@ -29,6 +32,29 @@ export const NotEnabled: Story = { canCreateGroup: true, groupsEnabled: false, }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const cta = canvas.getByRole("link", { name: "Learn about Premium" }); + await expect(cta).toHaveAttribute("href", "/deployment/premium"); + }, +}; + +export const NotEnabledWithoutLicenseAccess: Story = { + args: { + ...NotEnabled.args, + permissions: { ...MockPermissions, viewAllLicenses: false }, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expect( + canvas.getByText(/contact your deployment administrator/i), + ).toBeVisible(); + await expect( + canvas.queryByRole("link", { name: "Learn about Premium" }), + ).not.toBeInTheDocument(); + }, }; export const WithGroups: Story = { diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index b4b2eab52746c..6ae73a1ff096a 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -24,6 +24,7 @@ import { TableRowSkeleton, } from "#/components/TableLoader/TableLoader"; import { useClickableTableRow } from "#/hooks/useClickableTableRow"; +import type { Permissions } from "#/modules/permissions"; import { docs } from "#/utils/docs"; import { SpendEstimateDocsLink } from "./AICostControl"; import { StatusIconTooltip } from "./StatusIconTooltip"; @@ -58,6 +59,7 @@ type GroupsPageViewProps = { canCreateGroup: boolean; groupsEnabled: boolean; showAIBudget: boolean; + permissions: Permissions; }; export const GroupsPageView: FC = ({ @@ -66,6 +68,7 @@ export const GroupsPageView: FC = ({ canCreateGroup, groupsEnabled, showAIBudget, + permissions, }) => { if (!groupsEnabled) { return ( @@ -73,6 +76,7 @@ export const GroupsPageView: FC = ({ message="Groups" description="Organize users into groups with restricted access to templates. You need a Premium license to use this feature." documentationLink={docs("/admin/users/groups-roles")} + canViewPremium={permissions.viewAllLicenses} /> ); } diff --git a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPage.tsx b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPage.tsx index 51cdccf5ab5b9..b673dd93c806f 100644 --- a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPage.tsx +++ b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPage.tsx @@ -26,6 +26,7 @@ const CreateOrganizationPage: FC = () => { { await createOrganizationMutation.mutateAsync(values); toast.success( diff --git a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.stories.tsx b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.stories.tsx index dfbff52a15ea6..3c4e55822aa5e 100644 --- a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.stories.tsx +++ b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { mockApiError } from "#/testHelpers/entities"; +import { expect, screen, userEvent, within } from "storybook/test"; +import { MockPermissions, mockApiError } from "#/testHelpers/entities"; import { CreateOrganizationPageView } from "./CreateOrganizationPageView"; const meta: Meta = { @@ -7,18 +8,55 @@ const meta: Meta = { component: CreateOrganizationPageView, args: { isEntitled: true, + permissions: MockPermissions, }, }; export default meta; type Story = StoryObj; -export const Example: Story = {}; +export const Example: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + // The badge is passive: hovering it must not surface a paywall. + await userEvent.hover(canvas.getByText("Premium")); + await expect( + screen.queryByRole("link", { name: "Read the documentation" }), + ).not.toBeInTheDocument(); + }, +}; export const NotEntitled: Story = { args: { isEntitled: false, }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expect( + canvas.getByRole("link", { name: "Read the documentation" }), + ).toBeVisible(); + const cta = canvas.getByRole("link", { name: "Learn about Premium" }); + await expect(cta).toHaveAttribute("href", "/deployment/premium"); + }, +}; + +export const NotEntitledWithoutLicenseAccess: Story = { + args: { + isEntitled: false, + permissions: { ...MockPermissions, viewAllLicenses: false }, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expect( + canvas.getByText(/contact your deployment administrator/i), + ).toBeVisible(); + await expect( + canvas.queryByRole("link", { name: "Learn about Premium" }), + ).not.toBeInTheDocument(); + }, }; export const WithError: Story = { diff --git a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx index 69980a654550c..9c59e6d67419c 100644 --- a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx @@ -12,14 +12,9 @@ import { FormField } from "#/components/FormField/FormField"; import { IconField } from "#/components/IconField/IconField"; import { Label } from "#/components/Label/Label"; import { PaywallPremium } from "#/components/Paywall/PaywallPremium"; -import { PopoverPaywall } from "#/components/Paywall/PopoverPaywall"; import { Spinner } from "#/components/Spinner/Spinner"; import { Textarea } from "#/components/Textarea/Textarea"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "#/components/Tooltip/Tooltip"; +import type { Permissions } from "#/modules/permissions"; import { cn } from "#/utils/cn"; import { docs } from "#/utils/docs"; import { @@ -45,11 +40,12 @@ interface CreateOrganizationPageViewProps { error: unknown; onSubmit: (values: CreateOrganizationRequest) => Promise; isEntitled: boolean; + permissions: Permissions; } export const CreateOrganizationPageView: FC< CreateOrganizationPageViewProps -> = ({ error, onSubmit, isEntitled }) => { +> = ({ error, onSubmit, isEntitled, permissions }) => { const form = useFormik({ initialValues: { name: "", @@ -87,29 +83,11 @@ export const CreateOrganizationPageView: FC<

)} - - - {isEntitled && ( - - - - - - )} - - - - - - + {isEntitled && ( + + + + )}

New Organization

@@ -125,6 +103,7 @@ export const CreateOrganizationPageView: FC< 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("/admin/users/organizations")} + canViewPremium={permissions.viewAllLicenses} />

) : ( diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx index 42a0d0d3b8dd5..c80cbd8d8d9fa 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx @@ -13,6 +13,7 @@ import { SettingsHeaderDescription, SettingsHeaderTitle, } from "#/components/SettingsHeader/SettingsHeader"; +import { useAuthenticated } from "#/hooks/useAuthenticated"; import { useDashboard } from "#/modules/dashboard/useDashboard"; import { useFeatureVisibility } from "#/modules/dashboard/useFeatureVisibility"; import { useOrganizationSettings } from "#/modules/management/OrganizationSettingsLayout"; @@ -21,6 +22,7 @@ import { pageTitle } from "#/utils/page"; import { CustomRolesPageView } from "./CustomRolesPageView"; const CustomRolesPage: FC = () => { + const { permissions } = useAuthenticated(); const queryClient = useQueryClient(); const { custom_roles: isCustomRolesEnabled } = useFeatureVisibility(); const { organization: organizationName } = useParams() as { @@ -97,6 +99,7 @@ const CustomRolesPage: FC = () => { canDeleteOrgRole={organizationPermissions?.deleteOrgRoles ?? false} canEditDefaultRoles={organizationPermissions?.editSettings ?? false} isCustomRolesEnabled={isCustomRolesEnabled} + permissions={permissions} defaultRolesEntitled={defaultRolesEntitled} availableOrgRoles={organizationRolesQuery.data} isUpdatingDefaultRoles={updateOrganizationMutation.isPending} diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx index 5368db952e951..740cf071de142 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx @@ -5,6 +5,7 @@ import type { AssignableRoles } from "#/api/typesGenerated"; import { MockOrganization, MockOrganizationAuditorRole, + MockPermissions, MockRoleWithOrgPermissions, } from "#/testHelpers/entities"; import { CustomRolesPageView } from "./CustomRolesPageView"; @@ -55,6 +56,7 @@ const meta: Meta = { canCreateOrgRole: true, canEditDefaultRoles: true, isCustomRolesEnabled: true, + permissions: MockPermissions, }, }; @@ -67,6 +69,29 @@ export const NotEnabled: Story = { args: { isCustomRolesEnabled: false, }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const cta = canvas.getByRole("link", { name: "Learn about Premium" }); + await expect(cta).toHaveAttribute("href", "/deployment/premium"); + }, +}; + +export const NotEnabledWithoutLicenseAccess: Story = { + args: { + isCustomRolesEnabled: false, + permissions: { ...MockPermissions, viewAllLicenses: false }, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expect( + canvas.getByText(/contact your deployment administrator/i), + ).toBeVisible(); + await expect( + canvas.queryByRole("link", { name: "Learn about Premium" }), + ).not.toBeInTheDocument(); + }, }; export const NotEnabledEmptyTable: Story = { diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx index 331bf8510fdd5..7c064b226dc84 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx @@ -25,6 +25,7 @@ import { TableLoaderSkeleton, TableRowSkeleton, } from "#/components/TableLoader/TableLoader"; +import type { Permissions } from "#/modules/permissions"; import { docs } from "#/utils/docs"; import { DefaultRolesDialog } from "./DefaultRolesDialog"; import { PermissionPillsList } from "./PermissionPillsList"; @@ -39,6 +40,7 @@ interface CustomRolesPageViewProps { canDeleteOrgRole: boolean; canEditDefaultRoles: boolean; isCustomRolesEnabled: boolean; + permissions: Permissions; defaultRolesEntitled?: boolean; availableOrgRoles?: AssignableRoles[]; onUpdateDefaultRoles?: (roles: string[]) => Promise; @@ -55,6 +57,7 @@ export const CustomRolesPageView: FC = ({ canDeleteOrgRole, canEditDefaultRoles, isCustomRolesEnabled, + permissions, defaultRolesEntitled, availableOrgRoles, onUpdateDefaultRoles, @@ -67,6 +70,7 @@ export const CustomRolesPageView: FC = ({ message="Custom Roles" description="Create custom roles to grant users a tailored set of granular permissions." documentationLink={docs("/admin/users/groups-roles")} + canViewPremium={permissions.viewAllLicenses} /> )} {onUpdateDefaultRoles && ( diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx index 37ab7b1f3a33e..5b64d53cc6a77 100644 --- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx +++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx @@ -15,6 +15,7 @@ import { organizationRoles } from "#/api/queries/roles"; import { EmptyState } from "#/components/EmptyState/EmptyState"; import { Link } from "#/components/Link/Link"; import { PaywallPremium } from "#/components/Paywall/PaywallPremium"; +import { useAuthenticated } from "#/hooks/useAuthenticated"; import { useFeatureVisibility } from "#/modules/dashboard/useFeatureVisibility"; import { useOrganizationSettings } from "#/modules/management/OrganizationSettingsLayout"; import { RequirePermission } from "#/modules/permissions/RequirePermission"; @@ -23,6 +24,7 @@ import { pageTitle } from "#/utils/page"; import IdpSyncPageView from "./IdpSyncPageView"; const IdpSyncPage: FC = () => { + const { permissions } = useAuthenticated(); const queryClient = useQueryClient(); // IdP sync does not have its own entitlement and is based on templace_rbac const { template_rbac: isIdpSyncEnabled } = useFeatureVisibility(); @@ -132,6 +134,7 @@ const IdpSyncPage: FC = () => { message="IdP Sync" description="Configure group and role mappings to manage permissions outside of Coder. You need a Premium license to use this feature." documentationLink={docs("/admin/users/idp-sync")} + canViewPremium={permissions.viewAllLicenses} /> ) : ( { + const { permissions } = useAuthenticated(); const { organization: organizationName } = useParams() as { organization: string; }; @@ -51,6 +53,7 @@ const OrganizationProvisionerKeysPage: FC = () => { showPaywall={!entitlements.features.multiple_organizations.enabled} provisionerKeyDaemons={provisionerKeyDaemonsQuery.data} error={provisionerKeyDaemonsQuery.error} + permissions={permissions} onRetry={provisionerKeyDaemonsQuery.refetch} /> diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.stories.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.stories.tsx index 2e671f51b23cf..6ed169bd122b4 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.stories.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; +import { expect, within } from "storybook/test"; import { type ProvisionerKeyDaemons, ProvisionerKeyIDBuiltIn, @@ -6,6 +7,7 @@ import { ProvisionerKeyIDUserAuth, } from "#/api/typesGenerated"; import { + MockPermissions, MockProvisioner, MockProvisionerKey, mockApiError, @@ -70,6 +72,7 @@ const meta: Meta = { args: { error: undefined, provisionerKeyDaemons: mockProvisionerKeyDaemons, + permissions: MockPermissions, onRetry: () => {}, }, }; @@ -91,6 +94,30 @@ export const Paywalled: Story = { args: { showPaywall: true, }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const cta = canvas.getByRole("link", { name: "Learn about Premium" }); + await expect(cta).toHaveAttribute("href", "/deployment/premium"); + }, +}; + +export const PaywalledWithoutLicenseAccess: Story = { + ...Default, + args: { + showPaywall: true, + permissions: { ...MockPermissions, viewAllLicenses: false }, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expect( + canvas.getByText(/contact your deployment administrator/i), + ).toBeVisible(); + await expect( + canvas.queryByRole("link", { name: "Learn about Premium" }), + ).not.toBeInTheDocument(); + }, }; export const Loading: Story = { diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx index 96b4cc7d0cd42..ac137cf0e03dc 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx @@ -22,6 +22,7 @@ import { } from "#/components/Table/Table"; import { TableEmpty } from "#/components/TableEmpty/TableEmpty"; import { TableLoader } from "#/components/TableLoader/TableLoader"; +import type { Permissions } from "#/modules/permissions"; import { docs } from "#/utils/docs"; import { ProvisionerKeyRow } from "./ProvisionerKeyRow"; @@ -37,12 +38,13 @@ interface OrganizationProvisionerKeysPageViewProps { showPaywall: boolean | undefined; provisionerKeyDaemons: ProvisionerKeyDaemons[] | undefined; error: unknown; + permissions: Permissions; onRetry: () => void; } export const OrganizationProvisionerKeysPageView: FC< OrganizationProvisionerKeysPageViewProps -> = ({ showPaywall, provisionerKeyDaemons, error, onRetry }) => { +> = ({ showPaywall, provisionerKeyDaemons, error, permissions, onRetry }) => { const filteredProvisionerKeyDaemons = provisionerKeyDaemons?.filter( (pkd) => !HIDDEN_PROVISIONER_KEYS.includes(pkd.key.id), ); @@ -62,6 +64,7 @@ export const OrganizationProvisionerKeysPageView: FC< message="Provisioners" description="Provisioners run your Terraform to create templates and workspaces. You need a Premium license to use this feature for multiple organizations." documentationLink={docs("/admin/provisioners")} + canViewPremium={permissions.viewAllLicenses} /> ) : ( diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPage.tsx index c87dbfd6fdcc7..3d6823d61df1d 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPage.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPage.tsx @@ -4,6 +4,7 @@ import { useParams, useSearchParams } from "react-router"; import { buildInfo } from "#/api/queries/buildInfo"; import { provisionerDaemons } from "#/api/queries/organizations"; import { EmptyState } from "#/components/EmptyState/EmptyState"; +import { useAuthenticated } from "#/hooks/useAuthenticated"; import { useEmbeddedMetadata } from "#/hooks/useEmbeddedMetadata"; import { useDashboard } from "#/modules/dashboard/useDashboard"; import { useOrganizationSettings } from "#/modules/management/OrganizationSettingsLayout"; @@ -12,6 +13,7 @@ import { pageTitle } from "#/utils/page"; import { OrganizationProvisionersPageView } from "./OrganizationProvisionersPageView"; const OrganizationProvisionersPage: FC = () => { + const { permissions } = useAuthenticated(); const { organization: organizationName } = useParams() as { organization: string; }; @@ -63,6 +65,7 @@ const OrganizationProvisionersPage: FC = () => { error={provisionersQuery.error} provisioners={provisionersQuery.data} buildVersion={buildInfoQuery.data?.version} + permissions={permissions} onRetry={provisionersQuery.refetch} filter={queryParams} onFilterChange={({ ids, offline }) => { diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.stories.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.stories.tsx index 812cba959fdfd..9b5c6bf057006 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.stories.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.stories.tsx @@ -1,6 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; +import { expect, within } from "storybook/test"; import { MockBuildInfo, + MockPermissions, MockProvisioner, MockProvisionerWithTags, MockUserProvisioner, @@ -32,6 +34,7 @@ const meta: Meta = { ids: "", offline: true, }, + permissions: MockPermissions, }, }; @@ -67,6 +70,30 @@ export const Paywall: Story = { provisioners: undefined, showPaywall: true, }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const cta = canvas.getByRole("link", { name: "Learn about Premium" }); + await expect(cta).toHaveAttribute("href", "/deployment/premium"); + }, +}; + +export const PaywallWithoutLicenseAccess: Story = { + args: { + provisioners: undefined, + showPaywall: true, + permissions: { ...MockPermissions, viewAllLicenses: false }, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expect( + canvas.getByText(/contact your deployment administrator/i), + ).toBeVisible(); + await expect( + canvas.queryByRole("link", { name: "Learn about Premium" }), + ).not.toBeInTheDocument(); + }, }; export const FilterByID: Story = { diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx index 9aae04b80075e..8cd6f97ac5e82 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx @@ -25,6 +25,7 @@ import { TooltipContent, TooltipTrigger, } from "#/components/Tooltip/Tooltip"; +import type { Permissions } from "#/modules/permissions"; import { docs } from "#/utils/docs"; import { LastConnectionHead } from "./LastConnectionHead"; import { ProvisionerRow } from "./ProvisionerRow"; @@ -40,6 +41,7 @@ interface OrganizationProvisionersPageViewProps { buildVersion: string | undefined; error: unknown; filter: ProvisionersFilter; + permissions: Permissions; onRetry: () => void; onFilterChange: (filter: ProvisionersFilter) => void; } @@ -52,6 +54,7 @@ export const OrganizationProvisionersPageView: FC< provisioners, buildVersion, filter, + permissions, onFilterChange, onRetry, }) => { @@ -98,6 +101,7 @@ export const OrganizationProvisionersPageView: FC< message="Provisioners" description="Provisioners run your Terraform to create templates and workspaces. You need a Premium license to use this feature for multiple organizations." documentationLink={docs("/admin/provisioners")} + canViewPremium={permissions.viewAllLicenses} /> ) : ( <> diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx index d51dc43d3d20a..5a0da8bf11009 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx @@ -8,6 +8,7 @@ import { templateACL, } from "#/api/queries/templates"; import { PaywallPremium } from "#/components/Paywall/PaywallPremium"; +import { useAuthenticated } from "#/hooks/useAuthenticated"; import { useFeatureVisibility } from "#/modules/dashboard/useFeatureVisibility"; import { docs } from "#/utils/docs"; import { pageTitle } from "#/utils/page"; @@ -15,6 +16,7 @@ import { useTemplateSettings } from "../TemplateSettingsLayout"; import { TemplatePermissionsPageView } from "./TemplatePermissionsPageView"; const TemplatePermissionsPage: FC = () => { + const { permissions: authPermissions } = useAuthenticated(); const { template, permissions } = useTemplateSettings(); const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility(); const templateACLQuery = useQuery(templateACL(template.id)); @@ -37,6 +39,7 @@ const TemplatePermissionsPage: FC = () => { message="Template permissions" description="Control users and groups access to templates. You need a Premium license to use this feature." documentationLink={docs("/admin/templates/template-permissions")} + canViewPremium={authPermissions.viewAllLicenses} /> ) : ( { + const { permissions } = useAuthenticated(); const { proxyLatencies, proxies, @@ -23,6 +25,7 @@ const WorkspaceProxyPage: FC = () => { getWorkspaceProxiesError={proxiesError} preferredProxy={proxy.proxy} showPaywall={!workspaceProxyEnabled} + permissions={permissions} /> ); }; diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.stories.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.stories.tsx index 4c7232ef3cbe3..0fe2846437276 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.stories.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.stories.tsx @@ -1,6 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; +import { expect, within } from "storybook/test"; import { MockHealthyWildWorkspaceProxy, + MockPermissions, MockPrimaryWorkspaceProxy, MockProxyLatencies, MockWorkspaceProxies, @@ -13,6 +15,7 @@ const meta: Meta = { component: WorkspaceProxyView, args: { showPaywall: false, + permissions: MockPermissions, }, }; @@ -44,6 +47,29 @@ export const Paywall: Story = { ...Example.args, showPaywall: true, }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const cta = canvas.getByRole("link", { name: "Learn about Premium" }); + await expect(cta).toHaveAttribute("href", "/deployment/premium"); + }, +}; + +export const PaywallWithoutLicenseAccess: Story = { + args: { + ...Paywall.args, + permissions: { ...MockPermissions, viewAllLicenses: false }, + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expect( + canvas.getByText(/contact your deployment administrator/i), + ).toBeVisible(); + await expect( + canvas.queryByRole("link", { name: "Learn about Premium" }), + ).not.toBeInTheDocument(); + }, }; export const Loading: Story = { diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx index 946e8fb6d6a1e..34ca5f3e1dd38 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx @@ -18,6 +18,7 @@ import { import { TableEmpty } from "#/components/TableEmpty/TableEmpty"; import { TableLoader } from "#/components/TableLoader/TableLoader"; import type { ProxyLatencyReport } from "#/contexts/useProxyLatency"; +import type { Permissions } from "#/modules/permissions"; import { docs } from "#/utils/docs"; import { ProxyRow } from "./WorkspaceProxyRow"; @@ -30,6 +31,7 @@ interface WorkspaceProxyViewProps { preferredProxy?: Region; selectProxyError?: unknown; showPaywall: boolean; + permissions: Permissions; } export const WorkspaceProxyView: FC = ({ @@ -40,6 +42,7 @@ export const WorkspaceProxyView: FC = ({ hasLoaded, selectProxyError, showPaywall, + permissions, }) => { return (

@@ -62,6 +65,7 @@ export const WorkspaceProxyView: FC = ({ message="Workspace Proxies" description="Workspace proxies provide low-latency connections for geo-distributed teams. You need a Premium license to use this feature." documentationLink={docs("/admin/networking/workspace-proxies")} + canViewPremium={permissions.viewAllLicenses} /> ) : ( <>