Skip to content

Commit 15141e4

Browse files
FuristoFuristo
committed
[dashboard] Update design for class settings
1 parent 4692d0a commit 15141e4

File tree

3 files changed

+89
-40
lines changed

3 files changed

+89
-40
lines changed

‎components/dashboard/src/components/WorkspaceClass.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* Copyright (c) 2022 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License-AGPL.txt in the project root for license information.
5+
*/
6+
7+
export interface WorkspaceClassProps {
8+
selected: boolean;
9+
additionalStyles?: string;
10+
onClick: () => void;
11+
children?: React.ReactNode;
12+
category: string;
13+
friendlyName: string;
14+
description?: string;
15+
powerUps?: number;
16+
}
17+
18+
function WorkspaceClass(props: WorkspaceClassProps) {
19+
return (
20+
<div
21+
className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group transition ease-in-out ${
22+
props.selected
23+
? "bg-gray-800 dark:bg-gray-100"
24+
: "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
25+
} ${props.additionalStyles || ""}`}
26+
onClick={props.onClick}
27+
>
28+
<div className="flex items-center">
29+
<p
30+
className={`w-full pl-1 text-sm font-normal truncate ${
31+
props.selected ? "text-gray-400 dark:text-gray-400" : "text-gray-400 dark:text-gray-500"
32+
}`}
33+
title={props.category}
34+
>
35+
{props.category}
36+
</p>
37+
<input className="opacity-0" type="radio" checked={props.selected} />
38+
</div>
39+
<div className="pl-1 grid auto-rows-auto">
40+
<div
41+
className={`text-xl font-semibold mt-1 mb-4 ${
42+
props.selected ? "text-gray-100 dark:text-gray-600" : "text-gray-700 dark:text-gray-300"
43+
}`}
44+
>
45+
{props.friendlyName}
46+
</div>
47+
<div
48+
className={`text-sm font-normal truncate w-full ${
49+
props.selected ? "text-gray-300 dark:text-gray-500" : "text-gray-500 dark:text-gray-400"
50+
}`}
51+
>
52+
{props.description}
53+
</div>
54+
<div className="text-xl font-semibold mt-1 mb-4">
55+
<svg viewBox="0 -4 50 50" xmlns="http://www.w3.org/2000/svg">
56+
{Array.from(Array(props.powerUps).keys()).map((i) => {
57+
return <ellipse cx={0.8 + i * 2.5} cy="-3" rx="0.8" ry="0.8" style={{ fill: "#FFB45B" }} />;
58+
})}
59+
</svg>
60+
</div>
61+
</div>
62+
</div>
63+
);
64+
}
65+
66+
export default WorkspaceClass;

‎components/dashboard/src/settings/Preferences.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default function Preferences() {
5757
if (!user) {
5858
return;
5959
}
60-
const showWorkspaceClasses = await getExperimentsClient().getValueAsync("workspace_classes", false, {
60+
const showWorkspaceClasses = await getExperimentsClient().getValueAsync("workspace_classes", true, {
6161
user,
6262
});
6363
setIsShowWorkspaceClasses(showWorkspaceClasses);
@@ -73,6 +73,7 @@ export default function Preferences() {
7373
<h3>Editor</h3>
7474
<p className="text-base text-gray-500 dark:text-gray-400">Choose the editor for opening workspaces.</p>
7575
<SelectIDE location="preferences" />
76+
<SelectWorkspaceClass enabled={isShowWorkspaceClasses} />
7677
<h3 className="mt-12">Theme</h3>
7778
<p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
7879
<div className="mt-4 space-x-3 flex">
@@ -152,7 +153,6 @@ export default function Preferences() {
152153
</p>
153154
</div>
154155
</div>
155-
<SelectWorkspaceClass enabled={isShowWorkspaceClasses} />
156156
</PageWithSubMenu>
157157
</div>
158158
);

‎components/dashboard/src/settings/selectClass.tsx

Lines changed: 21 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
*/
66

77
import { useContext, useState } from "react";
8-
import SelectableCardSolid from "../components/SelectableCardSolid";
98
import { getGitpodService } from "../service/service";
109
import { UserContext } from "../user-context";
1110
import { trackEvent } from "../Analytics";
1211
import { WorkspaceClasses } from "@gitpod/gitpod-protocol";
12+
import WorkspaceClass from "../components/WorkspaceClass";
1313

1414
interface SelectWorkspaceClassProps {
1515
enabled: boolean;
@@ -19,11 +19,11 @@ export default function SelectWorkspaceClass(props: SelectWorkspaceClassProps) {
1919
const { user } = useContext(UserContext);
2020

2121
const [workspaceClass, setWorkspaceClass] = useState<string>(
22-
user?.additionalData?.workspaceClasses?.regular || "standard",
22+
user?.additionalData?.workspaceClasses?.regular || "g1-standard",
2323
);
2424
const actuallySetWorkspaceClass = async (value: string) => {
2525
const additionalData = user?.additionalData || {};
26-
const prevWorkspaceClass = additionalData?.workspaceClasses?.regular || "standard";
26+
const prevWorkspaceClass = additionalData?.workspaceClasses?.regular || "g1-standard";
2727
const workspaceClasses = (additionalData?.workspaceClasses || {}) as WorkspaceClasses;
2828
workspaceClasses.regular = value;
2929
workspaceClasses.prebuild = value;
@@ -48,41 +48,24 @@ export default function SelectWorkspaceClass(props: SelectWorkspaceClassProps) {
4848
Choose the workspace machine type for your workspaces.
4949
</p>
5050
<div className="mt-4 space-x-3 flex">
51-
<SelectableCardSolid
52-
className="w-36 h-32"
53-
title="Standard"
54-
selected={workspaceClass === "standard"}
55-
onClick={() => actuallySetWorkspaceClass("standard")}
56-
>
57-
<div className="flex-grow flex items-end p-1">
58-
<svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
59-
<path
60-
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"
61-
fill="#D6D3D1"
62-
/>
63-
</svg>
64-
</div>
65-
</SelectableCardSolid>
66-
<SelectableCardSolid
67-
className="w-36 h-32"
68-
title="XL"
69-
selected={workspaceClass === "XL"}
70-
onClick={() => actuallySetWorkspaceClass("XL")}
71-
>
72-
<div className="flex-grow flex items-end p-1">
73-
<svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
74-
<path
75-
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"
76-
fill="#D9D9D9"
77-
/>
78-
<path
79-
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"
80-
fill="#78716C"
81-
/>
82-
<path d="M0 56a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8Z" fill="#D9D9D9" />
83-
</svg>
84-
</div>
85-
</SelectableCardSolid>
51+
<WorkspaceClass
52+
additionalStyles="w-80 h-32"
53+
selected={workspaceClass === "g1-standard"}
54+
onClick={() => actuallySetWorkspaceClass("g1-standard")}
55+
category="GENERAL PURPOSE"
56+
friendlyName="Standard"
57+
description="Up to 4 vCPU, 8GB memory, 30GB disk"
58+
powerUps={1}
59+
/>
60+
<WorkspaceClass
61+
additionalStyles="w-80 h-32"
62+
selected={workspaceClass === "g1-large"}
63+
onClick={() => actuallySetWorkspaceClass("g1-large")}
64+
category="GENERAL PURPOSE"
65+
friendlyName="Large"
66+
description="Up to 8 vCPU, 16GB memory, 50GB disk"
67+
powerUps={2}
68+
/>
8669
</div>
8770
</div>
8871
);

0 commit comments

Comments
 (0)