Added don't show again button

Author: AndreasArvidsson

packages/cursorless-vscode/resources/installation.js renamed to packages/cursorless-vscode/resources/installationDependencies.js

@@ -1,32 +1,37 @@
+const vscode = acquireVsCodeApi();
+
 const root = document.getElementById("root");
 
 const header = document.createElement("h2");
 header.textContent = "Cursorless extension is now running!";
 
 const description = document.createElement("p");
-description.innerHTML =
-  "<a href='https://www.cursorless.org/docs/user/installation'>Click here to learn how to install Cursorless</a>";
+const aDocs = link(
+  "https://www.cursorless.org/docs/user/installation",
+  "Click here to learn how to install Cursorless",
+);
+description.innerHTML = `<p>Lets check if all dependencies are installed.</p>${aDocs}`;
 
-const div = document.createElement("div");
+const messages = document.createElement("div");
 
-root.append(header, description, div);
+root.append(header, description, messages);
 
 const keyboardUserMessage =
   "<p><i>If you're using Cursorless by keyboard you can ignore this message.</i></p>";
 
 window.addEventListener("message", (event) => {
-  const { data } = event;
+  const { dontShow, dependencies } = event.data;
   const children = [];
 
-  if (!data.talon) {
+  if (!dependencies.talon) {
     const a = link("https://talonvoice.com", "talonvoice.com");
     children.push(
       getChild(
         "Talon not installed",
         `Cursorless requires Talon to function by voice.</br>You can download Talon from ${a}.${keyboardUserMessage}`,
       ),
     );
-  } else if (!data.cursorlessTalon) {
+  } else if (!dependencies.cursorlessTalon) {
     const a = link(
       "https://github.com/cursorless-dev/cursorless-talon",
       "github.com/cursorless-dev/cursorless-talon",
@@ -39,7 +44,7 @@ window.addEventListener("message", (event) => {
     );
   }
 
-  if (!data.commandServer) {
+  if (!dependencies.commandServer) {
     const a = link(
       "https://marketplace.visualstudio.com/items?itemName=pokey.command-server",
       "vscode marketplace",
@@ -56,7 +61,9 @@ window.addEventListener("message", (event) => {
     children.push(getChild("All dependencies are installed!"));
   }
 
-  div.replaceChildren(...children);
+  const dontShowCheckbox = getDontShowCheckbox(dontShow);
+
+  messages.replaceChildren(...children, dontShowCheckbox);
 });
 
 function link(href, text) {
@@ -75,3 +82,18 @@ function getChild(title, body) {
   }
   return child;
 }
+
+function getDontShowCheckbox(dontShow) {
+  const checkbox = document.createElement("input");
+  checkbox.type = "checkbox";
+  checkbox.checked = dontShow;
+  checkbox.onchange = () => {
+    const command = { type: "dontShow", checked: checkbox.checked };
+    vscode.postMessage(command);
+  };
+  const label = document.createElement("label");
+  label.style.marginTop = "1rem";
+  const text = document.createTextNode("Don't show again");
+  label.append(checkbox, text);
+  return label;
+}

packages/cursorless-vscode/src/InstallationDependencies.ts

@@ -26,13 +26,17 @@ export class InstallationDependencies {
    * Shows the installation dependencies webview if there are missing dependencies.
    */
   maybeShow() {
-    if (!this.dontShow() && stateHasMissingDependencies()) {
+    const state = this.getState();
+    if (!state.dontShow && hasMissingDependencies(state.dependencies)) {
       this.createWebview();
     }
   }
 
-  private dontShow() {
-    return this.extensionContext.globalState.get<boolean>(STATE_KEY) ?? false;
+  private getState() {
+    return {
+      dontShow: !!this.extensionContext.globalState.get<boolean>(STATE_KEY),
+      dependencies: getDependencies(),
+    };
   }
 
   private createWebview() {
@@ -42,7 +46,7 @@ export class InstallationDependencies {
     }
 
     this.panel = vscode.window.createWebviewPanel(
-      "cursorless.dependencies",
+      "cursorless.installationDependencies",
       "Cursorless dependencies",
       {
         viewColumn: vscode.ViewColumn.Active,
@@ -56,44 +60,48 @@ export class InstallationDependencies {
       vscode.Uri.joinPath(
         this.extensionContext.extensionUri,
         "resources",
-        "installation.js",
+        "installationDependencies.js",
       ),
     );
 
     this.panel.webview.html = getWebviewContent(this.panel.webview, jsUri);
 
     const updateWebview = () => {
-      this.panel?.webview.postMessage(getState());
+      this.panel?.webview.postMessage(this.getState());
     };
 
     this.panel.onDidChangeViewState(updateWebview);
 
+    this.panel.webview.onDidReceiveMessage((message) => {
+      if (message.type === "dontShow") {
+        const checked = message.checked;
+        this.extensionContext.globalState.update(STATE_KEY, checked);
+      } else {
+        console.error(`Unknown message: ${message}`);
+      }
+    });
+
     const interval = setInterval(updateWebview, 5000);
 
     this.panel.onDidDispose(() => {
       clearInterval(interval);
       this.panel = undefined;
     });
 
-    this.panel.webview.postMessage(getState());
+    this.panel.webview.postMessage(this.getState());
   }
 }
 
-function stateHasMissingDependencies() {
-  return Object.values(getState()).some((value) => !value);
-}
-
-function getState() {
+function getDependencies(): Record<string, boolean> {
   return {
-    talon: false,
-    cursorlessTalon: false,
-    commandServer: false,
+    talon: talonHomeExists(),
+    cursorlessTalon: cursorlessTalonExists(),
+    commandServer: commandServerInstalled(),
   };
-  //   return {
-  //     talon: talonHomeExists(),
-  //     cursorlessTalon: cursorlessTalonExists(),
-  //     commandServer: commandServerInstalled(),
-  //   };
+}
+
+function hasMissingDependencies(dependencies: Record<string, boolean>) {
+  return Object.values(dependencies).some((value) => !value);
 }
 
 function talonHomeExists() {

packages/cursorless-vscode/src/scripts/populateDist/assets.ts

@@ -43,8 +43,8 @@ export const assets: Asset[] = [
     destination: "resources/font_measurements.js",
   },
   {
-    source: "resources/installation.js",
-    destination: "resources/installation.js",
+    source: "resources/installationDependencies.js",
+    destination: "resources/installationDependencies.js",
   },
   { source: "../../schemas", destination: "schemas" },
   {