[dashboard] Update design for class settings

gitpod-io · Jul 18, 2022 · 4cdb19b · 4cdb19b
1 parent 4692d0a
commit 4cdb19b
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 39 deletions.
diff --git a/components/dashboard/src/components/WorkspaceClass.tsx b/components/dashboard/src/components/WorkspaceClass.tsx
@@ -0,0 +1,66 @@
+/**
+ * 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.
+ */
+
+export interface WorkspaceClassProps {
+    selected: boolean;
+    additionalStyles?: string;
+    onClick: () => void;
+    children?: React.ReactNode;
+    category: string;
+    friendlyName: string;
+    description?: string;
+    powerUps?: number;
+}
+
+function WorkspaceClass(props: WorkspaceClassProps) {
+    return (
+        <div
+            className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group transition ease-in-out ${
+                props.selected
+                    ? "bg-gray-800 dark:bg-gray-100"
+                    : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
+            } ${props.additionalStyles || ""}`}
+            onClick={props.onClick}
+        >
+            <div className="flex items-center">
+                <p
+                    className={`w-full pl-1 text-sm font-normal truncate ${
+                        props.selected ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
+                    }`}
+                    title={props.category}
+                >
+                    {props.category}
+                </p>
+                <input className="opacity-0" type="radio" checked={props.selected} />
+            </div>
+            <div className="pl-1 grid auto-rows-auto">
+                <div
+                    className={`text-xl font-semibold mt-1 mb-4 ${
+                        props.selected ? "text-gray-100 dark:text-gray-600" : "text-gray-700 dark:text-gray-500"
+                    }`}
+                >
+                    {props.friendlyName}
+                </div>
+                <div
+                    className={`text-sm font-normal truncate w-full ${
+                        props.selected ? "text-gray-300 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
+                    }`}
+                >
+                    {props.description}
+                </div>
+                <div className="text-xl font-semibold mt-1 mb-4">
+                    <svg viewBox="0 -4 50 50" xmlns="http://www.w3.org/2000/svg">
+                        {Array.from(Array(props.powerUps).keys()).map((i) => {
+                            return <ellipse cx={0.8 + i * 2.5} cy="-3" rx="0.8" ry="0.8" style={{ fill: "#FFB45B" }} />;
+                        })}
+                    </svg>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default WorkspaceClass;
diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx
@@ -57,7 +57,7 @@ export default function Preferences() {
         if (!user) {
             return;
         }
-        const showWorkspaceClasses = await getExperimentsClient().getValueAsync("workspace_classes", false, {
+        const showWorkspaceClasses = await getExperimentsClient().getValueAsync("workspace_classes", true, {
             user,
         });
         setIsShowWorkspaceClasses(showWorkspaceClasses);

diff --git a/components/dashboard/src/settings/selectClass.tsx b/components/dashboard/src/settings/selectClass.tsx
@@ -5,11 +5,11 @@
  */
 
 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";
+import WorkspaceClass from "../components/WorkspaceClass";
 
 interface SelectWorkspaceClassProps {
     enabled: boolean;
@@ -19,11 +19,11 @@ export default function SelectWorkspaceClass(props: SelectWorkspaceClassProps) {
     const { user } = useContext(UserContext);
 
     const [workspaceClass, setWorkspaceClass] = useState<string>(
-        user?.additionalData?.workspaceClasses?.regular || "standard",
+        user?.additionalData?.workspaceClasses?.regular || "g1-standard",
     );
     const actuallySetWorkspaceClass = async (value: string) => {
         const additionalData = user?.additionalData || {};
-        const prevWorkspaceClass = additionalData?.workspaceClasses?.regular || "standard";
+        const prevWorkspaceClass = additionalData?.workspaceClasses?.regular || "g1-standard";
         const workspaceClasses = (additionalData?.workspaceClasses || {}) as WorkspaceClasses;
         workspaceClasses.regular = value;
         workspaceClasses.prebuild = value;
@@ -48,41 +48,24 @@ export default function SelectWorkspaceClass(props: SelectWorkspaceClassProps) {
                     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>
+                    <WorkspaceClass
+                        additionalStyles="w-68 h-32"
+                        selected={workspaceClass === "g1-standard"}
+                        onClick={() => actuallySetWorkspaceClass("g1-standard")}
+                        category="GENERAL PURPOSE"
+                        friendlyName="Standard"
+                        description="Up to 4 vCPU, 8GB memory, 30GB disk"
+                        powerUps={1}
+                    />
+                    <WorkspaceClass
+                        additionalStyles="w-68 h-32"
+                        selected={workspaceClass === "g1-large"}
+                        onClick={() => actuallySetWorkspaceClass("g1-large")}
+                        category="GENERAL PURPOSE"
+                        friendlyName="Large"
+                        description="Up to 8 vCPU, 16GB memory, 50GB disk"
+                        powerUps={2}
+                    />
                 </div>
             </div>
         );