NIFI-27:

- Updating access control configuration for secure ports due to autocomplete upgrade.

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/secure-port-configuration.jsp

@@ -79,3 +79,4 @@
         </div>
     </div>
 </div>
+<div id="search-users-results"></div>

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/css/port-configuration.css

@@ -110,14 +110,26 @@ input.search-users {
     color: #888;
 }
 
+#search-users-results .ui-autocomplete {
+    max-height: 300px;
+    overflow: auto;
+    border: 1px solid #aaaaaa;
+    z-index: 1351;
+    border-radius: 0;
+}
+
+#search-users-results .ui-menu .ui-menu-item a.ui-state-focus {
+    background: #D4E0E5 !important;
+    border: 1px solid #999999;
+    border-radius: 0;
+}
+
 li.search-users-header {
     font-weight: bold;
     padding-top: 4px;
     padding-left: 4px;
     padding-right: 4px;
     height: 14px;
-    float: left;
-    clear: left;
 }
 
 div.search-users-match-header {

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-secure-port-configuration.js

@@ -138,17 +138,10 @@ nf.SecurePortConfiguration = (function () {
 
         // initialize the access control auto complete
         $.widget('nf.userSearchAutocomplete', $.ui.autocomplete, {
-            _response: function (content) {
-                if (!this.options.disabled && content) {
-                    this._suggest(content);
-                    this._trigger('open');
-                } else {
-                    this.close();
-                }
-                this.pending--;
-                if (!this.pending) {
-                    this.element.removeClass('ui-autocomplete-loading');
-                }
+            _normalize: function(searchResults) {
+                var items = [];
+                items.push(searchResults);
+                return items;
             },
             _resizeMenu: function () {
                 var ul = this.menu.element;
@@ -157,14 +150,16 @@ nf.SecurePortConfiguration = (function () {
             _renderMenu: function (ul, items) {
                 var self = this;
 
+                // results are normalized into an array
+                var results = items[0];
 
                 // show all groups not currently selected
-                if (!nf.Common.isEmpty(items.userGroupResults)) {
+                if (!nf.Common.isEmpty(results.userGroupResults)) {
                     var allowedGroups = getAllowedGroups();
                     var groupHeaderAdded = false;
 
                     // go through each group result
-                    $.each(items.userGroupResults, function (i, groupMatch) {
+                    $.each(results.userGroupResults, function (i, groupMatch) {
 
                         // see if this match is not already selected
                         if ($.inArray(groupMatch.group, allowedGroups) === -1) {
@@ -182,12 +177,12 @@ nf.SecurePortConfiguration = (function () {
                 }
 
                 // show all users not currently selected
-                if (!nf.Common.isEmpty(items.userResults)) {
+                if (!nf.Common.isEmpty(results.userResults)) {
                     var allowedUsers = getAllowedUsers();
                     var userHeaderAdded = false;
 
                     // go through each user result
-                    $.each(items.userResults, function (i, userMatch) {
+                    $.each(results.userResults, function (i, userMatch) {
 
                         // see if this match is not already selected
                         if ($.inArray(userMatch.userDn, allowedUsers) === -1) {
@@ -211,17 +206,18 @@ nf.SecurePortConfiguration = (function () {
             },
             _renderGroupItem: function (ul, groupMatch) {
                 var groupContent = $('<a></a>').append($('<div class="search-users-match-header"></div>').text(groupMatch.group));
-                return $('<li></li>').data('item.autocomplete', groupMatch).append(groupContent).appendTo(ul);
+                return $('<li></li>').data('ui-autocomplete-item', groupMatch).append(groupContent).appendTo(ul);
             },
             _renderUserItem: function (ul, userMatch) {
                 var userContent = $('<a></a>').append($('<div class="search-users-match-header"></div>').text(userMatch.userDn));
-                return $('<li></li>').data('item.autocomplete', userMatch).append(userContent).appendTo(ul);
+                return $('<li></li>').data('ui-autocomplete-item', userMatch).append(userContent).appendTo(ul);
             }
         });
 
         // configure the autocomplete field
         $('#secure-port-access-control').userSearchAutocomplete({
             minLength: 0,
+            appendTo: '#search-users-results',
             position: {
                 my: 'left top',
                 at: 'left bottom',