ATLAS-1750: type ahead for entity input in create/update entity UI

dashboardv2/public/css/scss/tag.scss

@@ -142,8 +142,8 @@
 
 .inputTagAdd {
     display: inline-block;
-    border: 1px #4A90E2 solid;
-    color: #4A90E2;
+    border: 1px $color_havelock_blue_approx solid;
+    color: $color_havelock_blue_approx;
     font-size: 14px;
     border-radius: 4px;
     margin-right: 3px;
@@ -376,35 +376,21 @@ legend.scheduler-border {
 }
 
 .spanEntityType {
-    position: absolute;
-    right: 45px;
-    top: 10px;
     cursor: help;
-    width: 40px;
+    width: 100%;
+    display: block;
+    white-space: nowrap;
     overflow: hidden;
-    z-index: 9;
     text-overflow: ellipsis;
     font-size: 14px;
     color: #a7a19f;
 }
 
-.enitityInputBox {
-    padding-right: 69px;
-}
-
-.entityLoader {
-    margin-left: 286px;
-}
-
 .errorClass {
     border: 1px solid red !important;
     box-shadow: none !important;
 }
 
-.entityInputBox {
-    padding-right: 70px;
-}
-
 .attributeTag {
     padding: 5px 8px;
     border: 1px solid #999999;

dashboardv2/public/js/modules/Modal.js

@@ -84,7 +84,8 @@ define(['require', 'backbone', 'hbs!tmpl/common/modal'], function(require, Backb
                 escape: true,
                 animate: true,
                 contentWithFooter: false,
-                template: template
+                template: template,
+                width: null
             }, options);
         },
 

dashboardv2/public/js/templates/common/modal.html

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="modal-dialog {{mainClass}}" role="document">
+<div class="modal-dialog {{mainClass}} " style="width:{{width}}" role="document">
     <div class="modal-content">
         {{#if title}}
         <div class="modal-header">

dashboardv2/public/js/templates/entity/CreateEntityLayoutView_tmpl.html

@@ -15,7 +15,7 @@
  * limitations under the License.
 -->
 <form name="entityDefinitionform" class="css-form">
-    <div class="form-group">
+    <div class="form-group clearfix">
         <div class="col-sm-12">
             <div class="row">
                 {{#if guid}}
@@ -37,9 +37,11 @@
                 </div>
             </div>
         </div>
-        <div class="entityLoader" style="display:none">
-            <i class="fa fa-refresh fa-spin-custom"></i>
-        </div>
         <div class="control-group entityInputData" data-id="entityInputData"></div>
     </div>
 </form>
+<div class="" style="position: relative;height: 8px;">
+    <div class="fontLoader entityLoader" style="display:none">
+        <i class="fa fa-refresh fa-spin-custom"></i>
+    </div>
+</div>

dashboardv2/public/js/utils/Utils.js

@@ -349,42 +349,76 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button
             }
         }
     }
-    Utils.getName = function(collectionJSON, priorityAttribute) {
+    Utils.getName = function() {
+        return Utils.extractKeyValueFromEntity.apply(this, arguments).name;
+    }
+    Utils.getNameWithProperties = function() {
+        return Utils.extractKeyValueFromEntity.apply(this, arguments);
+    }
+    Utils.extractKeyValueFromEntity = function() {
+        var collectionJSON = arguments[0],
+            priorityAttribute = arguments[1];
+        var returnObj = {
+            name: '-',
+            found: true,
+            key: null
+        }
         if (collectionJSON) {
             if (collectionJSON.attributes && collectionJSON.attributes[priorityAttribute]) {
-                return _.escape(collectionJSON.attributes[priorityAttribute]);
+                returnObj.name = _.escape(collectionJSON.attributes[priorityAttribute]);
+                returnObj.key = priorityAttribute;
+                return returnObj;
             }
             if (collectionJSON[priorityAttribute]) {
-                return _.escape(collectionJSON[priorityAttribute]);
+                returnObj.name = _.escape(collectionJSON[priorityAttribute]);
+                returnObj.key = priorityAttribute;
+                return returnObj;
             }
             if (collectionJSON.attributes) {
                 if (collectionJSON.attributes.name) {
-                    return _.escape(collectionJSON.attributes.name);
+                    returnObj.name = _.escape(collectionJSON.attributes.name);
+                    returnObj.key = 'name';
+                    return returnObj;
                 }
                 if (collectionJSON.attributes.qualifiedName) {
-                    return _.escape(collectionJSON.attributes.qualifiedName);
+                    returnObj.name = _.escape(collectionJSON.attributes.qualifiedName);
+                    returnObj.key = 'qualifiedName';
+                    return returnObj;
                 }
                 if (collectionJSON.attributes.id) {
-                    return _.escape(collectionJSON.attributes.id);
+                    returnObj.name = _.escape(collectionJSON.attributes.id);
+                    returnObj.key = 'id';
+                    return returnObj;
                 }
             }
             if (collectionJSON.name) {
-                return _.escape(collectionJSON.name);
+                returnObj.name = _.escape(collectionJSON.name);
+                returnObj.key = 'name';
+                return returnObj;
             }
             if (collectionJSON.qualifiedName) {
-                return _.escape(collectionJSON.qualifiedName);
+                returnObj.name = _.escape(collectionJSON.qualifiedName);
+                returnObj.key = 'qualifiedName';
+                return returnObj;
             }
             if (collectionJSON.displayText) {
-                return _.escape(collectionJSON.displayText);
+                returnObj.name = _.escape(collectionJSON.displayText);
+                returnObj.key = 'displayText';
+                return returnObj;
             }
             if (collectionJSON.guid) {
-                return _.escape(collectionJSON.guid);
+                returnObj.name = _.escape(collectionJSON.guid);
+                returnObj.key = 'guid';
+                return returnObj;
             }
             if (collectionJSON.id) {
-                return _.escape(collectionJSON.id);
+                returnObj.name = _.escape(collectionJSON.id);
+                returnObj.key = 'id';
+                return returnObj;
             }
         }
-        return "-";
+        returnObj.found = false;
+        return returnObj;
     }
     Utils.showTitleLoader = function(loaderEl, titleBoxEl) {
         loaderEl.css({
@@ -401,7 +435,44 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button
         loaderEl.hide();
         titleBoxEl.fadeIn();
     }
+    Utils.getNestedSuperTypeObj = function(options) {
+        var flag = 0,
+            data = options.data,
+            collection = options.collection;
+        if (options.attrMerge) {
+            var attributeDefs = [];
+        } else {
+            var attributeDefs = {};
+        }
+        var getData = function(data, collection) {
+            if (options.attrMerge) {
+                attributeDefs = attributeDefs.concat(data.attributeDefs);
+            } else {
+                if (attributeDefs[data.name]) {
+                    if (_.isArray(attributeDefs[data.name])) {
+                        attributeDefs[data.name] = attributeDefs[data.name].concat(data.attributeDefs);
+                    } else {
+                        _.extend(attributeDefs[data.name], data.attributeDefs);
+                    }
 
+                } else {
+                    attributeDefs[data.name] = data.attributeDefs;
+                }
+            }
+            if (data.superTypes && data.superTypes.length) {
+                _.each(data.superTypes, function(superTypeName) {
+                    if (collection.fullCollection) {
+                        var collectionData = collection.fullCollection.findWhere({ name: superTypeName }).toJSON();
+                    } else {
+                        var collectionData = collection.findWhere({ name: superTypeName }).toJSON();
+                    }
+                    return getData(collectionData, collection);
+                });
+            }
+        }
+        getData(data, collection);
+        return attributeDefs
+    }
     $.fn.toggleAttribute = function(attributeName, firstString, secondString) {
         if (this.attr(attributeName) == firstString) {
             this.attr(attributeName, secondString);

dashboardv2/public/js/views/tag/addTagModalView.js

@@ -223,6 +223,7 @@ define(['require',
             });
         },
         onChangeTagDefination: function() {
+            this.ui.addTagOptions.select2("open").select2("close");
             this.ui.tagAttribute.empty();
             var saveBtn = this.modal.$el.find('button.ok');
             saveBtn.prop("disabled", false);