feat: Jobs tabular view

.eslintrc.yaml

@@ -36,26 +36,29 @@ parserOptions:
   ecmaVersion: 6
   sourceType: module
   project:
-    - "./tsconfig.json"
-    - "./tsconfig-tests.json"
+    - "**/tsconfig.json"
+    - "**/tsconfig-tests.json"
 plugins:
   - "@typescript-eslint"
   - zowe-explorer
 rules:
   "@typescript-eslint/await-thenable": off
   "@typescript-eslint/consistent-type-assertions": warn
-  "@typescript-eslint/explicit-function-return-type": [ 'error', {
-      # We only disallow the rules that provide value (i.e. that found some errors while configuring)
-      # Documentation: https://typescript-eslint.io/rules/explicit-function-return-type
-      allowHigherOrderFunctions: false,
-      allowFunctionsWithoutTypeParameters: false,
+  "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        # We only disallow the rules that provide value (i.e. that found some errors while configuring)
+        # Documentation: https://typescript-eslint.io/rules/explicit-function-return-type
+        allowHigherOrderFunctions: false,
+        allowFunctionsWithoutTypeParameters: false,
 
-      # Disabling (i.e. setting to `false`) the following rule will force us to unnecessarily type built-in functions
-      # For example, to find the index of a profile in a profiles array we will have to go:
-      #     FROM: profiles.findIndex((profile) => profile.name === "my_profile"))
-      #     TO:   profiles.findIndex((profile): boolean => profile.name === "my_profile"))
-      allowTypedFunctionExpressions: true,
-  }]
+        # Disabling (i.e. setting to `false`) the following rule will force us to unnecessarily type built-in functions
+        # For example, to find the index of a profile in a profiles array we will have to go:
+        #     FROM: profiles.findIndex((profile) => profile.name === "my_profile"))
+        #     TO:   profiles.findIndex((profile): boolean => profile.name === "my_profile"))
+        allowTypedFunctionExpressions: true,
+      },
+    ]
   "@typescript-eslint/explicit-member-accessibility": error
 
   # There are several errors falling under these rules; resolve

packages/zowe-explorer-api/__tests__/__unit__/vscode/ui/TableView.unit.test.ts

@@ -56,11 +56,13 @@ describe("Table.View", () => {
                 disk: {
                     build: Uri.parse(buildPath),
                     script: Uri.parse(scriptPath),
+                    codicons: undefined,
                     css: undefined,
                 },
                 resource: {
                     build: buildPath,
                     script: scriptPath,
+                    codicons: undefined,
                     css: undefined,
                 },
             });

packages/zowe-explorer-api/__tests__/__unit__/vscode/ui/TableViewProvider.unit.test.ts

@@ -93,6 +93,7 @@ describe("TableViewProvider", () => {
             const resolveForViewSpy = jest.spyOn(table, "resolveForView");
             const fakeView = {
                 onDidDispose: jest.fn(),
+                show: jest.fn(),
                 viewType: "zowe.panel",
                 title: "SomeWebviewView",
                 webview: { asWebviewUri: jest.fn(), onDidReceiveMessage: jest.fn(), options: {} },

packages/zowe-explorer-api/src/Types.ts

@@ -37,6 +37,7 @@ export namespace Types {
         build: Uri;
         script: Uri;
         css?: Uri;
+        codicons?: Uri;
     };
 
     export type FileAttributes = {

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

@@ -56,7 +56,7 @@ export namespace Table {
     export type Callback = SingleRowCallback | MultiRowCallback | CellCallback;
 
     /** Conditional callback function - whether an action or option should be rendered. */
-    export type Conditional = (data: RowData | ContentTypes) => boolean;
+    export type Conditional = (data: RowData[] | RowData | ContentTypes) => boolean;
 
     // Defines the supported actions and related types.
     export type ActionKind = "primary" | "secondary" | "icon";
@@ -200,6 +200,10 @@ export namespace Table {
         columnMenu?: "legacy" | "new";
         /** Set this to `true` to enable debugging information from the grid */
         debug?: boolean;
+        /** Set this to `true` to allow checkbox selection, no matter what row is visible. */
+        selectEverything?: boolean;
+        /** Set this to suppress row-click selection, in favor of checkbox selection. */
+        suppressRowClickSelection?: boolean;
         /** The height in pixels for the rows containing floating filters. */
         floatingFiltersHeight?: number;
         /** The height in pixels for the rows containing header column groups. */

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

@@ -9,7 +9,7 @@
  *
  */
 
-import { CancellationToken, WebviewView, WebviewViewProvider, WebviewViewResolveContext } from "vscode";
+import { CancellationToken, commands, WebviewView, WebviewViewProvider, WebviewViewResolveContext } from "vscode";
 import { Table } from "./TableView";
 
 /**
@@ -60,7 +60,7 @@ export class TableViewProvider implements WebviewViewProvider {
      * Provide a table view to display in the "Zowe Resources" view.
      * @param tableView The table view to prepare for rendering
      */
-    public setTableView(tableView: Table.Instance | null): void {
+    public async setTableView(tableView: Table.Instance | null): Promise<void> {
         if (this.tableView != null) {
             this.tableView.dispose();
         }
@@ -75,6 +75,8 @@ export class TableViewProvider implements WebviewViewProvider {
 
         if (this.view) {
             this.tableView.resolveForView(this.view);
+        } else {
+            await commands.executeCommand("workbench.view.extension.zowe-panel");
         }
     }
 

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

@@ -73,31 +73,36 @@ export class WebView {
 
         this.webviewOpts = opts;
 
+        const codiconPath = joinPath(context.extensionPath, "src", "webviews", "dist", "codicons", "codicon.css");
         const cssPath = joinPath(context.extensionPath, "src", "webviews", "dist", "style", "style.css");
+        const codiconsExists = fs.existsSync(codiconPath);
         const cssExists = fs.existsSync(cssPath);
 
         // Build URIs for the webview directory and get the paths as VScode resources
         this.uris.disk = {
             build: Uri.file(joinPath(context.extensionPath, "src", "webviews")),
             script: Uri.file(joinPath(context.extensionPath, "src", "webviews", "dist", webviewName, `${webviewName}.js`)),
+            codicons: codiconsExists ? Uri.file(codiconPath) : undefined,
             css: cssExists ? Uri.file(cssPath) : undefined,
         };
 
         if (!(opts?.isView ?? false)) {
             this.panel = window.createWebviewPanel("ZEAPIWebview", this.title, ViewColumn.Beside, {
                 enableScripts: true,
-                localResourceRoots: [this.uris.disk.build],
+                localResourceRoots: [this.uris.disk.build, this.uris.disk.codicons],
                 retainContextWhenHidden: opts?.retainContext ?? false,
             });
 
             // Associate URI resources with webview
             this.uris.resource = {
                 build: this.panel.webview.asWebviewUri(this.uris.disk.build),
                 script: this.panel.webview.asWebviewUri(this.uris.disk.script),
+                codicons: this.uris.disk.codicons ? this.panel.webview.asWebviewUri(this.uris.disk.codicons) : undefined,
                 css: this.uris.disk.css ? this.panel.webview.asWebviewUri(this.uris.disk.css) : undefined,
             };
 
             const builtHtml = Mustache.render(HTMLTemplate, {
+                cspSource: this.panel.webview.cspSource,
                 unsafeEval: this.webviewOpts?.unsafeEval,
                 uris: this.uris,
                 nonce: this.nonce,
@@ -113,6 +118,7 @@ export class WebView {
     }
 
     public resolveForView(webviewView: WebviewView): void {
+        webviewView.title = this.title;
         webviewView.webview.options = {
             enableScripts: true,
             localResourceRoots: [this.uris.disk.build],
@@ -122,10 +128,12 @@ export class WebView {
         this.uris.resource = {
             build: webviewView.webview.asWebviewUri(this.uris.disk.build),
             script: webviewView.webview.asWebviewUri(this.uris.disk.script),
+            codicons: this.uris.disk.codicons ? webviewView.webview.asWebviewUri(this.uris.disk.codicons) : undefined,
             css: this.uris.disk.css ? webviewView.webview.asWebviewUri(this.uris.disk.css) : undefined,
         };
 
         const builtHtml = Mustache.render(HTMLTemplate, {
+            cspSource: webviewView.webview.cspSource,
             unsafeEval: this.webviewOpts?.unsafeEval,
             uris: this.uris,
             nonce: this.nonce,
@@ -137,6 +145,7 @@ export class WebView {
         }
         webviewView.onDidDispose(() => this.dispose(), null, this.disposables);
         webviewView.webview.html = this.webviewContent;
+        webviewView.show();
         this.view = webviewView;
     }
 

packages/zowe-explorer-api/src/vscode/ui/utils/HTMLTemplate.ts

@@ -9,6 +9,8 @@
  *
  */
 
+/* eslint-disable max-len */
+
 /**
  * HTML template that is compiled with Mustache to load a WebView instance at runtime.
  */
@@ -21,13 +23,16 @@ const HTMLTemplate: string = `
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta 
             http-equiv="Content-Security-Policy" 
-            content="default-src 'none'; font-src data:; img-src data: vscode-resource: https:; script-src {{#unsafeEval}}'unsafe-eval'{{/unsafeEval}} 'nonce-{{ nonce }}';
-            style-src vscode-resource: 'unsafe-inline' http: https: data:;"
+            content="default-src 'none'; font-src data: {{ cspSource }}; img-src data: vscode-resource: https:; script-src {{#unsafeEval}}'unsafe-eval'{{/unsafeEval}} 'nonce-{{ nonce }}';
+            style-src {{ cspSource }} vscode-resource: 'unsafe-inline' http: https: data:;"
         />
         <base href="{{ uris.resource.build }}">
         {{#uris.resource.css}}
         <link type="text/css" rel="stylesheet" href="{{ uris.resource.css }}" />
         {{/uris.resource.css}}
+        {{#uris.resource.codicons}}
+        <link type="text/css" rel="stylesheet" href="{{ uris.resource.codicons }}" />
+        {{/uris.resource.codicons}}
     </head>
     <body>
         <noscript>You'll need to enable JavaScript to run this app.</noscript>

packages/zowe-explorer/CHANGELOG.md

@@ -45,6 +45,7 @@ All notable changes to the "vscode-extension-for-zowe" extension will be documen
 - Changed default base profile naming scheme in newly generated configuration files to prevent name and property conflicts between Global and Project profiles [#2682](https://github.com/zowe/zowe-explorer-vscode/issues/2682)
 - Implemented the `onCredMgrUpdate` VSCode events to notify extenders when the local PC's credential manager has been updated by other applications. [#2994](https://github.com/zowe/zowe-explorer-vscode/pull/2994)
 - Implemented support for building, exposing and displaying table views within Zowe Explorer. Tables can be customized and exposed using the helper facilities (`TableBuilder` and `TableMediator`) for an extender's specific use case. For more information on how to configure and show tables, please refer to the [wiki article on Table Views](https://github.com/zowe/zowe-explorer-vscode/wiki/Table-Views). [#2258](https://github.com/zowe/zowe-explorer-vscode/issues/2258)
+- Implemented a "Show as Table" option for profile nodes in the Jobs tree, displaying lists of jobs in a tabular view. Jobs can be filtered and sorted within this view, and users can select jobs to cancel, delete or download. [#2258](https://github.com/zowe/zowe-explorer-vscode/issues/2258)
 
 ### Bug fixes
 

packages/zowe-explorer/__tests__/__e2e__/features/views/JobTableView.feature

@@ -0,0 +1,18 @@
+Feature: Jobs table view
+
+Scenario: User wants to list their jobs in the table view
+    Given a user who is looking at the Zowe Explorer tree views
+    And the user has a profile in their Data Sets tree
+    When a user sets a filter search on the profile
+    Then the profile node will list results of the filter search
+    And the user has a profile in their Jobs tree
+    When a user sets a filter search on the profile
+    Then the profile node will list results of the filter search
+    When the user right-clicks on the jobs profile and selects "Show as Table"
+    Then the table view appears in the Zowe Resources panel
+
+Scenario: User wants to toggle a column in the table's column selector
+    Given a user who has the jobs table view opened
+    When the user clicks on the Gear icon in the table view
+    Then the column selector menu appears
+    And the user can toggle a column on and off

packages/zowe-explorer/__tests__/__e2e__/step_definitions/views/JobTableView.steps.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 { Given, Then, When } from "@cucumber/cucumber";
+import { ContextMenu } from "wdio-vscode-service";
+
+When('the user right-clicks on the jobs profile and selects "Show as Table"', async function () {
+    this.workbench = await browser.getWorkbench();
+
+    const ctxMenu: ContextMenu = await this.profileNode.openContextMenu();
+    await ctxMenu.wait();
+
+    const showAsTableItem = await ctxMenu.getItem("Show as Table");
+    await (await showAsTableItem.elem).click();
+});
+
+Then("the table view appears in the Zowe Resources panel", async function () {
+    this.tableView = (await this.workbench.getAllWebviews())[0];
+    await this.tableView.wait();
+
+    await this.tableView.open();
+    const tableViewDiv = await browser.$(".table-view");
+    await tableViewDiv.waitForExist();
+    await this.tableView.close();
+});
+
+Given("a user who has the jobs table view opened", async function () {
+    this.tableView = (await (await browser.getWorkbench()).getAllWebviews())[0];
+    await this.tableView.wait();
+});
+
+When("the user clicks on the Gear icon in the table view", async function () {
+    await this.tableView.open();
+    const colsBtn = await browser.$("#colsToggleBtn");
+    await colsBtn.waitForClickable();
+    await colsBtn.click();
+});
+
+Then("the column selector menu appears", async function () {
+    this.colSelectorMenu = await browser.$(".szh-menu.szh-menu--state-open.toggle-cols-menu");
+    this.colSelectorMenu.waitForExist();
+});
+
+Then("the user can toggle a column on and off", async function () {
+    const columnInMenu = await this.colSelectorMenu.$("div > li:nth-child(2)");
+    await columnInMenu.waitForClickable();
+
+    const checkedIcon = await columnInMenu.$("div > span > .codicon-check");
+    await checkedIcon.waitForExist();
+    // First click toggles it off
+    await columnInMenu.click();
+    await checkedIcon.waitForExist({ reverse: true });
+    // Second click will toggle it back on
+    await columnInMenu.click();
+    await checkedIcon.waitForExist();
+    await this.tableView.close();
+});

packages/zowe-explorer/__tests__/__e2e__/wdio.conf.ts

@@ -31,6 +31,7 @@ if (process.env.ZOWE_TEST_DIR) {
 }
 
 const screenshotDir = joinPath(__dirname, "results", "screenshots");
+const isMac = process.platform === "darwin";
 
 export const config: Options.Testrunner = {
     ...baseConfig,
@@ -65,8 +66,9 @@ export const config: Options.Testrunner = {
     specs: ["./features/**/*.feature"],
     // Patterns to exclude.
     exclude: [
+        isMac ? "./features/views/JobTableView.feature" : undefined,
         // 'path/to/excluded/files'
-    ],
+    ].filter(Boolean),
     //
     // ============
     // Capabilities

packages/zowe-explorer/__tests__/__mocks__/mockCreators/jobs.ts

@@ -153,6 +153,17 @@ export function createJobNode(session: any, profile: imperative.IProfileLoaded)
     return jobNode;
 }
 
+export function createJobInfoNode(session: any, profile: imperative.IProfileLoaded) {
+    const jobNode = new ZoweJobNode({
+        label: "Generic node for displaying information",
+        collapsibleState: vscode.TreeItemCollapsibleState.None,
+        parentNode: session.getSessionNode(),
+        profile,
+    });
+    jobNode.contextValue = Constants.INFORMATION_CONTEXT;
+    return jobNode;
+}
+
 export function createJobFavoritesNode() {
     const jobFavoritesNode = new ZoweJobNode({
         label: "Favorites",

packages/zowe-explorer/__tests__/__mocks__/mockUtils.ts

@@ -32,7 +32,7 @@ export class MockedProperty {
     #val: any;
     #valType: MockedValueType;
     #objRef: any;
-    #originalDescriptor?: PropertyDescriptor;
+    #originalDescriptor: PropertyDescriptor | undefined;
 
     private initValueType() {
         if (typeof this.#val === "function" || jest.isMockFunction(this.#val)) {
@@ -49,15 +49,19 @@ export class MockedProperty {
             throw new Error("Null or undefined object passed to MockedProperty");
         }
         this.#objRef = object;
-        this.#originalDescriptor = descriptor ?? Object.getOwnPropertyDescriptor(object, key);
+        this.#originalDescriptor = Object.getOwnPropertyDescriptor(object, key);
 
         if (!value) {
             this.#val = jest.fn();
             this.#valType = MockedValueType.Function;
-            Object.defineProperty(object, key, {
-                value: this.#val,
-                configurable: true,
-            });
+            Object.defineProperty(
+                object,
+                key,
+                descriptor ?? {
+                    value: this.#val,
+                    configurable: true,
+                }
+            );
             return;
         }
 

packages/zowe-explorer/__tests__/__unit__/extension.unit.test.ts

@@ -209,6 +209,7 @@ function createGlobalMocks() {
             "zowe.jobs.sortBy",
             "zowe.jobs.filterJobs",
             "zowe.jobs.copyName",
+            "zowe.jobs.tableView",
             "zowe.updateSecureCredentials",
             "zowe.manualPoll",
             "zowe.editHistory",