refactor of webview code

Signed-off-by: Rudy Flores <[email protected]>

package.json

@@ -10,7 +10,7 @@
   "private": true,
   "workspaces": [
     "packages/*",
-    "packages/zowe-explorer/webviews/*"
+    "packages/zowe-explorer/src/webviews"
   ],
   "engines": {
     "vscode": "^1.53.2"

packages/zowe-explorer-api/src/vscode/ui/WebView.ts

@@ -39,11 +39,16 @@ export class WebView {
      * The webview entrypoint must be located at <webview folder>/dist/assets/index.js.
      *
      * @param title The title for the new webview
-     * @param dirName The directory name (relative to the "webviews" folder in the extension root) with a valid entrypoint (see above).
+     * @param webviewName The directory name (relative to the "webviews" folder in the extension root) with a valid entrypoint (see above).
      * @param context The VSCode extension context
      * @param onDidReceiveMessage Event callback: called when messages are received from the webview
      */
-    public constructor(title: string, dirName: string, context: ExtensionContext, onDidReceiveMessage?: (message: object) => void | Promise<void>) {
+    public constructor(
+        title: string,
+        webviewName: string,
+        context: ExtensionContext,
+        onDidReceiveMessage?: (message: object) => void | Promise<void>
+    ) {
         this.disposables = [];
 
         // Generate random nonce for loading the bundled script
@@ -52,8 +57,8 @@ export class WebView {
 
         // Build URIs for the webview directory and get the paths as VScode resources
         this.uris.disk = {
-            build: Uri.file(joinPath(context.extensionPath, "webviews", dirName)),
-            script: Uri.file(joinPath(context.extensionPath, "webviews", dirName, "dist", "assets", "index.js")),
+            build: Uri.file(joinPath(context.extensionPath, "src", "webviews")),
+            script: Uri.file(joinPath(context.extensionPath, "src", "webviews", "dist", webviewName, `${webviewName}.js`)),
         };
 
         this.panel = window.createWebviewPanel("ZEAPIWebview", this.title, ViewColumn.Beside, {

packages/zowe-explorer/package.json

@@ -1963,7 +1963,9 @@
     "updateStrings": "node ../../scripts/stringUpdateScript.js && prettier --write --loglevel warn ./i18n package.nls*",
     "package": "vsce package --allow-star-activation --yarn && node ../../scripts/mv-pack.js vscode-extension-for-zowe vsix",
     "license": "node ../../scripts/updateLicenses.js",
-    "watch": "gulp build && webpack --mode development --watch --info-verbosity verbose",
+    "watch": "concurrently 'yarn run watch:webviews' 'yarn run watch:zowe-explorer'",
+    "watch:zowe-explorer": "gulp build && webpack --mode development --watch --info-verbosity verbose",
+    "watch:webviews": "yarn workspace webviews dev",
     "compile": "tsc -b",
     "compile-web": "webpack --target webworker --entry ./src/web/extension.ts --output-path ./out/src/web",
     "markdown": "markdownlint CHANGELOG.md README.md",

packages/zowe-explorer/webviews/edit-attributes/package.json → packages/zowe-explorer/src/webviews/package.json

@@ -1,21 +1,22 @@
 {
-  "name": "edit-attributes",
+  "name": "webviews",
   "private": true,
   "type": "module",
   "version": "2.12.0-SNAPSHOT",
   "main": "index.js",
   "license": "EPL-2.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite build --watch --config ./vite.config.js",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "fresh-clone": "yarn clean && rimraf node_modules",
     "clean": "gulp clean",
-    "package": "echo \"edit-attributes: nothing to package.\"",
-    "test": "echo \"edit-attributes: nothing to test\"",
-    "lint": "echo \"edit-attributes: nothing to lint.\"",
-    "lint:html": "echo \"edit-attributes: nothing to lint.\"",
-    "pretty": "echo \"edit-attributes: nothing to pretty.\""
+    "package": "echo \"webviews: nothing to package.\"",
+    "test": "echo \"webviews: nothing to test\"",
+    "lint": "echo \"webviews: nothing to lint.\"",
+    "lint:html": "echo \"webviews: nothing to lint.\"",
+    "pretty": "echo \"webviews: nothing to pretty.\"",
+    "madge": "echo \"webviews: nothing to madge.\""
   },
   "dependencies": {
     "@types/vscode-webview": "^1.57.1",
@@ -28,6 +29,7 @@
     "@types/lodash.isequal": "^4.5.6",
     "@vscode/codicons": "^0.0.33",
     "typescript": "^4.5.3",
-    "vite": "^4.4.8"
+    "vite": "^4.4.9",
+    "vite-plugin-checker": "^0.6.2"
   }
 }

packages/zowe-explorer/webviews/edit-attributes/src/App.tsx → packages/zowe-explorer/src/webviews/src/edit-attributes/App.tsx

@@ -15,7 +15,6 @@ import isEqual from "lodash.isequal";
 const vscodeApi = acquireVsCodeApi();
 
 export function App() {
-  const notSupported = "NOT SUPPORTED";
   const [readonly, setReadonly] = useState(false);
   const [allowUpdate, setAllowUpdate] = useState(false);
   const [attributes, setAttributes] = useState<Record<"current" | "initial", FileAttributes | null>>({
@@ -112,7 +111,6 @@ export function App() {
           };
           return all;
         }, {}),
-        tag: attributes.tag ?? notSupported,
       };
 
       setAttributes({
@@ -157,17 +155,6 @@ export function App() {
         <pre style={{ fontSize: "1.25em" }}>{attributes.current.name}</pre>
       </strong>
       <VSCodeDivider />
-      {attributes.initial?.directory ?? false ? null : (
-        <div style={{ marginTop: "1em", display: "flex", marginLeft: "1em" }}>
-          <VSCodeTextField
-            readonly={attributes.current.tag === notSupported}
-            value={attributes.current.tag}
-            onInput={(e: any) => updateFileAttributes("tag", e.target.value)}
-          >
-            Tag
-          </VSCodeTextField>
-        </div>
-      )}
       <div style={{ marginTop: "1em" }}>
         <div style={{ maxWidth: "fit-content" }}>
           <div style={{ display: "flex", marginLeft: "1em" }}>

packages/zowe-explorer/webviews/edit-attributes/index.html → packages/zowe-explorer/src/webviews/src/edit-attributes/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="webviewRoot"></div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

packages/zowe-explorer/webviews/edit-attributes/src/types.ts → packages/zowe-explorer/src/webviews/src/edit-attributes/types.ts

@@ -1,3 +1,14 @@
+/**
+ * This program and the accompanying materials are made available under the terms of the
+ * Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Copyright Contributors to the Zowe Project.
+ *
+ */
+
 export type PermissionSet = {
     read: boolean;
     write: boolean;
@@ -15,5 +26,4 @@ export type FileAttributes = {
     directory: boolean;
     group: string;
     perms: FilePermissions;
-    tag?: string;
 };

packages/zowe-explorer/src/webviews/vite.config.ts

@@ -0,0 +1,58 @@
+/**
+ * This program and the accompanying materials are made available under the terms of the
+ * Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Copyright Contributors to the Zowe Project.
+ *
+ */
+
+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
+import * as path from "path";
+import { readdirSync } from "fs";
+import checker from "vite-plugin-checker";
+
+// https://vitejs.dev/config/
+
+interface Webviews {
+    webview?: string;
+    webviewLocation?: string;
+}
+
+/**
+ * Get all available webviews under the source specified
+ * @param source
+ * @returns Object the object where the key is the webview and the value is the location of the webview
+ */
+const getAvailableWebviews = (source: string): Webviews => {
+    const webviews = readdirSync(source, { withFileTypes: true })
+        .filter((dirent) => dirent.isDirectory())
+        .map((dirent) => dirent.name);
+
+    return webviews.reduce((o, key) => Object.assign(o, { [key]: path.resolve("src", key, "index.html") }), {});
+};
+
+export default defineConfig({
+    plugins: [
+        preact(),
+        checker({
+            typescript: true,
+        }),
+    ],
+    root: path.resolve(__dirname, "src"),
+    build: {
+        emptyOutDir: true,
+        outDir: path.resolve(__dirname, "dist"),
+        rollupOptions: {
+            input: getAvailableWebviews(path.resolve(__dirname, "src")) as any,
+            output: {
+                entryFileNames: `[name]/[name].js`,
+                chunkFileNames: `[name]/[name].js`,
+                assetFileNames: `[name]/[name].[ext]`,
+            },
+        },
+    },
+});