Bladeren bron

AMBARI-15979 Provide UI validation for widget_name and description fields in Create/Edit Widget pop-up. (Keta Patel via atkach)

Andrii Tkach 9 jaren geleden
bovenliggende
commit
9bef76ba08

+ 54 - 4
ambari-web/app/controllers/main/service/widgets/create/step3_controller.js

@@ -18,6 +18,8 @@
 
 var App = require('app');
 
+var validator = require('utils/validator');
+
 App.WidgetWizardStep3Controller = Em.Controller.extend({
   name: "widgetWizardStep3Controller",
 
@@ -28,11 +30,26 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({
    */
   widgetName: '',
 
+  /**
+   * @type {boolean}
+   */
+  isNameInvalid: false,
+
   /**
    * @type {string}
    */
   widgetAuthor: '',
 
+  /**
+   * @type {string}
+   */
+  widgetNameErrorMessage: '',
+
+  /**
+   * @type {string}
+   */
+  descriptionErrorMessage: '',
+
   /**
    * @type {boolean}
    */
@@ -53,6 +70,11 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({
    */
   widgetDescription: '',
 
+  /**
+   * @type {boolean}
+   */
+  isDescriptionInvalid: false,
+
   /**
    * actual values of properties in API format
    * @type {object}
@@ -82,14 +104,42 @@ App.WidgetWizardStep3Controller = Em.Controller.extend({
   isSubmitDisabled: Em.computed.or('widgetNameEmpty', 'isNameInvalid', 'isDescriptionInvalid'),
 
   /**
-   * @type {boolean}
+   * validates the name on 3rd step
    */
-  isNameInvalid: Em.computed.gte('widgetName.length', 129),
+  validateName: function(){
+    var errorMessage='';
+    var widgetName = this.get('widgetName');
+    this.set("isNameInvalid",false);
+    if(widgetName && widgetName.length > 128){
+      errorMessage = Em.I18n.t("widget.create.wizard.step3.name.invalid.msg");
+      this.set("isNameInvalid",true);
+    }
+
+    if(widgetName && !validator.isValidWidgetName(widgetName)){
+      errorMessage = Em.I18n.t("widget.create.wizard.step3.name.invalidCharacter.msg");
+      this.set("isNameInvalid",true);
+    }
+    this.set('widgetNameErrorMessage',errorMessage);
+  }.observes('widgetName'),
 
   /**
-   * @type {boolean}
+   * validates the description on 3rd step
    */
-  isDescriptionInvalid: Em.computed.gte('widgetDescription.length', 2049),
+  validateDescription: function(){
+    var errorMessage='';
+    var widgetDescription = this.get('widgetDescription');
+    this.set("isDescriptionInvalid",false);
+    if(widgetDescription && widgetDescription.length > 2048){
+      errorMessage = Em.I18n.t("widget.create.wizard.step3.description.invalid.msg");
+      this.set("isDescriptionInvalid",true);
+    }
+
+    if(widgetDescription && !validator.isValidWidgetDescription(widgetDescription)){
+      errorMessage = Em.I18n.t("widget.create.wizard.step3.description.invalidCharacter.msg");
+      this.set("isDescriptionInvalid",true);
+    }
+    this.set('descriptionErrorMessage',errorMessage);
+  }.observes('widgetDescription'),
 
   /**
    * restore widget data set on 2nd step

+ 2 - 0
ambari-web/app/messages.js

@@ -2844,7 +2844,9 @@ Em.I18n.translations = {
   'widget.create.wizard.step3.sharing.msg': 'Share this widget in the widget library',
   'widget.create.wizard.step3.header': 'Name and Description',
   'widget.create.wizard.step3.name.invalid.msg': 'Widget name is too long. Please enter a widget name less than 129 characters.',
+  'widget.create.wizard.step3.name.invalidCharacter.msg': 'Invalid widget name. Only alphanumerics, underscores, hyphens, percentage and spaces are allowed.',
   'widget.create.wizard.step3.description.invalid.msg': 'Description is too long. Please enter a description less than 2049 characters.',
+  'widget.create.wizard.step3.description.invalidCharacter.msg': 'Invalid input. Only alphanumerics, underscores, hyphens, percentage and spaces are allowed.',
 
   'widget.edit.wizard.header': 'Edit Widget',
 

+ 3 - 3
ambari-web/app/templates/main/service/widgets/create/step3.hbs

@@ -25,7 +25,7 @@
       <div {{bindAttr class=":span10 isNameInvalid:error"}}>
         {{view Ember.TextField valueBinding="widgetName"}}
         {{#if isNameInvalid}}
-          <div>{{t widget.create.wizard.step3.name.invalid.msg}}</div>
+          <div>{{widgetNameErrorMessage}}</div>
         {{/if}}
       </div>
     </div>
@@ -50,7 +50,7 @@
       <div {{bindAttr class=":span10 isDescriptionInvalid:error"}}>
         {{view Ember.TextArea valueBinding="widgetDescription" class="description-text-area"}}
         {{#if isDescriptionInvalid}}
-          <div>{{t widget.create.wizard.step3.description.invalid.msg}}</div>
+          <div>{{descriptionErrorMessage}}</div>
         {{/if}}
       </div>
     </div>
@@ -62,4 +62,4 @@
     <button id="add-widget-step3-save" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action "complete" target="controller"}}>{{t common.save}}</button>
     <button id="add-widget-step3-cancel" class="btn pull-right" {{action "cancel" target="controller"}}>{{t common.cancel}}</button>
   </div>
-</div>
+</div>

+ 20 - 0
ambari-web/app/utils/validator.js

@@ -292,5 +292,25 @@ module.exports = {
     var remotePattern = /^(?:(?:https?|ftp):\/{2})(?:\S+(?::\S*)?@)?(?:(?:(?:[\w\-.]))*)(?::[0-9]+)?(?:\/\S*)?$/,
       localPattern = /^file:\/{2,3}([a-zA-Z][:|]\/){0,1}[\w~!*'();@&=\/\\\-+$,?%#.\[\]]+$/;
     return remotePattern.test(value) || localPattern.test(value);
+  },
+
+  /**
+   * Validate widget name
+   * @param {string} value
+   * @returns {boolean}
+   */
+  isValidWidgetName: function(value) {
+    var widgetNameRegex = /^[\s0-9a-z_\-%]+$/i;
+    return widgetNameRegex.test(value);
+  },
+
+  /**
+   * Validate widget description
+   * @param {string} value
+   * @returns {boolean}
+   */
+  isValidWidgetDescription: function(value) {
+    var widgetDescriptionRegex = /^[\s0-9a-z_\-%]+$/i;
+    return widgetDescriptionRegex.test(value);
   }
 };

File diff suppressed because it is too large
+ 63 - 2
ambari-web/test/controllers/main/service/widgets/create/step3_controller_test.js


Some files were not shown because too many files changed in this diff