fix(ui): fix payload autocompletion #4503

Signed-off-by: Benjamin Coenen <benjamin.coenen@corp.ovh.com>
ovh · Aug 6, 2019 · 8269b71 · 8269b71
1 parent 8e6f08a
commit 8269b71
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 39 deletions.
diff --git a/ui/src/app/shared/workflow/node/run/node.run.param.component.ts b/ui/src/app/shared/workflow/node/run/node.run.param.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { ModalTemplate, SuiActiveModal, SuiModalService, TemplateModalConfig } from '@richardlt/ng2-semantic-ui';
@@ -26,12 +26,12 @@ declare var CodeMirror: any;
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 @AutoUnsubscribe()
-export class WorkflowNodeRunParamComponent implements OnInit {
-    @ViewChild('runWithParamModal', {static: false})
+export class WorkflowNodeRunParamComponent implements OnInit, AfterViewInit {
+    @ViewChild('runWithParamModal', { static: false })
     runWithParamModal: ModalTemplate<boolean, boolean, void>;
     modal: SuiActiveModal<boolean, boolean, void>;
 
-    @ViewChild('textareaCodeMirror', {static: false}) codemirror: any;
+    @ViewChild('textareaCodeMirror', { static: false }) codemirror: any;
 
     @Input() workflowRun: WorkflowRun;
     _nodeRun: WorkflowNodeRun;
@@ -114,15 +114,17 @@ export class WorkflowNodeRunParamComponent implements OnInit {
 
     ngOnInit(): void {
         this.linkedToRepo = WNode.linkedToRepo(this._nodeToRun, this.workflow);
+    }
 
+    ngAfterViewInit() {
         this.themeSubscription = this._theme.get()
             .pipe(finalize(() => this._cd.markForCheck()))
             .subscribe(t => {
-            this.codeMirrorConfig.theme = t === 'night' ? 'darcula' : 'default';
-            if (this.codemirror && this.codemirror.instance) {
-                this.codemirror.instance.setOption('theme', this.codeMirrorConfig.theme);
-            }
-        });
+                this.codeMirrorConfig.theme = t === 'night' ? 'darcula' : 'default';
+                if (this.codemirror && this.codemirror.instance) {
+                    this.codemirror.instance.setOption('theme', this.codeMirrorConfig.theme);
+                }
+            });
     }
 
     show(): void {
@@ -407,25 +409,25 @@ export class WorkflowNodeRunParamComponent implements OnInit {
             });
     }
 
-    changeCodeMirror(eventRoot: Event): void {
+    changeCodeMirror(codemirror: any, eventRoot: Event): void {
         let num = this.num;
-        if (!this.codemirror || !this.codemirror.instance) {
-            return
+        if (!codemirror || !codemirror.instance) {
+            return;
         }
         if (eventRoot.type === 'click') {
-            this.showHint(this.codemirror.instance, null);
+            this.showHint(codemirror.instance);
         }
 
         if (!this._keyUpListener) {
-            this._keyUpListener = this.codemirror.instance.on('keyup', (cm, event) => {
+            this._keyUpListener = codemirror.instance.on('keyup', (cm, event) => {
                 if (!cm.state.completionActive && event.keyCode !== 32) {
-                    this.showHint(cm, event);
+                    this.showHint(cm);
                 }
             });
         }
 
         if (!this._completionListener) {
-            this._completionListener = this.codemirror.instance.on('endCompletion', (cm, event) => {
+            this._completionListener = codemirror.instance.on('endCompletion', () => {
                 if (!this.linkedToRepo) {
                     return;
                 }
@@ -453,8 +455,8 @@ export class WorkflowNodeRunParamComponent implements OnInit {
         }
     }
 
-    showHint(cm, event) {
-        CodeMirror.showHint(this.codemirror.instance, CodeMirror.hint.payload, {
+    showHint(cm) {
+        CodeMirror.showHint(cm, CodeMirror.hint.payload, {
             completeSingle: true,
             closeCharacters: / /,
             payloadCompletionList: {

diff --git a/ui/src/app/shared/workflow/node/run/node.run.param.html b/ui/src/app/shared/workflow/node/run/node.run.param.html
@@ -2,37 +2,29 @@
     <div class="header">
         {{'workflow_run_with_parameters' | translate}}
         <div class="extra" *ngIf="num">
-            <button
-              type="button"
-              class="ui small green button"
-              suiPopup
-              [popupText]="'workflow_run_resync_help' | translate"
-              [class.loading]="loading"
-              [disabled]="loading"
-              (click)="resync()">
-              {{ 'workflow_resync' | translate }}
+            <button type="button" class="ui small green button" suiPopup
+                [popupText]="'workflow_run_resync_help' | translate" [class.loading]="loading" [disabled]="loading"
+                (click)="resync()">
+                {{ 'workflow_resync' | translate }}
             </button>
-            <a href="https://ovh.github.io/cds/docs/concepts/workflow/" target="_blank"><i class="pointing help circle outline icon"></i></a>
+            <a href="https://ovh.github.io/cds/docs/concepts/workflow/" target="_blank"><i
+                    class="pointing help circle outline icon"></i></a>
         </div>
     </div>
     <div class="content">
         <div class="ui form">
             <ng-container *ngIf="_nodeToRun && _nodeToRun.type === nodeTypeEnum.PIPELINE && parameters?.length > 0 ">
                 <h3>{{ 'workflow_node_context_pipeline_parameter' | translate}}</h3>
                 <app-parameter-list [project]="project" [parameters]="parameters"
-                                    [paramsRef]="workflow.pipelines[_nodeToRun.context.pipeline_id]?.parameters" mode="launcher"
-                                    [suggest]="[]"></app-parameter-list>
+                    [paramsRef]="workflow.pipelines[_nodeToRun.context.pipeline_id]?.parameters" mode="launcher"
+                    [suggest]="[]"></app-parameter-list>
             </ng-container>
             <h3 *ngIf="!readOnly">{{ 'workflow_node_context_payload' | translate}}</h3>
             <h3 *ngIf="readOnly">{{ 'workflow_node_context_payload_read_only' | translate}}</h3>
             <ng-container *ngIf="!loadingBranches">
-                <codemirror
-                  [class.invalid]="invalidJSON"
-                  [(ngModel)]="payloadString"
-                  [config]="codeMirrorConfig"
-                  (click)="changeCodeMirror($event)"
-                  (change)="changeCodeMirror($event)"
-                  #textareaCodeMirror>
+                <codemirror [class.invalid]="invalidJSON" [(ngModel)]="payloadString" [config]="codeMirrorConfig"
+                    (click)="changeCodeMirror(textareaCodeMirror, $event)"
+                    (change)="changeCodeMirror(textareaCodeMirror, $event)" #textareaCodeMirror>
                 </codemirror>
             </ng-container>
             <ng-container *ngIf="loadingBranches">
@@ -67,7 +59,9 @@ <h3>{{ 'pipeline_parent_commit_to_deploy' | translate}}</h3>
         </div>
     </div>
     <div class="actions">
-        <button class="ui button" [disabled]="loading" (click)="modal.approve(false)">{{'common_cancel' | translate}}</button>
-        <button class="ui green button" [class.loading]="loading" [disabled]="loading" (click)="run()" autofocus>{{'common_run' | translate}}</button>
+        <button class="ui button" [disabled]="loading"
+            (click)="modal.approve(false)">{{'common_cancel' | translate}}</button>
+        <button class="ui green button" [class.loading]="loading" [disabled]="loading" (click)="run()"
+            autofocus>{{'common_run' | translate}}</button>
     </div>
 </ng-template>