Replace <SelectIDE /> with <SelectIDEComponent /> (#16847)

* Replace `<SelectIDE />` with `<SelectIDEComponent />`

* The latest checkbox

* Don't show stable IDEs when latest is selected

* Limit width

* Enlarge

* Remove `<SelectIDE />`

* Back, back to school again

* Dead code

* Fix width

* Use `width` instead of `max-width`

* Remove unused import

* Show JB beta notice

* Add a margin to the selector

* Remove custom modal width

Co-authored-by: George Tsiolis <[email protected]>

* Finish off the age-old todo :)

* Remove `<SelectIDEModal />`

* retest

* Remove unused code

* use `useUpdateCurrentUserMutation`

---------

Co-authored-by: George Tsiolis <[email protected]>
Co-authored-by: Milan Pavlik <[email protected]>

Author: 3 people

components/dashboard/src/app/AppRoutes.tsx

@@ -4,16 +4,14 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { ContextURL, User } from "@gitpod/gitpod-protocol";
+import { User } from "@gitpod/gitpod-protocol";
 import React, { useContext, useState } from "react";
 import { Redirect, Route, Switch, useLocation } from "react-router";
 import { AppNotifications } from "../AppNotifications";
 import Menu from "../menu/Menu";
 import OAuthClientApproval from "../OauthClientApproval";
 import { projectsPathInstallGitHubApp, projectsPathNew } from "../projects/projects.routes";
-import { StartPage, StartPhase } from "../start/StartPage";
 import { parseProps } from "../start/StartWorkspace";
-import SelectIDEModal from "../user-settings/SelectIDEModal";
 import {
     settingsPathAccount,
     settingsPathBilling,
@@ -137,16 +135,7 @@ export const AppRoutes = () => {
     // TODO: Try and encapsulate this in a route for "/" (check for hash in route component, render or redirect accordingly)
     const isCreation = location.pathname === "/" && hash !== "";
     if (isCreation) {
-        // Prefix with `/#referrer` will specify an IDE for workspace
-        // After selection is saved, user will be updated, and this condition will be false
-        const showIDESelection = User.isOnboardingUser(user) && !hash.startsWith(ContextURL.REFERRER_PREFIX);
-        if (showIDESelection) {
-            return (
-                <StartPage phase={StartPhase.Checking}>
-                    <SelectIDEModal location="workspace_start" />
-                </StartPage>
-            );
-        } else if (new URLSearchParams(location.search).has("showOptions") || newCreateWsPage) {
+        if (new URLSearchParams(location.search).has("showOptions") || newCreateWsPage) {
             return <Redirect to={"/new" + location.pathname + location.search + location.hash} />;
         } else {
             return <CreateWorkspace contextUrl={hash} />;

components/dashboard/src/components/SelectIDEComponent.tsx

@@ -32,12 +32,13 @@ export default function SelectIDEComponent(props: SelectIDEComponentProps) {
             for (const ide of options.filter((ide) =>
                 `${ide.label}${ide.title}${ide.notes}${ide.id}`.toLowerCase().includes(search.toLowerCase()),
             )) {
-                result.push({
-                    id: ide.id,
-                    element: <IdeOptionElementInDropDown option={ide} useLatest={false} />,
-                    isSelectable: true,
-                });
-                if (ide.latestImage) {
+                if (!props.useLatest) {
+                    result.push({
+                        id: ide.id,
+                        element: <IdeOptionElementInDropDown option={ide} useLatest={false} />,
+                        isSelectable: true,
+                    });
+                } else if (ide.latestImage) {
                     result.push({
                         id: ide.id + "-latest",
                         element: <IdeOptionElementInDropDown option={ide} useLatest={true} />,
@@ -47,7 +48,7 @@ export default function SelectIDEComponent(props: SelectIDEComponentProps) {
             }
             return result;
         },
-        [ideOptions],
+        [ideOptions, props.useLatest],
     );
     const internalOnSelectionChange = (id: string) => {
         const { ide, useLatest } = parseId(id);

components/dashboard/src/user-settings/Preferences.tsx

@@ -8,14 +8,16 @@ import { useCallback, useContext, useState } from "react";
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
 import { trackEvent } from "../Analytics";
-import SelectIDE from "./SelectIDE";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 import { ThemeSelector } from "../components/ThemeSelector";
 import Alert from "../components/Alert";
 import { Link } from "react-router-dom";
 import { Heading2, Subheading } from "../components/typography/headings";
 import { useUserMaySetTimeout } from "../data/current-user/may-set-timeout-query";
 import { Button } from "../components/Button";
+import SelectIDE from "./SelectIDE";
+
+export type IDEChangedTrackLocation = "workspace_list" | "workspace_start" | "preferences";
 
 export default function Preferences() {
     const { user, setUser } = useContext(UserContext);
@@ -74,7 +76,7 @@ export default function Preferences() {
                         Learn more
                     </a>
                 </Subheading>
-                <SelectIDE location="preferences" />
+                <SelectIDE updateUserContext={false} location="preferences" />
 
                 <ThemeSelector className="mt-12" />
 

components/dashboard/src/user-settings/SelectIDE.tsx

@@ -1,222 +1,123 @@
 /**
- * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Copyright (c) 2023 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.
  */
 
-import { IDEOption, IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
 import { useContext, useEffect, useState } from "react";
-import InfoBox from "../components/InfoBox";
-import SelectableCardSolid from "../components/SelectableCardSolid";
-import Tooltip from "../components/Tooltip";
-import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
 import CheckBox from "../components/CheckBox";
 import { User } from "@gitpod/gitpod-protocol";
+import SelectIDEComponent from "../components/SelectIDEComponent";
 import PillLabel from "../components/PillLabel";
+import { useUpdateCurrentUserMutation } from "../data/current-user/update-mutation";
 
 export type IDEChangedTrackLocation = "workspace_list" | "workspace_start" | "preferences";
 interface SelectIDEProps {
     updateUserContext?: boolean;
     location: IDEChangedTrackLocation;
 }
 
-export const updateUserIDEInfo = async (
-    user: User,
-    selectedIde: string,
-    useLatestVersion: boolean,
-    location: IDEChangedTrackLocation,
-) => {
-    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,
-                location,
-            },
-        })
-        .then()
-        .catch(console.error);
-    return getGitpodService().server.updateLoggedInUser({ additionalData });
-};
-
 export default function SelectIDE(props: SelectIDEProps) {
     const { user, setUser } = useContext(UserContext);
+    const updateUser = useUpdateCurrentUserMutation();
 
     // Only exec once when we access this component
     useEffect(() => {
         user && User.migrationIDESettings(user);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const actualUpdateUserIDEInfo = async (user: User, selectedIde: string, useLatestVersion: boolean) => {
-        const newUserData = await updateUserIDEInfo(user, selectedIde, useLatestVersion, props.location);
+    const [defaultIde, setDefaultIde] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || "code");
+    const [useLatestVersion, setUseLatestVersion] = useState<boolean>(
+        user?.additionalData?.ideSettings?.useLatestVersion ?? false,
+    );
+
+    const actualUpdateUserIDEInfo = 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;
+
+        const newUserData = await updateUser.mutateAsync({ additionalData });
         props.updateUserContext && setUser({ ...newUserData });
     };
 
-    const [defaultIde, setDefaultIde] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || "code");
     const actuallySetDefaultIde = async (value: string) => {
-        await actualUpdateUserIDEInfo(user!, value, useLatestVersion);
+        await actualUpdateUserIDEInfo(value, useLatestVersion);
         setDefaultIde(value);
     };
 
-    const [useLatestVersion, setUseLatestVersion] = useState<boolean>(
-        user?.additionalData?.ideSettings?.useLatestVersion ?? false,
-    );
     const actuallySetUseLatestVersion = async (value: boolean) => {
-        await actualUpdateUserIDEInfo(user!, defaultIde, value);
+        await actualUpdateUserIDEInfo(defaultIde, value);
         setUseLatestVersion(value);
     };
 
-    const [ideOptions, setIdeOptions] = useState<IDEOptions | undefined>(undefined);
-    useEffect(() => {
-        (async () => {
-            setIdeOptions(await getGitpodService().server.getIDEOptions());
-        })();
-    }, []);
-
-    const allIdeOptions = ideOptions && orderedIdeOptions(ideOptions);
+    //todo(ft): find a better way to group IDEs by vendor
+    const shouldShowJetbrainsNotice = !["code", "code-desktop"].includes(defaultIde); // a really hacky way to get just JetBrains IDEs
 
     return (
         <>
-            {ideOptions && (
-                <>
-                    {allIdeOptions && (
-                        <>
-                            <div className={`my-4 gap-3 flex flex-wrap max-w-3xl`}>
-                                {allIdeOptions.map(([id, option]) => {
-                                    const selected = defaultIde === id;
-                                    const version = useLatestVersion ? option.latestImageVersion : option.imageVersion;
-                                    const onSelect = () => actuallySetDefaultIde(id);
-                                    return renderIdeOption(option, selected, version, 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-400 dark:text-gray-500">
-                                <strong>JetBrains </strong> integration is currently in{" "}
-                                <PillLabel type="warn" className="font-semibold mt-2 ml-0 py-0.5 px-1 self-center">
-                                    <a href="https://www.gitpod.io/docs/references/gitpod-releases">
-                                        <span className="text-xs">Beta</span>
-                                    </a>
-                                </PillLabel>
-                                &nbsp;&middot;&nbsp;
-                                <a
-                                    href="https://github.com/gitpod-io/gitpod/issues/6576"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="gp-link"
-                                >
-                                    Send feedback
-                                </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"
-                                    rel="noreferrer"
-                                >
-                                    Insiders
-                                </a>{" "}
-                                for VS Code,{" "}
-                                <a
-                                    className="gp-link"
-                                    target="_blank"
-                                    href="https://www.jetbrains.com/resources/eap/"
-                                    rel="noreferrer"
-                                >
-                                    EAP
-                                </a>{" "}
-                                for JetBrains IDEs.
-                            </span>
-                        }
-                        checked={useLatestVersion}
-                        onChange={(e) => actuallySetUseLatestVersion(e.target.checked)}
-                    />
-                </>
-            )}
-        </>
-    );
-}
-
-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,
-    version: IDEOption["imageVersion"],
-    onSelect: () => void,
-): JSX.Element {
-    const shouldShowOptionType = option.type !== "desktop" || option.title === "VS Code"; // Force show of "Desktop" in the list for VS Code Desktop
-    const card = (
-        <SelectableCardSolid className="w-36 h-44" title={option.title} selected={selected} onClick={onSelect}>
-            {version ? (
-                <span
-                    className={`font-normal font-mono text-xs ${
-                        selected
-                            ? "text-gray-100 dark:text-gray-600"
-                            : "text-gray-400 contrast-more:text-gray-600 dark:text-gray-500"
-                    } pl-1 self-start`}
-                    title="The IDE's current version on Gitpod"
-                >
-                    {version}
-                </span>
-            ) : (
-                <span
-                    style={{
-                        minHeight: "1rem",
+            <div className="w-112 my-4">
+                <SelectIDEComponent
+                    onSelectionChange={async (ide) => {
+                        await actuallySetDefaultIde(ide);
                     }}
-                ></span>
-            )}
-            <div className="flex justify-center mt-3 mb-2">
-                <img className="w-16 filter-grayscale self-center" src={option.logo} alt="logo" />
+                    selectedIdeOption={defaultIde}
+                    useLatest={useLatestVersion}
+                />
             </div>
-            {shouldShowOptionType ? (
-                <PillLabel type="warn" className="place-self-start py-0.5 my-2 flex">
-                    <span className="text-xs capitalize">{option.type}</span>
-                </PillLabel>
-            ) : (
-                option.label && (
-                    <PillLabel type="neutral" className="place-self-start py-0.5 my-2 flex">
-                        <span className="text-xs normal-case font-medium">{option.label}</span>
+
+            {shouldShowJetbrainsNotice && (
+                <p className="text-left w-full text-gray-400 dark:text-gray-500">
+                    <strong>JetBrains </strong> integration is currently in{" "}
+                    <PillLabel type="warn" className="font-semibold mt-2 ml-0 py-0.5 px-1 self-center">
+                        <a href="https://www.gitpod.io/docs/references/gitpod-releases">
+                            <span className="text-xs">Beta</span>
+                        </a>
                     </PillLabel>
-                )
+                    &nbsp;&middot;&nbsp;
+                    <a
+                        href="https://github.com/gitpod-io/gitpod/issues/6576"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="gp-link"
+                    >
+                        Send feedback
+                    </a>
+                </p>
             )}
-        </SelectableCardSolid>
-    );
 
-    if (option.tooltip) {
-        return <Tooltip content={option.tooltip}>{card}</Tooltip>;
-    }
-    return card;
+            <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"
+                            rel="noreferrer"
+                        >
+                            Insiders
+                        </a>{" "}
+                        for VS Code,{" "}
+                        <a
+                            className="gp-link"
+                            target="_blank"
+                            href="https://www.jetbrains.com/resources/eap/"
+                            rel="noreferrer"
+                        >
+                            EAP
+                        </a>{" "}
+                        for JetBrains IDEs.
+                    </span>
+                }
+                checked={useLatestVersion}
+                onChange={(e) => actuallySetUseLatestVersion(e.target.checked)}
+            />
+        </>
+    );
 }