fix(ui): refactor add variable for correlation rule

Author: mjabascal10

frontend/src/app/rule-management/app-rule/components/add-variable/add-variable.component.html

@@ -85,13 +85,6 @@
                   </div>
                 </div>
               </div>
-             <!-- <div class="col-1 d-flex justify-content-center align-items-center">
-                <button (click)="saveVariable(i)"
-                        [disabled]="variable.invalid || variable.get('of_type').value == null || variable.get('get').value == null"
-                        class="btn utm-button utm-button-primary"
-                        type="button">Add
-                </button>
-              </div>-->
             </div>
           </fieldset>
         </div>
@@ -105,44 +98,19 @@
         (variablesChange)="onVariablesChange($event)"
         (touched)="formGroup.get('definition')?.get('ruleExpression').markAsTouched()">
       </app-expression-console>
+
+      {{ formGroup.get('definition').get('ruleExpression').value }}
+
+
       <div *ngIf="formGroup.get('definition').get('ruleExpression').invalid &&
                 formGroup.get('definition').get('ruleExpression').touched"
            class="invalid-feedback">
         Expression is required.
       </div>
-      <!--<fieldset *ngIf="savedVariables.length > 0" class="border p-3 w-100">
-       <legend>
-         <label>Variables:</label>
-       </legend>
-       <div class="d-flex flex-wrap justify-content-start">
-         <div *ngFor="let savedVariable of savedVariables; let j = index">
-           <div class="mr-2" *ngIf="!savedVariable.isEditing">
-             <div style="min-width: 100px"
-                  class="d-flex flex-wrap cursor-pointer badge p-2 border-1 badge-flat font-weight-light border-grey-100 text-blue-800">
-               <div (click)="copyVariable(savedVariable.as)" [ngbTooltip]="savedVariable.get">
-                 <i class="mr-1 font-size-sm icon-cog7"></i>
-                 <span>
-                         {{ savedVariable.as }}
-                       </span>
-               </div>
-               <span class="ml-2 badge-actions">
-                       <i (click)="editVariable(j)" class="icon-pencil3 small-icon cursor-pointer mr-1"></i>
-                       <i (click)="removeSavedVariable(j)" class="icon-cross2 small-icon cursor-pointer"></i>
-                     </span>
-             </div>
-           </div>
-         </div>
-       </div>
-     </fieldset>-->
-      <!--      <label for="expression">Expression:</label>
-            <textarea
-              [ngClass]="{'is-invalid': formGroup.get('definition').get('ruleExpression').invalid && formGroup.get('definition').get('ruleExpression').touched}"
-              class="form-control" formControlName="ruleExpression" id="expression" rows="6"></textarea>
-            <div
-              *ngIf="formGroup.get('definition').get('ruleExpression').invalid && formGroup.get('definition').get('ruleExpression').touched"
-              class="invalid-feedback">
-              Expression is required.
-            </div>-->
+      <div *ngIf="formGroup.get('definition.ruleExpression')?.hasError('noVariableUsed') && formGroup.get('definition.ruleExpression')?.touched"
+           class="invalid-feedback">
+        You must include at least one variable in the expression.
+      </div>
     </div>
   </div>
 </fieldset>

frontend/src/app/rule-management/app-rule/components/add-variable/add-variable.component.ts

@@ -6,6 +6,7 @@ import {ElasticSearchFieldInfoType} from '../../../../shared/types/elasticsearch
 import {singleTermValidator, variableTemplate} from '../../../custom-validators';
 import {VariableDataType} from '../../../models/rule.constant';
 import {Rule} from '../../../models/rule.model';
+import {containsVariable} from '../../validators/customs.validators';
 
 
 @Component({
@@ -29,7 +30,8 @@ export class AddVariableComponent implements OnInit {
 
     this.formGroup.setControl('definition', this.fb.group({
       ruleVariables: this.fb.array([this.fb.group(variableTemplate)]),
-      ruleExpression: [this.rule ? this.rule.definition.ruleExpression : '', Validators.required]
+      ruleExpression: [this.rule ? this.rule.definition.ruleExpression : '', [Validators.required,
+                containsVariable(this.savedVariables.map(v => v.as))]]
     }));
   }
 
@@ -43,6 +45,7 @@ export class AddVariableComponent implements OnInit {
 
   addVariable() {
     this.variables.push(this.fb.group(variableTemplate));
+    this.reloadExpressionContainVariableValidator();
   }
 
   removeVariable(index: number) {
@@ -99,8 +102,16 @@ export class AddVariableComponent implements OnInit {
   }
 
   onVariablesChange(updatedVars: { as: string; ofType: string; get: string }[]) {
-    this.savedVariables = updatedVars;
+    this.savedVariables = [
+      ...updatedVars,
+    ];
+    this.reloadExpressionContainVariableValidator();
   }
 
+  reloadExpressionContainVariableValidator(){
+    const control = this.formGroup.get('definition.ruleExpression');
+    control.setValidators([Validators.required, containsVariable(this.savedVariables.map(v => v.as))]);
+    control.updateValueAndValidity();
 
+  }
 }

frontend/src/app/rule-management/app-rule/components/expression-console/expression-console.component.ts

@@ -133,4 +133,11 @@ export class ExpressionConsoleComponent implements ControlValueAccessor {
       this.suggestions = [];
     }
   }
+  @HostListener('input', ['$event'])
+  onInput(event: Event): void {
+    const textarea = this.consoleRef.nativeElement;
+    this.value = textarea.value;
+    this.onChange(this.value);
+  }
+
 }

frontend/src/app/rule-management/app-rule/validators/customs.validators.ts

@@ -0,0 +1,10 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function containsVariable(variables: string[]): ValidatorFn {
+  console.log('contains variable', variables);
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value || '';
+    const hasVariable = variables.some(v => value.includes(v));
+    return hasVariable ? null : { noVariableUsed: true };
+  };
+}