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>
<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>
<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">
<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
[translateParams]="{ warnings: numberOfWarnings() }"
[translate]="translations[this.type]['warnings-found']"
class="warning"
[class.only-warning]="!numberOfErrors()"
></span>
</div>
</span>

View File

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

View File

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