Configure workspace classes from dashboard

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,6 +14,8 @@ import getSettingsMenu from "./settings-menu";
 import { trackEvent } from "../Analytics";
 import { PaymentContext } from "../payment-context";
 import SelectIDE from "./SelectIDE";
+import { getExperimentsClient } from "../experiments/client";
+import SelectWorkspaceClass from "./selectClass";
 
 type Theme = "light" | "dark" | "system";
 
@@ -50,6 +52,12 @@ export default function Preferences() {
         }
     };
 
+    const [isShowWorkspaceClasses, setIsShowWorkspaceClasses] = useState<boolean>(false);
+    (async () => {
+        const showWorkspaceClasses = await getExperimentsClient().getValueAsync("workspace_classes", false, {});
+        setIsShowWorkspaceClasses(showWorkspaceClasses);
+    })();
+
     return (
         <div>
             <PageWithSubMenu
@@ -115,9 +123,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 +147,7 @@ export default function Preferences() {
                         </p>
                     </div>
                 </div>
+                <SelectWorkspaceClass enabled={isShowWorkspaceClasses} />
             </PageWithSubMenu>
         </div>
     );

components/dashboard/src/settings/selectClass.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { useContext, useState } from "react";
+import SelectableCardSolid from "../components/SelectableCardSolid";
+import { getGitpodService } from "../service/service";
+import { UserContext } from "../user-context";
+import { trackEvent } from "../Analytics";
+import { WorkspaceClasses } from "@gitpod/gitpod-protocol";
+
+interface SelectWorkspaceClassProps {
+    enabled: boolean;
+}
+
+export default function SelectWorkspaceClass(props: SelectWorkspaceClassProps) {
+    const { user } = useContext(UserContext);
+
+    const [workspaceClass, setWorkspaceClass] = useState<string>(
+        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);
+        }
+    };
+
+    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">
+                    <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>
+            </div>
+        );
+    }
+}

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

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

components/gitpod-protocol/src/protocol.ts

@@ -157,6 +157,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;
     // additional user profile data
     profile?: ProfileDetails;
 }
@@ -186,6 +188,11 @@ export type IDESettings = {
     useLatestVersion?: boolean;
 };
 
+export interface WorkspaceClasses {
+    regular: string;
+    prebuild: string;
+}
+
 export interface UserPlatform {
     uid: string;
     userAgent: string;