alihan/odo
1
0
Fork 0
mirror of https://github.com/redhat-developer/odo.git synced 2025-10-19 03:06:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

[ui] Fix Add/Remove events (#7027)

Browse Source 
* Fix add/remove events UI

* Update ui static files
This commit is contained in:
Philippe Martin
2023-08-21 14:30:39 +02:00
committed by GitHub
parent cd73c3d9d3
commit fcc1cd880d
8 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/apiserver-impl/ui/index.html generated
View File

@@ -11,6 +11,6 @@
<body class="mat-typography">
<div id="loading">Loading, please wait...</div>
<app-root></app-root>
<script src="runtime.1289ea0acffcdc5e.js" type="module"></script><script src="polyfills.8b3b37cedaf377c3.js" type="module"></script><script src="main.6a89d63885b00552.js" type="module"></script>
<script src="runtime.1289ea0acffcdc5e.js" type="module"></script><script src="polyfills.8b3b37cedaf377c3.js" type="module"></script><script src="main.ae49ed4fe0fa0670.js" type="module"></script>
</body></html>

2
pkg/apiserver-impl/ui/main.6a89d63885b00552.js → pkg/apiserver-impl/ui/main.ae49ed4fe0fa0670.js generated
View File

File diff suppressed because one or more lines are too long

3
ui/cypress/e2e/consts.ts
View File

@@ -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;

17
ui/cypress/e2e/spec.cy.ts
View File

@@ -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: {}");
});
});

2
ui/src/app/controls/chips-events/chips-events.component.html
View File

@@ -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)"/>

10
ui/src/app/controls/chips-events/chips-events.component.ts
View File

@@ -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);

8
ui/src/app/tabs/events/events.component.html
View File

@@ -1,7 +1,7 @@
<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)"
@@ -9,7 +9,7 @@
<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)"
@@ -17,7 +17,7 @@
<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)"
@@ -25,7 +25,7 @@
<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)"

15
ui/src/app/tabs/events/events.component.ts
View File

@@ -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);
});
}