Pipeline wizard

package.json

@@ -76,6 +76,18 @@
           "default": "yaml",
           "description": "Output format for Tekton specs. One of 'json' or 'yaml' (default)."
         },
+        "vs-tekton.start": {
+          "Title": "Start Pipeline",
+          "type": "boolean",
+          "default": false,
+          "description": "Start pipeline from QuickPick"
+        },
+        "vs-tekton.pipelineRun": {
+          "Title": "Show PipelineRun on staring Pipeline",
+          "type": "boolean",
+          "default": true,
+          "description": "Show PipelineRun on staring Pipeline from webview"
+        },
         "vs-tekton.showChannelOutput": {
           "title": "Show channel on output",
           "type": "boolean",
@@ -766,19 +778,21 @@
   "scripts": {
     "verify": "node ./out/build/verify-tools.js",
     "vscode:prepublish": "npm run build",
-    "compile": "tsc -p ./ && npm run build-preview",
+    "compile": "tsc -p ./ && npm run build-preview && npm run build:webview",
     "watch": "tsc -watch -p ./",
     "clean": "rimraf out && rimraf preview",
     "test": "npm run clean && npm run compile && npm run verify && node ./out/build/install-vscode.js && node ./out/build/unit-tests.js",
     "update-deps": "node_modules/.bin/ncu --upgrade --loglevel verbose --packageFile package.json && npm update",
     "coverage:upload": "codecov -f coverage/coverage-final.json",
-    "build": "npm run clean && npm run lint && npm run compile",
+    "build": "npm run clean && npm run lint && npm run compile && npm run build:webview",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "build-preview": "webpack-cli --mode production",
     "preview-watch": "webpack-cli -w --mode development",
     "snippets-build": "node ./out/build/build-snippets.js",
-    "icons-build": "node ./out/build/build-svg-icons.js"
+    "icons-build": "node ./out/build/build-svg-icons.js",
+    "build:webview": "webpack-cli --mode production --config ./src/webview/pipeline/webpack.config.js",
+    "watch:webview": "webpack-cli -w --mode development --config ./src/webview/pipeline/webpack.config.js"
   },
   "devDependencies": {
     "@types/byline": "^4.2.31",
@@ -805,11 +819,13 @@
     "@typescript-eslint/parser": "^2.12.0",
     "chai": "^4.2.0",
     "codecov": "^3.7.1",
+    "css-loader": "^3.6.0",
     "cytoscape": "^3.14.0",
     "cytoscape-dagre": "^2.2.2",
     "decache": "^4.5.1",
     "eslint": "^6.7.2",
     "eslint-plugin-header": "^3.0.0",
+    "file-loader": "^6.0.0",
     "glob": "^7.1.3",
     "istanbul": "^0.4.5",
     "mocha": "^6.2.2",
@@ -821,9 +837,11 @@
     "sinon": "^7.3.2",
     "sinon-chai": "^3.3.0",
     "source-map-support": "^0.5.16",
+    "style-loader": "^1.2.1",
     "tmp": "0.1.0",
     "ts-loader": "^6.2.1",
     "typescript": "^3.5.2",
+    "vscode-codicons": "0.0.4",
     "vscode-test": "^1.3.0",
     "walker": "^1.0.7",
     "webpack": "^4.41.6",

src/extension.ts

@@ -89,6 +89,7 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
     vscode.commands.registerCommand('tekton.open.task', (context) => execute(TaskRun.openDefinition, context)),
     vscode.commands.registerCommand('tekton.open.task.palette', (context) => execute(TaskRun.openDefinition, context)),
     vscode.commands.registerCommand('tekton.view.pipelinerun.diagram', (context) => execute(PipelineRun.showDiagram, context)),
+    vscode.commands.registerCommand('tekton.pipeline.wizard.start', (context) => execute(Pipeline.startWizard, context)),
 
     pipelineExplorer,
     // Temporarily loaded resource providers

src/pipeline/wizard.ts

@@ -0,0 +1,168 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+import { contextGlobalState } from '../extension';
+import * as path from 'path';
+import { Disposable } from '../util/disposable';
+import { debounce } from 'debounce';
+import { TknResourceItem } from '../tekton/webviewstartpipeline';
+import { startPipeline } from '../tekton/startpipeline';
+
+export interface PipelineWizardInput {
+  readonly resourceColumn: vscode.ViewColumn;
+  readonly trigger: TknResourceItem;
+}
+
+export class PipelineWizard extends Disposable {
+  static viewType = 'tekton.pipeline.start.wizard';
+
+  public static create(input: PipelineWizardInput, previewColumn: vscode.ViewColumn): PipelineWizard {
+    const webview = vscode.window.createWebviewPanel(
+      PipelineWizard.viewType,
+      `Start Pipeline: ${path.basename(input.trigger.name)}`,
+      previewColumn,
+      {
+        enableFindWidget: true,
+        ...getWebviewOptions()
+      }
+    );
+    return new PipelineWizard(webview, input);
+  }
+
+  private editor: vscode.WebviewPanel;
+  private updateFunc = debounce(() => this.doUpdate(), 500);
+  private readonly onDisposeEmitter = new vscode.EventEmitter<void>();
+  public readonly onDispose = this.onDisposeEmitter.event;
+  private readonly onDidChangeViewStateEmitter = new vscode.EventEmitter<vscode.WebviewPanelOnDidChangeViewStateEvent>();
+  public readonly onDidChangeViewState = this.onDidChangeViewStateEmitter.event;
+
+  constructor(webview: vscode.WebviewPanel, private input: PipelineWizardInput) {
+    super();
+    this.editor = webview;
+    this.register(this.editor.onDidDispose(() => {
+      this.dispose();
+    }));
+
+
+    this.register(this.editor.webview.onDidReceiveMessage(async e => {
+      switch (e.type) {
+        case 'startPipeline':
+          // eslint-disable-next-line no-case-declarations
+          const inputStartPipeline = e.body;
+          this.dispose();
+          return await startPipeline(inputStartPipeline);
+      }
+    }));
+
+    this.updateFunc();
+  }
+
+  dispose(): void {
+    if (this.disposed) {
+      return;
+    }
+
+    this.onDisposeEmitter.fire();
+    this.onDisposeEmitter.dispose();
+
+    this.editor.dispose();
+    super.dispose();
+  }
+
+  reveal(viewColumn: vscode.ViewColumn): void {
+    this.editor.reveal(viewColumn);
+  }
+
+  update(): void {
+    // TODO: 
+
+  }
+
+
+  private async doUpdate(): Promise<void> {
+    if (this.disposed) {
+      return;
+    }
+    const html = this.getHmlContent();
+    this.setContent(html);
+
+    try {
+      this.postMessage({ type: 'trigger', data: this.input.trigger });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  private postMessage(msg: {}): void {
+    if (!this.disposed) {
+      this.editor.webview.postMessage(msg);
+    }
+  }
+
+  private setContent(html: string): void {
+    this.editor.title = 'Start Pipeline';
+    // this.editor.iconPath = this.iconPath; //TODO: implement
+    this.editor.webview.options = getWebviewOptions();
+    this.editor.webview.html = html;
+  }
+
+  private getHmlContent(): string {
+    const nonce = new Date().getTime() + '' + new Date().getMilliseconds();
+    const rule = this.editor.webview.cspSource;
+    return `
+    <!DOCTYPE html>
+      <html lang="en" class="pf-m-redhat-font">
+        <head>
+          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' ${rule} http: https: data:; media-src 'self' ${rule} http: https: data:; script-src 'nonce-${nonce}'; style-src 'self' ${rule} 'unsafe-inline' http: https: data:; font-src 'self' ${rule} http: https: data:;">
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <style type="text/css" media="screen, print">
+            @font-face {
+              font-family: "codicon";
+              src: url("${this.getFontPath()}") format("truetype");
+            }
+          </style>
+        </head>
+      <body>
+        <div id="root" style="width: 100%; height: 100%;"></div>
+        ${this.getScripts(nonce)}
+      </body>
+      </html>`;
+  }
+
+  private getScripts(nonce: string): string {
+    const out: string[] = [];
+    out.push(`<script
+				src="${escapeAttribute(this.editor.webview.asWebviewUri(vscode.Uri.file(path.join(contextGlobalState.extensionPath, '/out/webview/pipeline/index.js'))))}"
+				nonce="${nonce}"
+				charset="UTF-8"></script>`);
+    return out.join('\n');
+  }
+
+  private getFontPath(): string {
+    return this.editor.webview.asWebviewUri(vscode.Uri.file(path.join(contextGlobalState.extensionPath, '/out/webview/pipeline/assets/codicon.ttf'))).toString();
+  }
+
+}
+
+function escapeAttribute(value: string | vscode.Uri): string {
+  return value.toString().replace(/"/g, '&quot;');
+}
+
+
+function getWebviewOptions(): vscode.WebviewOptions {
+  return {
+    enableScripts: true,
+    localResourceRoots: getLocalResourceRoots()
+  };
+}
+
+function getLocalResourceRoots(): vscode.Uri[] {
+  return [
+    vscode.Uri.file(path.join(contextGlobalState.extensionPath, '/out/webview/pipeline')),
+    vscode.Uri.file(path.join(contextGlobalState.extensionPath, '/images'))
+  ];
+}

src/tekton.d.ts

@@ -32,6 +32,7 @@ export interface TknSpec {
   resources?: TknResource[];
   params?: TknParams[];
   serviceAccount?: string;
+  workspaces?: TknWorkspaces[];
 }
 
 export interface TknTaskSpec {
@@ -65,6 +66,9 @@ export interface TaskResource {
   optional?: boolean;
 }
 
+export interface TknWorkspaces {
+  name: string;
+}
 
 export interface TknPipelineTrigger {
   metadata: TknMetadata;

src/tekton/pipeline.ts

@@ -6,45 +6,47 @@
 import { TektonItem } from './tektonitem';
 import { TektonNode, Command } from '../tkn';
 import { Progress } from '../util/progress';
-import { window } from 'vscode';
+import { window, ViewColumn } from 'vscode';
 import * as cliInstance from '../cli';
 import { cli } from '../cli';
 import { TknPipelineTrigger } from '../tekton';
 import { Trigger, PipelineContent } from './pipelinecontent';
+import { PipelineWizard } from '../pipeline/wizard';
+import { pipelineData } from './webviewstartpipeline';
+import { startPipeline } from './startpipeline';
 
 export class Pipeline extends TektonItem {
 
   static async start(pipeline: TektonNode): Promise<string> {
-    if (!pipeline) {
-      pipeline = await window.showQuickPick(await Pipeline.getPipelineNames(), { placeHolder: 'Select Pipeline to start', ignoreFocusOut: true });
-    }
-    if (!pipeline) return null;
-    const result: cliInstance.CliExitData = await Pipeline.tkn.execute(Command.listPipelines(), process.cwd(), false);
-    let data: TknPipelineTrigger[] = [];
-    if (result.error) {
-      console.log(result + ' Std.err when processing pipelines');
-    }
-    try {
-      data = JSON.parse(result.stdout).items;
-    } catch (ignore) {
-      //show no pipelines if output is not correct json
-    }
+    if (Pipeline.startQuickPick()) {
+      if (!pipeline) {
+        pipeline = await window.showQuickPick(await Pipeline.getPipelineNames(), { placeHolder: 'Select Pipeline to start', ignoreFocusOut: true });
+      }
+      if (!pipeline) return null;
+      const result: cliInstance.CliExitData = await Pipeline.tkn.execute(Command.listPipelines(), process.cwd(), false);
+      let data: TknPipelineTrigger[] = [];
+      if (result.error) {
+        console.log(result + ' Std.err when processing pipelines');
+      }
+      try {
+        data = JSON.parse(result.stdout).items;
+      } catch (ignore) {
+        //show no pipelines if output is not correct json
+      }
 
-    const pipelineTrigger = data.map<Trigger>(value => ({
-      name: value.metadata.name,
-      resources: value.spec.resources,
-      params: value.spec.params ? value.spec.params : undefined,
-      workspaces: value.spec['workspaces'] ? value.spec['workspaces'] : undefined,
-      serviceAcct: value.spec.serviceAccount ? value.spec.serviceAccount : undefined
-    })).filter((obj) => obj.name === pipeline.getName());
-    const inputStartPipeline = await PipelineContent.startObject(pipelineTrigger, 'Pipeline');
+      const pipelineTrigger = data.map<Trigger>(value => ({
+        name: value.metadata.name,
+        resources: value.spec.resources,
+        params: value.spec.params ? value.spec.params : undefined,
+        workspaces: value.spec['workspaces'] ? value.spec['workspaces'] : undefined,
+        serviceAcct: value.spec.serviceAccount ? value.spec.serviceAccount : undefined
+      })).filter((obj) => obj.name === pipeline.getName());
+      const inputStartPipeline = await PipelineContent.startObject(pipelineTrigger, 'Pipeline');
 
-    return Progress.execFunctionWithProgress(`Starting Pipeline '${inputStartPipeline.name}'.`, () =>
-      Pipeline.tkn.startPipeline(inputStartPipeline)
-        .then(() => Pipeline.explorer.refresh())
-        .then(() => `Pipeline '${inputStartPipeline.name}' successfully started`)
-        .catch((error) => Promise.reject(`Failed to start Pipeline with error '${error}'`))
-    );
+      return await startPipeline(inputStartPipeline);
+    } else {
+      Pipeline.startWizard(pipeline);
+    }
   }
 
   static async restart(pipeline: TektonNode): Promise<string> {
@@ -92,4 +94,24 @@ export class Pipeline extends TektonItem {
   static getDeleteCommand(pipeline: TektonNode): cliInstance.CliCommand {
     return Command.deletePipeline(pipeline.getName());
   }
+
+  static async startWizard(pipeline: TektonNode): Promise<void> {
+    if (!pipeline) return null;
+    const result: cliInstance.CliExitData = await Pipeline.tkn.execute(Command.getPipeline(pipeline.getName()), process.cwd(), false);
+    let data: TknPipelineTrigger;
+    if (result.error) {
+      console.log(result + ' Std.err when processing pipelines');
+    }
+    try {
+      data = JSON.parse(result.stdout);
+    } catch (ignore) {
+      //show no pipelines if output is not correct json
+    }
+    const trigger = await pipelineData(data);
+    if (!trigger.workspaces && !trigger.resources && !trigger.params) {
+      await startPipeline(trigger);
+    } else {
+      PipelineWizard.create({ trigger, resourceColumn: ViewColumn.Active }, ViewColumn.Active);
+    }
+  }
 }