Fix certain default values breaking VFC

For string default values in VFC, only alphanumeric characters should be allowed

Issue-ID: SDC-4475
Signed-off-by: eschcam <cameron.scholes@est.tech>
Change-Id: Id4ca2943f1423b8cc7d3182254298ba19c8a7ee3

5 files changed, 211 insertions, 222 deletions

diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts
index 296b63bca7..e3d202b2a1 100644
--- a/catalog-ui/src/app/app.ts
+++ b/catalog-ui/src/app/app.ts
@@ -20,32 +20,31 @@
 
 'use strict';
 
-import * as _ from "lodash";
-import "reflect-metadata";
+import { AuthenticationService } from 'app/ng2/services/authentication.service';
+import * as _ from 'lodash';
 import 'ng-infinite-scroll';
-import './modules/filters.ts';
-import './modules/utils.ts';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import 'reflect-metadata';
+import { IAppConfigurtaion, IAppMenu, IHostedApplication, Resource } from './models';
+import { Component } from './models/components/component';
+import { IUserProperties } from './models/user';
 import './modules/directive-module.ts';
+import './modules/filters.ts';
 import './modules/service-module';
+import './modules/utils.ts';
 import './modules/view-model-module.ts';
-import {SdcUiCommon, SdcUiComponents, SdcUiServices} from 'onap-ui-angular';
-import {CookieService, DataTypesService, EcompHeaderService, LeftPaletteLoaderService} from "./services";
-import {CacheService, CatalogService, HomeService} from "./services-ng2";
-import {AuthenticationService} from "app/ng2/services/authentication.service";
-import {CHANGE_COMPONENT_CSAR_VERSION_FLAG, PREVIOUS_CSAR_COMPONENT, States} from "./utils";
-import {IAppConfigurtaion, IAppMenu, IHostedApplication, Resource} from "./models";
-import {ComponentFactory} from "./utils/component-factory";
-import {Component} from "./models/components/component";
-import {IUserProperties} from "./models/user";
-import {WorkspaceService} from "./ng2/pages/workspace/workspace.service";
-import {TypeWorkspaceGeneralComponent} from "./ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component";
-
-let moduleName: string = 'sdcApp';
-let viewModelsModuleName: string = 'Sdc.ViewModels';
-let directivesModuleName: string = 'Sdc.Directives';
-let servicesModuleName: string = 'Sdc.Services';
-let filtersModuleName: string = 'Sdc.Filters';
-let utilsModuleName: string = 'Sdc.Utils';
+import { WorkspaceService } from './ng2/pages/workspace/workspace.service';
+import { CookieService, DataTypesService, EcompHeaderService, LeftPaletteLoaderService } from './services';
+import { CacheService, CatalogService, HomeService } from './services-ng2';
+import { CHANGE_COMPONENT_CSAR_VERSION_FLAG, PREVIOUS_CSAR_COMPONENT, States } from './utils';
+import { ComponentFactory } from './utils/component-factory';
+
+const moduleName: string = 'sdcApp';
+const viewModelsModuleName: string = 'Sdc.ViewModels';
+const directivesModuleName: string = 'Sdc.Directives';
+const servicesModuleName: string = 'Sdc.Services';
+const filtersModuleName: string = 'Sdc.Filters';
+const utilsModuleName: string = 'Sdc.Utils';
 
 // Load configuration according to environment.
 declare var __ENV__: string;
@@ -58,11 +57,11 @@ if (__ENV__ === 'dev') {
   sdcConfig = require('./../../configurations/prod.js');
   pathPrefix = 'sdc1/';
 } else {
-  console.log("ERROR: Environment configuration not found!");
+  console.log('ERROR: Environment configuration not found!');
 }
 sdcMenu = require('./../../configurations/menu.js');
 
-let dependentModules: Array<string> = [
+const dependentModules: string[] = [
   'ui.router',
   'ui.bootstrap',
   'ui.bootstrap.tpls',
@@ -90,22 +89,22 @@ let dependentModules: Array<string> = [
 
 // ===================== Hosted applications section ====================
 // Define here new hosted apps
-let hostedApplications: Array<IHostedApplication> = [
+const hostedApplications: IHostedApplication[] = [
   {
-    "moduleName": "dcaeApp",
-    "navTitle": "DCAE",
-    "defaultState": 'dcae.app.home',
-    "state": {
-      "name": "dcae",
-      "url": "/dcae",
-      "relativeHtmlPath": 'dcae-app/dcae-app-view.html',
-      "controllerName": '.DcaeAppViewModel'
+    moduleName: 'dcaeApp',
+    navTitle: 'DCAE',
+    defaultState: 'dcae.app.home',
+    state: {
+      name: 'dcae',
+      url: '/dcae',
+      relativeHtmlPath: 'dcae-app/dcae-app-view.html',
+      controllerName: '.DcaeAppViewModel'
     }
   }
 ];
 
 // Check if module exists (in case the javascript was not loaded).
-let isModuleExists = (moduleName: string): boolean => {
+const isModuleExists = (moduleName: string): boolean => {
   try {
     angular.module(moduleName);
     dependentModules.push(moduleName);
@@ -119,7 +118,7 @@ let isModuleExists = (moduleName: string): boolean => {
 // Check which hosted applications exists
 _.each(hostedApplications, (hostedApp) => {
   if (isModuleExists(hostedApp.moduleName)) {
-    hostedApp['exists'] = true;
+    hostedApp.exists = true;
   }
 });
 // ===================== Hosted applications section ====================
@@ -171,8 +170,7 @@ ng1appModule.config([
         },
     );
 
-
-    let componentsParam: Array<any> = ['$stateParams', 'HomeService', 'CatalogService', 'Sdc.Services.CacheService', ($stateParams: any, HomeService: HomeService, CatalogService: CatalogService, cacheService: CacheService) => {
+    const componentsParam: any[] = ['$stateParams', 'HomeService', 'CatalogService', 'Sdc.Services.CacheService', ($stateParams: any, HomeService: HomeService, CatalogService: CatalogService, cacheService: CacheService) => {
       if (cacheService.get('breadcrumbsComponentsState') === $stateParams.previousState) {
         const breadcrumbsComponents = cacheService.get('breadcrumbsComponents');
         if (breadcrumbsComponents) {
@@ -197,7 +195,7 @@ ng1appModule.config([
       }
     }];
 
-    const oldWorkspaceController: Array<any> = ['$location', ($location: ng.ILocationService) => {
+    const oldWorkspaceController: any[] = ['$location', ($location: ng.ILocationService) => {
       // redirect old /workspace/* urls to /catalog/workspace/* url
       const newUrl = '/catalog' + $location.url();
       console.log('old workspace path - redirecting to:', newUrl);
@@ -215,7 +213,7 @@ ng1appModule.config([
         States.TYPE_WORKSPACE, {
           url: '/:previousState/type-workspace/:type/:id/:subPage',
           params: {
-              'importedFile': null
+              importedFile: null
           },
           template: '<app-type-workspace></app-type-workspace>'
         }
@@ -225,23 +223,23 @@ ng1appModule.config([
         States.WORKSPACE, {
           url: '/:previousState/workspace/:id/:type/',
           params: {
-            'importedFile': null,
-            'componentCsar': null,
-            'resourceType': null,
-            'disableButtons': null
+            importedFile: null,
+            componentCsar: null,
+            resourceType: null,
+            disableButtons: null
           },
           templateUrl: './view-models/workspace/workspace-view.html',
           controller: viewModelsModuleName + '.WorkspaceViewModel',
           resolve: {
-            injectComponent: ['$stateParams', 'ComponentFactory', 'workspaceService', 'Sdc.Services.CacheService', function ($stateParams, ComponentFactory: ComponentFactory, workspaceService: WorkspaceService, cacheService: CacheService) {
-              if ($stateParams.id && $stateParams.id.length) { //need to check length in case ID is an empty string
+            injectComponent: ['$stateParams', 'ComponentFactory', 'workspaceService', 'Sdc.Services.CacheService', function($stateParams, ComponentFactory: ComponentFactory, workspaceService: WorkspaceService, cacheService: CacheService) {
+              if ($stateParams.id && $stateParams.id.length) { // need to check length in case ID is an empty string
                 return ComponentFactory.getComponentWithMetadataFromServer($stateParams.type.toUpperCase(), $stateParams.id).then(
                     (component: Component) => {
                       if ($stateParams.componentCsar && component.isResource()) {
-                        if ((<Resource>component).csarVersion != $stateParams.componentCsar.csarVersion) {
+                        if ((component as Resource).csarVersion != $stateParams.componentCsar.csarVersion) {
                           cacheService.set(PREVIOUS_CSAR_COMPONENT, angular.copy(component));
                         }
-                        component = ComponentFactory.updateComponentFromCsar($stateParams.componentCsar, <Resource>component);
+                        component = ComponentFactory.updateComponentFromCsar($stateParams.componentCsar, component as Resource);
                       }
                       workspaceService.setComponentMetadata(component.componentMetadata);
                       return component;
@@ -249,13 +247,13 @@ ng1appModule.config([
               } else if ($stateParams.componentCsar && $stateParams.componentCsar.csarUUID) {
                 return $stateParams.componentCsar;
               } else {
-                let emptyComponent = ComponentFactory.createEmptyComponent($stateParams.type.toUpperCase());
+                const emptyComponent = ComponentFactory.createEmptyComponent($stateParams.type.toUpperCase());
                 if (emptyComponent.isResource() && $stateParams.resourceType) {
                   // Set the resource type
-                  (<Resource>emptyComponent).resourceType = $stateParams.resourceType;
+                  (emptyComponent as Resource).resourceType = $stateParams.resourceType;
                 }
                 if ($stateParams.importedFile) {
-                  (<Resource>emptyComponent).importedFile = $stateParams.importedFile;
+                  (emptyComponent as Resource).importedFile = $stateParams.importedFile;
                 }
                 return emptyComponent;
               }
@@ -275,7 +273,6 @@ ng1appModule.config([
         }
     );
 
-
     $stateProvider.state(
         States.WORKSPACE_INFORMATION_ARTIFACTS, {
           url: 'information_artifacts',
@@ -292,7 +289,6 @@ ng1appModule.config([
         }
     );
 
-
     $stateProvider.state(
         States.WORKSPACE_DEPLOYMENT_ARTIFACTS, {
           url: 'deployment_artifacts',
@@ -316,11 +312,11 @@ ng1appModule.config([
     $stateProvider.state(
         States.WORKSPACE_PROPERTIES_ASSIGNMENT, {
           url: 'properties_assignment',
-          params: {'component': null},
+          params: {component: null},
           template: '<properties-assignment></properties-assignment>',
           parent: 'workspace',
           resolve: {
-            componentData: ['injectComponent', '$stateParams', function (injectComponent: Component, $stateParams) {
+            componentData: ['injectComponent', '$stateParams', function(injectComponent: Component, $stateParams) {
               $stateParams.component = injectComponent;
               return injectComponent;
             }],
@@ -345,7 +341,7 @@ ng1appModule.config([
           parent: 'workspace',
           template: '<attributes-outputs></attributes-outputs>',
           resolve: {
-            componentData: ['injectComponent', '$stateParams', function (injectComponent: Component, $stateParams) {
+            componentData: ['injectComponent', '$stateParams', function(injectComponent: Component, $stateParams) {
               $stateParams.component = injectComponent;
               return injectComponent;
             }],
@@ -377,7 +373,6 @@ ng1appModule.config([
         }
     );
 
-
     $stateProvider.state(
         States.WORKSPACE_MANAGEMENT_WORKFLOW, {
           parent: 'workspace',
@@ -396,15 +391,14 @@ ng1appModule.config([
         }
     );
 
-
     $stateProvider.state(
         States.WORKSPACE_COMPOSITION, {
           url: 'composition/',
-          params: {'component': null},
+          params: {component: null},
           parent: 'workspace',
           template: '<composition-page></composition-page>',
           resolve: {
-            componentData: ['injectComponent', '$stateParams', function (injectComponent: Component, $stateParams) {
+            componentData: ['injectComponent', '$stateParams', function(injectComponent: Component, $stateParams) {
               $stateParams.component = injectComponent;
               return injectComponent;
             }],
@@ -445,7 +439,7 @@ ng1appModule.config([
           url: 'details',
           parent: 'workspace.composition',
           resolve: {
-            componentData: ['injectComponent', '$stateParams', function (injectComponent: Component, $stateParams) {
+            componentData: ['injectComponent', '$stateParams', function(injectComponent: Component, $stateParams) {
               $stateParams.component = injectComponent;
               return injectComponent;
             }],
@@ -532,7 +526,7 @@ ng1appModule.config([
           parent: 'workspace',
           template: '<plugin-context-view></plugin-context-view>',
           resolve: {
-            componentData: ['injectComponent', '$stateParams', function (injectComponent: Component, $stateParams) {
+            componentData: ['injectComponent', '$stateParams', function(injectComponent: Component, $stateParams) {
               $stateParams.component = injectComponent;
               return injectComponent;
             }],
@@ -583,8 +577,8 @@ ng1appModule.config([
           url: '/catalog?filter.components&filter.resourceSubTypes&filter.categories&filter.statuses&filter.order&filter.term&filter.active',
           template: '<catalog-page></catalog-page>',
           resolve: {
-            auth: ["$q", "AuthenticationServiceNg2", ($q: any, authService: AuthenticationService) => {
-              let userInfo: IUserProperties = authService.getLoggedinUser();
+            auth: ['$q', 'AuthenticationServiceNg2', ($q: any, authService: AuthenticationService) => {
+              const userInfo: IUserProperties = authService.getLoggedinUser();
               if (userInfo) {
                 return $q.when(userInfo);
               } else {
@@ -598,7 +592,7 @@ ng1appModule.config([
     $stateProvider.state(
         'error-403', {
           url: '/error-403',
-          templateUrl: "./view-models/modals/error-modal/error-403-view.html",
+          templateUrl: './view-models/modals/error-modal/error-403-view.html',
           controller: viewModelsModuleName + '.ErrorViewModel'
         }
     );
@@ -615,8 +609,8 @@ ng1appModule.config([
 ]);
 
 ng1appModule.value('ValidationPattern', /^[\s\w\&_.:-]{1,1024}$/);
-ng1appModule.value('ComponentNameValidationPattern', /^(?=.*[^. ])[\s\w\&_.:-]{1,1024}$/); //DE250513 - same as ValidationPattern above, plus requirement that name not consist of dots and/or spaces alone.
-ng1appModule.value('PropertyNameValidationPattern', /^[a-zA-Z0-9_:-@]{1,100}$/);// DE210977
+ng1appModule.value('ComponentNameValidationPattern', /^(?=.*[^. ])[\s\w\&_.:-]{1,1024}$/); // DE250513 - same as ValidationPattern above, plus requirement that name not consist of dots and/or spaces alone.
+ng1appModule.value('PropertyNameValidationPattern', /^[a-zA-Z0-9_:-@]{1,100}$/); // DE210977
 ng1appModule.value('TagValidationPattern', /^[\s\w_.-]{1,50}$/);
 ng1appModule.value('VendorReleaseValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,25}$/);
 ng1appModule.value('VendorNameValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,60}$/);
@@ -673,14 +667,14 @@ ng1appModule.run([
     // Add hosted applications to sdcConfig
     sdcConfig.hostedApplications = hostedApplications;
 
-    //handle http config
+    // handle http config
     $http.defaults.withCredentials = true;
     $http.defaults.headers.common[cookieService.getUserIdSuffix()] = cookieService.getUserId();
 
     DataTypesService.loadDataTypesCache(null);
 
-    //handle stateChangeStart
-    let internalDeregisterStateChangeStartWatcher: Function = (): void => {
+    // handle stateChangeStart
+    const internalDeregisterStateChangeStartWatcher: Function = (): void => {
       if (deregisterStateChangeStartWatcher) {
         deregisterStateChangeStartWatcher();
         deregisterStateChangeStartWatcher = null;
@@ -691,45 +685,44 @@ ng1appModule.run([
       }
     };
 
-    let removeLoader: Function = (): void => {
-      $(".sdc-loading-page .main-loader").addClass("animated fadeOut");
-      $(".sdc-loading-page .caption1").addClass("animated fadeOut");
-      $(".sdc-loading-page .caption2").addClass("animated fadeOut");
+    const removeLoader: Function = (): void => {
+      $('.sdc-loading-page .main-loader').addClass('animated fadeOut');
+      $('.sdc-loading-page .caption1').addClass('animated fadeOut');
+      $('.sdc-loading-page .caption2').addClass('animated fadeOut');
       window.setTimeout((): void => {
-        $(".sdc-loading-page .main-loader").css("display", "none");
-        $(".sdc-loading-page .caption1").css("display", "none");
-        $(".sdc-loading-page .caption2").css("display", "none");
-        $(".sdc-loading-page").addClass("animated fadeOut");
+        $('.sdc-loading-page .main-loader').css('display', 'none');
+        $('.sdc-loading-page .caption1').css('display', 'none');
+        $('.sdc-loading-page .caption2').css('display', 'none');
+        $('.sdc-loading-page').addClass('animated fadeOut');
       }, 1000);
     };
 
-    let onNavigateOut: Function = (toState, toParams): void => {
-      let onOk: Function = (): void => {
+    const onNavigateOut: Function = (toState, toParams): void => {
+      const onOk: Function = (): void => {
         $state.current.data.unsavedChanges = false;
         $state.go(toState.name, toParams);
       };
 
-      let data = sdcMenu.alertMessages.exitWithoutSaving;
+      const data = sdcMenu.alertMessages.exitWithoutSaving;
       const okButton = {
-        testId: "OK",
+        testId: 'OK',
         text: sdcMenu.alertMessages.okButton,
         type: SdcUiCommon.ButtonType.warning,
         callback: onOk,
         closeModal: true
       } as SdcUiComponents.ModalButtonComponent;
-      //open notify to user if changes are not saved
+      // open notify to user if changes are not saved
       ModalServiceSdcUI.openWarningModal(data.title,
           data.message,
           'navigate-modal',
           [okButton]);
     };
 
-    let onStateChangeStart: Function = (event, toState, toParams, fromState, fromParams): void => {
+    const onStateChangeStart: Function = (event, toState, toParams, fromState, fromParams): void => {
       console.debug((new Date()).getTime());
       console.debug('$stateChangeStart', toState.name);
       if (toState.name !== 'error-403' && !authService.getLoggedinUser()) {
 
-
         authService.authenticate().subscribe((userInfo: IUserProperties) => {
           if (!doesUserHasAccess(toState, userInfo)) {
             $state.go('error-403');
@@ -737,12 +730,12 @@ ng1appModule.run([
             return;
           }
           authService.setLoggedinUser(userInfo);
-          setTimeout(function () {
+          setTimeout(function() {
 
             removeLoader();
 
             if (authService.getLoggedinUser().role === 'ADMIN') {
-              $state.go("adminDashboard", toParams);
+              $state.go('adminDashboard', toParams);
               return;
             }
 
@@ -752,7 +745,7 @@ ng1appModule.run([
                 $state.go(toState.name, toParams);
               }
 
-              console.log("------$state.current.name=" + $state.current.name);
+              console.log('------$state.current.name=' + $state.current.name);
 
             }, 1000);
 
@@ -762,7 +755,7 @@ ng1appModule.run([
           $state.go('error-403');
         });
       } else if (authService.getLoggedinUser()) {
-        let user: IUserProperties = authService.getLoggedinUser();
+        const user: IUserProperties = authService.getLoggedinUser();
         if (!cacheService.contains('user')) {
           cacheService.set('user', user);
         }
@@ -774,12 +767,11 @@ ng1appModule.run([
         }
 
         if (authService.getLoggedinUser().role === 'ADMIN') {
-          $state.go("adminDashboard", toParams);
+          $state.go('adminDashboard', toParams);
           return;
         }
 
-
-        //if form is dirty and not save  - notify to user
+        // if form is dirty and not save  - notify to user
         if (fromState.data && fromState.data.unsavedChanges && fromParams.id != toParams.id) {
           event.preventDefault();
           onNavigateOut(toState, toParams);
@@ -797,7 +789,7 @@ ng1appModule.run([
 
     };
 
-    let onStateChangeSuccess: Function = (event, toState, toParams, fromState, fromParams): void => {
+    const onStateChangeSuccess: Function = (event, toState, toParams, fromState, fromParams): void => {
       console.debug('$stateChangeSuccess', toState.name);
 
       // Workaround in case we are entering other state then workspace (user move to catalog)
@@ -811,14 +803,14 @@ ng1appModule.run([
         }
       }
 
-      //set body class
-      $rootScope['bodyClass'] = 'default-class';
+      // set body class
+      $rootScope.bodyClass = 'default-class';
       if (toState.data && toState.data.bodyClass) {
-        $rootScope['bodyClass'] = toState.data.bodyClass;
+        $rootScope.bodyClass = toState.data.bodyClass;
       }
     };
 
-    let doesUserHasAccess: Function = (toState, user): boolean => {
+    const doesUserHasAccess: Function = (toState, user): boolean => {
 
       let isUserHasAccess = true;
       if (toState.permissions && toState.permissions.length > 0) {
@@ -829,7 +821,7 @@ ng1appModule.run([
     let deregisterStateChangeStartWatcher: Function;
     let deregisterStateChangeSuccessWatcher: Function;
 
-    let registerStateChangeStartWatcher: Function = (): void => {
+    const registerStateChangeStartWatcher: Function = (): void => {
       internalDeregisterStateChangeStartWatcher();
       console.debug('registerStateChangeStartWatcher $stateChangeStart');
       deregisterStateChangeStartWatcher = $rootScope.$on('$stateChangeStart', (event, toState, toParams, fromState, fromParams): void => {
@@ -841,4 +833,3 @@ ng1appModule.run([
     };
     registerStateChangeStartWatcher();
   }]);
-
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts
index f0c1d938a9..74f0d9719a 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts
@@ -94,7 +94,8 @@ export class ConstraintsComponent implements OnInit {
       constraint: [
         { type: 'required', message: 'Constraint value is required'},
         { type: 'invalidInt', message: 'Constraint value is not a valid integer'},
-        { type: 'invalidFloat', message: 'Constraint value is not a valid floating point value'}
+        { type: 'invalidFloat', message: 'Constraint value is not a valid floating point value'},
+        { type: 'invalidString', message: 'String contains invalid characters'}
       ],
       type : [
         { type: 'required', message: 'Constraint type is required'}
diff --git a/catalog-ui/src/app/utils/validation-utils.ts b/catalog-ui/src/app/utils/validation-utils.ts
index bcb49d8b89..908ac18271 100644
--- a/catalog-ui/src/app/utils/validation-utils.ts
+++ b/catalog-ui/src/app/utils/validation-utils.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,23 +18,23 @@
  * ============LICENSE_END=========================================================
  */
 
-import * as _ from "lodash";
+import * as _ from 'lodash';
 
 class basePattern {
-    pattern:RegExp;
-    base:number;
+    pattern: RegExp;
+    base: number;
 
-    constructor(pattern:RegExp, base:number) {
+    constructor(pattern: RegExp, base: number) {
         this.pattern = pattern;
         this.base = base;
     }
 }
 
 export interface IMapRegex {
-    integer:RegExp;
-    boolean:RegExp;
-    float:RegExp;
-    string:RegExp;
+    integer: RegExp;
+    boolean: RegExp;
+    float: RegExp;
+    string: RegExp;
 }
 
 export class ValidationUtils {
@@ -47,60 +47,19 @@ export class ValidationUtils {
         'NumberValidationPattern',
         'LabelValidationPattern',
     ];
-    private trueRegex:string = '[t][r][u][e]|[t]|[o][n]|[y]|[y][e][s]|[1]';
-    private falseRegex:string = '[f][a][l][s][e]|[f]|[o][f][f]|[n]|[n][o]|[0]';
-    private heatBooleanValidationPattern:RegExp = new RegExp('^(' + this.trueRegex + '|' + this.falseRegex + ')$');
-
-
-    constructor(private IntegerNoLeadingZeroValidationPattern:RegExp,
-                private FloatValidationPattern:RegExp,
-                private CommentValidationPattern:RegExp,
-                private BooleanValidationPattern:RegExp,
-                private NumberValidationPattern:RegExp,
-                private LabelValidationPattern:RegExp) {
-    }
-
-    public stripAndSanitize(text:string):string {
-        if (!text) {
-            return null;
-        }
-        return text.replace(/\s+/g, ' ').replace(/%[A-Fa-f0-9]{2}/g, '')
-        .replace(/&/g, "&amp;").replace(/>/g, "&gt;")
-        .replace(/</g, "&lt;").replace(/"/g, "&quot;")
-        .replace(/'/g, "&apos;").trim();
+    private trueRegex: string = '[t][r][u][e]|[t]|[o][n]|[y]|[y][e][s]|[1]';
+    private falseRegex: string = '[f][a][l][s][e]|[f]|[o][f][f]|[n]|[n][o]|[0]';
+    private heatBooleanValidationPattern: RegExp = new RegExp('^(' + this.trueRegex + '|' + this.falseRegex + ')$');
+
+    constructor(private IntegerNoLeadingZeroValidationPattern: RegExp,
+                private FloatValidationPattern: RegExp,
+                private CommentValidationPattern: RegExp,
+                private BooleanValidationPattern: RegExp,
+                private NumberValidationPattern: RegExp,
+                private LabelValidationPattern: RegExp) {
     }
 
-    public getValidationPattern = (validationType:string, parameterType?:string):RegExp => {
-        switch (validationType) {
-            case 'integer':
-                return this.IntegerNoLeadingZeroValidationPattern;
-            case 'float':
-                return this.FloatValidationPattern;
-            case 'number':
-                return this.NumberValidationPattern;
-            case 'string':
-                return this.CommentValidationPattern;
-            case 'boolean':
-            {
-                //Bug Fix DE197437 [Patch]Mismatch between BE to FE regarding supported characters in Boolean filed
-                if (parameterType && parameterType === 'heat') {
-                    return this.heatBooleanValidationPattern;
-                }
-                else {
-                    return this.BooleanValidationPattern;
-                }
-            }
-
-            case 'label':
-                return this.LabelValidationPattern;
-            case 'category':
-                return this.LabelValidationPattern;
-            default :
-                return null;
-        }
-    };
-
-    public static getPropertyListPatterns():IMapRegex {
+    public static getPropertyListPatterns(): IMapRegex {
         return {
             integer: /^$|^(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)(,?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+))*$/,
             string: /^$|^"[\u0000-\u0021\u0023-\u00BF]+"(\s*,?\s*"[\u0000-\u0021\u0023-\u00BF]+")*$/,
@@ -109,7 +68,7 @@ export class ValidationUtils {
         };
     }
 
-    public static getPropertyMapPatterns():IMapRegex {
+    public static getPropertyMapPatterns(): IMapRegex {
         return {
             integer: /^$|^"\w+"\s*:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+(\s*,?\s*"\w+"\s?:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+)*$/,
             string: /^$|^"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*"(\s*,?\s*"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*")*$/,
@@ -120,12 +79,12 @@ export class ValidationUtils {
 
     public static validateUniqueKeys(viewValue: string): boolean {
         if (!viewValue) {
-            return true; //allow empty value
+            return true; // allow empty value
         }
 
-        let json:string = "{" + viewValue.replace(/\s\s+/g, ' ') + "}";
+        const json: string = '{' + viewValue.replace(/\s\s+/g, ' ') + '}';
         try {
-            let obj:any = JSON.parse(json);
+            const obj: any = JSON.parse(json);
             /*
              //Method #1 : check json string length before & after parsing
              let newJson:string = JSON.stringify(obj);
@@ -133,21 +92,59 @@ export class ValidationUtils {
              return false;
              }*/
 
-            //Method #2 : check how many times we can find "KEY": in json string
-            let result:boolean = true;
-            Object.keys(obj).forEach((key:string) => {
+            // Method #2 : check how many times we can find "KEY": in json string
+            let result: boolean = true;
+            Object.keys(obj).forEach((key: string) => {
                 result = result && json.split('"' + key + '":').length === 2;
             });
             return result;
 
         } catch (e) {
-            return false; //not a valid JSON
+            return false; // not a valid JSON
         }
 
-        //return true;
+        // return true;
     }
 
-    public validateJson = (json:string):boolean => {
+    public stripAndSanitize(text: string): string {
+        if (!text) {
+            return null;
+        }
+        return text.replace(/\s+/g, ' ').replace(/%[A-Fa-f0-9]{2}/g, '')
+        .replace(/&/g, '&amp;').replace(/>/g, '&gt;')
+        .replace(/</g, '&lt;').replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;').trim();
+    }
+
+    public getValidationPattern = (validationType: string, parameterType?: string): RegExp => {
+        switch (validationType) {
+            case 'integer':
+                return this.IntegerNoLeadingZeroValidationPattern;
+            case 'float':
+                return this.FloatValidationPattern;
+            case 'number':
+                return this.NumberValidationPattern;
+            case 'string':
+                return this.CommentValidationPattern;
+            case 'boolean': {
+                // Bug Fix DE197437 [Patch]Mismatch between BE to FE regarding supported characters in Boolean filed
+                if (parameterType && parameterType === 'heat') {
+                    return this.heatBooleanValidationPattern;
+                } else {
+                    return this.BooleanValidationPattern;
+                }
+            }
+
+            case 'label':
+                return this.LabelValidationPattern;
+            case 'category':
+                return this.LabelValidationPattern;
+            default :
+                return null;
+        }
+    }
+
+    public validateJson = (json: string): boolean => {
         try {
             JSON.parse(json);
             return true;
@@ -155,22 +152,22 @@ export class ValidationUtils {
             console.log('invalid json');
             return false;
         }
-    };
+    }
 
-    public validateIntRange = (value:string):boolean => {
+    public validateIntRange = (value: string): boolean => {
 
-        let base8 = new basePattern(/^([-+]?0o[0-7]+)$/, 8);
-        let base10 = new basePattern(/^(0|[-+]?[1-9][0-9]*)$/, 10);
-        let base16 = new basePattern(/^([-+]?0x[0-9a-fA-F]+)$/, 16);
+        const base8 = new basePattern(/^([-+]?0o[0-7]+)$/, 8);
+        const base10 = new basePattern(/^(0|[-+]?[1-9][0-9]*)$/, 10);
+        const base16 = new basePattern(/^([-+]?0x[0-9a-fA-F]+)$/, 16);
 
-        let min:number = -0x80000000;
-        let max:number = 0x7fffffff;
-        let intPatterns:Array<basePattern> = [base8, base10, base16];
-        let matchedBase = _.find(intPatterns, (item)=> {
+        const min: number = -0x80000000;
+        const max: number = 0x7fffffff;
+        const intPatterns: basePattern[] = [base8, base10, base16];
+        const matchedBase = _.find(intPatterns, (item) => {
             return item.pattern.test(value);
         });
 
-        let parsed:number = parseInt(value.replace('o', ''), matchedBase.base);
+        const parsed: number = parseInt(value.replace('o', ''), matchedBase.base);
         if (parsed) {
             return min <= parsed && max >= parsed;
         }
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
index 39f008a688..fc0581a5c1 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
@@ -46,16 +46,16 @@ export interface IEditPropertyModel {
 }
 
 interface IPropertyFormViewModelScope extends ng.IScope {
-    forms:any;
-    editForm:ng.IFormController;
-    footerButtons:Array<any>;
-    isNew:boolean;
-    nameMaxLength:number;
-    isLoading:boolean;
-    componentMetadata: { isService: boolean, isVfc: boolean }
-    validationPattern:RegExp;
-    propertyNameValidationPattern:RegExp;
-    commentValidationPattern:RegExp;
+    forms: any;
+    editForm: ng.IFormController;
+    footerButtons: Array<any>;
+    isNew: boolean;
+    nameMaxLength: number;
+    isLoading: boolean;
+    componentMetadata: { isService: boolean, isVfc: boolean };
+    validationPattern: RegExp;
+    propertyNameValidationPattern: RegExp;
+    commentValidationPattern: RegExp;
     editPropertyModel: IEditPropertyModel;
     componentInstanceMap: Map<string, InstanceFeDetails>;
     customToscaFunctions: Array<CustomToscaFunction>;
@@ -75,19 +75,19 @@ interface IPropertyFormViewModelScope extends ng.IScope {
     isGetFunctionValueType: boolean;
     invalidMandatoryFields: boolean;
 
-    validateJson(json:string):boolean;
-    save(doNotCloseModal?:boolean):void;
-    getValidationPattern(type:string):RegExp;
-    validateIntRange(value:string):boolean;
-    close():void;
-    onSchemaTypeChange():void;
-    onTypeChange(resetSchema:boolean):void;
-    showSchema():boolean;
-    delete(property:PropertyModel):void;
-    getPrev():void;
-    getNext():void;
-    isSimpleType(typeName:string):boolean;
-    getDefaultValue():any;
+    validateJson(json: string): boolean;
+    save(doNotCloseModal?: boolean): void;
+    getValidationPattern(type: string): RegExp;
+    validateIntRange(value: string): boolean;
+    close(): void;
+    onSchemaTypeChange(): void;
+    onTypeChange(resetSchema: boolean): void;
+    showSchema(): boolean;
+    delete(property: PropertyModel): void;
+    getPrev(): void;
+    getNext(): void;
+    isSimpleType(typeName: string): boolean;
+    getDefaultValue(): any;
     onValueTypeChange(): void;
 }
 
@@ -436,19 +436,19 @@ export class PropertyFormViewModel {
             return typeName && this.$scope.editPropertyModel.simpleTypes.indexOf(typeName) != -1;
         };
 
-        this.$scope.showSchema = ():boolean => {
+        this.$scope.showSchema = (): boolean => {
             return [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP].indexOf(this.$scope.editPropertyModel.property.type) > -1;
         };
 
-        this.$scope.getValidationPattern = (type:string):RegExp => {
+        this.$scope.getValidationPattern = (type: string): RegExp => {
             return this.ValidationUtils.getValidationPattern(type);
         };
 
-        this.$scope.validateIntRange = (value:string):boolean => {
+        this.$scope.validateIntRange = (value: string): boolean => {
             return !value || this.ValidationUtils.validateIntRange(value);
         };
 
-        this.$scope.close = ():void => {
+        this.$scope.close = (): void => {
             this.$uibModalInstance.close();
         };
 
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
index 682c7a9b7c..d7c2af5b6e 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
@@ -211,25 +211,25 @@
 
                             <div ng-switch-default>
                                 <div class="i-sdc-form-item"
-                                     data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid), 'input-group' : editPropertyModel.property.addOn}">
+                                    data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid), 'input-group' : editPropertyModel.property.addOn}">
                                     <span ng-if="editPropertyModel.property.addOn"
-                                          class="input-group-addon">{{editPropertyModel.property.addOn}}</span>
+                                        class="input-group-addon">{{editPropertyModel.property.addOn}}</span>
 
                                     <!-- Constraints any NOT Boolean -->
                                     <input class="i-sdc-form-input"
-                                           data-tests-id="defaultvalue"
-                                           ng-if="!((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')"
-                                           data-ng-maxlength="maxLength"
-                                           data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
-                                           maxlength="{{maxLength}}"
-                                           data-ng-model="editPropertyModel.property.value"
-                                           type="text"
-                                           name="value"
-                                           data-ng-pattern="getValidationPattern((editPropertyModel.property.simpleType||editPropertyModel.property.type))"
-                                           data-ng-model-options="{ debounce: 200 }"
-                                           data-ng-change="('json'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateJson(editPropertyModel.property.value)))
+                                        data-tests-id="defaultvalue"
+                                        ng-if="!((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')"
+                                        data-ng-maxlength="maxLength"
+                                        data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
+                                        maxlength="{{maxLength}}"
+                                        data-ng-model="editPropertyModel.property.value"
+                                        type="text"
+                                        name="value"
+                                        data-ng-pattern="getValidationPattern((editPropertyModel.property.simpleType||editPropertyModel.property.type))"
+                                        data-ng-model-options="{ debounce: 200 }"
+                                        data-ng-change="('json'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateJson(editPropertyModel.property.value)))
                                                         ||(!forms.editForm.value.$error.pattern && ('integer'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editPropertyModel.property.value))))"
-                                           autofocus/>
+                                        autofocus/>
                                     <!-- Boolean -->
                                     <select class="i-sdc-form-select"
                                             data-tests-id="booleantype"