[dashboard] Nudge users toward pay-as-you-go in workspace class preferences

Author: jankeromnes

components/dashboard/src/components/Alert.tsx

@@ -62,7 +62,7 @@ const infoMap: Record<AlertType, AlertInfo> = {
         iconColor: "text-gray-400",
     },
     message: {
-        bgCls: "bg-blue-50 dark:bg-blue-700",
+        bgCls: "bg-blue-50 dark:bg-blue-800",
         txtCls: "text-blue-800 dark:text-blue-100",
         icon: <InfoSvg className="w-4 h-4"></InfoSvg>,
         iconColor: "text-blue-400",

components/dashboard/src/projects/ProjectSettings.tsx

@@ -15,6 +15,8 @@ import PillLabel from "../components/PillLabel";
 import { ProjectContext } from "./project-context";
 import SelectWorkspaceClass from "../settings/selectClass";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
+import Alert from "../components/Alert";
+import { Link } from "react-router-dom";
 
 export function getProjectSettingsMenu(project?: Project, team?: Team) {
     const teamOrUserSlug = !!team ? "t/" + team.slug : "projects";
@@ -48,12 +50,14 @@ export function ProjectSettingsPage(props: { project?: Project; children?: React
 
 export default function () {
     const { project, setProject } = useContext(ProjectContext);
-    const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
+    const [billingMode, setBillingMode] = useState<BillingMode | undefined>(undefined);
     const { teams } = useContext(TeamsContext);
     const team = getCurrentTeam(useLocation(), teams);
     useEffect(() => {
         if (team) {
-            getGitpodService().server.getBillingModeForTeam(team.id).then(setTeamBillingMode);
+            getGitpodService().server.getBillingModeForTeam(team.id).then(setBillingMode);
+        } else {
+            getGitpodService().server.getBillingModeForUser().then(setBillingMode);
         }
     }, [team]);
 
@@ -156,13 +160,43 @@ export default function () {
                     </div>
                 </div>
             </div>
-            {BillingMode.canSetWorkspaceClass(teamBillingMode) && (
-                <SelectWorkspaceClass
-                    workspaceClass={project.settings?.workspaceClasses?.regular}
-                    enabled={BillingMode.canSetWorkspaceClass(teamBillingMode)}
-                    setWorkspaceClass={setWorkspaceClass}
-                />
-            )}
+            <div>
+                <h3 className="mt-12">Workspaces</h3>
+                <p className="text-base text-gray-500 dark:text-gray-400">
+                    Choose the workspace machine type for your workspaces.
+                </p>
+                {BillingMode.canSetWorkspaceClass(billingMode) ? (
+                    <SelectWorkspaceClass
+                        workspaceClass={project.settings?.workspaceClasses?.regular}
+                        setWorkspaceClass={setWorkspaceClass}
+                    />
+                ) : (
+                    <Alert type="message" className="mt-4">
+                        <div className="flex flex-col">
+                            <span>
+                                To access{" "}
+                                <a
+                                    className="gp-link"
+                                    href="https://www.gitpod.io/docs/configure/workspaces/workspace-classes"
+                                >
+                                    large workspaces
+                                </a>{" "}
+                                and{" "}
+                                <a
+                                    className="gp-link"
+                                    href="https://www.gitpod.io/docs/configure/billing/pay-as-you-go"
+                                >
+                                    pay-as-you-go
+                                </a>
+                                , first cancel your existing plan.
+                            </span>
+                            <Link className="mt-2" to={project.teamId ? "../billing" : "/plans"}>
+                                <button>Go to {project.teamId ? "Team" : "Personal"} Billing</button>
+                            </Link>
+                        </div>
+                    </Alert>
+                )}
+            </div>
         </ProjectSettingsPage>
     );
 }

components/dashboard/src/settings/selectClass.tsx

@@ -11,7 +11,6 @@ import WorkspaceClass from "../components/WorkspaceClass";
 import { SupportedWorkspaceClass } from "@gitpod/gitpod-protocol/lib/workspace-class";
 
 interface SelectWorkspaceClassProps {
-    enabled: boolean;
     workspaceClass?: string;
     setWorkspaceClass: (value: string) => Promise<string | undefined>;
 }
@@ -44,31 +43,21 @@ export default function SelectWorkspaceClass(props: SelectWorkspaceClassProps) {
         fetchClasses().catch(console.error);
     }, []);
 
-    if (!props.enabled) {
-        return <div></div>;
-    } else {
-        return (
-            <div>
-                <h3 className="mt-12">Workspaces</h3>
-                <p className="text-base text-gray-500 dark:text-gray-400">
-                    Choose the workspace machine type for your workspaces.
-                </p>
-                <div className="mt-4 space-x-3 flex">
-                    {supportedClasses.map((c) => {
-                        return (
-                            <WorkspaceClass
-                                additionalStyles="w-80 h-32"
-                                selected={workspaceClass === c.id}
-                                onClick={() => actuallySetWorkspaceClass(c.id)}
-                                category={c.category}
-                                friendlyName={c.displayName}
-                                description={c.description}
-                                powerUps={c.powerups}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
-        );
-    }
+    return (
+        <div className="mt-4 space-x-3 flex">
+            {supportedClasses.map((c) => {
+                return (
+                    <WorkspaceClass
+                        additionalStyles="w-80 h-32"
+                        selected={workspaceClass === c.id}
+                        onClick={() => actuallySetWorkspaceClass(c.id)}
+                        category={c.category}
+                        friendlyName={c.displayName}
+                        description={c.description}
+                        powerUps={c.powerups}
+                    />
+                );
+            })}
+        </div>
+    );
 }