From 29555fec94374f881b87583036f9e30430aa0bf2 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 23 Apr 2024 20:31:15 +0300
Subject: [PATCH] RED-8692 - Automatic code validation in the rule editor

---
 .../rules-screen/rules-screen.component.html  | 12 +++++++---
 .../rules-screen/rules-screen.component.scss  |  4 ++++
 .../rules-screen/rules-screen.component.ts    | 22 +++++++++++--------
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html
index 993091559..28df7f774 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html
@@ -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>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss
index 3156386dc..49e950daf 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss
@@ -63,6 +63,10 @@ ngx-monaco-editor {
 
             .warning {
                 color: var(--iqser-warn);
+
+                &.only-warning {
+                    margin-left: 15px;
+                }
             }
         }
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
index 7ee016d00..2d5fa0dfb 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
@@ -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 = [];