[ui] Fix Add/Remove events

ui/cypress/e2e/consts.ts

@@ -2,7 +2,8 @@ export const TAB_YAML = 0;
 export const TAB_CHART = 1;
 export const TAB_METADATA = 2;
 export const TAB_COMMANDS = 3;
-export const TAB_VOLUMES = 4;
+export const TAB_EVENTS = 4;
 export const TAB_CONTAINERS = 5;
 export const TAB_IMAGES = 6;
 export const TAB_RESOURCES = 7;
+export const TAB_VOLUMES = 8;

ui/cypress/e2e/spec.cy.ts

@@ -1,4 +1,4 @@
-import {TAB_COMMANDS, TAB_CONTAINERS, TAB_IMAGES, TAB_METADATA, TAB_RESOURCES} from './consts';
+import {TAB_YAML, TAB_COMMANDS, TAB_CONTAINERS, TAB_IMAGES, TAB_METADATA, TAB_RESOURCES, TAB_EVENTS} from './consts';
 
 describe('devfile editor spec', () => {
 
@@ -224,4 +224,19 @@ describe('devfile editor spec', () => {
         .should('contain.text', 'some command')
         .should('contain.text', 'some arg');
   });
+
+  it('adds an event with an existing command', () => {
+    cy.init();
+    cy.fixture('input/with-exec-command.yaml').then(yaml => {
+      cy.setDevfile(yaml);
+    });
+    cy.selectTab(TAB_EVENTS);
+    cy.get('[data-cy="prestop"] [data-cy="input"]').click().type("{downArrow}{enter}");
+    cy.selectTab(TAB_YAML);
+    cy.get('[data-cy="yaml-input"]').should("contain.value", "events:\n  preStop:\n  - command1");
+    cy.selectTab(TAB_EVENTS);
+    cy.get('[data-cy="prestop"] button.mat-mdc-chip-remove').click();
+    cy.selectTab(TAB_YAML);
+    cy.get('[data-cy="yaml-input"]').should("contain.value", "events: {}");
+  });
 });

ui/src/app/controls/chips-events/chips-events.component.html

@@ -8,7 +8,7 @@
       </button>
     </mat-chip-row>
   </mat-chip-grid>
-  <input placeholder="New command..." #commandInput [formControl]="commandCtrl"
+  <input data-cy="input" placeholder="New command..." #commandInput [formControl]="commandCtrl"
     [matChipInputFor]="chipGrid" [matAutocomplete]="auto"
     [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
     (matChipInputTokenEnd)="add($event)"/>

ui/src/app/controls/chips-events/chips-events.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
@@ -17,10 +17,12 @@ export class ChipsEventsComponent {
 
   separatorKeysCodes: number[] = [ENTER, COMMA];
   commandCtrl = new FormControl('');
-  filteredCommands: Observable<string[]>;
+  filteredCommands = new (Observable<string[]>);
 
 
-  constructor(public commandInput :ElementRef<HTMLInputElement>) {
+  constructor(public commandInput :ElementRef<HTMLInputElement>) {}
+
+  ngOnChanges(changes: SimpleChanges) {
     this.filteredCommands = this.commandCtrl.valueChanges.pipe(
       startWith(null),
       map((cmd: string | null) => (cmd ? this._filter(cmd) : this.allCommands.slice())),
@@ -44,7 +46,7 @@ export class ChipsEventsComponent {
 
   remove(command: string): void {
     const index = this.commands.indexOf(command);
-
+    
     if (index >= 0) {
       this.commands.splice(index, 1);
       this.updated.emit(this.commands);

ui/src/app/tabs/events/events.component.html

@@ -1,31 +1,31 @@
 <div class="main">
     <h2>Pre-Start event</h2>
     <div class="description">Pre-Start commands are executed before the inner loop is started, inside init-containers (not implemented by odo).</div>
-    <app-chips-events 
+    <app-chips-events data-cy="prestart"
         [commands]="events?.preStart ?? []" 
         [allCommands]="allCommands ?? []"
         (updated)="onUpdate('preStart', $event)"
         ></app-chips-events>
 
     <h2>Post-Start event</h2>
     <div class="description">Post-Start commands are executed at the beginning of the inner loop, inside pre-fetched containers.</div>
-    <app-chips-events 
+    <app-chips-events data-cy="poststart"
         [commands]="events?.postStart ?? []" 
         [allCommands]="allCommands ?? []"
         (updated)="onUpdate('postStart', $event)"
         ></app-chips-events>
 
     <h2>Pre-Stop event</h2>
     <div class="description">Pre-Stop commands are executed at the end of  the inner loop, inside pre-fetched containers.</div>
-    <app-chips-events 
+    <app-chips-events data-cy="prestop"
         [commands]="events?.preStop ?? []" 
         [allCommands]="allCommands ?? []"
         (updated)="onUpdate('preStop', $event)"
         ></app-chips-events>
 
     <h2>Post-Stop event</h2>
     <div class="description">Post-Stop commands are executed after the inner loop is finished (not implemented by odo).</div>
-    <app-chips-events 
+    <app-chips-events data-cy="poststop"
         [commands]="events?.postStop ?? []" 
         [allCommands]="allCommands ?? []"
         (updated)="onUpdate('postStop', $event)"

ui/src/app/tabs/events/events.component.ts

@@ -23,6 +23,21 @@ export class EventsComponent {
   ngOnInit() {
     this.state.state.subscribe(async newContent => {
       this.events = newContent?.events;
+      if (this.events == undefined) {
+        this.events = {};
+      }
+      if (this.events.preStart == undefined) {
+        this.events.preStart = [];
+      }
+      if (this.events.preStop == undefined) {
+        this.events.preStop = [];
+      }
+      if (this.events.postStart == undefined) {
+        this.events.postStart = [];
+      }
+      if (this.events.postStop == undefined) {
+        this.events.postStop = [];
+      }
       this.allCommands = newContent?.commands?.map(c => c.name);
     });
   }