Skip to content
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

[Dashboard] Increase IDE awareness during onboarding #9432

Merged
merged 1 commit into from
Apr 28, 2022
Merged

[Dashboard] Increase IDE awareness during onboarding #9432

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
199 changes: 5 additions & 194 deletions components/dashboard/src/settings/Preferences.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,17 @@
* See License-AGPL.txt in the project root for license information.
*/

import { IDEOption, IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
import { useContext, useEffect, useState } from "react";
import InfoBox from "../components/InfoBox";
import { useContext, useState } from "react";
import { PageWithSubMenu } from "../components/PageWithSubMenu";
import PillLabel from "../components/PillLabel";
import SelectableCard from "../components/SelectableCard";
import SelectableCardSolid from "../components/SelectableCardSolid";
import Tooltip from "../components/Tooltip";
import { getGitpodService } from "../service/service";
import { ThemeContext } from "../theme-context";
import { UserContext } from "../user-context";
import getSettingsMenu from "./settings-menu";
import { trackEvent } from "../Analytics";
import { PaymentContext } from "../payment-context";
import CheckBox from "../components/CheckBox";
import { IDESettings } from "@gitpod/gitpod-protocol";
import SelectIDE from "./SelectIDE";

type Theme = "light" | "dark" | "system";

Expand All @@ -28,79 +23,6 @@ export default function Preferences() {
const { showPaymentUI } = useContext(PaymentContext);
const { setIsDark } = useContext(ThemeContext);

const migrationIDESettings = () => {
if (!user?.additionalData?.ideSettings || user.additionalData.ideSettings.settingVersion === "2.0") {
return;
}
const newIDESettings: IDESettings = {
settingVersion: "2.0",
};
const ideSettings = user.additionalData.ideSettings;
if (ideSettings.useDesktopIde) {
if (ideSettings.defaultDesktopIde === "code-desktop") {
newIDESettings.defaultIde = "code-desktop";
} else if (ideSettings.defaultDesktopIde === "code-desktop-insiders") {
newIDESettings.defaultIde = "code-desktop";
newIDESettings.useLatestVersion = true;
} else {
newIDESettings.defaultIde = ideSettings.defaultDesktopIde;
newIDESettings.useLatestVersion = ideSettings.useLatestVersion;
}
} else {
const useLatest = ideSettings.defaultIde === "code-latest";
newIDESettings.defaultIde = "code";
newIDESettings.useLatestVersion = useLatest;
}
user.additionalData.ideSettings = newIDESettings;
};
migrationIDESettings();

const updateUserIDEInfo = async (selectedIde: string, useLatestVersion: boolean) => {
Copy link
Contributor Author

@andreafalzetti andreafalzetti Apr 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I've extracted the logic to present & save the IDE preference from the Preferences page into a dedicated component <SelectIDE>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

updateUserIDEInfo was also moved to its own file, to allow reusability

const additionalData = user?.additionalData ?? {};
const settings = additionalData.ideSettings ?? {};
settings.settingVersion = "2.0";
settings.defaultIde = selectedIde;
settings.useLatestVersion = useLatestVersion;
additionalData.ideSettings = settings;
getGitpodService()
.server.trackEvent({
event: "ide_configuration_changed",
properties: settings,
})
.then()
.catch(console.error);
await getGitpodService().server.updateLoggedInUser({ additionalData });
};

const [defaultIde, setDefaultIde] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || "");
const actuallySetDefaultIde = async (value: string) => {
await updateUserIDEInfo(value, useLatestVersion);
setDefaultIde(value);
};

const [useLatestVersion, setUseLatestVersion] = useState<boolean>(
user?.additionalData?.ideSettings?.useLatestVersion ?? false,
);
const actuallySetUseLatestVersion = async (value: boolean) => {
await updateUserIDEInfo(defaultIde, value);
setUseLatestVersion(value);
};

const [ideOptions, setIdeOptions] = useState<IDEOptions | undefined>(undefined);
useEffect(() => {
(async () => {
const ideopts = await getGitpodService().server.getIDEOptions();
// TODO: Compatible with ide-config not deployed, need revert after ide-config deployed
delete ideopts.options["code-latest"];
delete ideopts.options["code-desktop-insiders"];

setIdeOptions(ideopts);
if (!defaultIde || ideopts.options[defaultIde] == null) {
setDefaultIde(ideopts.defaultIde);
}
})();
}, []);

const [theme, setTheme] = useState<Theme>(localStorage.theme || "system");
const actuallySetTheme = (theme: Theme) => {
if (theme === "dark" || theme === "light") {
Expand All @@ -115,8 +37,6 @@ export default function Preferences() {
setTheme(theme);
};

const allIdeOptions = ideOptions && orderedIdeOptions(ideOptions);

const [dotfileRepo, setDotfileRepo] = useState<string>(user?.additionalData?.dotfileRepo || "");
const actuallySetDotfileRepo = async (value: string) => {
const additionalData = user?.additionalData || {};
Expand All @@ -136,80 +56,9 @@ export default function Preferences() {
title="Preferences"
subtitle="Configure user preferences."
>
{ideOptions && (
<>
{allIdeOptions && (
<>
<h3>Editor</h3>
<p className="text-base text-gray-500 dark:text-gray-400">
Choose the editor for opening workspaces.
</p>
<div className="my-4 gap-4 flex flex-wrap max-w-2xl">
{allIdeOptions.map(([id, option]) => {
const selected = defaultIde === id;
const onSelect = () => actuallySetDefaultIde(id);
return renderIdeOption(option, selected, onSelect);
})}
</div>
{ideOptions.options[defaultIde]?.notes && (
<InfoBox className="my-5 max-w-2xl">
<ul>
{ideOptions.options[defaultIde].notes?.map((x, idx) => (
<li className={idx > 0 ? "mt-2" : ""}>{x}</li>
))}
</ul>
</InfoBox>
)}
<p className="text-left w-full text-gray-500">
The <strong>JetBrains desktop IDEs</strong> are currently in beta.{" "}
<a
href="https://github.com/gitpod-io/gitpod/issues/6576"
target="gitpod-feedback-issue"
rel="noopener"
className="gp-link"
>
Send feedback
</a>{" "}
·{" "}
<a
href="https://www.gitpod.io/docs/integrations/jetbrains"
target="_blank"
rel="noopener noreferrer"
className="gp-link"
>
Documentation
</a>
</p>
</>
)}
<CheckBox
title="Latest Release (Unstable)"
desc={
<span>
Use the latest version for each editor.{" "}
<a
className="gp-link"
target="_blank"
href="https://code.visualstudio.com/blogs/2016/02/01/introducing_insiders_build"
>
Insiders
</a>{" "}
for VS Code,{" "}
<a
className="gp-link"
target="_blank"
href="https://www.jetbrains.com/resources/eap/"
>
EAP
</a>{" "}
for JetBrains IDEs.
</span>
}
checked={useLatestVersion}
onChange={(e) => actuallySetUseLatestVersion(e.target.checked)}
/>
</>
)}
<h3>Editor</h3>
<p className="text-base text-gray-500 dark:text-gray-400">Choose the editor for opening workspaces.</p>
<SelectIDE />
<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-4 flex">
Expand Down Expand Up @@ -294,41 +143,3 @@ export default function Preferences() {
</div>
);
}

function orderedIdeOptions(ideOptions: IDEOptions) {
// TODO: Maybe convert orderKey to number before sort?
return Object.entries(ideOptions.options)
.filter(([_, x]) => !x.hidden)
.sort((a, b) => {
const keyA = a[1].orderKey || a[0];
const keyB = b[1].orderKey || b[0];
return keyA.localeCompare(keyB);
});
}

function renderIdeOption(option: IDEOption, selected: boolean, onSelect: () => void): JSX.Element {
const label = option.type === "desktop" ? "" : option.type;
const card = (
<SelectableCardSolid className="w-36 h-40" title={option.title} selected={selected} onClick={onSelect}>
<div className="flex justify-center mt-3">
<img className="w-16 filter-grayscale self-center" src={option.logo} alt="logo" />
</div>
{label ? (
<div
className={`font-semibold text-sm ${
selected ? "text-gray-100 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
} uppercase mt-2 px-3 py-1 self-center`}
>
{label}
</div>
) : (
<></>
)}
</SelectableCardSolid>
);

if (option.tooltip) {
return <Tooltip content={option.tooltip}>{card}</Tooltip>;
}
return card;
}
Loading