[dashboard] display warning for latest IDE versions

Author: mustard-mh

components/dashboard/src/start/StartPage.tsx

@@ -6,6 +6,7 @@
 
 import { useEffect } from "react";
 import gitpodIconUA from "../icons/gitpod-ua.svg";
+import { gitpodHostUrl } from "../service/service";
 
 export enum StartPhase {
     Checking = 0,
@@ -47,7 +48,7 @@ function getPhaseTitle(phase?: StartPhase, error?: StartWorkspaceError) {
 function ProgressBar(props: { phase: number; error: boolean }) {
     const { phase, error } = props;
     return (
-        <div className="flex mt-4 mb-6">
+        <div className="flex justify-center">
             {[1, 2, 3].map((i) => {
                 let classes = "h-2 w-10 mx-1 my-2 rounded-full";
                 if (i < phase) {
@@ -74,6 +75,7 @@ export interface StartPageProps {
     error?: StartWorkspaceError;
     title?: string;
     children?: React.ReactNode;
+    latestWarning?: boolean;
 }
 
 export interface StartWorkspaceError {
@@ -85,6 +87,15 @@ export interface StartWorkspaceError {
 export function StartPage(props: StartPageProps) {
     const { phase, error } = props;
     let title = props.title || getPhaseTitle(phase, error);
+    const warningMessage = props.latestWarning && (
+        <div className="text-center text-sm w-72 text-orange-400">
+            LATEST IDE WARNING PLACEHOLDER, CLICK
+            <a className="hover:text-blue-600 dark:hover:text-blue-400" href={gitpodHostUrl.asPreferences().toString()}>
+                &nbsp;HERE&nbsp;
+            </a>
+            TO CHANGE YOUR IDE
+        </div>
+    );
     useEffect(() => {
         document.title = "Starting — Gitpod";
     }, []);
@@ -100,9 +111,13 @@ export function StartPage(props: StartPageProps) {
                     }`}
                 />
                 <h3 className="mt-8 text-xl">{title}</h3>
-                {typeof phase === "number" && phase < StartPhase.IdeReady && (
-                    <ProgressBar phase={phase} error={!!error} />
-                )}
+                <div className="space-y-6 mb-6 mt-4">
+                    {typeof phase === "number" && phase < StartPhase.IdeReady && (
+                        <ProgressBar phase={phase} error={!!error} />
+                    )}
+                    {warningMessage}
+                </div>
+
                 {error && <StartError error={error} />}
                 {props.children}
             </div>

components/dashboard/src/start/StartWorkspace.tsx

@@ -650,9 +650,9 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                 );
                 break;
         }
-
+        const latestWarning = this.state.workspaceInstance?.configuration?.latestWarning;
         return (
-            <StartPage phase={phase} error={error} title={title}>
+            <StartPage phase={phase} error={error} title={title} latestWarning={latestWarning}>
                 {statusMessage}
             </StartPage>
         );

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

@@ -217,6 +217,9 @@ export interface WorkspaceInstanceConfiguration {
 
     // supervisorImage is the ref of the supervisor image this instance uses.
     supervisorImage?: string;
+
+    // display warning for latest IDE versions on the loading screen.
+    latestWarning?: boolean;
 }
 
 /**

components/server/src/workspace/workspace-starter.ts

@@ -527,9 +527,17 @@ export class WorkspaceStarter {
         const configuration: WorkspaceInstanceConfiguration = {
             ideImage: ideConfig.ideOptions.options[ideConfig.ideOptions.defaultIde].image,
             supervisorImage: ideConfig.supervisorImage,
+            latestWarning: false,
         };
 
+        function shouldDisplayLatestWarning(ide?: string, desktopIde?: string, useLatest?: boolean) {
+            const useLatestJetBrainsDesktop = useLatest && !desktopIde?.startsWith("code");
+            const useBrowserInsiders = ide === "code-latest";
+            return useLatestJetBrainsDesktop || useBrowserInsiders;
+        }
+
         const ideChoice = user.additionalData?.ideSettings?.defaultIde;
+        const useLatest = !!user.additionalData?.ideSettings?.useLatestVersion;
         if (!!ideChoice) {
             const mappedImage = ideConfig.ideOptions.options[ideChoice];
             if (!!mappedImage && mappedImage.image) {
@@ -539,14 +547,18 @@ export class WorkspaceStarter {
                 // For now, this feature requires special permissions.
                 configuration.ideImage = ideChoice;
             }
+            configuration.latestWarning = shouldDisplayLatestWarning(
+                ideChoice,
+                user.additionalData?.ideSettings?.defaultDesktopIde,
+                useLatest,
+            );
         }
 
-        const useLatest = !!user.additionalData?.ideSettings?.useLatestVersion;
         const referrerIde = this.resolveReferrerIDE(workspace, user, ideConfig);
         if (referrerIde) {
-            configuration.desktopIdeImage = useLatest
-                ? referrerIde.option.latestImage ?? referrerIde.option.image
-                : referrerIde.option.image;
+            const refUseLatest = useLatest && referrerIde.option.latestImage != null;
+            configuration.desktopIdeImage = refUseLatest ? referrerIde.option.latestImage : referrerIde.option.image;
+            configuration.latestWarning = shouldDisplayLatestWarning(undefined, referrerIde.id, refUseLatest);
             if (!user.additionalData?.ideSettings) {
                 // A user does not have IDE settings configured yet configure it with a referrer ide as default.
                 const additionalData = user?.additionalData || {};