fix: check if regex is valid is using regex search (#99)

- check whether regex expression is actually valid before sending request to the backend Signed-off-by: Slavomir Mazur <[email protected]>
YangCatalog · Jul 27, 2022 · 37eb7b7 · 37eb7b7
1 parent 1a3e682
commit 37eb7b7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/src/app/core/yc-validations.service.ts b/src/app/core/yc-validations.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
-import { AbstractControl, AsyncValidatorFn, ValidationErrors, ValidatorFn } from '@angular/forms';
-import { Observable, of } from 'rxjs';
+import { AbstractControl, ValidatorFn } from '@angular/forms';
 
 @Injectable({
   providedIn: 'root'
@@ -10,10 +9,25 @@ export class YcValidationsService {
   constructor() { }
 
   getNumberValidation(): ValidatorFn {
-    return (control: AbstractControl): {[key: string]: any} => {
-      return (control.value && (!Number(control.value) && control.value !== '0' )) ? {'notNumber': {value: control.value}} : null;
+    return (control: AbstractControl): { [key: string]: any } => {
+      return (control.value && (!Number(control.value) && control.value !== '0')) ? { 'notNumber': { value: control.value } } : null;
     };
   }
 
+  regexpValidation(): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: any } => {
+      if (!control.parent) {
+        return null;
+      }
+      var isRegexSearch = control.parent.get('searchOptions').get('regularExpression').value;
+      var isValid = true;
+      try {
+        new RegExp(control.value);
+      } catch (e) {
+        isValid = false;
+      }
+      return (isRegexSearch && !isValid) ? { 'notValidRegex': { value: control.value } } : null;
+    };
+  }
 
 }
diff --git a/src/app/features/yang-search/yang-search.component.html b/src/app/features/yang-search/yang-search.component.html
@@ -3,7 +3,7 @@
     <div class="yc-col" #contentCol>
       <form [formGroup]="form" *ngIf="!resultsMaximized">
         <h2>YANG Search</h2>
-        <div class="form-group">
+        <div class="form-group" [customErrorMessages]="customErrorMessages">
           <ngb-alert type="danger" (close)="onCloseError()"
                      *ngIf="error">{{ error.message || 'The application has encountered an unknown error.'}}</ngb-alert>
 
@@ -18,12 +18,12 @@ <h2>YANG Search</h2>
               <ng-template ngbNavContent>
                 <div formGroupName="searchOptions" class="options-category">
                   <label for="caseSensitiveCheckbox" class="checkbox"><input id="caseSensitiveCheckbox" formControlName="caseSensitive" type="checkbox"/><i class="skin"></i> <span>Case-Sensitive</span></label>
-                  <label for="regularExpressionCheckbox" class="checkbox"><input id="regularExpressionCheckbox" formControlName="regularExpression" type="checkbox"/><i class="skin"></i> <span>Regular Expression</span></label>
+                  <label (change)="onSearchTypeChange()" for="regularExpressionCheckbox" class="checkbox"><input id="regularExpressionCheckbox" formControlName="regularExpression" type="checkbox"/><i class="skin"></i> <span>Regular Expression</span></label>
                   <label for="includeMibsCheckbox" class="checkbox"><input id="includeMibsCheckbox" formControlName="includeMibs" type="checkbox"/><i class="skin"></i> <span>Include Mibs</span></label>
                   <label for="onlyLatestRevsCheckbox" class="checkbox"><input id="onlyLatestRevsCheckbox" formControlName="onlyLatestRevs" type="checkbox"/><i class="skin"></i> <span>Only Latest Revs</span></label>
                 </div>
                 <div class="options-category">
-                  <p >Search Fields</p>
+                  <p>Search Fields</p>
                   <label (change)="onCheckChange('searchFields', $event)" for="moduleNameCheckbox" class="checkbox"><input [checked]="checkCheckedField('searchFields', 'module')" id="moduleNameCheckbox" value="module" type="checkbox"/><i class="skin"></i> <span>Module Name</span></label>
                   <label (change)="onCheckChange('searchFields', $event)" for="nodeNameCheckbox" class="checkbox"><input [checked]="checkCheckedField('searchFields', 'argument')" id="nodeNameCheckbox" value="argument" type="checkbox"/><i class="skin"></i> <span>Node Name</span></label>
                   <label (change)="onCheckChange('searchFields', $event)" for="nodeDescriptionCheckbox" class="checkbox"><input [checked]="checkCheckedField('searchFields', 'description')" id="nodeDescriptionCheckbox" value="description" type="checkbox"/><i class="skin"></i> <span>Node Description</span></label>

diff --git a/src/app/features/yang-search/yang-search.component.ts b/src/app/features/yang-search/yang-search.component.ts
@@ -2,9 +2,11 @@ import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } fr
 import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ColDef, GridOptions } from 'ag-grid-community';
+import { ErrorMessage } from 'ng-bootstrap-form-validation';
 import { Subject } from 'rxjs';
 import { finalize, takeUntil } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';
+import { YcValidationsService } from '../../core/yc-validations.service';
 import { AppAgGridComponent } from '../../shared/ag-grid/app-ag-grid.component';
 import { YangShowNodeModalComponent } from '../yang-show-node/yang-show-node-modal/yang-show-node-modal.component';
 import { YangSearchService } from './yang-search.service';
@@ -62,6 +64,12 @@ export class YangSearchComponent implements OnInit, OnDestroy, AfterViewInit {
     { colId: 'description', field: 'description', headerName: 'Description', maxWidth: 400 },
   ];
   currentColDefs = [];
+  customErrorMessages: ErrorMessage[] = [
+    {
+      error: 'notValidRegex',
+      format: (label, error) => `Regular expression "${error.value}" is not valid`
+    }
+  ];
 
   defaultColDef = {
     autoHeight: true,
@@ -81,7 +89,8 @@ export class YangSearchComponent implements OnInit, OnDestroy, AfterViewInit {
   constructor(
     private fb: FormBuilder,
     private dataService: YangSearchService,
-    private modalService: NgbModal
+    private modalService: NgbModal,
+    private ycValidations: YcValidationsService
   ) { }
 
   headerHeightGetter = () => {
@@ -131,7 +140,7 @@ export class YangSearchComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private initForm() {
     this.form = this.fb.group({
-      searchTerm: ['', Validators.required],
+      searchTerm: ['', [Validators.required, this.ycValidations.regexpValidation()]],
       searchOptions: this.fb.group({
         caseSensitive: [false],
         regularExpression: [false],
@@ -219,6 +228,10 @@ export class YangSearchComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
+  onSearchTypeChange() {
+    this.form.controls['searchTerm'].updateValueAndValidity();
+  }
+
   checkCheckedField(formGroupName: string, myValue: string): boolean {
     return this.form.get(formGroupName).value.indexOf(myValue) !== -1;
   }

diff --git a/src/app/features/yang-validator/api-overview/api-overview.component.ts b/src/app/features/yang-validator/api-overview/api-overview.component.ts
@@ -13,6 +13,7 @@ export class ApiOverviewComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
+    window.scroll({ top: 0, left: 0, behavior: 'smooth' });
   }
 
 }