[ide] desktop client installation steps

Author: akosyakov

chart/templates/server-ide-configmap.yaml

@@ -106,9 +106,32 @@ defaultIde: "code"
 defaultDesktopIde: "code-desktop"
 
 clients:
+  vscode:
+    defaultDesktopIDE: "code-desktop"
+    desktopIDEs: ["code-desktop"]
+    installationSteps: [
+      "Click <b>Allow</b> in the dialog by your browser.",
+      "If you don't see the dialog, make sure you have <a class='gp-link' href='https://code.visualstudio.com/download'>VS Code</a> installed on your machine.",
+      "After that, click the <b>${OPEN_LINK_LABEL}</b> button below."
+    ]
+  vscode-insiders:
+    defaultDesktopIDE: "code-desktop-insiders"
+    desktopIDEs: ["code-desktop-insiders"]
+    installationSteps: [
+      "Click <b>Allow</b> in the dialog by your browser.",
+      "If you don't see the dialog, make sure you have <a class='gp-link' href='https://code.visualstudio.com/insiders'>VS Code Insiders</a> installed on your machine.",
+      "After that, click the <b>${OPEN_LINK_LABEL}</b> button below."
+    ]
   jetbrains-gateway:
     defaultDesktopIDE: "intellij"
     desktopIDEs: ["intellij", "goland", "pycharm", "phpstorm"]
+    installationSteps: [
+      "Click <b>Allow</b> in the dialog by your browser.",
+      "If you don't see the dialog, make sure you have JetBrains Gateway with Gitpod plugin installed on your machine:",
+      " - To install JetBrains Gateway, use <a class='gp-link' href='https://www.jetbrains.com/toolbox-app/'>JetBrains Toolbox App</a>.",
+      " - <a class='gp-link' href='https://plugins.jetbrains.com/plugin/download?rel=true&updateId=154074'>Download the plugin</a> and <a class='gp-link' href='https://www.jetbrains.com/help/idea/managing-plugins.html#install_plugin_from_disk'>install it from the disk</a>.",
+      "After that, click the <b>${OPEN_LINK_LABEL}</b> button below."
+    ]
 {{ end }}
 
 {{- if $comp.serverIdeConfigDeploy.enabled }}

components/dashboard/src/start/StartWorkspace.tsx

@@ -5,6 +5,7 @@
  */
 
 import { ContextURL, DisposableCollection, WithPrebuild, Workspace, WorkspaceImageBuild, WorkspaceInstance } from "@gitpod/gitpod-protocol";
+import { IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import EventEmitter from "events";
 import React, { Suspense, useEffect } from "react";
@@ -32,7 +33,9 @@ export interface StartWorkspaceState {
   desktopIde?: {
     link: string
     label: string
+    clientID?: string
   }
+  ideOptions?: IDEOptions
 }
 
 export default class StartWorkspace extends React.Component<StartWorkspaceProps, StartWorkspaceState> {
@@ -54,7 +57,8 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
           }
           if (event.data.state.desktopIdeLink) {
             const label = event.data.state.desktopIdeLabel || "Open Desktop IDE";
-            this.setState({ desktopIde: { link: event.data.state.desktopIdeLink, label } });
+            const clientID = event.data.state.desktopIdeClientID;
+            this.setState({ desktopIde: { link: event.data.state.desktopIdeLink, label, clientID } });
           }
         }
       }
@@ -72,6 +76,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
     }
 
     this.startWorkspace();
+    getGitpodService().server.getIDEOptions().then(ideOptions => this.setState({ ideOptions }))
   }
 
   componentWillUnmount() {
@@ -284,6 +289,12 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
           statusMessage = <p className="text-base text-gray-400">Opening IDE …</p>;
         } else {
           phase = StartPhase.IdeReady;
+          const openLinkLabel = this.state.desktopIde.label;
+          const clientID = this.state.desktopIde.clientID
+          const client = clientID ? this.state.ideOptions?.clients?.[clientID] : undefined;
+          const installationSteps = client?.installationSteps?.length && <div className="flex flex-col text-left m-auto text-base w-fit text-gray-400">
+            {client.installationSteps.map(step => <div dangerouslySetInnerHTML={{__html: step.replaceAll('${OPEN_LINK_LABEL}', openLinkLabel)}} />)}
+          </div>
           statusMessage = <div>
             <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 mb-2 bg-gray-100 dark:bg-gray-800">
               <div className="rounded-full w-3 h-3 text-sm bg-green-500">&nbsp;</div>
@@ -292,6 +303,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                 <a target="_parent" href={this.state.workspace?.contextURL}><p className="w-56 truncate hover:text-blue-600 dark:hover:text-blue-400" >{this.state.workspace?.contextURL}</p></a>
               </div>
             </div>
+            {installationSteps}
             <div className="mt-10 justify-center flex space-x-2">
               <ContextMenu menuEntries={[
                 {

components/gitpod-protocol/src/ide-protocol.ts

@@ -46,6 +46,11 @@ export interface IDEClient {
      * Desktop IDEs supported by the client.
      */
     desktopIDEs?: string[]
+
+    /**
+     * Steps to install the client on user machine.
+     */
+    installationSteps?: string[]
 }
 
 export interface IDEOption {

components/ide/code-desktop/status/main.go

@@ -72,6 +72,7 @@ func main() {
 		response := make(map[string]string)
 		response["link"] = link.String()
 		response["label"] = label
+		response["clientID"] = schema
 		w.Header().Set("Content-Type", "application/json")
 		json.NewEncoder(w).Encode(response)
 	})