Implement reordering of list attributes

Author: rakillen

electron/app/locales/en/modeledit.json

@@ -1044,12 +1044,12 @@
   "a-CallbackQueueMdbRunAsPrincipalName-label": "Callback Queue MDB Run As Principal Name",
   "a-CallbackQueueMdbRunAsPrincipalName-help": "For use only with the JAX-RPC stack. For JAX-WS, use WebServiceBufferingMBean instead.",
 
-  "a-CandidateMachine-label": "Candidate Machine",
+  "a-CandidateMachine-label": "Candidate Machines",
   "a-CandidateMachine-help": "Limits the list of candidate machines that the cluster specifies. (Requires you to enable this server for automatic migration and to configure the cluster with a set of candidate machines.) If this server fails and if it is enabled for automatic migration, Node Manager automatically restarts it. By default, Node Manager restarts the server on any of the candidate machines that the cluster specifies (in order of preference that you configured in the cluster). To change the default, you use this server's list of candidate machines to create a subset of the cluster-wide candidates. You can also change the order of preference.",
 
   "a-CandidateMachinesForMigratableServer-label": "Candidate Machines for Migratable Server",
   "a-CandidateMachinesForMigratableServer-itemLabel": "Candidate Machine",
-  "a-CandidateMachinesForMigratableServer-itemHelp": "Specify a candidate machine opn which a node manager can restart failed servers.",
+  "a-CandidateMachinesForMigratableServer-itemHelp": "Specify a candidate machine on which a node manager can restart failed servers.",
   "f-Cluster-a-CandidateMachinesForMigratableServer-help": "Specifies the set of machines (and order of preference) on which Node Manager will restart failed servers. (Requires you to enable each server for automatic migration.) Each server can specify a subset of these cluster-wide candidates, which limits the machines on which the server can be restarted. Servers can also specify their own order of preference.",
 
   "a-Capacity-label": "Capacity",

webui/src/js/utils/modelEdit/metadata/JDBCSystemResource.json

@@ -256,6 +256,9 @@
           { "value": "Load-Balancing", "labelKey": "options-load-balancing-label" }
         ]
       },
+      "DataSourceList": {
+        "reorderable": true
+      },
       "GlobalTransactionsProtocol": {
         "options": [
           { "value": "OnePhaseCommit", "labelKey": "options-one-phase-commit-label" },

webui/src/js/utils/modelEdit/metadata/JMSSystemResource.json

@@ -38,7 +38,8 @@
           { "value": "Discard", "labelKey": "options-discard-label" },
           { "value": "Log", "labelKey": "options-log-label" },
           { "value": "Redirect", "labelKey": "options-redirect-label" }
-        ]
+        ],
+        "reorderable": true
       },
       "LoadBalancingPolicy": {
         "options": [

webui/src/js/utils/modelEdit/metadata/SecurityConfiguration.json

@@ -590,6 +590,9 @@
   },
   "SecurityConfiguration/Realm": {
     "attributeDetails": {
+      "AuthMethods": {
+        "reorderable": true
+      },
       "CertPathBuilder": {
         "editorType": "combo",
         "optionsMethod": "getCertPathBuilderInRealmOptions"
@@ -605,6 +608,9 @@
       "IdentityAssertionDoNotCacheContextElement": {
         "disabled": "secConfigRealmIdentityAssertionCacheFields"
       },
+      "IdentityAssertionHeaderNamePrecedence": {
+        "reorderable": true
+      },
       "MaxWebLogicPrincipalsInCache": {
         "disabled": "secConfigRealmWlsPrincipalValidatorCacheFields"
       },

webui/src/js/utils/modelEdit/metadata/Server.json

@@ -26,7 +26,8 @@
       },
       "CandidateMachine": {
         "editorType": "combo",
-        "optionsMethod": "getMachineOptions"
+        "optionsMethod": "getMachineOptions",
+        "reorderable": true
       },
       "Cluster": {
         "editorType": "combo",

webui/src/js/utils/modelEdit/metadata/ServerTemplate.json

@@ -24,7 +24,8 @@
       },
       "CandidateMachine": {
         "editorType": "combo",
-        "optionsMethod": "getMachineOptions"
+        "optionsMethod": "getMachineOptions",
+        "reorderable": true
       },
       "Cluster": {
         "editorType": "combo",

webui/src/js/viewModels/modelEdit/list-attribute-editor.js

@@ -24,12 +24,15 @@ function(accUtils, ko, DialogHelper, ArrayDataProvider,
     this.observable = ATTRIBUTE.observable;
     this.disabled = MetaHandlers.getDisabledHandler(ATTRIBUTE, ATTRIBUTE_MAP);
     this.extraClass = ko.computed(() => this.disabled() ? 'wkt-model-edit-table-disabled' : null);
+    this.reorderable = ATTRIBUTE.reorderable;
 
     this.ariaLabel = MessageHelper.getAttributeLabel(ATTRIBUTE, ALIAS_PATH);
     this.addLabel = MessageHelper.getAddItemLabel(ATTRIBUTE, ALIAS_PATH, false);
     this.deleteLabel = MessageHelper.getDeleteItemLabel(ATTRIBUTE, ALIAS_PATH);
     this.noDataLabel = MessageHelper.getNoItemsMessage(ATTRIBUTE, ALIAS_PATH);
     this.helpText = MessageHelper.getAttributeHelp(ATTRIBUTE, ALIAS_PATH);
+    this.moveUpLabel = MessageHelper.t('move-up-label');
+    this.moveDownLabel = MessageHelper.t('move-down-label');
 
     const subscriptions = [];
 
@@ -47,31 +50,42 @@ function(accUtils, ko, DialogHelper, ArrayDataProvider,
     };
 
     // this is dynamic to allow i18n values to load correctly
-    this.columnData = [
-      {
-        headerText: MessageHelper.getAttributeLabel(ATTRIBUTE, ALIAS_PATH),
-        headerClassName: 'wkt-model-edit-attribute-label',
-        sortable: 'disable'
-      },
-      {
+    this.columnData = [];
+    this.columnData.push({
+      headerText: MessageHelper.getAttributeLabel(ATTRIBUTE, ALIAS_PATH),
+      headerClassName: 'wkt-model-edit-attribute-label',
+      sortable: 'disable'
+    });
+
+    if (this.reorderable) {
+      this.columnData.push({
         className: 'wkt-table-delete-cell',
         headerClassName: 'wkt-table-add-header',
-        headerTemplate: 'headerTemplate',
         template: 'actionTemplate',
-        sortable: 'disable',
-        width: ViewHelper.BUTTON_COLUMN_WIDTH
-      }];
+        sortable: 'disabled',
+        width: '30px'
+      });
+    }
+
+    this.columnData.push({
+      className: 'wkt-table-delete-cell',
+      headerClassName: 'wkt-table-add-header',
+      headerTemplate: 'headerTemplate',
+      template: 'actionTemplate',
+      sortable: 'disable',
+      width: ViewHelper.BUTTON_COLUMN_WIDTH
+    });
 
     this.observableItems = ko.observableArray([]);
 
     // update the internal list observable from the attribute observable.
     // the attribute observable value may be a list or comma-separated string.
     // if the value is a string, it might be a variable token.
     this.updateList = () => {
-      this.observableItems.removeAll();
+      const newItems = [];
       const value = ModelEditHelper.getDerivedValue(this.observable());
-      let elements = null;
       if(value != null) {
+        let elements;
         if (Array.isArray(value)) {
           elements = value;
         } else {
@@ -80,12 +94,13 @@ function(accUtils, ko, DialogHelper, ArrayDataProvider,
         }
 
         elements.forEach(element => {
-          this.observableItems.push({
+          newItems.push({
             uid: utils.getShortUuid(),
             name: element
           });
         });
       }
+      this.observableItems(newItems);
     };
 
     // update attribute observable from the internal list observable.
@@ -99,7 +114,7 @@ function(accUtils, ko, DialogHelper, ArrayDataProvider,
     };
 
     // use unique ID (uid) as key in the UI only, in case name changes
-    this.propertiesDataProvider = new BufferingDataProvider(new ArrayDataProvider(
+    this.listDataProvider = new BufferingDataProvider(new ArrayDataProvider(
       this.observableItems, {keyAttributes: 'uid'}));
 
     // add a new row with an unused unique ID and new name
@@ -123,6 +138,30 @@ function(accUtils, ko, DialogHelper, ArrayDataProvider,
       this.observableItems.remove(context.item.data);
       this.updateObservable();
     };
+
+    this.canMoveUp = rowData => {
+      return this.observableItems.indexOf(rowData) > 0;
+    };
+
+    this.canMoveDown = rowData => {
+      return this.observableItems.indexOf(rowData) < this.observableItems().length - 1;
+    };
+
+    this.moveUp = (event, context) => {
+      const rowData = context.item.data;
+      const index = this.observableItems.indexOf(rowData);
+      this.observableItems.splice(index, 1);  // remove from old location
+      this.observableItems.splice(index - 1, 0, rowData);
+      this.updateObservable();
+    };
+
+    this.moveDown = (event, context) => {
+      const rowData = context.item.data;
+      const index = this.observableItems.indexOf(rowData);
+      this.observableItems.splice(index, 1);  // remove from old location
+      this.observableItems.splice(index + 1, 0, rowData);
+      this.updateObservable();
+    };
   }
 
   return ListAttributeEditor;

webui/src/js/views/modelEdit/list-attribute-editor.html

@@ -7,7 +7,7 @@
   class="wkt-model-edit-table wkt-model-edit-list-table"
   :aria-label="[[ariaLabel]]"
   :class="[[extraClass]]"
-  data="[[propertiesDataProvider]]"
+  data="[[listDataProvider]]"
   display="grid"
   horizontal-grid-visible="enabled"
   vertical-grid-visible="enabled"
@@ -17,6 +17,28 @@
   <template slot="rowTemplate" data-oj-as="row">
     <tr data-bind="attr: {'data-uid': row.data.uid}">
       <td><oj-bind-text value="[[row.data.name]]"></oj-bind-text></td>
+      <oj-bind-if test="[[reorderable]]">
+        <td>
+          <div class="wkt-model-edit-reorder-cell">
+            <oj-c-button display="icons"
+                         chroming="borderless"
+                         size="sm"
+                         label="[[moveUpLabel]]"
+                         disabled="[[!canMoveUp(row.data)]]"
+                         on-oj-action="[[moveUp]]">
+              <span slot="endIcon" class="oj-ux-ico-chevron-up"></span>
+            </oj-c-button>
+            <oj-c-button display="icons"
+                         chroming="borderless"
+                         size="sm"
+                         label="[[moveDownLabel]]"
+                         disabled="[[!canMoveDown(row.data)]]"
+                         on-oj-action="[[moveDown]]">
+              <span slot="endIcon" class="oj-ux-ico-chevron-down"></span>
+            </oj-c-button>
+          </div>
+        </td>
+      </oj-bind-if>
       <td>
         <oj-c-button
           display="icons"