Skip to content

[dashboard] Update design of class settings #11435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 19, 2022
Merged

[dashboard] Update design of class settings #11435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions components/dashboard/src/components/WorkspaceClass.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-400" : "text-gray-400 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-300"
}`}
>
{props.friendlyName}
</div>
<div
className={`text-sm font-normal truncate w-full ${
props.selected ? "text-gray-300 dark:text-gray-500" : "text-gray-500 dark:text-gray-400"
}`}
>
{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;
4 changes: 2 additions & 2 deletions components/dashboard/src/settings/Preferences.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -73,6 +73,7 @@ export default function Preferences() {
<h3>Editor</h3>
<p className="text-base text-gray-500 dark:text-gray-400">Choose the editor for opening workspaces.</p>
<SelectIDE location="preferences" />
<SelectWorkspaceClass enabled={isShowWorkspaceClasses} />
<h3 className="mt-12">Theme</h3>
<p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
<div className="mt-4 space-x-3 flex">
Expand Down Expand Up @@ -152,7 +153,6 @@ export default function Preferences() {
</p>
</div>
</div>
<SelectWorkspaceClass enabled={isShowWorkspaceClasses} />
</PageWithSubMenu>
</div>
);
Expand Down
59 changes: 21 additions & 38 deletions components/dashboard/src/settings/selectClass.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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
Copy link
Contributor

@gtsiolis gtsiolis Jul 18, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Is the SelectableCardSolid not flexible enough for what we need here? I'd love us to reuse the same component and maintain styles and interaction in one place. Haven't checked in depth but would that require us to update the SelectableCardSolid component?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found it nicer to encapsulate everything that is needed for a workspace class in one place, but I am happy to explore using SelectableCardSolid instead.

Copy link
Contributor

@gtsiolis gtsiolis Jul 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fyi: Opened follow-up issue #11472 to track this.

additionalStyles="w-80 h-32"
selected={workspaceClass === "g1-standard"}
onClick={() => actuallySetWorkspaceClass("g1-standard")}
category="GENERAL PURPOSE"
friendlyName="Standard"
Copy link
Contributor

@gtsiolis gtsiolis Jul 18, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion(non-blocking): Shall we use kebab-case (all lowercase) here?

BEFORE AFTER (kebab-case)
labels-1 labels-2

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer the current way. The category and the description start with an upper case letter and the class starting with a lower case letter looks out of place to me.

Copy link
Contributor

@gtsiolis gtsiolis Jul 19, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any option would suffice for now.
Looping in @jldec as this will affect usage page pages which will surface the class.

description="Up to 4 vCPU, 8GB memory, 30GB disk"
powerUps={1}
/>
<WorkspaceClass
additionalStyles="w-80 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>
);
Expand Down