Add license badges to create org page

code-asher · code-asher · commit 2d8840b66dfa · 2024-08-07T16:46:45.000-08:00
I am not sure if there is maybe a better place for this, but maybe this
is good enough.
diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx
@@ -3,10 +3,12 @@ import { useMutation, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
 import { createOrganization } from "api/queries/organizations";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { CreateOrganizationPageView } from "./CreateOrganizationPageView";
 
 const CreateOrganizationPage: FC = () => {
   const navigate = useNavigate();
+  const feats = useFeatureVisibility();
 
   const queryClient = useQueryClient();
   const createOrganizationMutation = useMutation(
@@ -18,6 +20,7 @@ const CreateOrganizationPage: FC = () => {
   return (
     <CreateOrganizationPageView
       error={error}
+      isEntitled={feats.multiple_organizations}
       onSubmit={async (values) => {
         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
@@ -5,13 +5,22 @@ import { CreateOrganizationPageView } from "./CreateOrganizationPageView";
 const meta: Meta<typeof CreateOrganizationPageView> = {
   title: "pages/CreateOrganizationPageView",
   component: CreateOrganizationPageView,
+  args: {
+    isEntitled: true,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof CreateOrganizationPageView>;
 
 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
@@ -5,14 +5,27 @@ 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,
   HorizontalForm,
   FormFooter,
 } from "components/Form/Form";
 import { IconField } from "components/IconField/IconField";
+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<void>;
+  isEntitled: boolean;
 }
 
 export const CreateOrganizationPageView: FC<
   CreateOrganizationPageViewProps
-> = ({ error, onSubmit }) => {
+> = ({ error, onSubmit, isEntitled }) => {
   const form = useFormik<CreateOrganizationRequest>({
     initialValues: {
       name: "",
@@ -59,6 +73,26 @@ export const CreateOrganizationPageView: FC<
         description="Organize your deployment into multiple platform teams."
       />
 
+      <Badges>
+        {isEntitled ? <EntitledBadge /> : <DisabledBadge />}
+        <Popover mode="hover">
+          <PopoverTrigger>
+            <span>
+              <PremiumBadge />
+            </span>
+          </PopoverTrigger>
+          <PopoverContent css={{ transform: "translateY(-28px)" }}>
+            <PopoverPaywall
+              message="Organizations"
+              description="Organizations allow you to run a Coder deployment with multiple platform teams, all with unique use cases, templates, and even underlying infrastructure."
+              // TODO: No documentation link yet.
+              documentationLink={docs("/admin")}
+              licenseType="premium"
+            />
+          </PopoverContent>
+        </Popover>
+      </Badges>
+
       {Boolean(error) && !isApiValidationError(error) && (
         <div css={{ marginBottom: 32 }}>
           <ErrorAlert error={error} />
