RED-8692 - WIP on "Automatic code validation in the rule editor"

apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, OnInit, signal } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, OnChanges, OnInit, signal, SimpleChanges } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
 import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { RulesService } from '../../../services/rules.service';
@@ -19,6 +19,8 @@ interface SyntaxError {
     message: string;
 }
 
+const RULE_VALIDATION_TIMEOUT = 2000;
+
 @Component({
     templateUrl: './rules-screen.component.html',
     styleUrls: ['./rules-screen.component.scss'],
@@ -44,6 +46,7 @@ export class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
     readonly #errorGlyphs = signal<string[]>([]);
     readonly numberOfErrors = computed(() => this.#errorGlyphs().length);
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
+    #ruleValidationTimeout: number = null;
 
     set isLeavingPage(isLeaving: boolean) {
         this.isLeaving = isLeaving;
@@ -61,6 +64,7 @@ export class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
     set codeEditorText($event: any) {
         this.currentLines = $event.split('\n');
         this.codeEditorTextChanged();
+        this.validateRules();
         this._closeProblemsView();
     }
 
@@ -80,6 +84,15 @@ export class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
         await this._initialize();
     }
 
+    validateRules() {
+        if (this.#ruleValidationTimeout) {
+            clearTimeout(this.#ruleValidationTimeout);
+        }
+        this.#ruleValidationTimeout = window.setTimeout(async () => {
+            await this.#uploadRules(true);
+        }, RULE_VALIDATION_TIMEOUT);
+    }
+
     async onCodeEditorInit(editor: ICodeEditor): Promise<void> {
         this._codeEditor = editor;
         for (const theme of this._editorThemeService.themes) {
@@ -103,14 +116,23 @@ export class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
     async save(): Promise<void> {
         this._loadingService.start();
         this._removeErrorMarkers();
-        await firstValueFrom(
+        await this.#uploadRules();
+    }
+
+    async #uploadRules(dryRun = false) {
+        return firstValueFrom(
             this._rulesService.uploadRules({
                 rules: this._getValue(),
                 dossierTemplateId: this.#dossierTemplateId,
                 ruleFileType: this.type,
+                dryRun,
             }),
         ).then(
-            async () => {
+            async response => {
+                if (dryRun) {
+                    console.log('RESPONSE: ', response);
+                    return;
+                }
                 await this._initialize();
                 this._toaster.success(rulesScreenTranslations[this.type]['success-generic']);
             },

libs/red-domain/src/lib/shared/rules.ts

@@ -14,4 +14,8 @@ export interface IRules {
      * The actual string of rules.
      */
     rules?: string;
+    /**
+     * Request param for rules validation, without updating them
+     */
+    dryRun?: boolean;
 }