ATLAS-3636 : [Namespace-UI] Issues/ambiguous error messages while adding a new…

dashboardv3/public/css/scss/common.scss

@@ -228,7 +228,6 @@ pre {
         .custom-col-1,
         .custom-col-2 {
             vertical-align: top;
-            display: inline-block;
 
             textarea {
                 resize: vertical;
@@ -254,8 +253,13 @@ pre {
         .custom-col-2 {
             text-align: center;
             width: 17%;
-            margin-left: 1%;
+            padding-left: 1%;
             margin-bottom: 10px;
+
+            &>button {
+                padding: 7px 10px;
+                margin-bottom: 10px;
+            }
         }
     }
 }

dashboardv3/public/css/scss/namespace.scss

@@ -30,7 +30,7 @@
                     width: 35%;
                 }
 
-                word-break: break-all;
+                word-break: break-word;
             }
         }
 

dashboardv3/public/js/templates/entity/EntityNameSpaceItemView_tmpl.html

@@ -15,21 +15,25 @@
  * limitations under the License.
 -->
 {{#ifCond model "has" "isNew"}}
-<td class="custom-col-1">
+<table class="custom-table" style="font-weight: 100;">
+    <tr class="custom-tr">
+        <td class="custom-col-1">
             {{{callmyfunction getNamespaceDroupdown nameSpaceCollection}}}
-</td>
-<td class="custom-col-0"> : </td>
-<td class="custom-col-1" data-id="value">
+        </td>
+        <td class="custom-col-0"> : </td>
+        <td class="custom-col-1" data-id="value">
             <input type="text" data-key disabled class="form-control">
-</td>
-<td class="custom-col-2 btn-group">
+        </td>
+        <td class="custom-col-2 btn-group">
             <button class="btn btn-default btn-sm" data-id="deleteItem">
                 <i class="fa fa-minus"> </i>
             </button>
             <button class="btn btn-default btn-sm" data-id="addItem">
                 <i class="fa fa-plus"> </i>
             </button>
-</td>
+        </td>
+    </tr>
+</table>
 {{else}}
 <hr />
 <ul class="namespace-tree-parent">

dashboardv3/public/js/templates/entity/EntityNameSpaceView_tmpl.html

@@ -24,7 +24,7 @@
         </div>
     </div>
     <div class="panel-actions">
-        <button class="btn btn-action btn-sm" title="" data-id="addNameSpace">Add</button>
+        <button class="btn btn-action btn-sm" data-id="addNameSpace">Add</button>
         <button class="btn btn-action btn-sm" style="display: none;" data-id="saveNameSpace">Save</button>
         <button class="btn btn-action btn-sm" style="display: none;" data-id="cancel">Cancel</button>
     </div>
@@ -35,9 +35,7 @@
                 <div class="form-group">
                     <a href="javascript:void(0)" class="btn btn-action btn-sm" data-id="addItem" data-type="addAttrButton">Add New Attribute</a>
                 </div>
-                <table class="custom-table">
-                    <tbody data-id="itemView"></tbody>
-                </table>
+                <ul class="namespace-tree-parent" data-id="itemView"></ul>
             </div>
         </div>
     </div>

dashboardv3/public/js/templates/name_space/NameSpaceAttributeItemView_tmpl.html

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="form-group clearfix namespace-attr">
+<div id="{{modalID}}" class="form-group clearfix namespace-attr">
     <div class="form-group">
         <div class="col-sm-12 attributePlusData " align="right">
             <button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button>

dashboardv3/public/js/views/entity/EntityNameSpaceItemView.js

@@ -38,8 +38,8 @@ define(['require',
                 model: this.model.toJSON()
             }
         },
-        tagName: 'tr',
-        className: "custom-tr",
+        tagName: 'li',
+        className: "namespace-tree-child",
 
         /** Layout sub regions */
         regions: {},
@@ -142,9 +142,10 @@ define(['require',
                 });
             }
         },
-        getAttrElement: function(options) {
+        getAttrElement: function(opt) {
             var that = this,
-                returnEL = "N/A";
+                returnEL = "N/A",
+                options = $.extend(true, {}, opt);
             if (options) {
                 var key = options.key,
                     typeName = options.val.typeName || "",
@@ -153,24 +154,21 @@ define(['require',
                     namespace = options.namespace,
                     allowOnlyNum = false;
                 var elType = isMultiValued ? "select" : "input";
-                if (!_.isEmpty(val)) {
+                if (!isMultiValued && !_.isEmpty(val)) {
                     val = _.escape(val);
                 }
                 if (!_.isUndefinedNull(val) && typeName.indexOf("boolean") > -1) {
                     val = String(val);
                 }
                 if (typeName.indexOf("date") > -1) {
-                    if (isMultiValued && val) {
-                        var dateVlaues = val.split(',');
-                        if (dateVlaues.length) {
+                    if (isMultiValued && val && val.length) {
                         var dateStr = [];
-                            _.each(dateVlaues, function(selectedDate) {
+                        _.each(val, function(selectedDate) {
                             selectedDate = parseInt(selectedDate);
                             dateStr.push(moment(selectedDate).format("MM/DD/YYYY"));
                         });
                         val = dateStr.join(',');
-                        }
-                    } else if (val) {
+                    } else if (!isMultiValued && val) {
                         val = parseInt(val);
                         val = moment(val).format("MM/DD/YYYY");
                     }
@@ -199,13 +197,14 @@ define(['require',
                     allowOnlyNum = true;
                     returnEL = '<' + elType + ' data-key="' + key + '" data-namespace="' + namespace + '" data-typename="' + typeName + '" type="number" data-multi="' + isMultiValued + '" data-tags="true" placeholder="Enter Number" class="form-control" ' + (!_.isUndefinedNull(val) ? 'value="' + val + '"' : "") + '></' + elType + '>';
                 } else if (typeName) {
+                    var modTypeName = typeName;
                     if (isMultiValued) {
                         var multipleType = typeName.match("array<(.*)>");
                         if (multipleType && multipleType[1]) {
-                            typeName = multipleType[1];
+                            modTypeName = multipleType[1];
                         }
                     }
-                    var foundEnumType = this.enumDefCollection.fullCollection.find({ name: typeName });
+                    var foundEnumType = this.enumDefCollection.fullCollection.find({ name: modTypeName });
                     if (foundEnumType) {
                         var enumOptions = "";
                         _.forEach(foundEnumType.get("elementDefs"), function(obj) {
@@ -214,15 +213,17 @@ define(['require',
                         returnEL = '<select data-key="' + key + '" data-namespace="' + namespace + '" data-typename="' + typeName + '" data-multi="' + isMultiValued + '" >' + enumOptions + '</select>';
                     }
                     setTimeout(function() {
+                        if (!isMultiValued) {
                             var selectEl = that.$el.find('.custom-col-1[data-id="value"] select[data-key="' + key + '"]');
                             selectEl.val((val || ""));
                             selectEl.select2();
+                        }
                     }, 0);
                 }
                 if (isMultiValued) {
                     setTimeout(function() {
                         var selectEl = that.$el.find('.custom-col-1[data-id="value"] select[data-key="' + key + '"][data-multi="true"]');
-                        var data = val && val.split(",") || [];
+                        var data = val && val.length && (_.isArray(val) ? val : val.split(",")) || [];
                         if (allowOnlyNum) {
                             selectEl.parent().addClass("select2_only_number");
                         }
@@ -323,7 +324,7 @@ define(['require',
                         '<button class="btn btn-default btn-sm" data-key="' + key + '" data-id="deleteItem">' +
                         '<i class="fa fa-times"> </i>' +
                         '</button></td>';
-                    trs += "<tr>" + td + "</tr>";
+                    trs += "<tr class='custom-tr'>" + td + "</tr>";
                 }
             })
             this.$("[data-id='namespaceTreeChild']").html("<table class='custom-table'>" + trs + "</table>");

dashboardv3/public/js/views/entity/EntityNameSpaceView.js

@@ -117,10 +117,8 @@ define([
                 this.$el.find(".panel-heading").addClass("collapsed");
                 this.$el.find(".panel-collapse.collapse").removeClass("in");
                 this.ui.addNameSpace.text("Add");
-                this.ui.addNameSpace.attr("data-original-title", "Add");
             } else {
                 this.ui.addNameSpace.text("Edit");
-                this.ui.addNameSpace.attr("data-original-title", "Edit All");
                 this.$el.find(".panel-heading").removeClass("collapsed");
                 this.$el.find(".panel-collapse.collapse").addClass("in");
             }
@@ -157,8 +155,13 @@ define([
             if (!this.validate()) {
                 return;
             }
+            var nData = this.generateData();
+            if (this.actualCollection.length === 0 && _.isEmpty(nData)) {
+                this.onCancel();
+                return;
+            }
             this.entityModel.saveNamespaceEntity(this.guid, {
-                data: JSON.stringify(this.generateData()),
+                data: JSON.stringify(nData),
                 type: "POST",
                 success: function(data) {
                     Utils.notifySuccess({

dashboardv3/public/js/views/name_space/EnumCreateUpdateItemView.js

@@ -89,12 +89,20 @@ define(["require", "backbone", "hbs!tmpl/name_space/EnumCreateUpdateItemView_tmp
                     entitytypes = "",
                     enumTypes = [];
                 this.ui.enumValueSelectorContainer.hide();
+                this.bindEvents();
                 this.emumTypeSelectDisplay();
                 if (!this.options.closeModal) {
                     this.ui.enumCancleBtn.attr("disabled", "true");
                     this.ui.enumCancleBtn.text("Clear");
                 }
             },
+            bindEvents: function() {
+                var that = this;
+                this.listenTo(this.enumDefCollection, 'reset', function() {
+                    that.emumTypeSelectDisplay();
+                })
+            },
+
             showEnumValues: function(enumName) {
                 var enumValues = "",
                     selectedValues = [],
@@ -225,7 +233,8 @@ define(["require", "backbone", "hbs!tmpl/name_space/EnumCreateUpdateItemView_tmp
                                 content: "Enumeration " + selectedEnumName + " updated successfully"
                             });
                         }
-                        if (that.options.onUpdateEnum) {
+                        that.enumDefCollection.fetch({ reset: true });
+                        if (that.options.onUpdateEnum) { //callback from namespaceattributeItemView
                             that.options.onUpdateEnum();
                         }
                         that.ui.enumCancleBtn.attr("disabled", "true");

dashboardv3/public/js/views/name_space/NameSpaceAttributeItemView.js

@@ -30,6 +30,11 @@ define(['require',
         {
 
             template: NameSpaceAttributeItemViewTmpl,
+            templateHelpers: function() {
+                return {
+                    modalID: this.viewId
+                };
+            },
 
             /** Layout sub regions */
             regions: {},
@@ -109,12 +114,14 @@ define(['require',
              */
             initialize: function(options) {
                 this.parentView = options.parentView;
+                this.viewId = options.model ? options.model.cid : this.parentView.cid;
 
             },
             onRender: function() {
                 var that = this,
                     entitytypes = '',
                     enumTypes = [];
+                this.model.set({ "modalID": this.viewId });
                 this.parentView.typeHeaders.fullCollection.each(function(model) {
                     if (model.toJSON().category == "ENTITY") {
                         that.ui.entityTypeSelector.append("<option>" + model.get('name') + "</option>");

dashboardv3/public/js/views/name_space/NameSpaceTableLayoutView.js

@@ -151,15 +151,15 @@ define(['require',
             },
             onEditAttr: function(e) {
                 var that = this,
-                    isAttrEdit = e.target.dataset && e.target.dataset.id === 'attributeEdit' ? true : false,
-                    guid = e.target.dataset && e.target.dataset.guid ? e.target.dataset.guid : null,
+                    isAttrEdit = e.currentTarget.dataset && e.currentTarget.dataset.id === 'attributeEdit' ? true : false,
+                    guid = e.currentTarget.dataset && e.currentTarget.dataset.guid ? e.currentTarget.dataset.guid : null,
                     selectedNamespace = that.nameSpaceCollection.fullCollection.findWhere({ guid: guid }),
                     attrributes = selectedNamespace ? selectedNamespace.get('attributeDefs') : null,
-                    attrName = e.target.dataset.name ? e.target.dataset.name : null,
+                    attrName = e.currentTarget.dataset.name ? e.currentTarget.dataset.name : null,
                     attrDetails = { name: attrName };
                 if (selectedNamespace) {
                     that.ui.namespaceAttrPageOk.text("Save");
-                    that.newAttr = e.target && e.target.dataset.action === "createAttr" ? true : false;
+                    that.newAttr = e.currentTarget && e.currentTarget.dataset.action === "createAttr" ? true : false;
                     that.guid = guid;
                     _.each(attrributes, function(attrObj) {
                         if (attrObj.name === attrName) {
@@ -176,7 +176,7 @@ define(['require',
 
                     that.showDetails = false;
                     that.toggleNamespaceDetailsAttrView();
-                    that.ui.namespaceAttrPageOk.attr('data-action', e.target.dataset.id);
+                    that.ui.namespaceAttrPageOk.attr('data-action', e.currentTarget.dataset.id);
                     require(["views/name_space/CreateNameSpaceLayoutView"], function(CreateNameSpaceLayoutView) {
                         that.view = new CreateNameSpaceLayoutView({
                             onEditCallback: function() {