[dashboard] Allow user to set workspace class

Author: Furisto

components/dashboard/src/Analytics.tsx

@@ -10,7 +10,12 @@ import Cookies from "js-cookie";
 import { v4 } from "uuid";
 import { Experiment } from "./experiments";
 
-export type Event = "invite_url_requested" | "organisation_authorised" | "dotfile_repo_changed" | "feedback_submitted";
+export type Event =
+    | "invite_url_requested"
+    | "organisation_authorised"
+    | "dotfile_repo_changed"
+    | "feedback_submitted"
+    | "workspace_class_changed";
 type InternalEvent = Event | "path_changed" | "dashboard_clicked";
 
 export type EventProperties = TrackOrgAuthorised | TrackInviteUrlRequested | TrackDotfileRepo | TrackFeedback;

components/dashboard/src/settings/Preferences.tsx

@@ -14,8 +14,10 @@ import getSettingsMenu from "./settings-menu";
 import { trackEvent } from "../Analytics";
 import { PaymentContext } from "../payment-context";
 import SelectIDE from "./SelectIDE";
+import { WorkspaceClasses } from "@gitpod/gitpod-protocol";
 
 type Theme = "light" | "dark" | "system";
+type WorkspaceClass = "standard" | "XL";
 
 export default function Preferences() {
     const { user } = useContext(UserContext);
@@ -50,6 +52,26 @@ export default function Preferences() {
         }
     };
 
+    const [workspaceClass, setWorkspaceClass] = useState<WorkspaceClass>(
+        user?.additionalData?.workspaceClasses?.regular || "standard",
+    );
+    const actuallySetWorkspaceClass = async (value: string) => {
+        const additionalData = user?.additionalData || {};
+        const prevWorkspaceClass = additionalData?.workspaceClasses?.regular || "standard";
+        const workspaceClasses = (additionalData?.workspaceClasses || {}) as WorkspaceClasses;
+        workspaceClasses.regular = value;
+        workspaceClasses.prebuild = value;
+        additionalData.workspaceClasses = workspaceClasses;
+        if (value !== prevWorkspaceClass) {
+            await getGitpodService().server.updateLoggedInUser({ additionalData });
+            trackEvent("workspace_class_changed", {
+                previous: prevWorkspaceClass,
+                current: value,
+            });
+            setWorkspaceClass(value);
+        }
+    };
+
     return (
         <div>
             <PageWithSubMenu
@@ -115,9 +137,7 @@ export default function Preferences() {
                     </SelectableCardSolid>
                 </div>
 
-                <h3 className="mt-12">
-                    Dotfiles{" "}
-                </h3>
+                <h3 className="mt-12">Dotfiles </h3>
                 <p className="text-base text-gray-500 dark:text-gray-400">Customize workspaces using dotfiles.</p>
                 <div className="mt-4 max-w-xl">
                     <h4>Repository URL</h4>
@@ -141,6 +161,48 @@ export default function Preferences() {
                         </p>
                     </div>
                 </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">
+                    <SelectableCardSolid
+                        className="w-36 h-32"
+                        title="Standard"
+                        selected={workspaceClass === "standard"}
+                        onClick={() => actuallySetWorkspaceClass("standard")}
+                    >
+                        <div className="flex-grow flex items-end p-1">
+                            <svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M0 8a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 32a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 56a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM40 6a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H46a6 6 0 0 1-6-6V6Z"
+                                    fill="#D6D3D1"
+                                />
+                            </svg>
+                        </div>
+                    </SelectableCardSolid>
+                    <SelectableCardSolid
+                        className="w-36 h-32"
+                        title="XL"
+                        selected={workspaceClass === "XL"}
+                        onClick={() => actuallySetWorkspaceClass("XL")}
+                    >
+                        <div className="flex-grow flex items-end p-1">
+                            <svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M0 8a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM40 6a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H46a6 6 0 0 1-6-6V6Z"
+                                    fill="#D9D9D9"
+                                />
+                                <path
+                                    d="M84 0h22a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H68L84 0ZM0 32a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8Z"
+                                    fill="#78716C"
+                                />
+                                <path d="M0 56a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8Z" fill="#D9D9D9" />
+                            </svg>
+                        </div>
+                    </SelectableCardSolid>
+                </div>
             </PageWithSubMenu>
         </div>
     );

components/ee/payment-endpoint/src/accounting/account-service.spec.db.ts

@@ -77,7 +77,11 @@ const end = new Date(Date.UTC(2000, 2, 1)).toISOString();
                 emailNotificationSettings: {
                     allowsChangelogMail: true,
                     allowsDevXMail: true
-                }
+                },
+                workspaceClasses: {
+                    regular: "default",
+                    prebuild: "default,"
+                },
             }
         });
         await this.workspaceDb.store({

components/gitpod-db/src/typeorm/user-db-impl.ts

@@ -109,6 +109,10 @@ export class TypeORMUserDBImpl implements UserDB {
                     allowsDevXMail: true,
                     allowsOnboardingMail: true,
                 },
+                workspaceClasses: {
+                    regular: "default",
+                    prebuild: "default",
+                },
             },
         };
         await this.storeUser(user);

components/gitpod-protocol/src/protocol.ts

@@ -154,6 +154,8 @@ export interface AdditionalUserData {
     dotfileRepo?: string;
     // Identifies an explicit team or user ID to which all the user's workspace usage should be attributed to (e.g. for billing purposes)
     usageAttributionId?: string;
+    // preferred workspace classes
+    workspaceClasses?: WorkspaceClasses;
 }
 
 export interface EmailNotificationSettings {
@@ -172,6 +174,11 @@ export type IDESettings = {
     useLatestVersion?: boolean;
 };
 
+export interface WorkspaceClasses {
+    regular: string;
+    prebuild: string;
+}
+
 export interface UserPlatform {
     uid: string;
     userAgent: string;