Add Zowe VS Code extension samples

Signed-off-by: Timothy Johnson <[email protected]>

.github/workflows/vscode-extension-samples.yml

@@ -0,0 +1,45 @@
+name: VSCode Extension Samples CI
+
+on:
+  pull_request:
+    paths:
+      - .github/workflows/vscode-extension-samples.yml
+      - vscode-extension-samples/**
+  schedule:
+    - cron: '0 10 * * *'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: vscode-extension-samples/${{ matrix.sample }}-sample
+
+    strategy:
+      fail-fast: false
+      matrix:
+        sample: ['menu-item', 'tree-view', 'uss-profile', 'vue-webview']
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js LTS
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build Source
+        run: npm run compile
+
+      - name: Package VSIX
+        run: npx vsce package
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.sample }}-sample
+          path: vscode-extension-samples/${{ matrix.sample }}-sample/*.vsix

README.md

@@ -5,4 +5,4 @@ This repository contains sample code demonstrating Zowe client tools.
 ## Samples
 
 - [Zowe Python SDK Sample](./python-sdk-sample)
-
+- [Zowe VS Code Extension Samples](./vscode-extension-samples)

vscode-extension-samples/.gitignore

@@ -0,0 +1 @@
+package-lock.json

vscode-extension-samples/README.md

@@ -0,0 +1,27 @@
+# Zowe VS Code Extension Samples
+
+This folder contains sample VS Code extensions that demonstrate using [Zowe Explorer API](https://www.npmjs.com/package/@zowe/zowe-explorer-api) to extend the capabilities of [Zowe Explorer for VS Code](https://marketplace.visualstudio.com/items?itemName=Zowe.vscode-extension-for-zowe).
+
+---
+
+## menu-item-sample
+
+Demonstrates adding a new command to the context menu shown when a tree item is right-clicked in Zowe Explorer.
+
+---
+
+## tree-view-sample
+
+Demonstrates adding a new tree view to Zowe Explorer alongside data sets, USS, and jobs.
+
+---
+
+## uss-profile-sample
+
+Demonstrates adding support for a new profile type to the USS tree in Zowe Explorer.
+
+---
+
+## vue-webview-sample
+
+Demonstrates the use of the `WebView` class from Zowe Explorer API to create a webview panel, powered by the Vite bundler and Vue JavaScript framework.

vscode-extension-samples/menu-item-sample/.eslintrc.js

@@ -0,0 +1,15 @@
+/**@type {import('eslint').Linter.Config} */
+// eslint-disable-next-line no-undef
+module.exports = {
+    root: true,
+    parser: "@typescript-eslint/parser",
+    plugins: ["@typescript-eslint"],
+    extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    rules: {
+        semi: [2, "always"],
+        "@typescript-eslint/no-unused-vars": 0,
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/explicit-module-boundary-types": 0,
+        "@typescript-eslint/no-non-null-assertion": 0,
+    },
+};

vscode-extension-samples/menu-item-sample/.gitignore

@@ -0,0 +1,4 @@
+out
+node_modules
+.vscode-test/
+*.vsix

vscode-extension-samples/menu-item-sample/.vscode/launch.json

@@ -0,0 +1,18 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "preLaunchTask": "npm: watch"
+    }
+  ]
+}

vscode-extension-samples/menu-item-sample/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

vscode-extension-samples/menu-item-sample/README.md

@@ -0,0 +1,14 @@
+# Menu Item Sample
+
+Demonstrates adding a new command to the context menu shown when a tree item is right-clicked in Zowe Explorer.
+
+The `contributes` section of "package.json" defines a menu item named "Show Node Context" for all tree views that have an ID starting with `zowe.`.
+
+In "extension.ts" a command is registered which runs when the menu item is clicked and displays the associated [`TreeItem.contextValue`](https://code.visualstudio.com/api/references/vscode-api#TreeItem).
+
+## Running the sample
+
+- Open this sample in VS Code
+- `pnpm i`
+- `pnpm run compile`
+- `F5` to start debugging

vscode-extension-samples/menu-item-sample/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "menu-item-sample",
+  "displayName": "menu-item-sample",
+  "description": "Menu item sample for Zowe Explorer",
+  "version": "0.0.1",
+  "publisher": "Zowe",
+  "repository": "https://github.com/zowe/zowe-explorer-vscode/samples/menu-item-sample",
+  "engines": {
+    "vscode": "^1.79.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [],
+  "main": "./out/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "menu-item-sample.showNodeContext",
+        "title": "Show Node Context"
+      }
+    ],
+    "menus": {
+      "commandPalette": [
+        {
+          "command": "menu-item-sample.showNodeContext",
+          "when": "never"
+        }
+      ],
+      "view/item/context": [
+        {
+          "when": "view =~ /^zowe\\./",
+          "command": "menu-item-sample.showNodeContext",
+          "group": "100_zowe_menuItemSample@0"
+        }
+      ]
+    }
+  },
+  "extensionDependencies": [
+    "Zowe.vscode-extension-for-zowe"
+  ],
+  "scripts": {
+    "vscode:prepublish": "pnpm run compile",
+    "compile": "tsc -p ./",
+    "lint": "eslint \"src/**/*.ts\"",
+    "watch": "tsc -watch -p ./"
+  },
+  "dependencies": {
+    "@zowe/zowe-explorer-api": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.14",
+    "@types/vscode": "^1.53.2",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "eslint": "^8.26.0",
+    "typescript": "^5.1.3"
+  }
+}

vscode-extension-samples/menu-item-sample/src/extension.ts

@@ -0,0 +1,23 @@
+// The module 'vscode' contains the VS Code extensibility API
+// Import the module and reference it with the alias vscode in your code below
+import * as vscode from "vscode";
+import { IZoweTreeNode } from "@zowe/zowe-explorer-api";
+
+// This method is called when your extension is activated
+// Your extension is activated the very first time the command is executed
+export function activate(context: vscode.ExtensionContext) {
+    // Use the console to output diagnostic information (console.log) and errors (console.error)
+    // This line of code will only be executed once when your extension is activated
+    console.log('Congratulations, your extension "menu-item-sample" is now active!');
+
+    // The command has been defined in the package.json file
+    // Now provide the implementation of the command with registerCommand
+    // The commandId parameter must match the command field in package.json
+    const disposable = vscode.commands.registerCommand("menu-item-sample.showNodeContext", (node: IZoweTreeNode) => {
+        // The code you place here will be executed every time your command is executed
+        // Display a message box to the user
+        vscode.window.showInformationMessage(node.contextValue as string);
+    });
+
+    context.subscriptions.push(disposable);
+}

vscode-extension-samples/menu-item-sample/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2020",
+    "lib": ["es2020"],
+    "outDir": "out",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "rootDir": "src"
+  },
+  "exclude": ["node_modules", ".vscode-test"]
+}

vscode-extension-samples/tree-view-sample/.eslintrc.js

@@ -0,0 +1,15 @@
+/**@type {import('eslint').Linter.Config} */
+// eslint-disable-next-line no-undef
+module.exports = {
+    root: true,
+    parser: "@typescript-eslint/parser",
+    plugins: ["@typescript-eslint"],
+    extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    rules: {
+        semi: [2, "always"],
+        "@typescript-eslint/no-unused-vars": 0,
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/explicit-module-boundary-types": 0,
+        "@typescript-eslint/no-non-null-assertion": 0,
+    },
+};

vscode-extension-samples/tree-view-sample/.gitignore

@@ -0,0 +1,4 @@
+out
+node_modules
+.vscode-test/
+*.vsix

vscode-extension-samples/tree-view-sample/.vscode/launch.json

@@ -0,0 +1,18 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "preLaunchTask": "npm: watch"
+    }
+  ]
+}

vscode-extension-samples/tree-view-sample/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

vscode-extension-samples/tree-view-sample/README.md

@@ -0,0 +1,14 @@
+# Tree View Sample
+
+Demonstrates adding a new tree view to Zowe Explorer alongside data sets, USS, and jobs.
+
+The `contributes` section of "package.json" defines a tree view named "Profiles" that will show inside the Zowe Explorer sidebar panel.
+
+In "extension.ts" the tree view is configured to use [`ProfilesTreeProvider`](/samples/tree-view-sample/src/ProfilesTreeProvider.ts) as a data provider which retrieves a list of available Zowe profiles.
+
+## Running the sample
+
+- Open this sample in VS Code
+- `pnpm i`
+- `pnpm run compile`
+- `F5` to start debugging

vscode-extension-samples/tree-view-sample/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "tree-view-sample",
+  "displayName": "tree-view-sample",
+  "description": "Tree view sample for Zowe Explorer",
+  "version": "0.0.1",
+  "publisher": "Zowe",
+  "repository": "https://github.com/zowe/zowe-explorer-vscode/samples/tree-view-sample",
+  "engines": {
+    "vscode": "^1.79.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [],
+  "main": "./out/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "tree-view-sample.refresh",
+        "title": "Refresh View",
+        "icon": "$(refresh)"
+      }
+    ],
+    "menus": {
+      "view/title": [
+        {
+          "command": "tree-view-sample.refresh",
+          "when": "view == tree-view-sample.profiles",
+          "group": "navigation"
+        }
+      ]
+    },
+    "views": {
+      "zowe": [
+        {
+          "id": "tree-view-sample.profiles",
+          "name": "profiles"
+        }
+      ]
+    }
+  },
+  "extensionDependencies": [
+    "Zowe.vscode-extension-for-zowe"
+  ],
+  "scripts": {
+    "vscode:prepublish": "pnpm run compile",
+    "compile": "tsc -p ./",
+    "lint": "eslint \"src/**/*.ts\"",
+    "watch": "tsc -watch -p ./"
+  },
+  "dependencies": {
+    "@zowe/zowe-explorer-api": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.14",
+    "@types/vscode": "^1.53.2",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "eslint": "^8.26.0",
+    "typescript": "^5.1.3"
+  }
+}