Integrated parameters component with add new step form.

src/app/webapp-common/pipelines/pipeline-add-step-dialog/pipeline-add-step-form/pipeline-add-step-form.component.html

@@ -52,6 +52,33 @@
     <textarea class="step-description" name="description" matInput [(ngModel)]="step.description"
       #description="ngModel"></textarea>
   </mat-form-field>
+  <div class="parameters">
+    <div class="search">
+      <mat-label>Parameters</mat-label>
+      <sm-search search-button
+      #search
+      class="table-search"
+      [value]="searchedText"
+      [enableNavigation]="true"
+      [minimumChars]="1"
+      [debounceTime]="0"
+      [expandOnHover]="true"
+      [searchResultsCount]="searchResultsCount"
+      [searchCounterIndex]="stepParamsForm.matchIndex"
+      (valueChanged)="searchTable($event)"
+    ></sm-search>
+    </div>
+    <sm-pipeline-parameters
+    #stepParamsForm
+    class="form-section"
+    [section]=""
+    [formData]="step?.parameters"
+    (formDataChanged)="onFormValuesChanged($event)"
+    (searchCounterChanged)="searchCounterChanged($event)"
+    (resetSearch)="search.clear(false)"
+    (scrollToResultCounterReset)="scrollIndexCounterReset()"
+  ></sm-pipeline-parameters>
+  </div>
   <div class="w-100 create-step-button">
     <button class="btn btn-dark-fill center" data-id="Create Step" [disabled]="pipelineForm.invalid"
       (click)="send()">ADD STEP

src/app/webapp-common/pipelines/pipeline-add-step-dialog/pipeline-add-step-form/pipeline-add-step-form.component.scss

@@ -1,7 +1,35 @@
+@import "variables";
+
 :host {
   .create-report-button {
     padding: 32px 12px 0;
   }
+  .parameters {
+    display: block;
+    position: relative;
+    height: 100%;
+    margin-bottom: 50px;
+
+    sm-pipeline-parameters {
+      display: block;
+      height: 124px;
+    }
+
+    div.search {
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 8px;
+      // padding-right: 4px;
+      justify-content: space-between;
+      align-items: center;
+      sm-search.table-search {
+        border-radius: 4px;
+        color: $blue-280 !important;
+        background-color: $blue-600 !important;
+      }
+    }
+
+  }
   mat-form-field {
     width: 100%;
 

src/app/webapp-common/pipelines/pipeline-add-step-dialog/pipeline-add-step-form/pipeline-add-step-form.component.ts

@@ -1,5 +1,6 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
@@ -16,6 +17,9 @@ import {
   IOption
 } from '@common/shared/ui-components/inputs/select-autocomplete-with-chips/select-autocomplete-with-chips.component';
 import { Task } from '~/business-logic/model/tasks/task';
+import { PipelineParametersComponent } from '@common/pipelines/pipeline-parameters/pipeline-parameters.component';
+import { PipelinesParameter } from '~/business-logic/model/pipelines/pipelinesParameter';
+import { cloneDeep } from 'lodash-es';
 
 
 @Component({
@@ -37,15 +41,46 @@ export class PipelineAddStepFormComponent implements OnChanges, OnDestroy {
 
   public pipelinesNames: Array<string>;
   public experimentsNames: Array<string>;
-  public step: { name: string; description: string; experiment: { label: string; value: string }, parameters: Array<object> } = {
+  public step: { name: string; description: string; experiment: { label: string; value: string }, parameters: Array<PipelinesParameter> } = {
     name: null,
     description: '',
     experiment: null,
-    parameters: [],
+    parameters: [{
+      name: "Paramter1",
+      value: ""
+    }, {
+      name: "Parameter2",
+      value: ""
+    }],
   };
   filterText: string = '';
   isAutoCompleteOpen: boolean;
 
+    // for parameters
+    @ViewChild('stepParamsForm', {static: false}) stepParamsForm: PipelineParametersComponent;
+    public searchedText: string;
+    public searchResultsCount: number;
+    public scrollIndexCounter: number;
+    public size$: Observable<number>;
+    constructor(/* private store: Store, protected router: Router, */ private cdr: ChangeDetectorRef) {
+      // this.selectedSectionHyperParams$ = this.store.select(selectExperimentHyperParamsSelectedSectionParams);
+      // this.editable$ = this.store.select(selectIsExperimentEditable);
+      // this.selectedSection$ = this.store.select(selectExperimentHyperParamsSelectedSectionFromRoute);
+      // this.isInDev$ = this.store.select(selectIsSelectedExperimentInDev);
+      // this.saving$ = this.store.select(selectIsExperimentSaving);
+      // this.backdropActive$ = this.store.select(selectBackdropActive);
+      // this.routerConfig$ = this.store.select(selectRouterConfig);
+      // this.selectedExperiment$ = this.store.select(selectSelectedExperiment);
+      // this.size$ = this.store.select(selectSplitSize);
+  
+      // this.store.dispatch(setExperimentFormErrors({errors: null}));
+      // this.selectedSectionSubscription = this.selectedSection$.subscribe(section => {
+      //   this.selectedSection = section;
+      //   this.propSection = section === 'properties';
+      // });
+    }
+
+
   @Input() readOnlyExperimentsNames: string[];
   @Input() defaultExperimentId: string;
   public loading: boolean;
@@ -115,6 +150,9 @@ export class PipelineAddStepFormComponent implements OnChanges, OnDestroy {
   }
 
   send() {
+    if (this.stepParamsForm.formData.length > 0) {
+      this.step.parameters = cloneDeep(this.stepParamsForm.formData);
+     }
     this.stepCreated.emit(this.step);
   }
 
@@ -133,5 +171,32 @@ export class PipelineAddStepFormComponent implements OnChanges, OnDestroy {
   isFocused(locationRef: HTMLInputElement) {
     return document.activeElement === locationRef;
   }
+
+  // for parameters
+   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+   searchTable(value: string) {
+    // const searchBackward = value === null;
+    // if (this.searchedText !== value && !searchBackward) {
+    //   this.searchedText = value;
+    //   this.scrollIndexCounter = -1;
+    //   this.searchResultsCount = 0;
+    //   // this.executionParamsForm.resetIndex();
+    //   this.cdr.detectChanges();
+    // }
+    // // this.executionParamsForm.jumpToNextResult(!searchBackward);
+  }
+  searchCounterChanged(count: number) {
+    this.searchResultsCount = count;
+    this.cdr.detectChanges();
+  }
+  scrollIndexCounterReset() {
+    this.scrollIndexCounter = -1;
+    this.cdr.detectChanges();
+  }
+  onFormValuesChanged(event: { field: string; value: any }) {
+    // eslint-disable-next-line no-console
+    console.log(event);
+    // this.store.dispatch(updateExperimentAtPath({path: ('hyperparams.' + event.field), value: event.value}));
+  }
 }