ATLAS-891 UI changes to implement Update term (Kalyanikashikar via yhemanth)

dashboardv2/public/css/scss/business-catlog.scss

 /* business-catlog.scss */
+
 .main-search {
     .form-control {
         border: none;
@@ -19,30 +20,6 @@
     }
 }
 
-.page-title {
-    background-color: $white;
-    padding: 50px;
-    h1 {
-        margin-top: 0;
-        margin-bottom: 20px;
-        font-weight: 600;
-        small {
-            position: relative;
-            bottom: 5px;
-            margin-left: 15px;
-            padding-left: 15px;
-            border-left: 1px $color_mystic_approx solid;
-            color: $color_bombay_approx;
-            font-size: 40%;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-    }
-    .sub-title {
-        margin-bottom: 40px;
-    }
-}
-
 .arrowPosition {
     left: -75px;
 }
@@ -92,6 +69,15 @@ ul[data-id=branchList] {
         background-color: $white;
     }
 }
-.listTerm{
-    padding-bottom:5px;
+
+.listTerm {
+    padding-bottom: 5px;
+}
+
+.lineageLabel {
+    padding-bottom: 10px;
+}
+
+.detailLabel {
+    padding-bottom: 10px;
 }

dashboardv2/public/css/scss/override.scss

@@ -8,7 +8,7 @@
 }
 
 .modal-header {
-    padding: 8px 15px;
+    padding: 15px;
     border-bottom: 1px solid #DEDEDE;
 }
 
@@ -20,7 +20,7 @@
 .modal-footer {
     padding: 15px;
     text-align: right;
-    border: none;
+    border: 1px solid #DEDEDE;
 }
 
 .modal-body {
@@ -45,7 +45,8 @@
     border-collapse: separate;
     border-radius: 6px;
     box-shadow: 0px 0px 4px #d8d8d8;
-    overflow: visible !important;
+    overflow: scroll !important;
+    max-height: 500px;
 }
 
 .table-quickMenu>thead>tr>th {

dashboardv2/public/css/scss/tag.scss

@@ -99,7 +99,7 @@
 
 .inputTag {
     display: inline-block;
-    padding: 5px 10px;
+    padding: 2px 10px;
     border: 1px $tag_color solid;
     color: $tag_color;
     font-size: 14px;
@@ -121,7 +121,7 @@
 }
 
 .addTagBase {
-    padding: 4px 8px;
+    padding: 2px 8px;
     border: 1px solid $action_gray;
     color: $action_gray;
     border-radius: 4px;
@@ -176,11 +176,10 @@
 
 .inputAttribute {
     display: inline-block;
-    padding: 5px 10px;
+    padding: 2px 10px;
     border: 1px $action_gray solid;
     color: $action_gray;
     font-size: 14px;
-    text-transform: uppercase;
     border-radius: 4px;
     margin-right: 3px;
     margin-bottom: 3px;
@@ -217,3 +216,42 @@ form-control .tagInpput {
         display: inline-block;
     }
 }
+
+.tagSpan,
+.termSpan {
+    float: left;
+    padding: 2px 10px 2px 0px;
+    font-weight: 600;
+    width: 45px
+}
+
+.attrLabel {
+    float: left;
+    padding: 2px 10px 2px 0px;
+    font-weight: 600;
+    width: 70px
+}
+
+.inputAssignTag {
+    display: inline-block;
+    padding: 2px 0px;
+    border: 1px $action_gray solid;
+    color: $action_gray;
+    font-size: 14px;
+    border-radius: 4px;
+    margin-right: 3px;
+    margin-bottom: 3px;
+    float: left;
+    cursor: pointer;
+    background-color: $white;
+    width: 100px;
+    i.fa {
+        position: relative;
+        right: -5px;
+        cursor: pointer;
+    }
+    &:hover {
+        color: $color_dark_grey_approx;
+        background-color: $color_mercury_approx;
+    }
+}

dashboardv2/public/css/scss/theme.scss

@@ -36,8 +36,8 @@
     background-color: $white;
     padding: 50px;
     h1 {
-        margin-top: 0;
-        margin-bottom: 20px;
+        margin-top: 50px;
+        margin-bottom: 10px;
         font-weight: 600;
         text-overflow: ellipsis;
         max-width: 91%;
@@ -105,7 +105,7 @@
 
 .backButton {
     display: block;
-    margin: 13px 13px;
+    margin: 0px 13px;
     &:hover {
         color: $color_jungle_green_approx;
     }

dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html

@@ -19,15 +19,16 @@
 </div>
 <div class="hide">
     <div class="page-title clearfix">
-        <h1><span data-id="title"></span><!-- <button style="display:none" data-id="editButton" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button> --></h1>
+        <h1><span data-id="title"></span></h1>
+        <button data-id="editButton" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
         <p class="sub-title" data-id="description">Description</p>
-        <div data-id="editBox" style="margin-bottom:10px;">
+        <!--  <div data-id="editBox" style="margin-bottom:10px;">
             <textarea class="well well-sm col-sm-12" data-id="descriptionTextArea"></textarea>
             <div class="clearfix" align="right">
-                <button class="btn-atlas" data-id="cancelButton">Cancel</button>
-                <button class="btn-atlas" data-id="publishButton">Publish</button>
-            </div>
+                <button class="btn btn-atlas cancel" data-id="cancelButton">Cancel</button>
+                <button class="btn btn-atlas ok" data-id="publishButton">Publish</button>
             </div>
+        </div> -->
     </div>
     <div class="container-fluid gray-bg">
         <div class="row">

dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html

@@ -27,15 +27,17 @@
         </div>
     </div>
     <div class="tagTerm">
+        <span class="tagSpan">Tags:</span>
         <div class="" data-id="tagList">
             <div class="addTag-dropdown" data-id="addTag">
-                <div class="addTagBase tagBox" data-id="addTagPlus"> Add Tag <i class="fa fa-plus"></i></div>
+                <div class="addTagBase tagBox" data-id="addTagPlus"><i class="fa fa-plus"></i></div>
             </div>
         </div>
-        <hr class=" termTagLine">
+        <hr class="termTagLine">
+        <span class="termSpan">Terms:</span>
         <div class="" data-id="termList">
             <div class="addTag-dropdown" data-id="addTerm">
-                <div class="addTagBase termBox" data-id="addTermPlus"> Add Term <i class="fa fa-plus"></i></div>
+                <div class="addTagBase termBox" data-id="addTermPlus"><i class="fa fa-plus"></i></div>
             </div>
         </div>
     </div>
@@ -44,6 +46,7 @@
     <div class="row">
         <div class="col-sm-10 col-sm-offset-1">
             <div class="atlast-tabbable">
+                <h4 class="lineageLabel">LINEAGE</h4>
                 <div class="panel panel-default lineageLayout">
                     <div id="r_lineageLayoutView"></div>
                 </div>
@@ -53,6 +56,7 @@
     <div class="row">
         <div class="col-sm-10 col-sm-offset-1">
             <div class="atlast-tabbable">
+                <h4 class="detailLabel">DETAILS</h4>
                 <ul class="nav nav-tabs" role="tablist">
                     <li role="presentation" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li>
                     <!--  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Acceptable Use</a></li> -->

dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html

@@ -18,6 +18,7 @@
     <h1><span data-id="title"></span></h1>
     <button data-id="editButton" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
     <p class="sub-title" data-id="description"></p>
+    <span class="attrLabel">Attributes:</span>
     <div data-id="showAttribute">
     </div>
     <div class="dropdown addTag-dropdown" data-id="addTagListBtn">

dashboardv2/public/js/views/business_catalog/BusinessCatalogDetailLayoutView.js

@@ -22,7 +22,9 @@ define(['require',
     'utils/Utils',
     'collection/VCatalogList',
     'models/VEntity',
-], function(require, Backbone, BusinessCatalogDetailLayoutViewTmpl, Utils, VCatalogList, VEntity) {
+    'models/VCatalog',
+    'utils/Messages'
+], function(require, Backbone, BusinessCatalogDetailLayoutViewTmpl, Utils, VCatalogList, VEntity, VCatalog, Messages) {
     'use strict';
 
     var BusinessCatalogDetailLayoutView = Backbone.Marionette.LayoutView.extend(
@@ -63,15 +65,7 @@ define(['require',
             /** ui events hash */
             events: function() {
                 var events = {};
-                events["click " + this.ui.editButton] = function() {
-                    this.ui.editButton.hide();
-                    this.ui.description.hide();
-                    this.ui.editBox.show();
-                    this.ui.descriptionTextArea.focus();
-                    if (this.ui.description.text().length) {
-                        this.ui.descriptionTextArea.val(this.ui.description.text());
-                    }
-                };
+                events["click " + this.ui.editButton] = 'onEditButton';
                 events["click " + this.ui.cancelButton] = 'onCancelButtonClick';
                 return events;
             },
@@ -103,8 +97,8 @@ define(['require',
                         createdDate = this.model.get('creation_time');
                     if (name) {
                         this.ui.title.show();
-                        var termName = Utils.checkTagOrTerm(name);
-                        this.ui.title.html('<span>' + termName.name + '</span>');
+                        this.termName = Utils.checkTagOrTerm(name);
+                        this.ui.title.html('<span>' + this.termName.name + '</span>');
                     } else {
                         this.ui.title.hide();
                     }
@@ -185,12 +179,70 @@ define(['require',
                     complete: function() {}
                 });
             },
-            offlineSearchTag: function(e) {
-                this.addTagCollectionList(this.tagCollection.fullCollection.models, $(e.currentTarget).val());
+            onEditButton: function(e) {
+                var that = this;
+                $(e.currentTarget).blur();
+                require([
+                    'views/tag/CreateTagLayoutView',
+                    'modules/Modal'
+                ], function(CreateTagLayoutView, Modal) {
+                    var view = new CreateTagLayoutView({ 'termCollection': that.collection, 'descriptionData': that.model.get('description'), 'tag': that.termName.name });
+                    var modal = new Modal({
+                        title: 'Edit Term',
+                        content: view,
+                        cancelText: "Cancel",
+                        okText: 'Save',
+                        allowCancel: true,
+                    }).open();
+                    view.ui.description.on('keyup', function(e) {
+                        that.textAreaChangeEvent(view, modal);
+                    });
+                    modal.$el.find('button.ok').prop('disabled', true);
+                    modal.on('ok', function() {
+                        that.onSaveDescriptionClick(view);
+                    });
+                    modal.on('closeModal', function() {
+                        modal.trigger('cancel');
+                    });
+                });
+            },
+            textAreaChangeEvent: function(view, modal) {
+                if (view.description == view.ui.description.val()) {
+                    modal.$el.find('button.ok').prop('disabled', true);
+                } else {
+                    modal.$el.find('button.ok').prop('disabled', false);
+                }
             },
-            onClickAddTagBtn: function() {
-                this.ui.searchTag.val("");
-                this.offlineSearchTag(this.ui.searchTag[0]);
+            onSaveDescriptionClick: function(view) {
+                view.description = view.ui.description.val();
+                this.onSaveButton(this.collection.first().toJSON(), Messages.updateTagDescriptionMessage, view);
+                this.ui.description.show();
+            },
+            onSaveButton: function(saveObject, message, view) {
+                var that = this,
+                    termModel = new VCatalog();
+                termModel.url = function() {
+                    return that.collection.url;
+                };
+                termModel.set({
+                    "description": view.ui.description.val()
+                }).save(null, {
+                    type: "PUT",
+                    success: function(model, response) {
+                        that.collection.fetch({ reset: true });
+                        Utils.notifySuccess({
+                            content: message
+                        });
+                    },
+                    error: function(model, response) {
+                        if (response.responseJSON && response.responseJSON.error) {
+                            that.collection.fetch({ reset: true });
+                            Utils.notifyError({
+                                content: response.responseJSON.error
+                            });
+                        }
+                    }
+                });
             }
         });
     return BusinessCatalogDetailLayoutView;

dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js

@@ -187,8 +187,10 @@ define(['require',
                 });
             },
             addTagToTerms: function(tagObject) {
-                var tagData = "",
+                var that = this,
+                    tagData = "",
                     termData = "";
+
                 _.each(tagObject, function(val) {
                     var isTerm = Utils.checkTagOrTerm(val);
                     if (!isTerm.term) {
@@ -196,12 +198,17 @@ define(['require',
                     }
                     if (isTerm.term) {
                         termData += '<span class="inputTag term" data-id="tagClick" data-href="' + val + '">' + val + '<i class="fa fa-close" data-id="deleteTag"></i></span>';
+                        that.ui.addTerm.hide();
                     }
+
                 });
                 this.ui.tagList.find("span.inputTag").remove();
                 this.ui.termList.find("span.inputTag").remove();
                 this.ui.tagList.prepend(tagData);
                 this.ui.termList.prepend(termData);
+                if (this.ui.termList.find("span.term").length == 0) {
+                    this.ui.addTerm.show();
+                }
             },
             saveTagFromList: function(ref) {
                 var that = this;

dashboardv2/public/js/views/tag/CreateTagLayoutView.js

@@ -56,9 +56,11 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'tagCollection', 'tag'));
-                if (this.tagCollection.first().get('traitTypes')) {
+                _.extend(this, _.pick(options, 'tagCollection', 'tag', 'termCollection', 'descriptionData'));
+                if (this.tagCollection && this.tagCollection.first().get('traitTypes')) {
                     this.description = this.tagCollection.first().get('traitTypes')[0].typeDescription;
+                } else if (this.termCollection) {
+                    this.description = this.descriptionData;
                 } else {
                     this.create = true;
                 }

release-log.txt

@@ -22,6 +22,7 @@ ATLAS-409 Atlas will not import avro tables with schema read from a file (dosset
 ATLAS-379 Create sqoop and falcon metadata addons (venkatnrangan,bvellanki,sowmyaramesh via shwethags)
 
 ALL CHANGES:
+ATLAS-891 UI changes to implement Update term (Kalyanikashikar via yhemanth)
 ATLAS-794 Business Catalog Update (jspeidel via yhemanth)
 ATLAS-837 Enhance Sqoop addon to handle export operation (venkatnrangan via shwethags)
 ATLAS-869 Make LDAP/AD properties to be configurable. (nixonrodrigues via yhemanth)