Show default name in input field.

src/webview/pipeline/app/editor.ts

@@ -39,18 +39,20 @@ export class PipelineRunEditor implements Widget {
   }
 
   createElement(title: string, resourceType: Params[] | Workspaces[]): void {
-    const resourceGroup = new GroupItem(title);
+    const resourceGroup = new GroupItem(title, `${title}-vscode-webview-pipeline`);
     this.initialValue.name = this.trigger.name;
     for (const resource of resourceType) {
       let element: Widget;
-      if (title === 'Parameters') {
-        element = new InputWidget('Name', null, this.initialValue);
-      } else if (title === 'Workspaces') {
+      let elementId: string;
+      if (title === TknResourceType.Params) {
+        elementId = `${TknResourceType.Params}-input-field-content-data`;
+        element = new InputWidget('Name', null, this.initialValue, null, null, null, null, resource['default']);
+      } else if (title === TknResourceType.Workspaces) {
         element = new SelectWidget('Workspaces-volume', this.trigger, null, this.initialValue).workspaces(VolumeTypes, resource)
       } else {
         element = new SelectWidget('Resources', null, null, this.initialValue).pipelineResource(this.trigger.pipelineResource, resource);
       }
-      resourceGroup.addEditItem(new EditItem(resource.name, element, resource.name));
+      resourceGroup.addEditItem(new EditItem(resource.name, element, resource.name, null, elementId));
       //TODO: complete this
     }
     this.editor.addGroup(resourceGroup);

src/webview/pipeline/app/utils/item.ts

@@ -5,7 +5,7 @@
 
 import { createDiv } from './util';
 import { PipelineStart, Trigger } from './types';
-import { disableButton, selectText } from '..';
+import { disableButton, selectText } from '../index';
 import { SelectWidget } from '../widgets/selectwidget';
 import { EditItem } from '../widgets/maincontent';
 import { InputWidget } from '../widgets/inputwidget';

src/webview/pipeline/app/utils/resource.ts

@@ -5,21 +5,8 @@
 
 import { PipelineStart } from './types';
 
-
 export function collectParameterData(paramName: string, defaultValue: string, initialValue: PipelineStart): void {
-  if (initialValue.params.length === 0) {
-    initialValue.params.push({name: paramName, default: defaultValue});
-  } else {
-    const found = initialValue.params.some(value => {
-      if (value.name === paramName) {
-        value.default = defaultValue;
-        return true;
-      }
-    });
-    if (!found) {
-      initialValue.params.push({name: paramName, default: defaultValue});
-    }
-  }
+  initialValue.params.push({name: paramName, default: defaultValue});
 }
 
 export function collectResourceData(resourceName: string, resourceReference: string, initialValue: PipelineStart): void {

src/webview/pipeline/app/widgets/buttonspanel.ts

@@ -6,9 +6,10 @@
 import { BaseWidget } from './widget';
 import { Trigger, PipelineStart } from '../utils/types';
 import { createItem } from '../utils/item';
-import { disableButton, vscode } from '..';
-import { addItemInWorkspace } from '../utils/resource';
+import { disableButton, vscode } from '../index';
+import { addItemInWorkspace, collectParameterData } from '../utils/resource';
 import { disableRemoveButton } from '../utils/disablebutton';
+import { TknResourceType } from '../utils/const';
 
 export class ButtonsPanel extends BaseWidget {
   private startButton: HTMLElement;
@@ -40,6 +41,7 @@ export class ButtonsPanel extends BaseWidget {
     try {
       if (event.lastElementChild.firstElementChild.className === 'startButton') {
         this.storeItemData(event.querySelectorAll('[id^=items-section-workspace-new-item]'));
+        this.storeParamData(event.querySelectorAll(`[id^=${TknResourceType.Params}-input-field-content-data]`));
         vscode.postMessage({
           type: 'startPipeline',
           body: this.initialValue
@@ -62,6 +64,16 @@ export class ButtonsPanel extends BaseWidget {
     disableButton(document.getElementsByTagName('input'));
   }
 
+  storeParamData(data: unknown[] | NodeListOf<Element>): void {
+    if (data.length !== 0) {
+      data.forEach(val => {
+        const name = val.firstElementChild.innerText;
+        const defaultValue = val.getElementsByTagName('input')[0].value;
+        collectParameterData(name, defaultValue, this.initialValue);
+      });
+    }
+  }
+
   storeItemData(data: NodeListOf<Element>): void {
     if (data.length !== 0) {
       data.forEach(val => {

src/webview/pipeline/app/widgets/inputwidget.ts

@@ -7,7 +7,7 @@ import { createDiv } from '../utils/util';
 import { BaseWidget } from './widget';
 import { PipelineStart } from '../utils/types';
 import { TknResourceType } from '../utils/const';
-import { collectParameterData, collectResourceData } from '../utils/resource';
+import { collectResourceData } from '../utils/resource';
 import { disableButton } from '../index';
 
 export class InputWidget extends BaseWidget {
@@ -18,7 +18,8 @@ export class InputWidget extends BaseWidget {
     disabledType?: boolean,
     wrapperId?: string,
     inputId?: string,
-    inputTitle?: string
+    inputTitle?: string,
+    inputValue?: string
   ) {
     super();
     const editorInput = createDiv(className ?? 'editor-input-box');
@@ -27,6 +28,7 @@ export class InputWidget extends BaseWidget {
     this.input.autocapitalize = 'off';
     this.input.spellcheck = false;
     this.input.placeholder = text ?? '';
+    this.input.value = inputValue ?? '';
     this.input.type = 'text';
     this.input.id = inputId ?? '';
     this.input.disabled = disabledType ?? false;
@@ -70,12 +72,8 @@ export class InputWidget extends BaseWidget {
 
   getValue(input: HTMLInputElement): void {
     disableButton(document.getElementsByTagName('input'));
-    const initialValue = this.initialValue;
-    if (input.parentNode.parentNode.parentNode.parentElement.id === TknResourceType.Params) {
-      collectParameterData(input.parentNode.parentNode.parentNode.firstElementChild.id, this.input.value, initialValue);
-    }
     const resource = input.parentNode.parentNode.parentNode.parentNode.parentElement.id.trim();
-    if (resource === TknResourceType.GitResource || resource === TknResourceType.ImageResource) {
+    if (resource === `${TknResourceType.GitResource}-vscode-webview-pipeline` || resource === `${TknResourceType.ImageResource}-vscode-webview-pipeline`) {
       const name = input.parentNode.parentNode.parentNode.parentNode.firstElementChild.id;
       const resourceRef = this.input.value;
       collectResourceData(name, resourceRef, this.initialValue);

src/webview/pipeline/app/widgets/maincontent.ts

@@ -21,22 +21,24 @@ export class EditItem extends BaseWidget {
   constructor(title: string,
     input: Widget,
     id?: string,
-    className?: string) {
+    className?: string,
+    elementId?: string) {
     super();
     this.element = createDiv(className ?? 'editItem');
+    this.element.id = elementId ?? '';
     this.element.appendChild(new LabelItem(title, id).getElement());
     this.element.appendChild(input.getElement());
   }
 }
 
 export class GroupItem extends BaseWidget {
   public label: HTMLLabelElement;
-  constructor(private title: string) {
+  constructor(private title: string, idName?: string) {
     super();
     this.element = createDiv('editorGroup');
     this.label = document.createElement('label');
     this.label.innerText = title;
-    this.element.id = title ?? '';
+    this.element.id = idName ?? '';
     this.element.appendChild(this.label);
   }
 

src/webview/pipeline/app/widgets/selectwidget.ts

@@ -51,7 +51,7 @@ export class SelectWidget extends BaseWidget {
   }
 
   enableInputBox(event: Node & ParentNode, parentElement: HTMLElement): void {
-    if (event && parentElement.id !== TknResourceType.Workspaces) {
+    if (event && parentElement.id !== `${TknResourceType.Workspaces}-vscode-webview-pipeline`) {
       if (event.parentNode.parentNode.querySelector('select').firstElementChild.innerHTML === 'Select a key') {
         const input = event.querySelector('input');
         input.removeAttribute('disabled');