extension: changes to multiple parts of the code after the first pre-…

…release

esbuild.js

@@ -32,12 +32,6 @@ const watchConfig = {
     },
   };
 
-const webviewConfig = {
-  ...baseConfig,
-  entryPoints: ["./src/webview/index.ts"],
-  outfile: "./out/webview.js",
-};
-
 const scriptsConfig = {
   ...baseConfig,
   entryPoints: ["./src/providers/scripts/results.ts", "./src/providers/scripts/auth.ts"],
@@ -66,10 +60,6 @@ const testConfig = {
         ...extensionConfig,
         ...watchConfig,
       });
-      await build({
-        ...webviewConfig,
-        ...watchConfig,
-      });
       await build({
         ...scriptsConfig,
         ...watchConfig,
@@ -82,7 +72,6 @@ const testConfig = {
     } else {
       // Build extension and webview code
       await build(extensionConfig);
-      await build(webviewConfig);
       await build(scriptsConfig);
       await build(testConfig);
       console.log("build complete");

package.json

@@ -110,7 +110,7 @@
   },
   "scripts": {
     "vscode:prepublish": "npm run esbuild-base -- --minify",
-    "esbuild-base": "esbuild ./src/extension.ts ./src/webview/index.ts ./src/providers/scripts/* --bundle --outdir=out/ --external:vscode --format=cjs --platform=node",
+    "esbuild-base": "esbuild ./src/extension.ts ./src/providers/scripts/* --bundle --outdir=out/ --external:vscode --format=cjs --platform=node",
     "esbuild": "npm run esbuild-base -- --sourcemap",
     "esbuild-watch": "npm run esbuild-base -- --sourcemap --watch",
     "lint": "eslint src --ext ts",

resources/style.css

@@ -41,6 +41,10 @@ vscode-divider {
     margin-bottom: 1rem;
 }
 
+vscode-dropdown {
+    width: 150px;
+}
+
 #setup-container label, vscode-dropdown, vscode-button, svg {
     display: inline-block;
     vertical-align: middle;

src/context/config.ts

@@ -56,8 +56,7 @@ export class Config {
         if (this.config.profiles && this.config.profile) {
             return this.profileToNonStorable(this.config.profile, this.config.profiles[this.config.profile]);
         } else {
-            console.log("[Config]", "Error loading the default user profile");
-            vscode.window.showErrorMessage("Error loading the default user profile.");
+            console.log("[Config]", "Error loading the default user profile. Most chances are that the user is new.");
         }
     }
 

src/providers/auth.ts

@@ -230,8 +230,8 @@ export default class AuthProvider implements vscode.WebviewViewProvider {
 
     private _getHtmlForWebview(webview: vscode.Webview) {
 		// Do the same for the stylesheet.
-        const webviewUri = getUri(webview, this._extensionUri, ["out", "webview", "index.js"]);
-        const scriptUri = getUri(webview, this._extensionUri, ["out", "scripts", "auth.js"]);
+        // const webviewUri = getUri(webview, this._extensionUri, ["out", "webview", "index.js"]);
+        const scriptUri = getUri(webview, this._extensionUri, ["out", "providers", "scripts", "auth.js"]);
         const styleUri = getUri(webview, this._extensionUri, ["resources", "style.css"]);
 
         const config = vscode.workspace.getConfiguration('workbench');
@@ -342,8 +342,7 @@ export default class AuthProvider implements vscode.WebviewViewProvider {
                 ${content}
             </div>
 
-            <script nonce="${nonce}" src="${scriptUri}"></script>
-            <script type="module" nonce="${nonce}" src="${webviewUri}"></script>
+            <script type="module" nonce="${nonce}" src="${scriptUri}"></script>
         </body>
         </html>`;
     }

src/providers/results.ts

@@ -71,8 +71,7 @@ export default class ResultsProvider implements vscode.WebviewViewProvider {
     }
 
     private _getHtmlForWebview(webview: vscode.Webview) {
-        const webviewUri = getUri(webview, this._extensionUri, ["out", "webview", "index.js"]);
-        const scriptUri = getUri(webview, this._extensionUri, ["out", "scripts", "results.js"]);
+        const scriptUri = getUri(webview, this._extensionUri, ["out", "providers", "scripts", "results.js"]);
 
 		// Use a nonce to only allow a specific script to be run.
 		const nonce = getNonce();
@@ -96,8 +95,7 @@ export default class ResultsProvider implements vscode.WebviewViewProvider {
         </head>
         <body>
             <div id="container"></div>
-            <script nonce="${nonce}" src="${scriptUri}"></script>
-            <script type="module" nonce="${nonce}" src="${webviewUri}"></script>
+            <script type="module" nonce="${nonce}" src="${scriptUri}"></script>
         </body>
         </html>`;
     }

src/providers/scripts/auth.ts

@@ -1,9 +1,18 @@
+/*
+ * This file imports all the VSCode UX/UI guidelines.
+ */
+
 // This script will be run within the webview itself
 // It cannot access the main VS Code APIs directly.
 (function () {
     // @ts-ignore
     const vscode = acquireVsCodeApi();
 
+    // Load UX/UI from VSCode.
+    const { provideVSCodeDesignSystem, vsCodeDropdown, vsCodeTextField, vsCodeOption, vsCodeButton, vsCodeDataGrid, vsCodeDataGridCell, vsCodeDataGridRow, vsCodeLink, vsCodeProgressRing, vsCodeDivider } = require ("@vscode/webview-ui-toolkit");
+
+    provideVSCodeDesignSystem().register(vsCodeDropdown(), vsCodeOption(), vsCodeButton(), vsCodeDataGrid(), vsCodeDataGridCell(), vsCodeDataGridRow(), vsCodeLink(), vsCodeTextField(), vsCodeProgressRing(), vsCodeDivider());
+
     const oldState = vscode.getState() || { profiles: [] };
 
     /** @type {Array<{ value: string }>} */
@@ -107,6 +116,9 @@
 
                 const schemas = document.getElementById("schemas") as HTMLSelectElement;
                 schemas.disabled = true;
+
+                const addProfileLinkButton = document.getElementById("addProfileLink") as HTMLSelectElement;
+                addProfileLinkButton.disabled = true;
             }
         }
     });

src/providers/scripts/results.ts

@@ -4,6 +4,11 @@
     // @ts-ignore
     const vscode = acquireVsCodeApi();
 
+    // Load UX/UI from VSCode.
+    const { provideVSCodeDesignSystem, vsCodeDropdown, vsCodeTextField, vsCodeOption, vsCodeButton, vsCodeDataGrid, vsCodeDataGridCell, vsCodeDataGridRow, vsCodeLink, vsCodeProgressRing, vsCodeDivider } = require ("@vscode/webview-ui-toolkit");
+
+    provideVSCodeDesignSystem().register(vsCodeDropdown(), vsCodeOption(), vsCodeButton(), vsCodeDataGrid(), vsCodeDataGridCell(), vsCodeDataGridRow(), vsCodeLink(), vsCodeTextField(), vsCodeProgressRing(), vsCodeDivider());
+
     const oldState = vscode.getState() || { results: [] };
 
     /** @type {Array<{ value: string }>} */