ATLAS-1756: UI update to allow user to edit tag attribute values

Signed-off-by: Madhan Neethiraj <madhan@apache.org>
diff --git a/dashboardv2/public/css/scss/main.scss b/dashboardv2/public/css/scss/main.scss
index 3e6e77f..4b73577 100644
--- a/dashboardv2/public/css/scss/main.scss
+++ b/dashboardv2/public/css/scss/main.scss
@@ -188,6 +188,9 @@
     background-color: $transparent;
     border: 1px solid $color_jungle_green_approx;
     cursor: pointer;
+    &+.auditDetailBtn {
+        margin-left: 5px;
+    }
 }
 
 .add-seperator {
@@ -315,6 +318,10 @@
         &.editbutton[data-id="editButton"] {
             display: none !important;
         }
+        &[data-id="delete"],
+        &[data-id="edit"] {
+            display: none;
+        }
     }
 }
 
@@ -340,3 +347,39 @@
 .no-padding {
     padding: 0px !important;
 }
+
+.no-padding-bottom {
+    padding-bottom: 0px !important;
+}
+
+.no-padding-top {
+    padding-top: 0px !important;
+}
+
+.no-padding-left {
+    padding-left: 0px !important;
+}
+
+.no-padding-right {
+    padding-right: 0px !important;
+}
+
+.no-margin {
+    margin: 0px !important;
+}
+
+.no-margin-bottom {
+    margin-bottom: 0px !important;
+}
+
+.no-margin-top {
+    margin-top: 0px !important;
+}
+
+.no-margin-left {
+    margin-left: 0px !important;
+}
+
+.no-margin-right {
+    margin-right: 0px !important;
+}
diff --git a/dashboardv2/public/js/main.js b/dashboardv2/public/js/main.js
index 39e6d57..6d7d6fa 100644
--- a/dashboardv2/public/js/main.js
+++ b/dashboardv2/public/js/main.js
@@ -168,15 +168,19 @@
     'select2'
 ], function(App, Router, CommonViewFunction, Globals, UrlLinks, VEntityList, VTagList) {
     var that = this;
-    this.asyncFetchCounter = 3;
+    this.asyncFetchCounter = 4;
     this.entityDefCollection = new VEntityList();
     this.entityDefCollection.url = UrlLinks.entitiesDefApiUrl();
     this.typeHeaders = new VTagList();
     this.typeHeaders.url = UrlLinks.typesApiUrl();
+    this.enumDefCollection = new VTagList();
+    this.enumDefCollection.url = UrlLinks.enumDefApiUrl();
+    this.enumDefCollection.modelAttrName = "enumDefs";
 
     App.appRouter = new Router({
         entityDefCollection: this.entityDefCollection,
-        typeHeaders: this.typeHeaders
+        typeHeaders: this.typeHeaders,
+        enumDefCollection: this.enumDefCollection
     });
 
     var startApp = function() {
@@ -228,4 +232,11 @@
             startApp();
         }
     });
+    this.enumDefCollection.fetch({
+        skipDefaultError: true,
+        complete: function() {
+            --that.asyncFetchCounter;
+            startApp();
+        }
+    });
 });
diff --git a/dashboardv2/public/js/models/VEntity.js b/dashboardv2/public/js/models/VEntity.js
index 88310ab..aa8dbc4 100644
--- a/dashboardv2/public/js/models/VEntity.js
+++ b/dashboardv2/public/js/models/VEntity.js
@@ -52,8 +52,8 @@
 
             return this.constructor.nonCrudOperation.call(this, url, 'GET', options);
         },
-        saveTraitsEntity: function(options) {
-            var url = UrlLinks.entitiesTraitsApiUrl();
+        saveTraitsEntity: function(token, options) {
+            var url = UrlLinks.entitiesTraitsApiUrl(token);
             options = _.extend({
                 contentType: 'application/json',
                 dataType: 'json'
diff --git a/dashboardv2/public/js/router/Router.js b/dashboardv2/public/js/router/Router.js
index db5bc1f..6bec26d 100644
--- a/dashboardv2/public/js/router/Router.js
+++ b/dashboardv2/public/js/router/Router.js
@@ -42,12 +42,17 @@
             '*actions': 'defaultAction'
         },
         initialize: function(options) {
-            _.extend(this, _.pick(options, 'entityDefCollection', 'typeHeaders'));
+            _.extend(this, _.pick(options, 'entityDefCollection', 'typeHeaders', 'enumDefCollection'));
             this.showRegions();
             this.bindCommonEvents();
             this.listenTo(this, 'route', this.postRouteExecute, this);
             this.tagCollection = new VTagList();
             this.searchVent = new Backbone.Wreqr.EventAggregator();
+            this.preFetchedCollectionLists = {
+                'entityDefCollection': this.entityDefCollection,
+                'typeHeaders': this.typeHeaders,
+                'enumDefCollection': this.enumDefCollection
+            }
         },
         bindCommonEvents: function() {
             var that = this;
@@ -110,17 +115,29 @@
                     var paramObj = Utils.getUrlState.getQueryParams();
                     this.collection = new VCatalogList();
                     this.collection.url = url;
-                    App.rNHeader.show(new BusinessCatalogHeader({ 'url': url, 'collection': this.collection }));
+                    App.rNHeader.show(new BusinessCatalogHeader(
+                        _.extend({
+                            'url': url,
+                            'collection': this.collection
+                        }, that.preFetchedCollectionLists)
+                    ));
                     if (!App.rSideNav.currentView) {
-                        App.rSideNav.show(new SideNavLayoutView({ 'url': url, 'collection': that.tagCollection, 'typeHeaders': that.typeHeaders }));
+                        App.rSideNav.show(new SideNavLayoutView(
+                            _.extend({
+                                'url': url,
+                                'collection': that.tagCollection
+                            }, that.preFetchedCollectionLists)
+                        ));
                     } else {
                         App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender("/" + url);
                         App.rSideNav.currentView.selectTab();
                     }
-                    App.rNContent.show(new BusinessCatalogDetailLayoutView({
-                        'url': url,
-                        'collection': this.collection
-                    }));
+                    App.rNContent.show(new BusinessCatalogDetailLayoutView(
+                        _.extend({
+                            'url': url,
+                            'collection': this.collection
+                        }, that.preFetchedCollectionLists)
+                    ));
                     this.collection.fetch({ reset: true });
                 } else {
                     that.defaultAction()
@@ -139,16 +156,18 @@
                     this.entityCollection = new VEntityList([], {});
                     App.rNHeader.show(new Header());
                     if (!App.rSideNav.currentView) {
-                        App.rSideNav.show(new SideNavLayoutView({ 'collection': that.tagCollection, 'typeHeaders': that.typeHeaders }));
+                        App.rSideNav.show(new SideNavLayoutView(
+                            _.extend({
+                                'collection': that.tagCollection,
+                            }, that.preFetchedCollectionLists)
+                        ));
                     } else {
                         App.rSideNav.currentView.selectTab();
                     }
-                    App.rNContent.show(new DetailPageLayoutView({
+                    App.rNContent.show(new DetailPageLayoutView(_.extend({
                         'collection': this.entityCollection,
                         'id': id,
-                        'entityDefCollection': that.entityDefCollection,
-                        'typeHeaders': that.typeHeaders
-                    }));
+                    }, that.preFetchedCollectionLists)));
                     this.entityCollection.url = UrlLinks.entitiesApiUrl(id);
                     this.entityCollection.fetch({ reset: true });
                 });
@@ -164,23 +183,24 @@
             ], function(Header, BusinessCatalogLayoutView, SideNavLayoutView, TagDetailLayoutView) {
                 App.rNHeader.show(new Header());
                 if (!App.rSideNav.currentView) {
-                    App.rSideNav.show(new SideNavLayoutView({
-                        'tag': tagName,
-                        'typeHeaders': that.typeHeaders,
-                        'collection': that.tagCollection
-                    }));
+                    App.rSideNav.show(new SideNavLayoutView(
+                        _.extend({
+                            'tag': tagName,
+                            'collection': that.tagCollection
+                        }, that.preFetchedCollectionLists)
+                    ));
                 } else {
                     App.rSideNav.currentView.RTagLayoutView.currentView.manualRender(tagName);
                     App.rSideNav.currentView.selectTab();
                 }
 
                 if (tagName) {
-                    App.rNContent.show(new TagDetailLayoutView({
-                        'tag': tagName,
-                        'entityDefCollection': that.entityDefCollection,
-                        'collection': that.tagCollection,
-                        'typeHeaders': that.typeHeaders
-                    }));
+                    App.rNContent.show(new TagDetailLayoutView(
+                        _.extend({
+                            'tag': tagName,
+                            'collection': that.tagCollection,
+                        }, that.preFetchedCollectionLists)
+                    ));
                 }
             });
         },
@@ -195,10 +215,11 @@
                 var paramObj = Utils.getUrlState.getQueryParams();
                 App.rNHeader.show(new Header());
                 if (!App.rSideNav.currentView) {
-                    App.rSideNav.show(new SideNavLayoutView({
-                        'collection': that.tagCollection,
-                        'typeHeaders': that.typeHeaders
-                    }));
+                    App.rSideNav.show(new SideNavLayoutView(
+                        _.extend({
+                            'collection': that.tagCollection
+                        }, that.preFetchedCollectionLists)
+                    ));
                 } else {
                     App.rSideNav.currentView.selectTab();
                     if (Utils.getUrlState.isTagTab()) {
@@ -208,12 +229,12 @@
                     }
                 }
                 if (Globals.entityCreate && Utils.getUrlState.isSearchTab()) {
-                    App.rNContent.show(new SearchDetailLayoutView({
-                        'value': paramObj,
-                        'entityDefCollection': that.entityDefCollection,
-                        'initialView': true,
-                        'typeHeaders': that.typeHeaders
-                    }))
+                    App.rNContent.show(new SearchDetailLayoutView(
+                        _.extend({
+                            'value': paramObj,
+                            'initialView': true
+                        }, that.preFetchedCollectionLists)
+                    ));
                 } else {
                     App.rNContent.$el.html("");
                     App.rNContent.destroy();
@@ -231,23 +252,24 @@
                 var paramObj = Utils.getUrlState.getQueryParams();
                 App.rNHeader.show(new Header());
                 if (!App.rSideNav.currentView) {
-                    App.rSideNav.show(new SideNavLayoutView({
-                        'value': paramObj,
-                        'collection': that.tagCollection,
-                        'searchVent': that.searchVent,
-                        'typeHeaders': that.typeHeaders
-                    }));
+                    App.rSideNav.show(new SideNavLayoutView(
+                        _.extend({
+                            'value': paramObj,
+                            'collection': that.tagCollection,
+                            'searchVent': that.searchVent
+                        }, that.preFetchedCollectionLists)
+                    ));
                 } else {
                     App.rSideNav.currentView.RSearchLayoutView.currentView.manualRender(paramObj);
                 }
                 App.rSideNav.currentView.selectTab();
-                App.rNContent.show(new SearchDetailLayoutView({
-                    'value': paramObj,
-                    'entityDefCollection': that.entityDefCollection,
-                    'typeHeaders': that.typeHeaders,
-                    'searchVent': that.searchVent,
-                    'initialView': (paramObj.type || (paramObj.dslChecked == "true" ? "" : paramObj.tag) || (paramObj.query ? paramObj.query.trim() : "")).length === 0
-                }));
+                App.rNContent.show(new SearchDetailLayoutView(
+                    _.extend({
+                        'value': paramObj,
+                        'searchVent': that.searchVent,
+                        'initialView': (paramObj.type || (paramObj.dslChecked == "true" ? "" : paramObj.tag) || (paramObj.query ? paramObj.query.trim() : "")).length === 0
+                    }, that.preFetchedCollectionLists)
+                ));
             });
         },
         defaultAction: function(actions) {
diff --git a/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html b/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
index 3ca2658..cce584a 100644
--- a/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
+++ b/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
@@ -16,8 +16,11 @@
 -->
 <div>
     <div class="form-group hide">
+        {{#if tagModel}}
+        <h4>{{tagModel.typeName}}</h4> {{else}}
         <select class="form-control row-margin-bottom" data-id="addTagOptions" required>
         </select>
+        {{/if}}
     </div>
     <div class="row modalHeight">
         <div class="col-sm-12">
diff --git a/dashboardv2/public/js/utils/UrlLinks.js b/dashboardv2/public/js/utils/UrlLinks.js
index bdeda8d..82bd082 100644
--- a/dashboardv2/public/js/utils/UrlLinks.js
+++ b/dashboardv2/public/js/utils/UrlLinks.js
@@ -52,6 +52,14 @@
                 return entitieDefUrl.defs + '?type=entity';
             }
         },
+        enumDefApiUrl: function(name) {
+            var enumDefApiUrl = this.typedefsUrl();
+            if (name) {
+                return enumDefApiUrl.def + '/name/' + name + '?type=enum';
+            } else {
+                return enumDefApiUrl.defs + '?type=enum';
+            }
+        },
         entitiesTraitsApiUrl: function(token) {
             if (token) {
                 return this.baseUrlV2 + '/entity/guid/' + token + '/classifications';
diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
index dc3ae4c..d44962f 100644
--- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
@@ -104,7 +104,7 @@
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'collection', 'id', 'entityDefCollection', 'typeHeaders'));
+                _.extend(this, _.pick(options, 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection'));
                 this.bindEvents();
             },
             bindEvents: function() {
@@ -171,7 +171,8 @@
                         entityName: this.name,
                         typeHeaders: this.typeHeaders,
                         entityDefCollection: this.entityDefCollection,
-                        fetchCollection: this.fetchCollection.bind(that)
+                        fetchCollection: this.fetchCollection.bind(that),
+                        enumDefCollection: this.enumDefCollection
                     }
                     this.getEntityDef(obj);
                     this.renderTagTableLayoutView(obj);
@@ -325,7 +326,8 @@
                             that.fetchCollection();
                         },
                         showLoader: that.showLoader.bind(that),
-                        hideLoader: that.hideLoader.bind(that)
+                        hideLoader: that.hideLoader.bind(that),
+                        enumDefCollection: that.enumDefCollection
                     });
                     view.modal.on('ok', function() {
                         Utils.showTitleLoader(that.$('.page-title .fontLoader'), that.$('.entityDetail'));
diff --git a/dashboardv2/public/js/views/schema/SchemaLayoutView.js b/dashboardv2/public/js/views/schema/SchemaLayoutView.js
index e7f0f6e..60c2a6b 100644
--- a/dashboardv2/public/js/views/schema/SchemaLayoutView.js
+++ b/dashboardv2/public/js/views/schema/SchemaLayoutView.js
@@ -48,8 +48,7 @@
                 showMoreLess: '[data-id="showMoreLess"]',
                 showMoreLessTerm: '[data-id="showMoreLessTerm"]',
                 addAssignTag: "[data-id='addAssignTag']",
-                checkDeletedEntity: "[data-id='checkDeletedEntity']",
-
+                checkDeletedEntity: "[data-id='checkDeletedEntity']"
             },
             /** ui events hash */
             events: function() {
@@ -95,7 +94,7 @@
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'attribute', 'referredEntities', 'fetchCollection'));
+                _.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'attribute', 'referredEntities', 'fetchCollection', 'enumDefCollection'));
                 this.schemaCollection = new VSchemaList([], {});
                 this.commonTableOptions = {
                     collection: this.schemaCollection,
@@ -228,7 +227,7 @@
                         //     return this;
                         // }
                     });
-                    var columns = new columnCollection(that.getSchemaTableColumns());
+                    var columns = new columnCollection(that.getSchemaTableColumns(deleteEnity));
                     //columns.setPositions().sort();
                     that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
                         columns: columns
@@ -247,7 +246,7 @@
                     });
                 });
             },
-            getSchemaTableColumns: function() {
+            getSchemaTableColumns: function(deleteEnity) {
                 var that = this,
                     col = {
                         Check: {
@@ -271,7 +270,7 @@
                                         var value = model.get('attributes')[key];
                                         if (key === "name" && model.get('guid')) {
                                             var nameHtml = '<a href="#!/detailPage/' + model.get('guid') + '">' + value + '</a>';
-                                            if (model.get('status') && Enums.entityStateReadOnly[model.get('status')]) {
+                                            if (model.get('status') && Enums.entityStateReadOnly[model.get('status')] && deleteEnity) {
                                                 nameHtml += '<button type="button" title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i></button>';
                                                 return '<div class="readOnly readOnlyLink">' + nameHtml + '</div>';
                                             } else {
@@ -369,7 +368,8 @@
                             that.arr = [];
                         },
                         hideLoader: that.hideLoader.bind(that),
-                        showLoader: that.showLoader.bind(that)
+                        showLoader: that.showLoader.bind(that),
+                        enumDefCollection: that.enumDefCollection
                     });
                     // view.saveTagData = function() {
                     //override saveTagData function 
diff --git a/dashboardv2/public/js/views/search/SearchDetailLayoutView.js b/dashboardv2/public/js/views/search/SearchDetailLayoutView.js
index d44eb78..b22fae8 100644
--- a/dashboardv2/public/js/views/search/SearchDetailLayoutView.js
+++ b/dashboardv2/public/js/views/search/SearchDetailLayoutView.js
@@ -43,7 +43,7 @@
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent'));
+                _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection'));
             },
             bindEvents: function() {},
             onRender: function() {
@@ -61,7 +61,8 @@
                             initialView: that.initialView,
                             entityDefCollection: that.entityDefCollection,
                             typeHeaders: that.typeHeaders,
-                            searchVent: that.searchVent
+                            searchVent: that.searchVent,
+                            enumDefCollection: that.enumDefCollection
                         }));
                     }
                 });
diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
index 314e137..c014f71 100644
--- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js
+++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
@@ -126,7 +126,7 @@
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent'));
+                _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection'));
                 var pagination = "";
                 this.entityModel = new VEntity();
                 this.searchCollection = new VSearchList();
@@ -490,7 +490,8 @@
                         },
                         tagList: that.getTagList(guid, multiple),
                         showLoader: that.showLoader.bind(that),
-                        hideLoader: that.hideLoader.bind(that)
+                        hideLoader: that.hideLoader.bind(that),
+                        enumDefCollection: that.enumDefCollection
                     });
                 });
             },
diff --git a/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js b/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js
index 677058b..cdbd00f 100644
--- a/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js
+++ b/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js
@@ -43,6 +43,7 @@
                 detailValue: "[data-id='detailValue']",
                 addTag: "[data-id='addTag']",
                 deleteTag: "[data-id='delete']",
+                editTag: "[data-id='edit']",
             },
             /** ui events hash */
             events: function() {
@@ -53,6 +54,9 @@
                 events["click " + this.ui.deleteTag] = function(e) {
                     this.deleteTagDataModal(e);
                 };
+                events["click " + this.ui.editTag] = function(e) {
+                    this.editTagDataModal(e);
+                };
                 return events;
             },
             /**
@@ -60,7 +64,7 @@
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'entity', 'guid', 'term', 'entityName', 'fetchCollection'));
+                _.extend(this, _.pick(options, 'entity', 'guid', 'term', 'entityName', 'fetchCollection', 'enumDefCollection'));
                 this.collectionObject = this.entity;
                 this.tagTermCollection = new VTagList();
                 var tagorterm = _.toArray(this.collectionObject.classifications),
@@ -151,7 +155,7 @@
                             sortable: false,
                             formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                                 fromRaw: function(rawValue, model) {
-                                    return '<a href="javascript:void(0)"><i class="fa fa-trash" data-id="delete" data-name="' + model.get('typeName') + '"></i></a>';
+                                    return '<button class="btn btn-atlasAction btn-atlas no-margin-bottom typeLOV" data-id="delete" data-name="' + model.get('typeName') + '"><i class="fa fa-trash"></i></button> <button class="btn btn-atlasAction btn-atlas no-margin-bottom typeLOV" data-id="edit" data-name="' + model.get('typeName') + '"><i class="fa fa-pencil"></i></button>';
                                 }
                             })
                         },
@@ -164,7 +168,8 @@
                 require(['views/tag/addTagModalView'], function(AddTagModalView) {
                     var view = new AddTagModalView({
                         guid: that.guid,
-                        modalCollection: that.collection
+                        modalCollection: that.collection,
+                        enumDefCollection: that.enumDefCollection
                     });
                     // view.saveTagData = function() {
                     //override saveTagData function
@@ -218,6 +223,23 @@
 
                     }
                 });
+            },
+            editTagDataModal: function(e) {
+                var that = this,
+                    tagName = $(e.currentTarget).data('name'),
+                    tagModel = _.findWhere(that.collectionObject.classifications, { typeName: tagName });
+                require([
+                    'views/tag/addTagModalView'
+                ], function(AddTagModalView) {
+                    var view = new AddTagModalView({
+                        'tagModel': tagModel,
+                        callback: function() {
+                            that.fetchCollection();
+                        },
+                        guid: that.guid,
+                        'enumDefCollection': that.enumDefCollection
+                    });
+                });
             }
         });
     return TagDetailTableLayoutView;
diff --git a/dashboardv2/public/js/views/tag/addTagModalView.js b/dashboardv2/public/js/views/tag/addTagModalView.js
index 01e1dfd..7c6b85f 100644
--- a/dashboardv2/public/js/views/tag/addTagModalView.js
+++ b/dashboardv2/public/js/views/tag/addTagModalView.js
@@ -31,6 +31,11 @@
 
     var AddTagModel = Marionette.LayoutView.extend({
         template: AddTagModalViewTmpl,
+        templateHelpers: function() {
+            return {
+                tagModel: this.tagModel
+            };
+        },
 
         regions: {},
         ui: {
@@ -47,38 +52,40 @@
          * @constructs
          */
         initialize: function(options) {
-            var that = this;
-            _.extend(this, _.pick(options, 'modalCollection', 'guid', 'callback', 'multiple', 'showLoader', 'hideLoader', 'tagList'));
+            _.extend(this, _.pick(options, 'modalCollection', 'guid', 'callback', 'multiple', 'showLoader', 'hideLoader', 'tagList', 'tagModel', 'enumDefCollection'));
             this.collection = new VTagList();
             this.commonCollection = new VTagList();
-            this.enumCollection = new VTagList();
-            this.enumCollection.url = UrlLinks.typedefsUrl().defs;
-            this.enumCollection.modelAttrName = "enumDefs";
-            this.asyncAttrFetchCounter = 0;
-            this.asyncEnumFetchCounter = 2;
-            this.modal = new Modal({
-                title: 'Add Tag',
-                content: this,
-                okText: 'Add',
-                cancelText: "Cancel",
-                allowCancel: true,
-            }).open();
-            this.modal.$el.find('button.ok').attr("disabled", true);
+            var that = this,
+                modalObj = {
+                    title: 'Add Tag',
+                    content: this,
+                    okText: 'Add',
+                    cancelText: "Cancel",
+                    allowCancel: true,
+                },
+                state = this.tagModel ? false : true;
+            if (this.tagModel) {
+                modalObj.title = 'Edit Tag';
+                modalObj.okText = 'Update';
+            }
+            this.modal = new Modal(modalObj).open();
+            this.modal.$el.find('button.ok').attr("disabled", state);
             this.on('ok', function() {
-                var tagName = this.ui.addTagOptions.val();
-                var tagAttributes = {};
-                var tagAttributeNames = this.$(".attrName");
+                var tagName = this.tagModel ? this.tagModel.typeName : this.ui.addTagOptions.val(),
+                    tagAttributes = {},
+                    tagAttributeNames = this.$(".attrName"),
+                    obj = {
+                        tagName: tagName,
+                        tagAttributes: tagAttributes,
+                        guid: [],
+                        skipEntity: [],
+                        deletedEntity: []
+                    };
                 tagAttributeNames.each(function(i, item) {
                     var selection = $(item).data("key");
                     tagAttributes[selection] = $(item).val() || null;
                 });
-                var obj = {
-                    tagName: tagName,
-                    tagAttributes: tagAttributes,
-                    guid: [],
-                    skipEntity: [],
-                    deletedEntity: []
-                }
+
                 if (that.multiple) {
                     _.each(that.multiple, function(entity, i) {
                         var name = Utils.getName(entity.model);
@@ -172,22 +179,17 @@
 
         onRender: function() {
             var that = this;
-            $.extend(this.collection.queryParams, { type: 'TRAIT', notsupertype: 'TaxonomyTerm' });
+            $.extend(this.collection.queryParams, { type: 'classification' });
             this.hideAttributeBox();
             this.collection.fetch({
                 reset: true,
                 complete: function() {
-                    --that.asyncEnumFetchCounter;
-                    that.showAttributeBox(that.asyncEnumFetchCounter);
+                    if (that.tagModel) {
+                        that.fetchTagSubData(that.tagModel.typeName);
+                    }
+                    that.showAttributeBox();
                 },
             });
-            that.enumCollection.fetch({
-                complete: function() {
-                    --that.asyncEnumFetchCounter;
-                    that.showAttributeBox(that.asyncEnumFetchCounter);
-                },
-                reset: true
-            });
         },
         bindEvents: function() {
             var that = this;
@@ -213,7 +215,7 @@
                 }
                 // using obj.get('name') insted of name variable because if html is presen in name then escaped name will not found in tagList.
                 if (_.indexOf(that.tagList, obj.get('name')) === -1) {
-                    str += '<option>' + name + '</option>';
+                    str += '<option ' + (that.tagModel && that.tagModel.typeName === name ? 'selected' : '') + '>' + name + '</option>';
                 }
             });
             this.ui.addTagOptions.html(str);
@@ -232,24 +234,18 @@
             this.fetchTagSubData(tagname);
         },
         fetchTagSubData: function(tagname) {
-            var that = this;
-            ++this.asyncAttrFetchCounter;
-            this.commonCollection.url = UrlLinks.typesClassicationApiUrl(tagname);
-            this.commonCollection.fetch({
-                reset: true,
-                complete: function() {
-                    --that.asyncAttrFetchCounter;
-                    that.showAttributeBox();
-                }
+            var attributeDefs = Utils.getNestedSuperTypeObj({
+                data: this.collection.fullCollection.find({ name: tagname }).toJSON(),
+                collection: this.collection,
+                attrMerge: true
             });
+            this.subAttributeData(attributeDefs);
         },
-        showAttributeBox: function(counter) {
-            if ((counter || this.asyncAttrFetchCounter) === 0) {
-                this.$('.attrLoader').hide();
-                this.$('.form-group.hide').removeClass('hide');
-                if (this.ui.tagAttribute.children().length !== 0) {
-                    this.ui.tagAttribute.parent().show();
-                }
+        showAttributeBox: function() {
+            this.$('.attrLoader').hide();
+            this.$('.form-group.hide').removeClass('hide');
+            if (this.ui.tagAttribute.children().length !== 0) {
+                this.ui.tagAttribute.parent().show();
             }
         },
         hideAttributeBox: function() {
@@ -257,44 +253,26 @@
             this.ui.tagAttribute.parent().hide();
             this.$('.attrLoader').show();
         },
-        subAttributeData: function() {
+        subAttributeData: function(attributeDefs) {
             var that = this;
-            if (this.commonCollection.models[0]) {
-                if (this.commonCollection.models[0].get('attributeDefs')) {
-                    _.each(this.commonCollection.models[0].get('attributeDefs'), function(obj) {
-                        var name = Utils.getName(obj, 'name');
-                        var typeName = Utils.getName(obj, 'typeName');
-                        var typeNameValue = that.enumCollection.fullCollection.findWhere({ 'name': typeName });
-                        if (typeNameValue) {
-                            var str = "<option disabled='disabled' selected>-- Select " + typeName + " --</option>";
-                            var enumValue = typeNameValue.get('elementDefs');
-                            _.each(enumValue, function(key, value) {
-                                str += '<option>' + key.value + '</option>';
-                            })
-                            that.ui.tagAttribute.append('<div class="form-group"><label>' + name + '</label>' +
-                                '<select class="form-control attributeInputVal attrName" data-key="' + name + '">' + str + '</select></div>');
-                        } else {
-                            that.ui.tagAttribute.append('<div class="form-group"><label>' + name + '</label>' +
-                                '<input type="text" class="form-control attributeInputVal attrName" data-key="' + name + '" ></input></div>');
-                        }
-                    });
-                }
-                if (this.commonCollection.models[0].get('superTypes')) {
-                    var superTypes = this.commonCollection.models[0].get('superTypes');
-                    if (!_.isArray(superTypes)) {
-                        superTypes = [superTypes];
-                    }
-                    if (superTypes.length) {
-                        _.each(superTypes, function(name) {
-                            that.fetchTagSubData(name);
-                        });
+            if (attributeDefs) {
+                _.each(attributeDefs, function(obj) {
+                    var name = Utils.getName(obj, 'name');
+                    var typeName = Utils.getName(obj, 'typeName');
+                    var typeNameValue = that.enumDefCollection.fullCollection.findWhere({ 'name': typeName });
+                    if (typeNameValue) {
+                        var str = "<option disabled='disabled'" + (!that.tagModel ? 'selected' : '') + ">-- Select " + typeName + " --</option>";
+                        var enumValue = typeNameValue.get('elementDefs');
+                        _.each(enumValue, function(key, value) {
+                            str += '<option ' + (that.tagModel && key.value === _.values(that.tagModel.attributes)[0] ? 'selected' : '') + '>' + key.value + '</option>';
+                        })
+                        that.ui.tagAttribute.append('<div class="form-group"><label>' + name + '</label>' +
+                            '<select class="form-control attributeInputVal attrName" data-key="' + name + '">' + str + '</select></div>');
                     } else {
-                        this.showAttributeBox();
+                        that.ui.tagAttribute.append('<div class="form-group"><label>' + name + '</label>' +
+                            '<input type="text" value="' + (that.tagModel ? (that.tagModel.attributes[name] == null ? '' : that.tagModel.attributes[name]) : '') + '" class="form-control attributeInputVal attrName" data-key="' + name + '" ></input></div>');
                     }
-                } else {
-                    this.showAttributeBox();
-                }
-            } else {
+                });
                 this.showAttributeBox();
             }
         },
@@ -310,15 +288,23 @@
                     },
                     "entityGuids": options.guid
                 };
+            if (this.tagModel) {
+                json = [{
+                    "typeName": tagName,
+                    "attributes": tagAttributes
+                }]
+            }
             if (this.showLoader) {
                 this.showLoader();
             }
-            this.entityModel.saveTraitsEntity({
+            this.entityModel.saveTraitsEntity(this.tagModel ? options.guid : null, {
                 skipDefaultError: true,
                 data: JSON.stringify(json),
+                type: this.tagModel ? 'PUT' : 'POST',
                 success: function(data) {
+                    var addupdatetext = that.tagModel ? 'updated successfully to ' : 'added to ';
                     Utils.notifySuccess({
-                        content: "Tag " + tagName + " has been added to " + (that.multiple ? "entities" : "entity")
+                        content: "Tag " + tagName + " has been " + addupdatetext + (that.multiple ? "entities" : "entity")
                     });
                     if (options.modalCollection) {
                         options.modalCollection.fetch({ reset: true });