[dashboard] display warning for latest IDE versions

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

Author: mustard-mh

components/dashboard/src/components/Alert.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 exclamation from "../images/exclamation.svg";
+import exclamation2 from "../images/exclamation2.svg";
+import infoSvg from "../images/info.svg";
+
+export type AlertType = "warning" | "info" | "error";
+
+export interface AlertProps {
+    className?: string;
+    icon?: string;
+    children?: React.ReactNode;
+    type?: AlertType;
+    closable?: boolean;
+}
+
+interface AlertInfo {
+    cls: string;
+    icon: string;
+}
+
+const infoMap: Record<AlertType, AlertInfo> = {
+    warning: {
+        cls: "bg-orange-100 dark:bg-orange-800 dark:bg-opacity-40 text-orange-600",
+        icon: exclamation2,
+    },
+    info: {
+        cls: "bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400",
+        icon: infoSvg,
+    },
+    error: {
+        cls: "bg-red-50 dark:bg-red-800 dark:bg-opacity-30 text-red-600",
+        icon: exclamation,
+    },
+};
+
+export default function Alert(p: AlertProps) {
+    const type: AlertType = p.type ?? "info";
+    const info = infoMap[type];
+    return (
+        <div className={`flex rounded p-4 ${info.cls} ${p.className || ""}`}>
+            <img className="w-4 h-4 m-1 ml-2 mr-4" src={p.icon ?? info.icon} />
+            <span className="text-left">{p.children}</span>
+        </div>
+    );
+}

components/dashboard/src/images/exclamation2.svg

@@ -5,7 +5,9 @@
  */
 
 import { useEffect } from "react";
+import Alert from "../components/Alert";
 import gitpodIconUA from "../icons/gitpod-ua.svg";
+import { gitpodHostUrl } from "../service/service";
 
 export enum StartPhase {
     Checking = 0,
@@ -74,6 +76,7 @@ export interface StartPageProps {
     error?: StartWorkspaceError;
     title?: string;
     children?: React.ReactNode;
+    showLatestIdeWarning?: boolean;
 }
 
 export interface StartWorkspaceError {
@@ -105,6 +108,27 @@ export function StartPage(props: StartPageProps) {
                 )}
                 {error && <StartError error={error} />}
                 {props.children}
+                {props.showLatestIdeWarning && (
+                    <Alert type="warning" className="mt-4 w-96">
+                        You’ve opted in for using the latest release for the editor. If you run into any issues, please{" "}
+                        <a
+                            className="text-blue-400 dark:text-blue-300 hover:text-blue-600 dark:hover:text-blue-400"
+                            target="_blank"
+                            href="https://github.com/gitpod-io/gitpod/issues/new?assignees=&labels=bug&template=bug_report.yml"
+                        >
+                            submit a bug report
+                        </a>{" "}
+                        or switch back to the stable release in{" "}
+                        <a
+                            className="text-blue-400 dark:text-blue-300 hover:text-blue-600 dark:hover:text-blue-400"
+                            target="_blank"
+                            href={gitpodHostUrl.asPreferences().toString()}
+                        >
+                            user preferences
+                        </a>
+                        .
+                    </Alert>
+                )}
             </div>
         </div>
     );

components/dashboard/src/start/StartPage.tsx

@@ -549,13 +549,6 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                                     {openLinkLabel}
                                 </button>
                             </div>
-                            <div className="text-sm text-gray-400 dark:text-gray-500 mt-5">
-                                These IDE options are based on{" "}
-                                <a className="gp-link" href={gitpodHostUrl.asPreferences().toString()} target="_parent">
-                                    your user preferences
-                                </a>
-                                .
-                            </div>
                         </div>
                     );
                 }
@@ -650,9 +643,9 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                 );
                 break;
         }
-
+        const useLatest = !!this.state.workspaceInstance?.configuration?.ideConfig?.useLatest;
         return (
-            <StartPage phase={phase} error={error} title={title}>
+            <StartPage phase={phase} error={error} title={title} showLatestIdeWarning={useLatest}>
                 {statusMessage}
             </StartPage>
         );

components/dashboard/src/start/StartWorkspace.tsx

@@ -221,6 +221,10 @@ export interface WorkspaceInstanceConfiguration {
 
     // supervisorImage is the ref of the supervisor image this instance uses.
     supervisorImage?: string;
+
+    ideConfig?: {
+        useLatest?: boolean;
+    };
 }
 
 /**

components/gitpod-protocol/src/workspace-instance.ts

@@ -314,9 +314,6 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
         delete res.status.ownerToken;
         // is an operational internal detail
         delete res.status.nodeName;
-        // configuration contains feature flags and theia version.
-        // we might want to share that in the future, but for the time being there's no need
-        delete res.configuration;
         // internal operation detail
         // @ts-ignore
         delete res.workspaceImage;

components/server/src/workspace/gitpod-server-impl.ts

@@ -522,16 +522,20 @@ export class WorkspaceStarter {
         excludeFeatureFlags: NamedWorkspaceFeatureFlag[],
         ideConfig: IDEConfig,
     ): Promise<WorkspaceInstance> {
+        const ideChoice = user.additionalData?.ideSettings?.defaultIde;
+        const useLatest = !!user.additionalData?.ideSettings?.useLatestVersion;
+
         // TODO(cw): once we allow changing the IDE in the workspace config (i.e. .gitpod.yml), we must
         //           give that value precedence over the default choice.
         const configuration: WorkspaceInstanceConfiguration = {
             ideImage: ideConfig.ideOptions.options[ideConfig.ideOptions.defaultIde].image,
             supervisorImage: ideConfig.supervisorImage,
+            ideConfig: {
+                // TODO(hw): set false when latestImage not found
+                useLatest,
+            },
         };
 
-        const ideChoice = user.additionalData?.ideSettings?.defaultIde;
-        const useLatest = !!user.additionalData?.ideSettings?.useLatestVersion;
-
         if (!!ideChoice) {
             const mappedImage = ideConfig.ideOptions.options[ideChoice];
             if (mappedImage.image != null) {