[dashboard] display warning for latest IDE versions

chart/templates/server-ide-configmap.yaml

@@ -46,17 +46,10 @@ options:
     orderKey: "00"
     title: "VS Code"
     type: "browser"
+    label: "Browser"
     logo: "https://ide.{{ $.Values.hostname }}/image/ide-logo/vscode.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:
@@ -65,14 +58,7 @@ options:
     type: "desktop"
     logo: "https://ide.{{ $.Values.hostname }}/image/ide-logo/vscode.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 +99,8 @@ 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"]
+    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.",
     ]

components/dashboard/src/components/Alert.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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.
+ */
+
+import { useState } from "react";
+import { ReactComponent as Exclamation } from "../images/exclamation.svg";
+import { ReactComponent as Exclamation2 } from "../images/exclamation2.svg";
+import { ReactComponent as InfoSvg } from "../images/info.svg";
+import { ReactComponent as XSvg } from "../images/x.svg";
+
+export type AlertType =
+    // Yellow
+    | "warning"
+    // Gray alert
+    | "info"
+    // Red
+    | "error"
+    // Blue
+    | "message";
+
+export interface AlertProps {
+    className?: string;
+    type?: AlertType;
+    // Without background color, default false
+    light?: boolean;
+    closable?: boolean;
+    showIcon?: boolean;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+
+interface AlertInfo {
+    bgCls: string;
+    txtCls: string;
+    icon: React.ReactNode;
+    iconColor?: string;
+}
+
+const infoMap: Record<AlertType, AlertInfo> = {
+    warning: {
+        bgCls: "bg-yellow-100 dark:bg-yellow-700",
+        txtCls: "text-yellow-600 dark:text-yellow-50",
+        icon: <Exclamation2 className="w-4 h-4"></Exclamation2>,
+        iconColor: "text-yellow-400 dark:text-yellow-900",
+    },
+    info: {
+        bgCls: "bg-gray-100 dark:bg-gray-700",
+        txtCls: "text-gray-500 dark:text-gray-300",
+        icon: <InfoSvg className="w-4 h-4"></InfoSvg>,
+        iconColor: "text-gray-400",
+    },
+    message: {
+        bgCls: "bg-blue-50 dark:bg-blue-700",
+        txtCls: "text-blue-800 dark:text-blue-100",
+        icon: <InfoSvg className="w-4 h-4"></InfoSvg>,
+        iconColor: "text-blue-400",
+    },
+    error: {
+        bgCls: "bg-red-50 dark:bg-red-800 dark:bg-opacity-50",
+        txtCls: "text-red-600 dark:text-red-200",
+        icon: <Exclamation className="w-4 h-4"></Exclamation>,
+        iconColor: "text-red-400",
+    },
+};
+
+export default function Alert(props: AlertProps) {
+    const [visible, setVisible] = useState(true);
+    if (!visible) {
+        return null;
+    }
+    const type: AlertType = props.type ?? "info";
+    const info = infoMap[type];
+    const showIcon = props.showIcon ?? true;
+    const light = props.light ?? false;
+    return (
+        <div className={`flex relative rounded p-4 ${info.txtCls} ${props.className || ""} ${light ? "" : info.bgCls}`}>
+            {showIcon && <span className={`mt-1 mr-4 h-4 w-4 ${info.iconColor}`}>{props.icon ?? info.icon}</span>}
+            <span className="flex-1 text-left">{props.children}</span>
+            {props.closable && (
+                <XSvg onClick={() => setVisible(false)} className="mt-1 ml-4 w-3 h-3 cursor-pointer"></XSvg>
+            )}
+        </div>
+    );
+}

components/dashboard/src/components/SelectableCardSolid.tsx

@@ -0,0 +1,41 @@
+/**
+ * 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 dark:bg-gray-100"
+                    : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
+            } ${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-600" : "text-gray-600 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;