support to reload runtime webview (#602)

Signed-off-by: Yan Zhang <[email protected]>

Author: Eskibear

src/java-runtime/assets/index.ts

@@ -6,74 +6,70 @@ const $ = require("jquery");
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import "../../assets/vscode.scss";
-import { JavaRuntimeEntry, JdkData, ProjectRuntimeEntry } from "../types";
 import { JdkConfigurationPanel } from "./jdk.configure";
 import { JdkInstallationPanel } from "./jdk.installation";
-import { requestJdkInfo } from "./vscode.api";
+import { onWillListRuntimes, requestJdkInfo } from "./vscode.api";
 import bytes = require("bytes");
 import "./style.scss";
 
-window.addEventListener("message", event => {
-  if (event.data.command === "applyJdkInfo") {
-    applyJdkInfo(event.data.jdkInfo);
-  } else if (event.data.command === "showJavaRuntimeEntries") {
-    showJavaRuntimeEntries(event.data.args);
+const onInitialize = (event: any) => {
+  const { data } = event;
+  if (data.command === "applyJdkInfo") {
+    applyJdkInfo(data.jdkInfo);
+  } else if (data.command === "showJavaRuntimeEntries") {
+    showJavaRuntimeEntries(data.args);
   }
-});
+};
 
-let jdkEntries: JavaRuntimeEntry[] | undefined;
-let projectRuntimes: ProjectRuntimeEntry[] | undefined;
-let javaHomeError: any;
-let javaDotHome: string | undefined;
-function showJavaRuntimeEntries(args: {
-  javaRuntimes?: JavaRuntimeEntry[];
-  projectRuntimes?: ProjectRuntimeEntry[];
-  javaHomeError?: string;
-  javaDotHome?: string;
-}) {
-  jdkEntries = args.javaRuntimes;
-  projectRuntimes = args.projectRuntimes;
-  javaHomeError = args.javaHomeError;
-  javaDotHome = args.javaDotHome;
-  render();
+window.addEventListener("message", onInitialize);
+renderLoadingPage();
+onWillListRuntimes();
+
+/**
+ * Listing runtime can be slow, show loading page immediately after opening webview
+ */
+function renderLoadingPage() {
+  ReactDOM.render(React.createElement(JdkConfigurationPanel), document.getElementById("jdkConfigurationPanel"));
+  ReactDOM.render(React.createElement(JdkInstallationPanel), document.getElementById("jdkInstallationPanel"));
 }
 
-let jdkData: JdkData;
+function showJavaRuntimeEntries(args: any) {
+  const props = {
+    jdkEntries: args.javaRuntimes,
+    projectRuntimes: args.projectRuntimes,
+    javaHomeError: args.javaHomeError,
+    javaDotHome: args.javaDotHome
+  };
+  ReactDOM.render(React.createElement(JdkConfigurationPanel, props), document.getElementById("jdkConfigurationPanel"));
+  registerTabSwitchEvents();
+}
 
 function applyJdkInfo(jdkInfo: any) {
   let binary = jdkInfo.binaries[0];
   let downloadLink = binary.installer_link || binary.binary_link;
   let encodedLink = `command:java.helper.openUrl?${encodeURIComponent(JSON.stringify(downloadLink))}`;
 
-  jdkData = {
+  const jdkData = {
     name: jdkInfo.release_name,
     os: binary.os,
     arch: binary.architecture,
     size: bytes(binary.binary_size, { unitSeparator: " " }),
     downloadLink: encodedLink
   };
 
-  render();
-}
-
-function render() {
   const props = {
-    jdkEntries: jdkEntries,
-    projectRuntimes: projectRuntimes,
-    jdkData: jdkData,
-    onRequestJdk: requestJdkInfo,
-    javaHomeError,
-    javaDotHome
+    jdkData,
+    onRequestJdk: requestJdkInfo
   };
 
-  ReactDOM.render(React.createElement(JdkConfigurationPanel, props), document.getElementById("jdkConfigurationPanel"));
   ReactDOM.render(React.createElement(JdkInstallationPanel, props), document.getElementById("jdkInstallationPanel"));
+}
 
+/**
+ * To remove after we retire jQuery from this page/
+ */
+function registerTabSwitchEvents() {
   $("a.navigation").click((e: any) => {
     ($($(e.target).attr("href") || "") as any).tab("show");
   });
-
 }
-
-render();
-

src/java-runtime/assets/jdk.installation.tsx

@@ -8,7 +8,7 @@ import { JdkData } from "../types";
 export type JdkRquestHandler = (jdkVersion: string, jvmImpl: string) => void;
 
 export interface JdkInstallationPanelProps {
-  jdkData: JdkData;
+  jdkData?: JdkData;
   onRequestJdk: JdkRquestHandler;
 }
 
@@ -63,7 +63,7 @@ export class JdkInstallationPanel extends React.Component<JdkInstallationPanelPr
       }
     }
 
-    this.props.onRequestJdk(newState.jdkVersion, newState.jvmImpl);
+    this.props?.onRequestJdk(newState.jdkVersion, newState.jvmImpl);
     this.setState(newState);
   }
 

src/java-runtime/assets/vscode.api.ts

@@ -1,3 +1,6 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license.
+
 declare function acquireVsCodeApi(): any;
 const vscode = acquireVsCodeApi();
 
@@ -39,3 +42,9 @@ export function openBuildScript(rootUri: string, scriptFile: string) {
     scriptFile
   });
 }
+
+export function onWillListRuntimes() {
+  vscode.postMessage({
+    command: "onWillListRuntimes"
+  });
+}

src/java-runtime/index.ts

@@ -49,6 +49,15 @@ async function initializeJavaRuntimeView(context: vscode.ExtensionContext, webvi
   context.subscriptions.push(webviewPanel.onDidDispose(onDisposeCallback));
   context.subscriptions.push(webviewPanel.webview.onDidReceiveMessage(async (e) => {
     switch (e.command) {
+      case "onWillListRuntimes": {
+        suggestOpenJdk().then(jdkInfo => {
+          applyJdkInfo(jdkInfo);
+        });
+        findJavaRuntimeEntries().then(data => {
+          showJavaRuntimeEntries(data);
+        });
+        break;
+      }
       case "requestJdkInfo": {
         let jdkInfo = await suggestOpenJdk(e.jdkVersion, e.jvmImpl);
         applyJdkInfo(jdkInfo);
@@ -133,14 +142,6 @@ async function initializeJavaRuntimeView(context: vscode.ExtensionContext, webvi
     });
   }
 
-  suggestOpenJdk().then(jdkInfo => {
-    applyJdkInfo(jdkInfo);
-  });
-
-  findJavaRuntimeEntries().then(data => {
-    showJavaRuntimeEntries(data);
-  });
-
   // refresh webview with latest source levels when classpath (project info) changes
   const javaExt = vscode.extensions.getExtension("redhat.java");
   if (javaExt?.isActive && javaExt?.exports?.onDidClasspathUpdate) {