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

Author: jankeromnes

components/dashboard/src/projects/ProjectSettings.tsx

@@ -15,6 +15,7 @@ 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";
 
 export function getProjectSettingsMenu(project?: Project, team?: Team) {
     const teamOrUserSlug = !!team ? "t/" + team.slug : "projects";
@@ -48,12 +49,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 +159,38 @@ 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 className="text-md font-semibold">
+                                Upgrade your {project.teamId ? "team" : "personal account"} to access larger workspaces
+                            </span>
+                            <span className="font-sm">
+                                Workspace classes allow you to select the resources available to your workspaces.{" "}
+                                <a
+                                    className="gp-link"
+                                    href="https://www.gitpod.io/docs/configure/workspaces/workspace-classes"
+                                >
+                                    Learn more
+                                </a>
+                            </span>
+                            <a className="mt-4" href={project.teamId ? "../billing" : "/billing"}>
+                                <button>Upgrade {project.teamId ? "Team" : "Personal Account"}</button>
+                            </a>
+                        </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>
+    );
 }