[dashboard,server] switch ide version with one toggle

mustard-mh · mustard-mh · commit be80566d4c8c · 2022-03-16T18:59:16.000Z
diff --git a/chart/templates/server-ide-configmap.yaml b/chart/templates/server-ide-configmap.yaml
@@ -46,33 +46,22 @@ options:
     orderKey: "00"
     title: "VS Code"
     type: "browser"
+    label: "Browser"
     logo: "https://ide.{{ $.Values.hostname }}/image/ide-logo/vscode.svg"
+    # latestLogo: "https://ide.{{ $.Values.hostname }}/image/ide-logo/vscodeInsiders.svg"
     image: {{ (include "stable-image-full" (dict "root" $ "gp" $gp "comp" $gp.components.workspace.codeImage)) }}
-  code-latest:
-    orderKey: "01"
-    title: "VS Code"
-    type: "browser"
-    logo: "https://ide.{{ $.Values.hostname }}/image/ide-logo/vscodeInsiders.svg"
-    tooltip: "Early access version, still subject to testing."
-    label: "Insiders"
-    image: {{ (include "insider-image-full" (dict "root" $ "gp" $gp "comp" $gp.components.workspace.codeImage)) }}
-    resolveImageDigest: true
+    latestImage: {{ (include "insider-image-full" (dict "root" $ "gp" $gp "comp" $gp.components.workspace.codeImage)) }}
 
   # Desktop IDEs
   code-desktop:
     orderKey: "02"
     title: "VS Code"
     type: "desktop"
+    label: "Desktop"
     logo: "https://ide.{{ $.Values.hostname }}/image/ide-logo/vscode.svg"
+    # latestLogo: "https://ide.{{ $.Values.hostname }}/image/ide-logo/vscodeInsiders.svg"
     image: {{ (include "gitpod.comp.imageFull" (dict "root" $ "gp" $gp "comp" $gp.components.workspace.desktopIdeImages.codeDesktop)) }}
-  code-desktop-insiders:
-    orderKey: "03"
-    title: "VS Code"
-    type: "desktop"
-    logo: "https://ide.{{ $.Values.hostname }}/image/ide-logo/vscodeInsiders.svg"
-    tooltip: "Visual Studio Code Insiders for early adopters."
-    label: "Insiders"
-    image: {{ (include "gitpod.comp.imageFull" (dict "root" $ "gp" $gp "comp" $gp.components.workspace.desktopIdeImages.codeDesktopInsiders)) }}
+    latestImage: {{ (include "gitpod.comp.imageFull" (dict "root" $ "gp" $gp "comp" $gp.components.workspace.desktopIdeImages.codeDesktopInsiders)) }}
   intellij:
     orderKey: "04"
     title: "IntelliJ IDEA"
@@ -113,8 +102,9 @@ clients:
       "If you don't see an open dialog in your browser, make sure you have <a target='_blank' class='gp-link' href='https://code.visualstudio.com/download'>VS Code</a> installed on your machine, and then click <b>${OPEN_LINK_LABEL}</b> below.",
     ]
   vscode-insiders:
-    defaultDesktopIDE: "code-desktop-insiders"
-    desktopIDEs: ["code-desktop-insiders"]
+    # TODO(hw): make useLatestVersion marked?
+    defaultDesktopIDE: "code-desktop"
+    desktopIDEs: ["code-desktop"]
     installationSteps: [
       "If you don't see an open dialog in your browser, make sure you have <a target='_blank' class='gp-link' href='https://code.visualstudio.com/insiders'>VS Code Insiders</a> installed on your machine, and then click <b>${OPEN_LINK_LABEL}</b> below.",
     ]
diff --git a/components/dashboard/src/components/SelectableCardSolid.tsx b/components/dashboard/src/components/SelectableCardSolid.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2021 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 SelectableCardSolidProps {
+    title: string;
+    selected: boolean;
+    className?: string;
+    onClick: () => void;
+    children?: React.ReactNode;
+}
+
+function SelectableCardSolid(props: SelectableCardSolidProps) {
+    return (
+        <div
+            className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group transition ease-in-out ${
+                props.selected ? "bg-gray-800" : "bg-gray-100 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800"
+            } ${props.className || ""}`}
+            onClick={props.onClick}
+        >
+            <div className="flex items-center">
+                <p
+                    className={`w-full pl-1 text-base font-semibold truncate ${
+                        props.selected ? "text-gray-100 dark:text-gray-100" : "text-gray-800 dark:text-gray-500"
+                    }`}
+                    title={props.title}
+                >
+                    {props.title}
+                </p>
+                <input className="opacity-0" type="radio" checked={props.selected} />
+            </div>
+            {props.children}
+        </div>
+    );
+}
+
+export default SelectableCardSolid;
diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx
@@ -10,34 +10,28 @@ import InfoBox from "../components/InfoBox";
 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 settingsMenu from "./settings-menu";
-import IDENone from "../icons/IDENone.svg";
-import IDENoneDark from "../icons/IDENoneDark.svg";
 import CheckBox from "../components/CheckBox";
 import { trackEvent } from "../Analytics";
 
 type Theme = "light" | "dark" | "system";
 
-const DesktopNoneId = "none";
-const DesktopNone: IDEOption = {
-    image: "",
-    logo: IDENone,
-    orderKey: "-1",
-    title: "None",
-    type: "desktop",
-};
+const DefaultBrowserIDE = "code";
 
 export default function Preferences() {
     const { user } = useContext(UserContext);
-    const { setIsDark, isDark } = useContext(ThemeContext);
+    const { setIsDark } = useContext(ThemeContext);
 
-    const updateUserIDEInfo = async (defaultDesktopIde: string, defaultIde: string, useLatestVersion: boolean) => {
-        const useDesktopIde = defaultDesktopIde !== DesktopNoneId;
-        const desktopIde = useDesktopIde ? defaultDesktopIde : undefined;
+    const updateUserIDEInfo = async (selectedIde: string, useLatestVersion: boolean) => {
+        // Always start vscode browser ide
+        const defaultIde = DefaultBrowserIDE;
+        const useDesktopIde = selectedIde !== DefaultBrowserIDE;
+        const desktopIde = useDesktopIde ? selectedIde : undefined;
         const additionalData = user?.additionalData ?? {};
         const settings = additionalData.ideSettings ?? {};
         settings.useDesktopIde = useDesktopIde;
@@ -61,38 +55,32 @@ export default function Preferences() {
     };
 
     const [defaultIde, setDefaultIde] = useState<string>(user?.additionalData?.ideSettings?.defaultIde || "");
-    const actuallySetDefaultIde = async (value: string) => {
-        await updateUserIDEInfo(defaultDesktopIde, value, useLatestVersion);
-        setDefaultIde(value);
-    };
 
     const [defaultDesktopIde, setDefaultDesktopIde] = useState<string>(
-        (user?.additionalData?.ideSettings?.useDesktopIde && user?.additionalData?.ideSettings?.defaultDesktopIde) ||
-            DesktopNoneId,
+        user?.additionalData?.ideSettings?.defaultDesktopIde || "",
     );
     const actuallySetDefaultDesktopIde = async (value: string) => {
-        await updateUserIDEInfo(value, defaultIde, useLatestVersion);
+        await updateUserIDEInfo(value, useLatestVersion);
         setDefaultDesktopIde(value);
     };
 
     const [useLatestVersion, setUseLatestVersion] = useState<boolean>(
         user?.additionalData?.ideSettings?.useLatestVersion ?? false,
     );
     const actuallySetUseLatestVersion = async (value: boolean) => {
-        await updateUserIDEInfo(defaultDesktopIde, defaultIde, value);
+        await updateUserIDEInfo(defaultDesktopIde, value);
         setUseLatestVersion(value);
     };
 
     const [ideOptions, setIdeOptions] = useState<IDEOptions | undefined>(undefined);
     useEffect(() => {
         (async () => {
             const ideopts = await getGitpodService().server.getIDEOptions();
-            ideopts.options[DesktopNoneId] = DesktopNone;
             setIdeOptions(ideopts);
-            if (!defaultIde) {
+            if (!defaultIde || ideopts.options[defaultIde] == null) {
                 setDefaultIde(ideopts.defaultIde);
             }
-            if (!defaultDesktopIde) {
+            if (!defaultDesktopIde || ideopts.options[defaultDesktopIde] == null) {
                 setDefaultDesktopIde(ideopts.defaultDesktopIde);
             }
         })();
@@ -112,8 +100,7 @@ export default function Preferences() {
         setTheme(theme);
     };
 
-    const browserIdeOptions = ideOptions && orderedIdeOptions(ideOptions, "browser");
-    const desktopIdeOptions = ideOptions && orderedIdeOptions(ideOptions, "desktop");
+    const allIdeOptions = ideOptions && orderedIdeOptions(ideOptions);
 
     const [dotfileRepo, setDotfileRepo] = useState<string>(user?.additionalData?.dotfileRepo || "");
     const actuallySetDotfileRepo = async (value: string) => {
@@ -132,48 +119,17 @@ export default function Preferences() {
             <PageWithSubMenu subMenu={settingsMenu} title="Preferences" subtitle="Configure user preferences.">
                 {ideOptions && (
                     <>
-                        {browserIdeOptions && (
+                        {/* <div>{JSON.stringify(user?.additionalData?.ideSettings, null, 4)}</div> */}
+                        {allIdeOptions && (
                             <>
-                                <h3>Browser Editor</h3>
+                                <h3>Editor</h3>
                                 <p className="text-base text-gray-500 dark:text-gray-400">
-                                    Choose the default editor for opening workspaces in the browser.
-                                </p>
-                                <div className="my-4 gap-4 flex flex-wrap">
-                                    {browserIdeOptions.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>
-                                )}
-                            </>
-                        )}
-                        {desktopIdeOptions && (
-                            <>
-                                <h3 className="mt-12 flex">
-                                    Desktop Editor
-                                    <PillLabel type="warn" className="font-semibold py-0.5 px-2 self-center">
-                                        Beta
-                                    </PillLabel>
-                                </h3>
-                                <p className="text-base text-gray-500 dark:text-gray-400">
-                                    Optionally, choose the default desktop editor for opening workspaces.
+                                    Choose the editor for opening workspaces.
                                 </p>
                                 <div className="my-4 gap-4 flex flex-wrap max-w-2xl">
-                                    {desktopIdeOptions.map(([id, option]) => {
+                                    {allIdeOptions.map(([id, option]) => {
                                         const selected = defaultDesktopIde === id;
                                         const onSelect = () => actuallySetDefaultDesktopIde(id);
-                                        if (id === DesktopNoneId) {
-                                            option.logo = isDark ? IDENoneDark : IDENone;
-                                        }
                                         return renderIdeOption(option, selected, onSelect);
                                     })}
                                 </div>
@@ -210,7 +166,7 @@ export default function Preferences() {
                         )}
                         <CheckBox
                             title="Latest Release"
-                            desc="Include the latest Early Access Program (EAP) version for each JetBrains IDE."
+                            desc="Use the latest version for each editor. Insiders for VS Code, EAP for JetBrains IDEs."
                             checked={useLatestVersion}
                             onChange={(e) => actuallySetUseLatestVersion(e.target.checked)}
                         />
@@ -301,35 +257,33 @@ export default function Preferences() {
     );
 }
 
-function orderedIdeOptions(ideOptions: IDEOptions, type: "browser" | "desktop") {
+function orderedIdeOptions(ideOptions: IDEOptions) {
     // TODO: Maybe convert orderKey to number before sort?
-    return Object.entries(ideOptions.options)
-        .filter(([_, x]) => x.type === type && !x.hidden)
-        .sort((a, b) => {
-            const keyA = a[1].orderKey || a[0];
-            const keyB = b[1].orderKey || b[0];
-            return keyA.localeCompare(keyB);
-        });
+    return Object.entries(ideOptions.options).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 card = (
-        <SelectableCard className="w-36 h-40" title={option.title} selected={selected} onClick={onSelect}>
+        <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>
             {option.label ? (
                 <div
                     className={`font-semibold text-sm ${
-                        selected ? "text-green-500" : "text-gray-500 dark:text-gray-400"
+                        selected ? "text-gray-100 dark:text-gray-300" : "text-gray-500 dark:text-gray-400"
                     } uppercase mt-2 px-3 py-1 self-center`}
                 >
                     {option.label}
                 </div>
             ) : (
                 <></>
             )}
-        </SelectableCard>
+        </SelectableCardSolid>
     );
 
     if (option.tooltip) {
diff --git a/components/server/src/workspace/workspace-starter.ts b/components/server/src/workspace/workspace-starter.ts
@@ -530,18 +530,21 @@ export class WorkspaceStarter {
         };
 
         const ideChoice = user.additionalData?.ideSettings?.defaultIde;
+        const useLatest = !!user.additionalData?.ideSettings?.useLatestVersion;
+
         if (!!ideChoice) {
             const mappedImage = ideConfig.ideOptions.options[ideChoice];
-            if (!!mappedImage && mappedImage.image) {
-                configuration.ideImage = mappedImage.image;
+            if (mappedImage.image != null) {
+                configuration.ideImage = useLatest
+                    ? mappedImage?.latestImage ?? mappedImage?.image
+                    : mappedImage?.image;
             } else if (this.authService.hasPermission(user, "ide-settings")) {
                 // if the IDE choice isn't one of the preconfiured choices, we assume its the image name.
                 // For now, this feature requires special permissions.
                 configuration.ideImage = ideChoice;
             }
         }
 
-        const useLatest = !!user.additionalData?.ideSettings?.useLatestVersion;
         const referrerIde = this.resolveReferrerIDE(workspace, user, ideConfig);
         if (referrerIde) {
             configuration.desktopIdeImage = useLatest
diff --git a/install/installer/pkg/components/server/ide/configmap.go b/install/installer/pkg/components/server/ide/configmap.go
@@ -25,7 +25,6 @@ func configmap(ctx *common.RenderContext) ([]runtime.Object, error) {
 	typeDesktop := "desktop"
 
 	codeDesktop := "code-desktop"
-	codeDesktopInsiders := "code-desktop-insiders"
 
 	intellij := "intellij"
 	goland := "goland"
@@ -43,8 +42,9 @@ func configmap(ctx *common.RenderContext) ([]runtime.Object, error) {
 					},
 				},
 				"vscode-insiders": {
-					DefaultDesktopIDE: codeDesktopInsiders,
-					DesktopIDEs:       []string{codeDesktopInsiders},
+					// TODO(hw): make useLatestVersion marked?
+					DefaultDesktopIDE: codeDesktop,
+					DesktopIDEs:       []string{codeDesktop},
 					InstallationSteps: []string{
 						"If you don't see an open dialog in your browser, make sure you have <a target='_blank' class='gp-link' href='https://code.visualstudio.com/insiders'>VS Code Insiders</a> installed on your machine, and then click <b>${OPEN_LINK_LABEL}</b> below.",
 					},
@@ -62,34 +62,21 @@ func configmap(ctx *common.RenderContext) ([]runtime.Object, error) {
 					OrderKey: pointer.String("00"),
 					Title:    "VS Code",
 					Type:     typeBrowser,
+					Label:    pointer.String("Browser"),
 					Logo:     getIdeLogoPath("vscode"),
 					Image:    common.ImageName(ctx.Config.Repository, ide.CodeIDEImage, ide.CodeIDEImageStableVersion),
-				},
-				"code-latest": {
-					OrderKey:           pointer.String("01"),
-					Title:              "VS Code",
-					Type:               typeBrowser,
-					Logo:               getIdeLogoPath("vscodeInsiders"),
-					Tooltip:            pointer.String("Early access version, still subject to testing."),
-					Label:              pointer.String("Insiders"),
-					Image:              common.ImageName(ctx.Config.Repository, ide.CodeIDEImage, ctx.VersionManifest.Components.Workspace.CodeImage.Version),
-					ResolveImageDigest: pointer.Bool(true),
+					// LatestLogo: getIdeLogoPath("vscodeInsiders"),
+					LatestImage: common.ImageName(ctx.Config.Repository, ide.CodeIDEImage, ctx.VersionManifest.Components.Workspace.CodeImage.Version),
 				},
 				codeDesktop: {
 					OrderKey: pointer.String("02"),
 					Title:    "VS Code",
 					Type:     typeDesktop,
+					Label:    pointer.String("Desktop"),
 					Logo:     getIdeLogoPath("vscode"),
 					Image:    common.ImageName(ctx.Config.Repository, ide.CodeDesktopIDEImage, ctx.VersionManifest.Components.Workspace.DesktopIdeImages.CodeDesktopImage.Version),
-				},
-				codeDesktopInsiders: {
-					OrderKey: pointer.String("03"),
-					Title:    "VS Code",
-					Type:     typeDesktop,
-					Logo:     getIdeLogoPath("vscodeInsiders"),
-					Tooltip:  pointer.String("Visual Studio Code Insiders for early adopters."),
-					Label:    pointer.String("Insiders"),
-					Image:    common.ImageName(ctx.Config.Repository, ide.CodeDesktopInsidersIDEImage, ctx.VersionManifest.Components.Workspace.DesktopIdeImages.CodeDesktopImageInsiders.Version),
+					// LatestLogo: getIdeLogoPath("vscodeInsiders"),
+					LatestImage: common.ImageName(ctx.Config.Repository, ide.CodeDesktopInsidersIDEImage, ctx.VersionManifest.Components.Workspace.DesktopIdeImages.CodeDesktopImageInsiders.Version),
 				},
 				intellij: {
 					OrderKey:    pointer.String("04"),
