feat(ui): add feature to import pipeline with yaml from UI

ui/src/app/service/logout.interceptor.service.ts

@@ -1,4 +1,5 @@
 import {Injectable} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
 import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
 import {Observable} from 'rxjs/Observable';
 import {ToastService} from '../shared/toast/ToastService';
@@ -9,7 +10,11 @@ import 'rxjs/add/observable/throw';
 @Injectable()
 export class LogoutInterceptor implements HttpInterceptor {
 
-    constructor(private _toast: ToastService, private _authStore: AuthentificationStore, private _router: Router) {
+    constructor(
+        private _toast: ToastService,
+        private _authStore: AuthentificationStore,
+        private _router: Router,
+        private _translate: TranslateService) {
     }
 
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
@@ -25,7 +30,11 @@ export class LogoutInterceptor implements HttpInterceptor {
                     if (e.error && e.error.message) {
                         this._toast.error(e.statusText, e.error.message);
                     } else {
-                        this._toast.error(e.statusText, JSON.parse(e.message));
+                        try {
+                            this._toast.error(e.statusText, JSON.parse(e.message));
+                        } catch (e) {
+                            this._toast.error(e.statusText, this._translate.instant('common_error'));
+                        }
                     }
                 }
                 return Observable.throw(e);

ui/src/app/service/pipeline/pipeline.service.ts

@@ -6,7 +6,7 @@ import {GroupPermission} from '../../model/group.model';
 import {Stage} from '../../model/stage.model';
 import {Job} from '../../model/job.model';
 import {Parameter} from '../../model/parameter.model';
-import {HttpClient, HttpParams} from '@angular/common/http';
+import {HttpClient, HttpParams, HttpHeaders} from '@angular/common/http';
 
 /**
  * Service to access Pipeline from API.
@@ -49,6 +49,20 @@ export class PipelineService {
         return this._http.put<Pipeline>('/project/' + key + '/pipeline/' + oldName, pipeline);
     }
 
+    /**
+     * Import a pipeline
+     * @param key Project unique key
+     * @param workflow pipelineCode to import
+     */
+    importPipeline(key: string, pipelineCode: string): Observable<Array<string>> {
+        let headers = new HttpHeaders();
+        headers = headers.append('Content-Type', 'application/x-yaml');
+        let params = new HttpParams();
+        params = params.append('format', 'yaml');
+
+        return this._http.post<Array<string>>(`/project/${key}/import/pipeline`, pipelineCode, {headers, params});
+    }
+
     /**
      * Delete a pipeline
      * @param key Project unique key

ui/src/app/service/pipeline/pipeline.store.ts

@@ -96,6 +96,15 @@ export class PipelineStore {
         this._pipeline.next(cache.delete(pipKey));
     }
 
+    /**
+     * Import a pipeline
+     * @param key Project unique key
+     * @param workflow pipelineCode to import
+     */
+    importPipeline(key: string, pipelineCode: string): Observable<Array<string>> {
+        return this._pipelineService.importPipeline(key, pipelineCode);
+    }
+
     /**
      * Create a new pipeline and put it in the store
      * @param key Project unique key

ui/src/app/shared/button/upload/upload.button.component.ts

@@ -0,0 +1,33 @@
+import {EventEmitter, Output, Input, Component} from '@angular/core';
+
+@Component({
+    selector: 'app-upload-button',
+    templateUrl: './upload.button.html',
+    styleUrls: ['./upload.button.scss']
+})
+export class UploadButtonComponent  {
+
+    @Input() accept: string;
+
+    @Input() size: string;
+    @Output() event = new EventEmitter<string>();
+
+    showConfirmation = false;
+
+    constructor() {}
+
+    fileEvent(event) {
+      if (!event || !event.target || !event.target.files || !event.target.files[0]) {
+        return;
+      }
+      let file = event.target.files[0];
+      let reader = new FileReader();
+      let that = this;
+
+      reader.onloadend = function(e: any) {
+        that.event.emit(e.target.result);
+      };
+
+      reader.readAsText(file);
+    }
+}

ui/src/app/shared/button/upload/upload.button.html

@@ -0,0 +1,5 @@
+<input type="file" (change)="fileEvent($event)" class="inputfile" id="embedpollfileinput" [accept]="accept"/>
+<label for="embedpollfileinput" class="ui {{size}} button">
+    <i class="ui upload icon"></i>
+    Upload
+</label>

ui/src/app/shared/button/upload/upload.button.scss

@@ -0,0 +1,8 @@
+.inputfile {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}

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

@@ -12,6 +12,7 @@ import {PermissionService} from './permission/permission.service';
 import {PermissionListComponent} from './permission/list/permission.list.component';
 import {PermissionFormComponent} from './permission/form/permission.form.component';
 import {DeleteButtonComponent} from './button/delete/delete.button';
+import {UploadButtonComponent} from './button/upload/upload.button.component';
 import {ToastService} from './toast/ToastService';
 import {BreadcrumbComponent} from './breadcrumb/breadcrumb.component';
 import {ActionComponent} from './action/action.component';
@@ -90,6 +91,7 @@ import {VCSStrategyComponent} from './vcs/vcs.strategy.component';
         CommitListComponent,
         CutPipe,
         DeleteButtonComponent,
+        UploadButtonComponent,
         ForMapPipe,
         GroupFormComponent,
         HistoryComponent,
@@ -166,6 +168,7 @@ import {VCSStrategyComponent} from './vcs/vcs.strategy.component';
         CommonModule,
         CutPipe,
         DeleteButtonComponent,
+        UploadButtonComponent,
         DragulaModule,
         ForMapPipe,
         FormsModule,

ui/src/app/views/pipeline/add/pipeline.add.component.ts

@@ -5,6 +5,7 @@ import {TranslateService} from '@ngx-translate/core';
 import {ToastService} from '../../../shared/toast/ToastService';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Project} from '../../../model/project.model';
+import {finalize} from 'rxjs/operators';
 
 @Component({
     selector: 'app-pipeline-add',
@@ -18,6 +19,18 @@ export class PipelineAddComponent {
     pipelineType: Array<string>;
     newPipeline = new Pipeline();
 
+    codeMirrorConfig: any;
+    pipToImport = `# Pipeline example
+version: v1.0
+name: root
+jobs:
+- job: run
+  stage: Stage 1
+  steps:
+  - script:
+    - echo "I'm the first step"
+`;
+
     pipelineNamePattern: RegExp = new RegExp('^[a-zA-Z0-9._-]{1,}$');
     pipPatternError = false;
 
@@ -31,6 +44,13 @@ export class PipelineAddComponent {
             this.pipelineType = list.toArray();
             this.newPipeline.type = this.pipelineType[0];
         });
+
+        this.codeMirrorConfig = {
+            mode: 'text/x-yaml',
+            lineWrapping: true,
+            lineNumbers: true,
+            autoRefresh: true,
+        };
     }
 
     createPipeline(): void {
@@ -53,4 +73,22 @@ export class PipelineAddComponent {
         });
 
     }
+
+    goToProject(): void {
+        this._router.navigate(['/project', this.project.key], {queryParams: {tab: 'pipelines'}});
+    }
+
+    importPipeline() {
+        this.loadingCreate = true;
+        this._pipStore.importPipeline(this.project.key, this.pipToImport)
+            .pipe(finalize(() => this.loadingCreate = false))
+            .subscribe(() => {
+                this._toast.success('', this._translate.instant('pipeline_added'));
+                this.goToProject();
+            });
+    }
+
+    fileEvent(event) {
+        this.pipToImport = event;
+    }
 }

ui/src/app/views/pipeline/add/pipeline.add.html

@@ -2,10 +2,45 @@
     <div id="AddPipeline">
         <div class="ui form">
             <h2>{{ 'pipeline_create' | translate }}</h2>
+
             <div class="ui grid">
+              <div class="ui row">
+                <div class="one wide column"></div>
+                <div class="fourteen wide column">
+                  <div class="two ui buttons">
+                    <button class="ui button"
+                      type="button"
+                      [class.active]="!asCode" [class.blue]="!asCode"
+                      (click)="asCode = false">
+                      {{'common_create' | translate}}
+                    </button>
+                    <button class="ui button" type="button" [class.blue]="asCode" [class.active]="asCode" (click)="asCode = true">
+                      {{'common_import' | translate}}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <ng-container *ngIf="asCode">
+                  <div class="ui row">
+                    <div class="sixteen wide column centered">
+                        <app-upload-button accept=".yml,.yaml" size="large" (event)="fileEvent($event)">
+                        </app-upload-button>
+                    </div>
+                  </div>
+                  <div class="ui row">
+                    <div class="one wide column"></div>
+                    <div class="fourteen wide column">
+                        <div class="ui horizontal divider">
+                          {{'common_or' | translate}}
+                        </div>
+                    </div>
+                  </div>
+              </ng-container>
+
+              <div class="ui row">
                 <div class="one wide column">
                 </div>
-                <div class="fourteen wide column">
+                <div class="fourteen wide column" *ngIf="!asCode">
                     <div class="field">
                         <label>{{'pipeline_name' | translate}}</label>
                         <input type="text" name="pipname" [(ngModel)]="newPipeline.name">
@@ -26,6 +61,23 @@ <h2>{{ 'pipeline_create' | translate }}</h2>
                         </button>
                     </div>
                 </div>
+                <div class="fourteen wide column" *ngIf="asCode">
+                    <div class="field">
+                        <codemirror
+                            name="pipToImport"
+                            [(ngModel)]="pipToImport"
+                            (keydown)="updated = true"
+                            [config]="codeMirrorConfig" #codeMirror>
+                        </codemirror>
+                    </div>
+                    <div class="field">
+                        <button class="ui button" type="button" (click)="goToProject()">{{ 'btn_cancel' | translate }}</button>
+                        <button class="ui right floated green button" type="button" (click)="importPipeline()" *ngIf="asCode"
+                                [disabled]="!pipToImport" [class.loading]="loadingCreate">{{ 'btn_create' | translate }}
+                        </button>
+                    </div>
+                </div>
+              </div>
             </div>
         </div>
     </div>

ui/src/app/views/pipeline/add/pipeline.add.scss

@@ -9,5 +9,6 @@
 
   h2 {
     text-align: center;
-  } border-color: #202f3c;
-}
+  }
+  border-color: #202f3c;
+}

ui/src/app/views/workflow/add/workflow.add.component.ts

@@ -22,7 +22,18 @@ export class WorkflowAddComponent {
     codemirror: CodemirrorComponent;
 
     codeMirrorConfig: any;
-    wfToImport: string;
+    wfToImport = `# Example of workflow
+name: myWorkflow
+version: v1.0
+workflow:
+  myBuild:
+    pipeline: build
+  myTest:
+    depends_on:
+    - myBuild
+    when:
+    - success
+    pipeline: test`;
 
     updated = false;
     loading = false;
@@ -87,4 +98,8 @@ export class WorkflowAddComponent {
                 this.goToProject();
             });
     }
+
+    fileEvent(event) {
+      this.wfToImport = event;
+    }
 }

ui/src/app/views/workflow/add/workflow.add.html

@@ -34,7 +34,6 @@ <h2>{{ 'workflow_create' | translate }}</h2>
                                       <button class="ui button"
                                         type="button"
                                         [class.active]="!asCode" [class.blue]="!asCode"
-                                        [class.disabled]="!project.application_names || !project.application_names.length"
                                         (click)="asCode = false">
                                         {{'common_create' | translate}}
                                       </button>
@@ -44,6 +43,22 @@ <h2>{{ 'workflow_create' | translate }}</h2>
                                     </div>
                                   </div>
                                 </div>
+                                <ng-container *ngIf="asCode">
+                                   <div class="ui row">
+                                     <div class="sixteen wide column centered">
+                                         <app-upload-button accept=".yml,.yaml" size="large" (event)="fileEvent($event)">
+                                         </app-upload-button>
+                                     </div>
+                                   </div>
+                                   <div class="ui row">
+                                     <div class="one wide column"></div>
+                                     <div class="fourteen wide column">
+                                         <div class="ui horizontal divider">
+                                           {{'common_or' | translate}}
+                                         </div>
+                                     </div>
+                                   </div>
+                               </ng-container>
                                 <div class="ui row">
                                     <div class="one wide column">
 

ui/src/assets/i18n/en.json

@@ -210,6 +210,7 @@
   "common_no_environment": "There is no environment linked",
   "common_usage": "Usage",
   "common_orientation": "Orientation",
+  "common_or": "OR",
   "common_copy_clipboard": "Copy to clipboad",
   "common_select": "Select",
   "common_create": "Create",

ui/src/assets/i18n/fr.json

@@ -210,6 +210,7 @@
   "common_no_environment": "Il n'y a aucun environnement lié",
   "common_usage": "Usage",
   "common_orientation": "Orientation",
+  "common_or": "OU",
   "common_copy_clipboard": "Copier dans le presse papier",
   "common_select": "Sélectionner",
   "common_create": "Créer",