diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx index 7e5b9cd31b8e7..5640442d03dcb 100644 --- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx @@ -9,7 +9,6 @@ import { import type { UpdateAppearanceConfig } from "#/api/typesGenerated"; import { useAuthenticated } from "#/hooks/useAuthenticated"; import { useDashboard } from "#/modules/dashboard/useDashboard"; -import { useFeatureVisibility } from "#/modules/dashboard/useFeatureVisibility"; import { RequirePermission } from "#/modules/permissions/RequirePermission"; import { pageTitle } from "#/utils/page"; import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView"; @@ -20,7 +19,6 @@ import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView"; // the command line would be a significantly worse user experience. const AppearanceSettingsPage: FC = () => { const { appearance, entitlements } = useDashboard(); - const { multiple_organizations: hasPremiumLicense } = useFeatureVisibility(); const queryClient = useQueryClient(); const updateAppearanceMutation = useMutation(updateAppearance(queryClient)); const { permissions } = useAuthenticated(); @@ -61,8 +59,7 @@ const AppearanceSettingsPage: FC = () => { isEntitled={ entitlements.features.appearance.entitlement !== "not_entitled" } - isPremium={hasPremiumLicense} - permissions={permissions} + canViewPremium={permissions.viewAllLicenses} /> diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx index fe0797399ce0a..e9ec91cccca4b 100644 --- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { expect, screen, userEvent, within } from "storybook/test"; +import { expect, within } from "storybook/test"; import { MockPermissions } from "#/testHelpers/entities"; import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView"; @@ -24,7 +24,7 @@ const meta: Meta = { ], }, isEntitled: false, - permissions: MockPermissions, + canViewPremium: MockPermissions.viewAllLicenses, }, }; @@ -35,11 +35,17 @@ export const Entitled: Story = { args: { isEntitled: true, }, - play: async () => { - // The badge is passive: hovering it must not surface a paywall. - await userEvent.hover(screen.getByText("Enterprise")); + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await expect( - screen.queryByRole("link", { name: "Learn more about premium" }), + canvas.getByRole("form", { name: "Appearance settings" }), + ).toBeVisible(); + await expect( + canvas.getByRole("heading", { name: "Announcement Banners" }), + ).toBeVisible(); + await expect( + canvas.queryByRole("link", { name: "Learn about Premium" }), ).not.toBeInTheDocument(); }, }; @@ -48,14 +54,20 @@ export const NotEntitled: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const cta = canvas.getByRole("link", { name: "Start trial for free" }); + const cta = canvas.getByRole("link", { name: "Learn about Premium" }); await expect(cta).toHaveAttribute("href", "/deployment/premium"); + await expect( + canvas.queryByRole("form", { name: "Appearance settings" }), + ).not.toBeInTheDocument(); + await expect( + canvas.queryByRole("heading", { name: "Announcement Banners" }), + ).not.toBeInTheDocument(); }, }; export const NotEntitledWithoutLicenseAccess: Story = { args: { - permissions: { ...MockPermissions, viewAllLicenses: false }, + canViewPremium: false, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); @@ -64,7 +76,7 @@ export const NotEntitledWithoutLicenseAccess: Story = { canvas.getByText(/contact your deployment administrator/i), ).toBeVisible(); await expect( - canvas.queryByRole("link", { name: "Start trial for free" }), + canvas.queryByRole("link", { name: "Learn about Premium" }), ).not.toBeInTheDocument(); }, }; diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index 7e65bc51f4d7f..9ee5c1f381f4a 100644 --- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -1,11 +1,6 @@ import { useFormik } from "formik"; import type { FC } from "react"; import type { UpdateAppearanceConfig } from "#/api/typesGenerated"; -import { - Badges, - EnterpriseBadge, - PremiumBadge, -} from "#/components/Badges/Badges"; import { Button } from "#/components/Button/Button"; import { FormFields, @@ -15,22 +10,20 @@ import { } from "#/components/Form/Form"; import { FormField } from "#/components/FormField/FormField"; import { IconField } from "#/components/IconField/IconField"; -import { PaywallSmall } from "#/components/Paywall/PaywallSmall"; +import { PaywallPremium } from "#/components/Paywall/PaywallPremium"; import { SettingsHeader, SettingsHeaderDescription, SettingsHeaderTitle, } from "#/components/SettingsHeader/SettingsHeader"; import { Spinner } from "#/components/Spinner/Spinner"; -import type { Permissions } from "#/modules/permissions"; import { getFormHelpers } from "#/utils/formUtils"; import { AnnouncementBannerSettings } from "./AnnouncementBannerSettings"; type AppearanceSettingsPageViewProps = { appearance: UpdateAppearanceConfig; isEntitled: boolean; - isPremium: boolean; - permissions: Permissions; + canViewPremium: boolean; onSaveAppearance: ( newConfig: Partial, ) => Promise; @@ -38,7 +31,7 @@ type AppearanceSettingsPageViewProps = { export const AppearanceSettingsPageView: FC< AppearanceSettingsPageViewProps -> = ({ appearance, isEntitled, isPremium, permissions, onSaveAppearance }) => { +> = ({ appearance, isEntitled, canViewPremium, onSaveAppearance }) => { const form = useFormik<{ application_name: string; logo_url: string; @@ -51,89 +44,74 @@ export const AppearanceSettingsPageView: FC< enableReinitialize: true, }); const getFieldHelpers = getFormHelpers(form); - const fieldsDisabled = !isEntitled || form.isSubmitting; return ( -
-
- - Appearance - - Customize the look and feel of your Coder deployment. - - - - - {isEntitled ? ( - isPremium ? ( - - ) : ( - - ) - ) : ( -
- -
- )} -
+
+ + Appearance + + Customize the look and feel of your Coder deployment. + + - - + ) : ( + <> + - - + + + - { - void form.setFieldValue("logo_url", value); - }} - /> - - + { + void form.setFieldValue("logo_url", value); + }} + /> + + - - - - -
+ + + + - - onSaveAppearance({ announcement_banners: announcementBanners }) - } - /> + + onSaveAppearance({ announcement_banners: announcementBanners }) + } + /> + + )}
); };