Introduce salesforcedx-webview-ui package (#451)

This is the package that will contain all the .html that we will use for each webview.

@W-5013822@

.vscode/tasks.json

@@ -1,36 +1,46 @@
 {
-  "version": "0.1.0",
+  "version": "2.0.0",
   "problemMatcher": "$tsc-watch",
   "tasks": [
     {
-      "taskName": "Bootstrap",
+      "label": "Bootstrap",
       "command": "npm",
-      "isShellCommand": true,
-      "showOutput": "silent",
+      "type": "shell",
+      "presentation": { "focus": false, "panel": "shared" },
       "args": ["run", "bootstrap"],
       "isBackground": false
     },
     {
-      "taskName": "Clean",
+      "label": "Clean",
       "command": "npm",
-      "isShellCommand": true,
-      "showOutput": "silent",
+      "type": "shell",
+      "presentation": {
+        "focus": false,
+        "panel": "shared"
+      },
       "args": ["run", "clean"],
       "isBackground": false
     },
     {
-      "isBuildCommand": true,
-      "taskName": "Compile",
+      "label": "Compile",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
       "command": "npm",
-      "isShellCommand": true,
-      "showOutput": "silent",
+      "type": "shell",
+      "presentation": {
+        "focus": false,
+        "panel": "dedicated"
+      },
       "args": ["run", "compile"],
       "isBackground": false,
       "problemMatcher": {
         "owner": "typescript",
         "fileLocation": "relative",
         "pattern": {
-          "regexp": "^(@salesforce\\/)(.*)\\((\\d+)\\,(\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
+          "regexp":
+            "^(@salesforce\\/)(.*)\\((\\d+)\\,(\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
           "file": 2,
           "line": 3,
           "severity": 5,
@@ -40,29 +50,68 @@
       }
     },
     {
-      "taskName": "Lint",
+      "label": "Lint",
       "command": "npm",
-      "isShellCommand": true,
-      "showOutput": "silent",
+      "type": "shell",
+      "presentation": {
+        "focus": false,
+        "panel": "dedicated"
+      },
       "args": ["run", "lint"],
       "isBackground": false
     },
     {
-      "isTestCommand": true,
-      "taskName": "Test",
+      "label": "Watch",
       "command": "npm",
-      "isShellCommand": true,
-      "showOutput": "silent",
-      "args": ["run", "test"],
-      "isBackground": false
+      "type": "shell",
+      "presentation": {
+        "reveal": "silent",
+        "focus": false,
+        "panel": "dedicated"
+      },
+      "args": ["run", "watch"],
+      "isBackground": true,
+      "problemMatcher": "$tsc-watch"
     },
     {
-      "taskName": "Watch",
+      "label": "Test salesforcedx-webview-ui",
       "command": "npm",
-      "isShellCommand": true,
-      "showOutput": "silent",
-      "args": ["run", "watch"],
+      "type": "shell",
+      "isBackground": true,
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "focus": false,
+        "panel": "dedicated"
+      },
+      "args": ["run", "test-webview"],
+      "problemMatcher": "$tsc-watch"
+    },
+    {
+      "label": "Start salesforcedx-webview-ui server",
+      "command": "npm",
+      "type": "shell",
       "isBackground": true,
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "focus": false,
+        "panel": "dedicated"
+      },
+      "args": ["run", "start-webview"],
+      "problemMatcher": "$tsc-watch"
+    },
+    {
+      "label": "Bundle salesforcedx-webview-ui artifacts",
+      "command": "npm",
+      "type": "shell",
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "focus": false,
+        "panel": "dedicated"
+      },
+      "args": ["run", "bundle-webview"],
       "problemMatcher": "$tsc-watch"
     }
   ]

docs/developing.md

@@ -49,7 +49,9 @@ You would only do this once after you cloned the repository.
 1. We develop on the `develop` branch and release from the `master` branch. At
    this point, you should do initiate a `git checkout -t origin/develop` unless
    you are working on releasing.
-1. `npm install` to bring in all the top-level dependencies
+1. `npm install` to bring in all the top-level dependencies. Because of the
+   `postinstall` script, this also runs `npm run bootstrap` for you
+   automatically the first time.
 1. Open the project in VS Code.
 
 You would usually do the following each time you close/reopen VS Code:
@@ -61,10 +63,23 @@ You would usually do the following each time you close/reopen VS Code:
    (Ctrl+Shift+B or Cmd+Shift+B on Mac). The errors will show in the Problems
    panel. There is a known issue with the mapping so clicking on the error won't
    open the file.
-1. In VS Code, open the debug view (Ctrl+Shift+D or Cmd+Shift+D on Mac) and from
-   the launch configuration dropdown, pick "Launch Extensions".
-1. In VS Code, open the debug view (Ctrl+Shift+D or Cmd+Shift+D on Mac) and from
-   the launch configuration dropdown, pick "Launch * Tests".
+1. If you are manipulating the webviews in salesforcedx-webviews-ui, you will
+   also invoke the Command Palette. The type in "task " (there is a space after)
+   and from the list of tasks. Choose from the following.
+   * Select "Start salesforcedx-webview-ui artifacts" to start an interactive
+     watcher to serve up webviews in your browser. This is the `start` script
+     from create-react-app and serves the same purpose.
+   * Select "Bundle salesforcedx-webview-ui artifacts" to copy the artifacts
+     over into the extensions so that they are optimized for our use.
+1. In VS Code, you can invoke Command Palette. Then type in "debug " (there is
+   space after) and from the launch configuration dropdown, pick "Launch
+   Extensions". This launch extension will actually do a build for you as well.
+1. In VS Code, you can invoke Command Palette. Then type in "debug " (there is
+   space after) and from the launch configuration dropdown, pick "Launch
+   Extensions without compile" if you had already build locally before.
+1. In VS Code, you can invoke Command Palette. Then type in "debug " (there is
+   space after) and from the launch configuration dropdown, pick any of  "Launch
+   * Tests".
 
 For more information, consult the VS Code
 [doc](https://code.visualstudio.com/docs/extensions/debugging-extensions) on how
@@ -145,6 +160,16 @@ this command.
 
 This runs `npm run compile` on each of the package in packages.
 
+### `npm run start-webview`
+
+This starts a local server that allows you to interactively work on the UI. This
+is similar to the `start` command from create-react-app.
+
+### `npm run bundle-webview`
+
+This prepares (optimizes and minimizes) the webviews for inclusion into
+salesforcedx-vscode-core.
+
 ### `npm run clean`
 
 This run `npm run clean` on each of the package in packages.

package.json

@@ -16,11 +16,12 @@
   },
   "scripts": {
     "postinstall":
-      "lerna bootstrap -- --no-package-lock && node scripts/reformat-with-prettier",
+      "lerna bootstrap -- --no-package-lock && npm run bundle-webview && node scripts/reformat-with-prettier",
     "bootstrap":
-      "lerna bootstrap -- --no-package-lock && node scripts/reformat-with-prettier",
+      "lerna bootstrap -- --no-package-lock && npm run bundle-webview && node scripts/reformat-with-prettier",
     "clean": "lerna run clean",
-    "compile": "lerna run --stream compile",
+    "compile":
+      "lerna run --stream --ignore @salesforce/salesforcedx-webview-ui compile",
     "lint": "lerna run lint",
     "publish": "node scripts/publish.js",
     "prepush": "npm run lint",
@@ -40,7 +41,12 @@
     "watch": "lerna run --parallel watch",
     "eslint-check":
       "eslint --print-config .eslintrc.json | eslint-config-prettier-check",
-    "reformat": "node scripts/reformat-with-prettier.js"
+    "reformat": "node scripts/reformat-with-prettier.js",
+    "start-webview": "npm run start --prefix=packages/salesforcedx-webview-ui",
+    "build-webview": "npm run build --prefix=packages/salesforcedx-webview-ui",
+    "test-webview": "npm run test --prefix=packages/salesforcedx-webview-ui",
+    "bundle-webview":
+      "npm run compile --prefix=packages/salesforcedx-webview-ui"
   },
   "repository": {
     "type": "git",

packages/salesforcedx-vscode-core/.gitignore

@@ -0,0 +1 @@
+webviews/

packages/salesforcedx-vscode-core/package.json

@@ -288,6 +288,11 @@
         {
           "command": "sfdx.force.apex.log.get",
           "when": "sfdx:project_opened"
+        },
+        {
+          "command": "sfdx.force.manifest.editor.show",
+          "when":
+            "sfdx:project_opened && config.salesforcedx-vscode-core.show_experimental_webviews"
         }
       ]
     },
@@ -451,6 +456,10 @@
       {
         "command": "sfdx.force.apex.log.get",
         "title": "%force_apex_log_get_text%"
+      },
+      {
+        "command": "sfdx.force.manifest.editor.show",
+        "title": "%force_manifest_editor_show_text%"
       }
     ],
     "configuration": {
@@ -461,6 +470,11 @@
           "type": ["boolean"],
           "default": true,
           "description": "%show_cli_success_msg_description%"
+        },
+        "salesforcedx-vscode-core.show_experimental_webviews": {
+          "type": ["boolean"],
+          "default": false,
+          "description": "%show_experimental_webviews_description%"
         }
       }
     }

packages/salesforcedx-vscode-core/package.nls.json

@@ -61,5 +61,10 @@
 
   "isv_bootstrap_command_text":
     "SFDX: Create and Set Up Project for ISV Debugging",
-  "force_apex_log_get_text": "SFDX: Get Apex Debug Logs..."
+  "force_apex_log_get_text": "SFDX: Get Apex Debug Logs...",
+
+  "force_manifest_editor_show_text":
+    "SFDX: Show Package Manifest Editor (Experimental)",
+  "show_experimental_webviews_description":
+    "Specifies whether the commands for the experimental webviews are available to the user."
 }

packages/salesforcedx-vscode-core/src/index.ts

@@ -64,8 +64,11 @@ import { isDemoMode } from './modes/demo-mode';
 import { notificationService } from './notifications';
 import { CANCEL_EXECUTION_COMMAND, cancelCommandExecution } from './statuses';
 import { CancellableStatusBar, taskViewService } from './statuses';
+import { ManifestEditor } from './webviewPanels/manifestEditor';
 
-function registerCommands(): vscode.Disposable {
+function registerCommands(
+  extensionContext: vscode.ExtensionContext
+): vscode.Disposable {
   // Customer-facing commands
   const forceAuthWebLoginCmd = vscode.commands.registerCommand(
     'sfdx.force.auth.web.login',
@@ -252,6 +255,11 @@ function registerCommands(): vscode.Disposable {
     forceApexLogGet
   );
 
+  const showManifestEditorCmd = vscode.commands.registerCommand(
+    'sfdx.force.manifest.editor.show',
+    () => ManifestEditor.createOrShow(extensionContext)
+  );
+
   // Internal commands
   const internalCancelCommandExecution = vscode.commands.registerCommand(
     CANCEL_EXECUTION_COMMAND,
@@ -301,6 +309,7 @@ function registerCommands(): vscode.Disposable {
     forceStopApexDebugLoggingCmd,
     isvDebugBootstrapCmd,
     forceApexLogGetCmd,
+    showManifestEditorCmd,
     internalCancelCommandExecution
   );
 }
@@ -372,7 +381,7 @@ export async function activate(context: vscode.ExtensionContext) {
   }
 
   // Commands
-  const commands = registerCommands();
+  const commands = registerCommands(context);
   context.subscriptions.push(commands);
 
   // Task View

packages/salesforcedx-vscode-core/src/messages/i18n.ts

@@ -170,6 +170,7 @@ export const messages = {
     'You are running Salesforce Extensions for VS Code in demo mode. You will be prompted for confirmation when connecting to production orgs.',
   demo_mode_prompt:
     'Authorizing a business or production org is not recommended on a demo or shared machine. If you continue with the authentication, be sure to run "SFDX: Log Out from All Authorized Orgs" when you\'re done using this org.',
+  force_auth_logout_all_text: 'SFDX: Log Out from All Authorized Orgs',
 
-  force_auth_logout_all_text: 'SFDX: Log Out from All Authorized Orgs'
+  manifest_editor_title_message: 'Manifest Editor'
 };