refactor(ui): remove ng-semantic (#6200)

* feat: remove last sm-select
* feat(ui): refact node wizard
* feat(ui): remove ng-semantic
* fix(ui): adjust css on application create view
* fix(ui): unit test
* fix(ui): translate
* fix(ui): removing debugging true

ui/package.json

@@ -45,7 +45,6 @@
     "@ngxs/store": "3.7.3",
     "@richardlt/ng2-semantic-ui": "0.10.0-alpha.6-fork-6",
     "@sgu/auto-complete": "13.0.0-rc",
-    "@sgu/ng-semantic": "13.0.0-rc2",
     "@swimlane/ngx-charts": "16.0.0",
     "@types/dagre-d3": "0.6.2",
     "@types/js-yaml": "3.12.2",

ui/src/app/model/workflow.model.ts

@@ -647,6 +647,13 @@ export class WNodeContext {
     default_pipeline_parameters: Array<Parameter>;
     conditions: WorkflowNodeConditions;
     mutex: boolean;
+
+    constructor() {
+        this.pipeline_id = 0;
+        this.application_id = 0;
+        this.project_integration_id = 0;
+        this.environment_id = 0;
+    }
 }
 
 export class WNodeOutgoingHook {

ui/src/app/shared/repomanager/from/repomanager.form.html

@@ -1,16 +1,21 @@
-<form class="ui form" *ngIf="ready" (ngSubmit)="create()" novalidate>
-    <div class="fields">
-        <div class="seven wide field">
-            <sm-select [(model)]="selectedRepoId" [disabled]="connectLoading">
-                <option *ngFor="let r of reposManagerList; let i = index;" [value]="i">{{r}}</option>
-            </sm-select>
-        </div>
-        <div class="nine wide right aligned field">
-            <button type="submit" [class.disabled]="selectedRepoId == null" class="ui green button" [class.loading]="connectLoading" name="addrepo">
-                {{ 'btn_link' | translate }}
+<form nz-form *ngIf="ready" (ngSubmit)="create()" novalidate>
+    <nz-row>
+        <nz-col [nzSpan]="10">
+            <nz-form-item>
+                <nz-form-label>Add a repository manager</nz-form-label>
+                <nz-form-control>
+                    <nz-select [(ngModel)]="selectedRepoId" [nzDisabled]="connectLoading" name="repo">
+                        <nz-option *ngFor="let r of reposManagerList; let i = index;" [nzValue]="i" [nzLabel]="r"></nz-option>
+                    </nz-select>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-col>
+        <nz-col [nzSpan]="2" [nzOffset]="12">
+            <button nz-button nzType="primary" type="submit" [disabled]="selectedRepoId == null"  [nzLoading]="connectLoading" name="addrepo">
+                Connect
             </button>
-        </div>
-    </div>
+        </nz-col>
+    </nz-row>
 </form>
 <nz-modal nzTitle="{{ 'repoman_modal_verif_title' | translate }}" [nzVisible]="repoModalVisible" (nzOnCancel)="repoModalVisible = false">
     <div *nzModalContent>

ui/src/app/shared/repomanager/from/repomanager.form.scss

@@ -1,12 +1,10 @@
-modal-content {
-    .ui.input {
-      margin-top: 20px;
-    }
 
-    input[type=text] {
-      margin-right: 30px;
-    }
+nz-select {
+  width: 100%;
+}
+
+nz-col {
+  button {
+    float: right;
+  }
 }
-.ui.form .fields {
-  margin-bottom: 0px;
-}

ui/src/app/shared/requirements/form/requirements.form.component.ts

@@ -55,6 +55,7 @@ export class RequirementsFormComponent implements OnInit {
     @Output() event = new EventEmitter<RequirementEvent>();
 
     newRequirement: Requirement = new Requirement('binary');
+    requirementType: string = 'binary';
     availableRequirements: Array<string>;
     _suggest: Array<string> = [];
     suggestWithWorkerModel: Array<string> = [];

ui/src/app/shared/requirements/form/requirements.form.html

@@ -2,7 +2,7 @@
     <div nz-row>
         <div nz-col nzSpan="6">
             <nz-form-item>
-                <nz-select [(ngModel)]="newRequirement.type" (ngModelChange)="selectType($event)" name="selectType"
+                <nz-select [(ngModel)]="requirementType" (ngModelChange)="selectType($event)" name="selectType"
                            nzPlaceHolder="{{ 'requirement_type' | translate }}">
                     <nz-option *ngFor="let r of availableRequirements" [nzValue]="r" [nzLabel]="r"></nz-option>
                 </nz-select>

ui/src/app/shared/requirements/value/requirements.value.component.ts

@@ -3,9 +3,9 @@ import {
     ChangeDetectorRef,
     Component,
     EventEmitter,
-    Input,
+    Input, OnChanges,
     OnInit,
-    Output
+    Output, SimpleChanges
 } from '@angular/core';
 import { Requirement } from 'app/model/requirement.model';
 import { WorkerModel } from 'app/model/worker-model.model';
@@ -16,7 +16,7 @@ import { WorkerModel } from 'app/model/worker-model.model';
     styleUrls: ['./requirements.value.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class RequirementsValueComponent implements OnInit {
+export class RequirementsValueComponent implements OnInit, OnChanges {
 
     @Input() requirement: Requirement
     @Output() requirementChange = new EventEmitter<Requirement>();
@@ -39,6 +39,11 @@ export class RequirementsValueComponent implements OnInit {
         this._cd.markForCheck();
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        this.initFilter(this.requirement);
+        this._cd.markForCheck();
+    }
+
     initFilter(r: Requirement): void {
         this.requirement = r;
         this.aggregatedSuggestions = new Array<string>();

ui/src/app/shared/shared.module.ts

@@ -5,7 +5,6 @@ import { RouterModule } from '@angular/router';
 import { NguiAutoCompleteModule } from '@sgu/auto-complete';
 import { TranslateModule } from '@ngx-translate/core';
 import { SuiModule } from '@richardlt/ng2-semantic-ui';
-import { NgxSemanticModule } from '@sgu/ng-semantic';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { AuthenticationGuard } from 'app/guard/authentication.guard';
 import { FeatureGuard } from 'app/guard/feature.guard';
@@ -145,6 +144,8 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 import { RequirementsValueComponent } from 'app/shared/requirements/value/requirements.value.component';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzStepsModule } from 'ng-zorro-antd/steps';
 
 const ngZorroConfig: NzConfig = {
     notification: {nzPauseOnHover: true, nzPlacement: "topRight"},
@@ -175,8 +176,10 @@ const icons: IconDefinition[] = [ BellFill, BookOutline, CaretDownFill, CaretRig
         NzMenuModule,
         NzPopconfirmModule,
         NzPopoverModule,
+        NzRadioModule,
         NzSelectModule,
         NzSpinModule,
+        NzStepsModule,
         NzSwitchModule,
         NzTabsModule,
         NzTableModule,
@@ -185,7 +188,6 @@ const icons: IconDefinition[] = [ BellFill, BookOutline, CaretDownFill, CaretRig
         NzUploadModule,
         CommonModule,
         ClipboardModule,
-        NgxSemanticModule,
         FormsModule,
         TranslateModule,
         DragulaModule.forRoot(),
@@ -351,7 +353,6 @@ const icons: IconDefinition[] = [ BellFill, BookOutline, CaretDownFill, CaretRig
         MomentModule,
         NzAutocompleteModule,
         NgForNumber,
-        NgxSemanticModule,
         NgxAutoScrollDirective,
         NzAlertModule,
         NzBadgeModule,
@@ -372,8 +373,10 @@ const icons: IconDefinition[] = [ BellFill, BookOutline, CaretDownFill, CaretRig
         NzNotificationModule,
         NzPopconfirmModule,
         NzPopoverModule,
+        NzRadioModule,
         NzSelectModule,
         NzSpinModule,
+        NzStepsModule,
         NzSwitchModule,
         NzTabsModule,
         NzTagModule,