Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui): remove semantic from requirement and delete workflow modal #6157

Merged
merged 9 commits into from
May 2, 2022
Merged

refactor(ui): remove semantic from requirement and delete workflow modal #6157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
205cdee
feat: wip remove semantic from navbar
sguiheux Apr 19, 2022
0ab3114
feat: wip
sguiheux Apr 19, 2022
8cbc4eb
feat: wip
sguiheux Apr 20, 2022
4654abf
feat: remove semantic from navbar
sguiheux Apr 25, 2022
c0b23cf
fix(ui): remove bold + clean translate
sguiheux Apr 25, 2022
dcf79b5
refactor(ui): remove semantic from delete workflow modal
sguiheux Apr 26, 2022
a25e14a
feat(ui): requirement modal without semantic
sguiheux Apr 28, 2022
36f60b8
chore: merge with master
sguiheux Apr 28, 2022
f4da816
fix(ui): unit test
sguiheux Apr 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ui/src/app/shared/action/action.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export class ActionComponent implements OnDestroy, OnInit {

@Output() actionEvent = new EventEmitter<ActionEvent>();

requirementModalVisible = false;
collapsed = true;
configRequirements: { disableModel?: boolean, disableHostname?: boolean, disableRegion?: boolean } = {};
workerModels: Array<WorkerModel>;
Expand Down Expand Up @@ -151,6 +152,7 @@ export class ActionComponent implements OnDestroy, OnInit {
case 'delete':
let indexDelete = this.editableAction.requirements.indexOf(r.requirement);
if (indexDelete >= 0) {
this.editableAction.requirements = Object.assign([], this.editableAction.requirements);
this.editableAction.requirements.splice(indexDelete, 1);
}
if (r.requirement.type === 'model') {
Expand Down
46 changes: 18 additions & 28 deletions ui/src/app/shared/action/action.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,37 +31,27 @@
</div>
<div class="two wide right aligned field labelPadding">
<a class="pointing"
(click)="prepareEditRequirements(); requirementModal.show({inverted: false, closable: false, autofocus: false})">
(click)="prepareEditRequirements(); requirementModalVisible = true">
{{ editableAction.requirements.length + ' '}}{{'common_requirements' | translate }}
</a>
<sm-modal class="large" title="{{ 'common_requirements' | translate }}" #requirementModal>
<modal-content>
<div class="ui form">
<div class="field">
<app-requirements-list [workerModels]="workerModels" [suggest]="suggest"
[requirements]="editableAction.requirements" [edit]="edit"
(onChange)="editableAction.hasChanged = true"
(event)="requirementEvent($event)"></app-requirements-list>
<div class="requirementForm" *ngIf="edit && pipeline">
<h3>{{ 'requirement_add' | translate }}</h3>
<app-requirements-form [workerModels]="workerModels"
[config]="configRequirements" [suggest]="suggest" [modal]="requirementModal"
(event)="requirementEvent($event)"></app-requirements-form>
</div>
<div class="requirementForm" *ngIf="edit && !pipeline">
<app-requirements-form [workerModels]="workerModels" [suggest]="suggest"
[config]="configRequirements" [modal]="requirementModal"
(event)="requirementEvent($event)">
</app-requirements-form>
</div>
</div>
<nz-modal [nzVisible]="requirementModalVisible" nzTitle="Action requirements" nzWidth="900px"
(nzOnCancel)="requirementModalVisible = false">
<div *nzModalContent class="modalContent">
<app-requirements-list [workerModels]="workerModels" [suggest]="suggest"
[requirements]="editableAction.requirements" [edit]="edit"
(onChange)="editableAction.hasChanged = true" (event)="requirementEvent($event)">
</app-requirements-list>
<div class="requirementForm" *ngIf="edit && pipeline">
<app-requirements-form [workerModels]="workerModels" [suggest]="suggest"
[config]="configRequirements"
(event)="requirementEvent($event)">
</app-requirements-form>
</div>
</modal-content>
<modal-actions>
<button class="ui grey button"
(click)="requirementModal.hide();parseRequirements();">{{ 'common_close' | translate }}</button>
</modal-actions>
</sm-modal>
</div>
<div *nzModalFooter>
<button nz-button (click)="requirementModalVisible = false;parseRequirements();">Close</button>
</div>
</nz-modal>
</div>
</div>
</div>
Expand Down
19 changes: 5 additions & 14 deletions ui/src/app/shared/requirements/form/requirements.form.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { Requirement } from 'app/model/requirement.model';
import { WorkerModel } from 'app/model/worker-model.model';
import { RequirementStore } from 'app/service/requirement/requirement.store';
import { RequirementEvent } from 'app/shared/requirements/requirement.event.model';
import { SemanticModalComponent } from '@sgu/ng-semantic';
import { finalize, first } from 'rxjs/operators';

export const OSArchitecture = 'os-architecture';
Expand All @@ -26,8 +25,8 @@ export class RequirementsFormComponent implements OnInit {
}
}
get suggest() {
return this._suggest;
}
return this._suggest;
}

_workerModels: Array<WorkerModel>;
@Input() set workerModels(wms: Array<WorkerModel>) {
Expand All @@ -43,11 +42,9 @@ export class RequirementsFormComponent implements OnInit {
}
}
get workerModels() {
return this._workerModels;
}

return this._workerModels;
}

@Input() modal: SemanticModalComponent;
@Input() config: { disableModel?: boolean, disableHostname?: boolean, disableRegion?: boolean };

@Output() event = new EventEmitter<RequirementEvent>();
Expand All @@ -59,7 +56,6 @@ export class RequirementsFormComponent implements OnInit {
suggestWithOsArch: Array<string> = [];
workerModelLinked: WorkerModel;
isFormValid = false;
modelTypeClass: string;
popupText: string;
placeholderTypeName: {};
placeholderTypeValue: {};
Expand Down Expand Up @@ -104,6 +100,7 @@ export class RequirementsFormComponent implements OnInit {
this.placeholderTypeName[a] = placeHolderName;
this.placeholderTypeValue[a] = placeHolderValue;
});
this._cd.markForCheck();
});
}

Expand Down Expand Up @@ -168,12 +165,6 @@ export class RequirementsFormComponent implements OnInit {
this.computeFormValid(form);
}

closeModal() {
if (this.modal) {
this.modal.hide();
}
}

computeDisplayLinkWorkerModel(): WorkerModel {
if (this.newRequirement.value === '' || !Array.isArray(this.workerModels)) {
return null;
Expand Down
143 changes: 72 additions & 71 deletions ui/src/app/shared/requirements/form/requirements.form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,86 @@
<form class="ui form requirementForm" #formAddRequirement="ngForm">
<div class="fields">
<div class="three wide field">
<div class="field">
<sm-select class="search" *ngIf="availableRequirements.length > 0" (onChange)="selectType()" [(model)]="newRequirement.type" [options]="{'fullTextSearch': true}" placeholder="{{ 'requirement_type' | translate }}">
<option *ngFor="let r of availableRequirements" value="{{r}}">{{r}}</option>
</sm-select>
</div>
<form nz-form name="addReqForm" *ngIf="availableRequirements.length > 0" #formAddRequirement="ngForm">
<div nz-row>
<div nz-col nzSpan="6">
<nz-form-item>
<nz-select [(ngModel)]="newRequirement.type" (ngModelChange)="selectType()" name="selectType"
nzPlaceHolder="{{ 'requirement_type' | translate }}">
<nz-option *ngFor="let r of availableRequirements" [nzValue]="r" [nzLabel]="r"></nz-option>
</nz-select>
</nz-form-item>
</div>
<div class="ten wide field">
<div class="field" *ngIf="newRequirement.type === 'service'">
<label for="requirementname">
{{ 'requirement_hostname_service' | translate }}
</label>
<input name="requirementname" id="requirementname" [disabled]="newRequirement.type !== 'service'" auto-complete autocomplete="off" type="text" required pattern="[a-zA-Z0-9\-\._]*" placeholder="{{placeholderTypeName[newRequirement.type]}}" [source]="suggest"
[min-chars]="3" [(ngModel)]="newRequirement.name" [no-match-found-text]="false">
<div *ngIf="formAddRequirement.invalid && !formAddRequirement.pristine" class="ui error message">
<p>{{'requirement_hostname_error' | translate}}</p>
<div nz-col nzSpan="12">
<nz-form-item>
<div *ngIf="newRequirement.type === 'service'" class="container">
{{ 'requirement_hostname_service' | translate }}
<input nz-input [nzAutocomplete]="autoSuggestService" name="requirementname" id="requirementname" [disabled]="newRequirement.type !== 'service'" type="text" required pattern="[a-zA-Z0-9\-\._]*" placeholder="{{placeholderTypeName[newRequirement.type]}}" [(ngModel)]="newRequirement.name">
<nz-autocomplete [nzDataSource]="suggest" nzBackfill #autoSuggestService></nz-autocomplete>
<div *ngIf="formAddRequirement.invalid && !formAddRequirement.pristine" class="ui error message">
<p>{{'requirement_hostname_error' | translate}}</p>
</div>
</div>
</div>
<div class="field" *ngIf="newRequirement.type === 'os-architecture'">
<input name="name" [disabled]="newRequirement.type !== 'os-architecture'" auto-complete autocomplete="off" type="text" required placeholder="{{'requirement_placeholder_name_' + newRequirement.type | translate}}" [source]="suggestWithOsArch" [min-chars]="0"
[(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" (blur)="setName(formAddRequirement)">
<div *ngIf="formAddRequirement.invalid && !formAddRequirement.pristine" class="ui error message">
<p>{{'requirement_os-architecture_error' | translate}}</p>
<div class="container" *ngIf="newRequirement.type === 'os-architecture'">
<input nz-input [nzAutocomplete]="autoSuggestArch" name="name" [disabled]="newRequirement.type !== 'os-architecture'" type="text" required placeholder="{{'requirement_placeholder_name_' + newRequirement.type | translate}}"
[(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" (blur)="setName(formAddRequirement)">
<nz-autocomplete [nzDataSource]="suggestWithOsArch" nzBackfill #autoSuggestArch></nz-autocomplete>
<div *ngIf="formAddRequirement.invalid && !formAddRequirement.pristine" class="ui error message">
<p>{{'requirement_os-architecture_error' | translate}}</p>
</div>
</div>
</div>
<div *ngIf="newRequirement.type !== 'model' && newRequirement.type !== 'os-architecture'">
<label for="value" *ngIf="newRequirement.type === 'service'">
{{ 'requirement_value_service' | translate }}
</label>
<div class="field">
<input name="value" id="value" auto-complete autocomplete="off" type="text" [source]="suggest" [min-chars]="3" [(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" placeholder="{{placeholderTypeValue[newRequirement.type]}}"
[no-match-found-text]="false">
<div class="container" *ngIf="newRequirement.type !== 'model' && newRequirement.type !== 'os-architecture'">
<span *ngIf="newRequirement.type === 'service'">{{ 'requirement_value_service' | translate }}</span>
<input nz-input name="value" id="value" [nzAutocomplete]="autoServiceImage" type="text" [(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" placeholder="{{placeholderTypeValue[newRequirement.type]}}">
<nz-autocomplete [nzDataSource]="suggest" nzBackfill #autoServiceImage></nz-autocomplete>
</div>
</div>

<div *ngIf="newRequirement.type === 'model' && workerModels != null">
<input name="value-workermodel" auto-complete autocomplete="off" type="text" [source]="suggestWithWorkerModel" [min-chars]="0" [(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" (blur)="setName(formAddRequirement)" placeholder="{{'requirement_placeholder_value_model' | translate}}"
[no-match-found-text]="false">
<p *ngIf="workerModelLinked != null">
<a class="ui" [routerLink]="['/settings', 'worker-model', newRequirement.value]" target="_blank" (click)="closeModal()">
<div class="container" *ngIf="newRequirement.type === 'model' && workerModels != null">
<input nz-input name="value-workermodel" [nzAutocomplete]="autoModel" type="text" [(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" (blur)="setName(formAddRequirement)" placeholder="{{'requirement_placeholder_value_model' | translate}}">
<nz-autocomplete [nzDataSource]="suggestWithWorkerModel" nzBackfill #autoModel></nz-autocomplete>
<p *ngIf="workerModelLinked != null">
<a class="ui" [routerLink]="['/settings', 'worker-model', newRequirement.value]" target="_blank">
{{ 'requirement_settings_worker_model' | translate }} {{ newRequirement.value }}
</a>
</p>
<label for="opts">
{{ 'requirement_options' | translate }}
</label>
<textarea name="opts" id="opts" [(ngModel)]="newRequirement.opts" rows="3" placeholder="{{'requirement_placeholder_opts_model' | translate}}"></textarea>
</div>
<div *ngIf="newRequirement.type === 'service'">
<label for="servopts">
{{ 'requirement_options' | translate }}
</label>
<textarea name="servopts" id="servopts" [(ngModel)]="newRequirement.opts" rows="3" placeholder="{{'requirement_placeholder_opts_service' | translate}}"></textarea>
</div>
</p>
{{ 'requirement_options' | translate }}
<textarea nz-input name="opts" id="opts" [(ngModel)]="newRequirement.opts" rows="3" placeholder="{{'requirement_placeholder_opts_model' | translate}}"></textarea>
</div>
<div class="container" *ngIf="newRequirement.type === 'service'">
{{ 'requirement_options' | translate }}
<textarea nz-input name="servopts" id="servopts" [(ngModel)]="newRequirement.opts" rows="3" placeholder="{{'requirement_placeholder_opts_service' | translate}}"></textarea>
</div>
</nz-form-item>
</div>
<div class="one wide center mtop8" *ngIf="newRequirement.type === 'model' && workerModelLinked != null">
<span *ngIf="workerModelLinked.is_official" [smDirTooltip]="'worker_model_official_tooltip' | translate" smDirPosition="top center"><i class="check circle outline icon large green"></i></span>
<span *ngIf="!workerModelLinked.is_official" [smDirTooltip]="'worker_model_unofficial' | translate" smDirPosition="top center"><i class="remove circle outline icon large red"></i></span>
<span *ngIf="workerModelLinked.is_deprecated" [smDirTooltip]="'worker_model_deprecated_tooltip' | translate" smDirPosition="top center"><i class="exclamation circle icon large orange"></i></span>
<div nz-col nzSpan="2">
<nz-form-item *ngIf="workerModelLinked">
<span *ngIf="workerModelLinked.is_official" nz-tooltip nzTooltipTitle="{{'worker_model_official_tooltip' | translate}}" nzTooltipPlacement="top"><i class="check circle outline icon large green"></i></span>
<span *ngIf="!workerModelLinked.is_official" nz-tooltip nzTooltipTitle="{{'worker_model_unofficial' | translate}}" nzTooltipPlacement="top"><i class="remove circle outline icon large red"></i></span>
<span *ngIf="workerModelLinked.is_deprecated" nz-tooltip nzTooltipTitle="{{'worker_model_deprecated_tooltip' | translate}}" nzTooltipPlacement="top"><i class="exclamation circle icon large orange"></i></span>
</nz-form-item>
</div>
<div class="two wide center field">
<div suiPopup
[popupText]="popupText"
popupPlacement="top"
*ngIf="(newRequirement.type === 'model' && config.disableModel) || (newRequirement.type === 'hostname' && config.disableHostname) || (newRequirement.type === 'region' && config.disableRegion)">
<button class="ui blue icon button"
[disabled]="!isFormValid"
(click)="onSubmitAddRequirement(formAddRequirement)">
<i class="plus icon"></i>
</button>
</div>
<div *ngIf="(newRequirement.type !== 'model' || !config.disableModel) && (newRequirement.type !== 'hostname' || !config.disableHostname) && (newRequirement.type !== 'region' || !config.disableRegion)">
<button class="ui blue icon button"
[disabled]="!isFormValid"
(click)="onSubmitAddRequirement(formAddRequirement)">
<i class="plus icon"></i>
</button>
</div>
<div nz-col nzSpan="4">
<nz-form-item>
<div suiPopup
[popupText]="popupText"
popupPlacement="top"
*ngIf="(newRequirement.type === 'model' && config.disableModel) || (newRequirement.type === 'hostname' && config.disableHostname) || (newRequirement.type === 'region' && config.disableRegion)">
<button class="ui blue icon button"
[disabled]="!isFormValid"
(click)="onSubmitAddRequirement(formAddRequirement)">
<i class="plus icon"></i>
</button>
</div>
<div *ngIf="(newRequirement.type !== 'model' || !config.disableModel) && (newRequirement.type !== 'hostname' || !config.disableHostname) && (newRequirement.type !== 'region' || !config.disableRegion)">
<button class="ui blue icon button"
[disabled]="!isFormValid"
(click)="onSubmitAddRequirement(formAddRequirement)">
<i class="plus icon"></i>
</button>
</div>
</nz-form-item>
</div>
</div>



<p>
<i class="fa fa-book"></i>
<a href="#" [routerLink]="['/docs', 'docs', 'concepts', 'requirement']" target="_blank" rel="noopener noreferrer">
Expand Down
19 changes: 16 additions & 3 deletions ui/src/app/shared/requirements/form/requirements.form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
.requirementForm {
.mtop8 {
margin-top: 8px;
nz-form-item {
padding-left: 15px;

nz-select {
width: 100%;
}

.container {
width: 100%;
}

input {
width: 100%;
}
textarea {
width: 100%;
}
}
Loading