NIFI-9205 - Update prioritizer configuration (#5516)

* NIFI-9205 - Update prioritizer configuration

* - Address review feedback

This closes #5516

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

@@ -104,7 +104,7 @@
                             <div class="fa fa-question-circle" alt="Info" title="Available prioritizers that could reprioritize FlowFiles in this work queue."></div>
                         </div>
                         <div class="setting-field">
-                            <ul id="prioritizer-available"></ul>
+                            <ol id="prioritizer-available"></ol>
                         </div>
                     </div>
                     <div class="setting">

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

@@ -123,3 +123,11 @@ div.undefined {
     height: 32px;
     padding: 0px 10px;
 }
+
+#prioritizer-selected .draggable-control {
+    float: right;
+}
+
+#prioritizer-selected .fa-remove {
+    color: #fff;
+}

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

@@ -1197,7 +1197,11 @@
         // reset the prioritizers
         var selectedList = $('#prioritizer-selected');
         var availableList = $('#prioritizer-available');
-        selectedList.children().detach().appendTo(availableList);
+        selectedList.children()
+            .detach()
+            .appendTo(availableList)
+            .find('div.draggable-control')
+            .remove();
 
         // sort the available list
         var listItems = availableList.children('li').get();
@@ -1340,16 +1344,56 @@
                     nfConnectionConfiguration.addAvailablePrioritizer('#prioritizer-available', documentedType);
                 });
 
+                // work around for https://bugs.jqueryui.com/ticket/6054
+                var shouldAllowDrop = true;
+
                 // make the prioritizer containers sortable
-                $('#prioritizer-available, #prioritizer-selected').sortable({
+                $('#prioritizer-available').sortable({
                     containment: $('#connection-settings-tab-content').find('.settings-right'),
                     connectWith: 'ul',
                     placeholder: 'ui-state-highlight',
                     scroll: true,
-                    opacity: 0.6
+                    opacity: 0.6,
+                    beforeStop: function (event, ui) {
+                        if ($('#prioritizer-available').find('.ui-sortable-placeholder').length) {
+                            shouldAllowDrop = false;
+                        }
+                    },
+                    stop: function (event, ui) {
+                        const allowDrop = shouldAllowDrop;
+                        shouldAllowDrop = true;
+                        return allowDrop;
+                    }
                 });
+
+                $('#prioritizer-selected').sortable({
+                    containment: $('#connection-settings-tab-content').find('.settings-right'),
+                    placeholder: 'selected',
+                    scroll: true,
+                    opacity: 0.6,
+                    receive: function (event, ui) {
+                        nfConnectionConfiguration.addControlsForSelectedPrioritizer(ui.item);
+                    },
+                    update: function (event, ui) {
+                        // update the buttons to possibly trigger the disabled state
+                        $('#connection-configuration').modal('refreshButtons');
+                    }
+                });
+
                 $('#prioritizer-available, #prioritizer-selected').disableSelection();
+
+                // add a listener that will handle dblclick for all available prioritizers
+                $(document).on('dblclick', '#prioritizer-available li', function() {
+                    var availablePrioritizerElement = $(this).detach().appendTo($('#prioritizer-selected'));
+
+                    nfConnectionConfiguration.addControlsForSelectedPrioritizer(availablePrioritizerElement);
+
+                    // update the buttons to possibly trigger the disabled state
+                    $('#connection-configuration').modal('refreshButtons');
+                });
             }).fail(nfErrorHandler.handleAjaxError);
+
+            nfConnectionConfiguration.sortAvailablePrioritizers();
         },
 
         /**
@@ -1374,6 +1418,44 @@
             }
         },
 
+        /**
+         * Sorts the available prioritizers.
+         */
+        sortAvailablePrioritizers: function () {
+            var availablePrioritizersList = $('#prioritizer-available');
+            availablePrioritizersList.children('li')
+                .detach()
+                .sort(function (aElement, bElement) {
+                    var nameA = $(aElement).text();
+                    var nameB = $(bElement).text();
+                    return nameA.localeCompare(nameB);
+                })
+                .appendTo(availablePrioritizersList);
+        },
+
+        /**
+         * Adds the controls to the specified selected draggable element.
+         *
+         * @argument {jQuery} draggableElement
+         */
+        addControlsForSelectedPrioritizer: function (draggableElement) {
+            var removeIcon = $('<div class="draggable-control"><div class="fa fa-remove"></div></div>')
+                .on('click', function () {
+                    // remove the remove icon
+                    removeIcon.remove();
+
+                    // restore to the available parameter contexts
+                    $('#prioritizer-available').append(draggableElement);
+
+                    // resort the available parameter contexts
+                    nfConnectionConfiguration.sortAvailablePrioritizers();
+
+                    // update the buttons to possibly trigger the disabled state
+                    $('#connection-configuration').modal('refreshButtons');
+                })
+                .appendTo(draggableElement);
+        },
+
         /**
          * Shows the dialog for creating a new connection.
          *
@@ -1526,7 +1608,9 @@
 
                     // handle each prioritizer
                     $.each(connection.prioritizers, function (i, type) {
-                        $('#prioritizer-available').children('li[id="' + type + '"]').detach().appendTo('#prioritizer-selected');
+                        var selectedPrioritizer = $('#prioritizer-available').children('li[id="' + type + '"]');
+                        nfConnectionConfiguration.addControlsForSelectedPrioritizer(selectedPrioritizer);
+                        selectedPrioritizer.detach().appendTo('#prioritizer-selected');
                     });
 
                     // store the connection details

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-parameter-contexts.js

@@ -1774,7 +1774,7 @@
     var addControlsForSelectedParameterContext = function (draggableElement) {
         var removeIcon = $('<div class="draggable-control"><div class="fa fa-remove"></div></div>')
             .on('click', function () {
-                // remove the remove ice
+                // remove the remove icon
                 removeIcon.remove();
 
                 // restore to the available parameter contexts