Merge pull request #46 from khawkins/two_way_messaging

Webviews: Two-way messaging
salesforce · Oct 27, 2023 · 93e6fb3 · 93e6fb3
2 parents bcc9c93 + f384c8a
commit 93e6fb3
Show file tree

Hide file tree

Showing 16 changed files with 574 additions and 179 deletions.
diff --git a/resources/instructions/briefcase.html b/resources/instructions/briefcase.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
@@ -20,6 +20,12 @@
             If you've already configured a briefcase, move on to the next step.
         </p>
         <button id="okButton">OK</button>
+        <script>
+            const okButtonElement = document.getElementById('okButton');
+            okButtonElement.addEventListener('click', () => {
+                webviewMessaging.sendMessageRequest('okButton');
+            });
+        </script>
         <script src="--- MESSAGING_SCRIPT_SRC ---"></script>
     </body>
 </html>
diff --git a/resources/instructions/landingpage.html b/resources/instructions/landingpage.html
@@ -1,19 +1,29 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Landing Page Customization</title>
+    </head>
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Landing Page Customization</title>
-</head>
-
-<body>
-    <p id="message">A default landing page file (landing_page.json) has been created in the staticresources directory.
-        See <a href="https://help.salesforce.com/s/articleView?id=sf.salesforce_app_plus_offline_landing_page.htm&type=5">Customize The Landing Page</a>
-        for more information on how to modify the landing page file.
-    </p>
-    <button id="okButton">OK</button>
-    <script src="--- MESSAGING_SCRIPT_SRC ---"></script>
-</body>
-
-</html>
+    <body>
+        <p id="message">
+            A default landing page file (landing_page.json) has been created in
+            the staticresources directory. See
+            <a
+                href="https://help.salesforce.com/s/articleView?id=sf.salesforce_app_plus_offline_landing_page.htm&type=5"
+            >
+                Customize The Landing Page
+            </a>
+            for more information on how to modify the landing page file.
+        </p>
+        <button id="okButton">OK</button>
+        <script>
+            const okButtonElement = document.getElementById('okButton');
+            okButtonElement.addEventListener('click', () => {
+                webviewMessaging.sendMessageRequest('okButton');
+            });
+        </script>
+        <script src="--- MESSAGING_SCRIPT_SRC ---"></script>
+    </body>
+</html>
diff --git a/resources/instructions/projectBootstrapAcknowledgment.html b/resources/instructions/projectBootstrapAcknowledgment.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
@@ -13,6 +13,12 @@
             time to resume.
         </p>
         <button id="okButton">OK</button>
+        <script>
+            const okButtonElement = document.getElementById('okButton');
+            okButtonElement.addEventListener('click', () => {
+                webviewMessaging.sendMessageRequest('okButton');
+            });
+        </script>
         <script src="--- MESSAGING_SCRIPT_SRC ---"></script>
     </body>
 </html>
diff --git a/resources/instructions/projectBootstrapChoice.html b/resources/instructions/projectBootstrapChoice.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
@@ -14,6 +14,14 @@ <h1>Welcome to the Offline App Onboarding Wizard</h1>
         </p>
         <button id="createNewButton">Create New Project</button>
         <button id="openExistingButton">Open Existing Project</button>
+        <script>
+            for (const buttonId of ['createNewButton', 'openExistingButton']) {
+                const buttonElement = document.getElementById(buttonId);
+                buttonElement.addEventListener('click', () => {
+                    webviewMessaging.sendMessageRequest(buttonId);
+                });
+            }
+        </script>
         <script src="--- MESSAGING_SCRIPT_SRC ---"></script>
     </body>
 </html>
diff --git a/resources/instructions/salesforcemobileapp.html b/resources/instructions/salesforcemobileapp.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
@@ -21,6 +21,12 @@
             own.
         </p>
         <button id="okButton">OK</button>
+        <script>
+            const okButtonElement = document.getElementById('okButton');
+            okButtonElement.addEventListener('click', () => {
+                webviewMessaging.sendMessageRequest('okButton');
+            });
+        </script>
         <script src="--- MESSAGING_SCRIPT_SRC ---"></script>
     </body>
 </html>
diff --git a/resources/instructions/webviewMessaging.js b/resources/instructions/webviewMessaging.js
@@ -5,23 +5,53 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
-const vscode = acquireVsCodeApi();
+// ------------------
+// Callback Messaging
+// ------------------
+//
+// Async, callback-based messaging mechanism for clients
+//
+const webviewMessaging = (function () {
+    const vscode = acquireVsCodeApi();
+    let requestId = 0;
+    const asyncMessageCallbacks = {};
 
-// Set up button event handlers and message passing.
-const buttons = document.getElementsByTagName("button");
-if (!buttons || buttons.length === 0) {
-  console.error("No buttons found! No event handlers will be created.");
-} else {
-  for (const button of buttons) {
-    const buttonId = button.getAttribute("id");
-    if (!buttonId) {
-      console.error(
-        "Button has no id value! No event handler will be created."
-      );
-    } else {
-      button.addEventListener("click", () => {
-        vscode.postMessage({ button: buttonId });
-      });
-    }
-  }
-}
+    // Receives messages from the backing TypeScript controller page that
+    // created the hosted webview. These messages will be linked back to
+    // originating requests, passing any response data back to the async
+    // caller.
+    window.addEventListener('message', (event) => {
+        const message = event.data;
+        if (message.callbackId && asyncMessageCallbacks[message.callbackId]) {
+            const callback = asyncMessageCallbacks[message.callbackId];
+            delete asyncMessageCallbacks[message.callbackId];
+            delete message.callbackId;
+            callback(message);
+        }
+    });
+
+    return {
+        /**
+         * Sends a message request to the backing TypeScript controller page that
+         * created the hosted webview.
+         * @param {string} type - A name representing the type of request. Basically
+         * the event key to which the controller page will subscribe.
+         * @param {object} [data] - An optional block of input data to pass to the
+         * controller.
+         * @param {Function} [callback] - An optional callback for receiving a
+         * response from the controller, if expected.
+         */
+        sendMessageRequest: function (type, data, callback) {
+            let message;
+            if (callback) {
+                const asyncMessageRequestId = ++requestId;
+                asyncMessageCallbacks[asyncMessageRequestId] = callback;
+
+                message = { type, callbackId: asyncMessageRequestId, ...data };
+            } else {
+                message = { type, ...data };
+            }
+            vscode.postMessage(message);
+        }
+    };
+})();
diff --git a/src/commands/wizard/authorizeCommand.ts b/src/commands/wizard/authorizeCommand.ts
@@ -24,7 +24,7 @@ export class AuthorizeCommand {
             if (!result || result.title === l10n.t('No')) {
                 return Promise.resolve(false);
             } else {
-                await commands.executeCommand('sfdx.force.auth.web.login');
+                await commands.executeCommand('sfdx.org.login.web');
                 await window.showInformationMessage(
                     l10n.t(
                         "Once you've authorized your Org, click here to continue."

diff --git a/src/commands/wizard/briefcaseCommand.ts b/src/commands/wizard/briefcaseCommand.ts
@@ -7,7 +7,7 @@
 
 import { ProgressLocation, Uri, window, l10n } from 'vscode';
 import { CommonUtils } from '@salesforce/lwc-dev-mobile-core/lib/common/CommonUtils';
-import { InstructionsWebviewProvider } from '../../webviews';
+import { InstructionsWebviewProvider } from '../../webviews/instructions';
 
 export class BriefcaseCommand {
     static readonly OPEN_ORG_BRIEFCASE_PAGE_CMD =

diff --git a/src/commands/wizard/configureProjectCommand.ts b/src/commands/wizard/configureProjectCommand.ts
@@ -8,7 +8,7 @@
 import { Uri, WebviewPanel, commands, l10n, window } from 'vscode';
 import * as process from 'process';
 import { CommonUtils } from '@salesforce/lwc-dev-mobile-core/lib/common/CommonUtils';
-import { InstructionsWebviewProvider } from '../../webviews';
+import { InstructionsWebviewProvider } from '../../webviews/instructions';
 
 export type ProjectManagementChoiceAction = (panel?: WebviewPanel) => void;
 
@@ -41,7 +41,7 @@ export class DefaultProjectConfigurationProcessor
                 'resources/instructions/projectBootstrapAcknowledgment.html',
                 [
                     {
-                        buttonId: 'okButton',
+                        type: 'okButton',
                         action: async (panel) => {
                             panel.dispose();
                             return resolve();
@@ -98,13 +98,13 @@ export class DefaultProjectConfigurationProcessor
             'resources/instructions/projectBootstrapChoice.html',
             [
                 {
-                    buttonId: 'createNewButton',
+                    type: 'createNewButton',
                     action: (panel) => {
                         createChoice(panel);
                     }
                 },
                 {
-                    buttonId: 'openExistingButton',
+                    type: 'openExistingButton',
                     action: (panel) => {
                         openChoice(panel);
                     }

diff --git a/src/commands/wizard/onboardingWizard.ts b/src/commands/wizard/onboardingWizard.ts
@@ -11,7 +11,7 @@ import { BriefcaseCommand } from './briefcaseCommand';
 import { DeployToOrgCommand } from './deployToOrgCommand';
 import { ConfigureProjectCommand } from './configureProjectCommand';
 import { AuthorizeCommand } from './authorizeCommand';
-import { InstructionsWebviewProvider } from '../../webviews';
+import { InstructionsWebviewProvider } from '../../webviews/instructions';
 
 const wizardCommand = 'salesforcedx-vscode-offline-app.onboardingWizard';
 const onboardingWizardStateKey =

diff --git a/src/commands/wizard/templateChooserCommand.ts b/src/commands/wizard/templateChooserCommand.ts
@@ -10,7 +10,7 @@ import { UIUtils } from '../../utils/uiUtils';
 import { workspace } from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
-import { InstructionsWebviewProvider } from '../../webviews';
+import { InstructionsWebviewProvider } from '../../webviews/instructions';
 
 export interface TemplateQuickPickItem extends QuickPickItem {
     filenamePrefix: string;

diff --git a/src/test/suite/commands/wizard/briefcaseCommand.test.ts b/src/test/suite/commands/wizard/briefcaseCommand.test.ts
@@ -11,7 +11,7 @@ import { afterEach, beforeEach } from 'mocha';
 import { BriefcaseCommand } from '../../../../commands/wizard/briefcaseCommand';
 import { Uri, l10n, window, Progress, CancellationToken } from 'vscode';
 import { CommonUtils } from '@salesforce/lwc-dev-mobile-core/lib/common/CommonUtils';
-import { InstructionsWebviewProvider } from '../../../../webviews';
+import { InstructionsWebviewProvider } from '../../../../webviews/instructions';
 
 suite('Briefcase Command Test Suite', () => {
     beforeEach(function () {});