ATLAS-3291 : UI: Don't allow user to sort on multiple value columns

dashboardv2/public/css/scss/table.scss

@@ -76,7 +76,7 @@ tr.empty {
 
     th.renderable.html-cell,
     td.renderable.html-cell {
-        max-width: 250px;
+        min-width: 250px;
     }
 
     .select-all-header-cell,
@@ -164,4 +164,9 @@ tr.empty {
             background: $color_jungle_green_light !important;
         }
     }
+}
+
+.toggleList.semi-collapsed div:nth-child(n+2) {
+    display: none;
+
 }
\ No newline at end of file

dashboardv2/public/js/views/search/SearchResultLayoutView.js

@@ -185,6 +185,7 @@ define(['require',
             },
             bindEvents: function() {
                 var that = this;
+                this.onClickLoadMore();
                 this.listenTo(this.searchCollection, 'backgrid:selected', function(model, checked) {
                     this.arr = [];
                     if (checked === true) {
@@ -263,7 +264,7 @@ define(['require',
                             saveState: false
                         },
                         visibilityControlOpts: {
-                            buttonTemplate: _.template("<button class='btn btn-action btn-sm pull-right'>Columns&nbsp<i class='fa fa-caret-down'></i></button>")
+                            buttonTemplate: _.template("<button class='btn btn-action btn-sm pull-right'>Attributes&nbsp<i class='fa fa-caret-down'></i></button>")
                         },
                         el: this.ui.colManager
                     },
@@ -761,7 +762,8 @@ define(['require',
                             var attrObj = Utils.getNestedSuperTypeObj({ data: def.toJSON(), collection: this.entityDefCollection, attrMerge: true });
                             _.each(attrObj, function(obj, key) {
                                 var key = obj.name,
-                                    isRenderable = _.contains(columnToShow, key)
+                                    isRenderable = _.contains(columnToShow, key),
+                                    isSortable = obj.typeName.search(/(array|map)/i) == -1;
                                 if (key == "name" || key == "description" || key == "owner") {
                                     if (columnToShow) {
                                         col[key].renderable = isRenderable;
@@ -774,6 +776,7 @@ define(['require',
                                     editable: false,
                                     resizeable: true,
                                     orderable: true,
+                                    sortable: isSortable,
                                     renderable: isRenderable,
                                     formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                                         fromRaw: function(rawValue, model) {
@@ -786,7 +789,15 @@ define(['require',
                                                     'isTable': false
                                                 };
                                                 tempObj.valueObject[key] = modelObj.attributes[key];
-                                                return CommonViewFunction.propertyTable(tempObj);
+                                                var tablecolumn = CommonViewFunction.propertyTable(tempObj);
+                                                if (_.isArray(modelObj.attributes[key])) {
+                                                    var column = $("<div>" + tablecolumn + "</div>")
+                                                    if (tempObj.valueObject[key].length > 2) {
+                                                        column.addClass("toggleList semi-collapsed").append("<span><a data-id='load-more-columns'>Show More</a></span>");
+                                                    }
+                                                    return column;
+                                                }
+                                                return tablecolumn;
                                             }
                                         }
                                     })
@@ -797,6 +808,24 @@ define(['require',
                 }
                 return this.searchCollection.constructor.getTableCols(col, this.searchCollection);
             },
+            onClickLoadMore: function() {
+                var that = this;
+                this.$el.on('click', "[data-id='load-more-columns']", function(event) {
+                    event.stopPropagation();
+                    event.stopImmediatePropagation();
+                    var $this = $(this),
+                        $toggleList = $(this).parents('.toggleList');
+                    if ($toggleList.length) {
+                        if ($toggleList.hasClass('semi-collapsed')) {
+                            $toggleList.removeClass('semi-collapsed');
+                            $this.text("Show Less");
+                        } else {
+                            $toggleList.addClass('semi-collapsed');
+                            $this.text("Show More");
+                        }
+                    }
+                });
+            },
             hideIrreleventElements: function() {
                 this.ui.rowData.siblings('.well').hide();
                 this.ui.rowData.siblings('.no-data').show();

dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js

@@ -87,6 +87,7 @@ define(['require',
                     includeFooterRecords: true,
                     includePageSize: true,
                     includeGotoPage: true,
+                    includeAtlasTableSorting: true,
                     gridOpts: {
                         className: "table table-hover backgrid table-quickMenu",
                         emptyText: 'No records found!'
@@ -119,7 +120,6 @@ define(['require',
                             label: "Classification",
                             cell: "html",
                             editable: false,
-                            sortable: false,
                             formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                                 fromRaw: function(rawValue, model) {
                                     if (that.guid !== model.get('entityGuid')) {