refactor(rule-engine): improve error handling and UI feedback

Author: adrianjm-dotCMS

core-web/libs/dot-rules/src/lib/features/rule-engine/container/dot-rule-engine-container.component.ts

@@ -1,9 +1,9 @@
-import { from as observableFrom, Observable, merge, Subject } from 'rxjs';
+import { Observable, Subject, merge, from as observableFrom } from 'rxjs';
 
 import { Component, OnDestroy, inject, signal } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 
-import { reduce, mergeMap, take, map, filter, takeUntil } from 'rxjs/operators';
+import { filter, map, mergeMap, reduce, take, takeUntil } from 'rxjs/operators';
 
 import { CwError, HttpCode, LoggerService } from '@dotcms/dotcms-js';
 
@@ -12,28 +12,28 @@ import { BundleService, IPublishEnvironment } from '../../../services/api/bundle
 import { ConditionService } from '../../../services/api/condition/Condition';
 import { ConditionGroupService } from '../../../services/api/condition-group/ConditionGroup';
 import {
-    RuleModel,
-    RuleService,
+    ActionModel,
     ConditionGroupModel,
     ConditionModel,
-    ActionModel
+    RuleModel,
+    RuleService
 } from '../../../services/api/rule/Rule';
 import { ServerSideTypeModel } from '../../../services/api/serverside-field/ServerSideFieldModel';
 import {
-    RuleActionEvent,
-    RuleActionActionEvent,
+    ConditionActionEvent,
     ConditionGroupActionEvent,
-    ConditionActionEvent
+    RuleActionActionEvent,
+    RuleActionEvent
 } from '../../../services/models/rule-event.model';
 import { RuleViewService } from '../../../services/ui/dot-view-rule-service';
 import { DotRuleEngineComponent } from '../dot-rule-engine.component';
 
 // Re-export for backward compatibility
 export {
-    RuleActionEvent,
-    RuleActionActionEvent,
+    ConditionActionEvent,
     ConditionGroupActionEvent,
-    ConditionActionEvent
+    RuleActionActionEvent,
+    RuleActionEvent
 } from '../../../services/models/rule-event.model';
 
 /**
@@ -95,11 +95,9 @@ export class DotRuleEngineContainerComponent implements OnDestroy {
             });
 
         this._ruleService._errors$.subscribe((res) => {
-            this.ruleViewService.showErrorMessage(
-                res.message,
-                false,
-                res.response.headers.get('error-key')
-            );
+            const message = (res.error?.message || '').replace(/ user-\S+/gi, '');
+            const errorKey = res.headers?.get('error-key') ?? '';
+            this.ruleViewService.showErrorMessage(message, false, errorKey);
             this.loading.set(false);
             this.showRules.set(false);
         });
@@ -710,14 +708,18 @@ export class DotRuleEngineContainerComponent implements OnDestroy {
         this.loading.set(false);
     }
 
-    private _handle403Error(e: CwError): boolean {
+    private _handle403Error(e): boolean {
         let handled = false;
+
         try {
-            if (e && e.response.status === HttpCode.FORBIDDEN) {
-                const errorJson = e.response;
+            if (e && e?.status === HttpCode.FORBIDDEN) {
+                const errorJson = e.error;
+
                 if (errorJson && errorJson.error) {
                     this.ruleViewService.showErrorMessage(
-                        errorJson.error.message.replace('dotcms.api.error.forbidden: ', '')
+                        errorJson.error
+                            .replace('dotcms.api.error.forbidden: ', '')
+                            .replace(/ user-\S+/gi, '')
                     );
                     handled = true;
                 }

core-web/libs/dot-rules/src/lib/features/rule-engine/dot-rule-engine.component.html

@@ -8,14 +8,9 @@
     <div class="bg-(--color-palette-black-op-30) w-full h-full"></div>
 }
 @if (!loading && globalError()?.message) {
-    <div class="ui negative message first:my-8 first:mx-8 first:mb-4">
+    <div class="ui negative message first:my-8 first:mx-8 first:mb-4 font-bold text-red-600">
         <div class="header">{{ globalError().message }}</div>
         <p>{{ getI18nLabel('contact.admin.error') | async }}</p>
-        @if (showCloseButton()) {
-            <i
-                (click)="clearGlobalError()"
-                class="pi pi-times text-sm absolute right-2 top-2 cursor-pointer not-italic"></i>
-        }
     </div>
 }
 @if (!loading && showRules) {

core-web/libs/dot-rules/src/lib/features/rule-engine/dot-rule-engine.component.ts

@@ -12,16 +12,16 @@ import { take } from 'rxjs/operators';
 import { DotPushPublishDialogService } from '@dotcms/dotcms-js';
 
 import { IPublishEnvironment } from '../../services/api/bundle/bundle-service';
-import { RuleModel, RULE_CREATE } from '../../services/api/rule/Rule';
+import { RULE_CREATE, RuleModel } from '../../services/api/rule/Rule';
 import { ServerSideTypeModel } from '../../services/api/serverside-field/ServerSideFieldModel';
 import { I18nService } from '../../services/i18n/i18n.service';
 import {
     ConditionActionEvent,
+    ConditionGroupActionEvent,
     RuleActionActionEvent,
-    RuleActionEvent,
-    ConditionGroupActionEvent
+    RuleActionEvent
 } from '../../services/models/rule-event.model';
-import { RuleViewService, DotRuleMessage } from '../../services/ui/dot-view-rule-service';
+import { DotRuleMessage, RuleViewService } from '../../services/ui/dot-view-rule-service';
 import { RuleFilter } from '../../services/utils/filter.util';
 import { DotRuleComponent } from '../rule/dot-rule.component';
 

core-web/libs/dot-rules/src/lib/services/api/rule/Rule.ts

@@ -1,9 +1,9 @@
-import { from as observableFrom, Subject, Observable, BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable, from as observableFrom, Subject } from 'rxjs';
 
-import { HttpClient } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
 
-import { mergeMap, reduce, map, tap } from 'rxjs/operators';
+import { map, mergeMap, reduce, tap } from 'rxjs/operators';
 // tslint:disable-next-line:max-file-line-count
 
 import { ApiRoot, CwError, SiteService } from '@dotcms/dotcms-js';
@@ -268,7 +268,7 @@ export class RuleService {
     _ruleActionTypes: { [key: string]: ServerSideTypeModel } = {};
     _conditionTypes: { [key: string]: ServerSideTypeModel } = {};
 
-    public _errors$: Subject<{ message: string; response: Response }> = new Subject();
+    public _errors$: Subject<HttpErrorResponse> = new Subject();
 
     protected _actionsEndpointUrl: string;
     // tslint:disable-next-line:no-unused-variable