[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";
@@ -156,13 +157,32 @@ 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(teamBillingMode) ? (
+                    <SelectWorkspaceClass
+                        workspaceClass={project.settings?.workspaceClasses?.regular}
+                        enabled={BillingMode.canSetWorkspaceClass(teamBillingMode)}
+                        setWorkspaceClass={setWorkspaceClass}
+                    />
+                ) : (
+                    <Alert type="message" className="mb-4">
+                        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. Existing plans will keep working until the end of March,
+                        2023.
+                    </Alert>
+                )}
+            </div>
         </ProjectSettingsPage>
     );
 }

components/dashboard/src/settings/selectClass.tsx

@@ -48,26 +48,20 @@ export default function SelectWorkspaceClass(props: SelectWorkspaceClassProps) {
         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 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>
         );
     }