feat(validations): support letters of all existing languages as the 1st letter of entities

package.json

@@ -64,6 +64,7 @@
     "tslib": "^1.9.0",
     "uuid": "^3.1.0",
     "web-animations-js": "2.3.1",
+    "xregexp": "^4.2.4",
     "zone.js": "0.8.26"
   },
   "devDependencies": {

src/app/shared/components/create-update-delete-dialog/create-update-delete-dialog.component.html

@@ -1,86 +1,48 @@
-<h3
-  *ngIf="title" class="mat-dialog-title"
->
-  {{ title | translate }}
-</h3>
+<h3 *ngIf="title" class="mat-dialog-title">{{ title | translate }}</h3>
 
-<form
-  (ngSubmit)="submit()"
-  #form="ngForm"
-  novalidate
->
+<form (ngSubmit)="submit()" #form="ngForm" novalidate>
   <div class="mat-dialog-content">
-    <mat-radio-group
-      name="radio"
-      [ngModel]="mode"
-      (ngModelChange)="setMode($event)"
-    >
-      <mat-radio-button
-        *ngIf="enableAssign"
-        [value]="modes.assign"
-      >
+    <mat-radio-group name="radio" [ngModel]="mode" (ngModelChange)="setMode($event)">
+      <mat-radio-button *ngIf="enableAssign" [value]="modes.assign">
         {{ assignLabel | translate }}
       </mat-radio-button>
 
-      <mat-radio-button
-        *ngIf="enableCreate"
-        [value]="modes.create"
-      >
+      <mat-radio-button *ngIf="enableCreate" [value]="modes.create">
         {{ createLabel | translate }}
       </mat-radio-button>
 
-      <mat-radio-button
-        *ngIf="defaultValue && enableRemove"
-        [value]="modes.remove"
-      >
-        <div>{{ removeLabel | translate:{ value: defaultValue } }}</div>
+      <mat-radio-button *ngIf="defaultValue && enableRemove" [value]="modes.remove">
+        <div>{{ removeLabel | translate: { value: defaultValue } }}</div>
       </mat-radio-button>
     </mat-radio-group>
 
-    <mat-form-field
-      *ngIf="mode === modes.create"
-      class="full-width-input"
-    >
+    <mat-form-field *ngIf="mode === modes.create" class="full-width-input">
       <input
         matInput
         type="text"
         name="textValue"
-        pattern="^[a-zA-ZА-яЁё]{1}[^,]*$"
+        [pattern]="entityValidator"
         [(ngModel)]="newValue"
         [placeholder]="textFieldPlaceholder | translate"
         [maxlength]="maxLength"
         autofocus
         required
-      >
+      />
     </mat-form-field>
 
-    <mat-form-field
-      class="full-width-input"
-      *ngIf="mode === modes.assign"
-    >
+    <mat-form-field class="full-width-input" *ngIf="mode === modes.assign">
       <mat-select
         name="selectValue"
-
         [(ngModel)]="newValue"
         [placeholder]="selectPlaceholder | translate"
       >
-        <mat-option
-          *ngFor="let option of options"
-          [value]="option"
-        >
-          {{ option }}
-        </mat-option>
+        <mat-option *ngFor="let option of options" [value]="option"> {{ option }} </mat-option>
       </mat-select>
     </mat-form-field>
   </div>
 
   <div class="mat-dialog-actions">
-    <button
-      mat-button
-      color="primary"
-      type="button"
-      (click)="cancel()"
-    >
+    <button mat-button color="primary" type="button" (click)="cancel()">
       {{ 'COMMON.CANCEL' | translate }}
     </button>
     <button
@@ -92,12 +54,7 @@
     >
       {{ 'COMMON.ASSIGN' | translate }}
     </button>
-    <button
-      *ngIf="mode === modes.remove"
-      mat-button
-      color="primary"
-      type="submit"
-    >
+    <button *ngIf="mode === modes.remove" mat-button color="primary" type="submit">
       {{ 'COMMON.REMOVE' | translate }}
     </button>
   </div>

src/app/shared/components/create-update-delete-dialog/create-update-delete-dialog.component.ts

@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatInput } from '@angular/material';
+import { Constants } from '../../constants';
+const xRegExp = require('xregexp');
 
 export enum Mode {
   assign,
@@ -57,6 +59,7 @@ export class CreateUpdateDeleteDialogComponent implements OnInit {
   public loading: boolean;
   public newValue: string;
 
+  public entityValidator = xRegExp(Constants.entityValidator);
   public modes = Mode;
   // tslint:disable-next-line:variable-name
   private _mode: Mode;

src/app/shared/constants.spec.ts

@@ -0,0 +1,45 @@
+import { Constants } from './constants';
+const xRegExp = require('xregexp');
+
+describe('Entity Regex', () => {
+  const validEntityNames = ['name1', '漢語', 'name%$#', 'name surname', 'أَلِفأَلِف', '平仮名'];
+  const invalidEntityNames = [
+    '%name',
+    '$name',
+    '&name',
+    '[name',
+    ']name',
+    '<name',
+    '>name',
+    '{name',
+    '}name',
+    'name ',
+    '!name',
+    '-name',
+    '(name',
+    ')name',
+    '_name',
+    '?name',
+    '~name',
+    '^name',
+    '#name',
+    '@name',
+    `'name`,
+    '⏫name',
+    '⚫name',
+  ];
+
+  it('should validate valid names', () => {
+    const urlRegex = xRegExp(Constants.entityValidator, 'i');
+    for (const validName of validEntityNames) {
+      expect(urlRegex.test(validName)).toBeTruthy();
+    }
+  });
+
+  it('should validate invalid names', () => {
+    const urlRegex = xRegExp(Constants.entityValidator, 'i');
+    for (const invalidName of invalidEntityNames) {
+      expect(urlRegex.test(invalidName)).toBeFalsy();
+    }
+  });
+});

src/app/shared/constants.ts

@@ -3,4 +3,9 @@ export class Constants {
    * Max length 255 for some entities fields
    */
   public static readonly maxLength255 = 255;
+
+  /**
+   * The first symbol is a letter , further all symbols except comma
+   */
+  public static readonly entityValidator = '^\\pL{1}[^,]*[\\S]$';
 }

src/app/vm/vm-sidebar/affinity-group-selector/affinity-group-selector.component.ts

@@ -10,6 +10,8 @@ import {
 
 import { AffinityGroup, AffinityGroupType, emptyAffinityGroup } from '../../../shared/models';
 import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { Constants } from '../../../shared';
+const xRegExp = require('xregexp');
 
 function isUniqName(affinityGroups: AffinityGroup[]): ValidatorFn {
   return function(control: FormControl) {
@@ -96,8 +98,7 @@ export class AffinityGroupSelectorComponent implements OnInit, OnChanges {
       name: this.formBuilder.control('', [
         Validators.required,
         Validators.maxLength(this.maxEntityNameLength),
-        // ^[^\\d_*&^%$#@!~-]{1}[^,]*$
-        Validators.pattern('^[A-Za-zА-Яа-я]{1}[^,]*$'),
+        Validators.pattern(xRegExp(Constants.entityValidator)),
         isUniqName(this.affinityGroups),
       ]),
       type: this.formBuilder.control(AffinityGroupType.antiAffinity, [Validators.required]),