feat: ide awareness during onboarding

Co-authored-by: mustard <huiwen@gitpod.io>
Co-authored-by: andreafalzetti <andrea@gitpod.io>

Author: mustard-mh

components/dashboard/src/settings/Preferences.tsx

@@ -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";
 
@@ -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) => {
-        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") {
@@ -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 || {};
@@ -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">
@@ -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;
-}