Merge branch 'VM/RED-8692' into 'master'

RED-8692 - Automatic code validation in the rule editor

Closes RED-8692

See merge request redactmanager/red-ui!403
This commit is contained in:
Dan Percic 2024-04-24 10:11:37 +02:00
commit 5dc63a0413
3 changed files with 26 additions and 12 deletions

View File

@ -6,15 +6,21 @@
<ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor> <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
<div *ngIf="changed && permissionsService.canEditRules() && !isLeaving" class="changes-box"> <div *ngIf="changed && permissionsService.canEditRules() && !isLeaving" class="changes-box">
<div (click)="goToErrors()" *ngIf="numberOfErrors()" class="errors"> <div (click)="goToErrors()" *ngIf="numberOfErrors() || numberOfWarnings()" class="errors">
<span> <span>
<mat-icon [svgIcon]="'iqser:alert-circle'" class="icon"></mat-icon> <mat-icon *ngIf="numberOfErrors()" [svgIcon]="'iqser:alert-circle'" class="icon"></mat-icon>
<div class="found-errors"> <div class="found-errors">
<span [translateParams]="{ errors: numberOfErrors() }" [translate]="translations[this.type]['errors-found']"></span> <span
*ngIf="numberOfErrors()"
[translateParams]="{ errors: numberOfErrors() }"
[translate]="translations[this.type]['errors-found']"
>
</span>
<span <span
[translateParams]="{ warnings: numberOfWarnings() }" [translateParams]="{ warnings: numberOfWarnings() }"
[translate]="translations[this.type]['warnings-found']" [translate]="translations[this.type]['warnings-found']"
class="warning" class="warning"
[class.only-warning]="!numberOfErrors()"
></span> ></span>
</div> </div>
</span> </span>

View File

@ -63,6 +63,10 @@ ngx-monaco-editor {
.warning { .warning {
color: var(--iqser-warn); color: var(--iqser-warn);
&.only-warning {
margin-left: 15px;
}
} }
} }

View File

@ -144,7 +144,7 @@ export class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
}), }),
).then( ).then(
async (response: UploadResponse) => { async (response: UploadResponse) => {
const errors = this.#mapErrors(response); const errors = this.#mapErrors(response, dryRun);
this.#drawErrorMarkers(errors); this.#drawErrorMarkers(errors);
if (!dryRun) { if (!dryRun) {
await this.#initialize(); await this.#initialize();
@ -154,10 +154,13 @@ export class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
error => { error => {
let errors: SyntaxError[]; let errors: SyntaxError[];
if (error.error?.syntaxErrorMessages) { if (error.error?.syntaxErrorMessages) {
errors = this.#mapErrors(error.error); errors = this.#mapErrors(error.error, dryRun);
} else { } else {
const syntaxError: SyntaxError = { message: error.error.message, line: 1, column: 0 }; const syntaxError: SyntaxError = { message: error.error.message, line: 1, column: 0 };
errors = this.#mapErrors({ blacklistErrorMessages: [], syntaxErrorMessages: [syntaxError], deprecatedWarnings: [] }); errors = this.#mapErrors(
{ blacklistErrorMessages: [], syntaxErrorMessages: [syntaxError], deprecatedWarnings: [] },
dryRun,
);
} }
this.#drawErrorMarkers(errors); this.#drawErrorMarkers(errors);
this._loadingService.stop(); this._loadingService.stop();
@ -176,12 +179,12 @@ export class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
this._loadingService.stop(); this._loadingService.stop();
} }
#mapErrors(response: UploadResponse) { #mapErrors(response: UploadResponse, dryRun = false) {
return [ const warnings = response.deprecatedWarnings.map(w => ({ ...w, warning: true }));
...response.blacklistErrorMessages, if (dryRun) {
...response.syntaxErrorMessages, return warnings;
...response.deprecatedWarnings.map(w => ({ ...w, warning: true })), }
]; return [...response.blacklistErrorMessages, ...response.syntaxErrorMessages, ...warnings];
} }
#getValue(): string { #getValue(): string {
@ -238,6 +241,7 @@ export class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
#drawErrorMarkers(errors: SyntaxError[] | undefined) { #drawErrorMarkers(errors: SyntaxError[] | undefined) {
const model = this.#codeEditor?.getModel(); const model = this.#codeEditor?.getModel();
if (!model || !errors?.length) { if (!model || !errors?.length) {
this.#removeErrorMarkers();
return; return;
} }
const markers = []; const markers = [];