Nested row groupings

Some tests are failing through

core/src/main/resources/lib/form/optionalBlock.jelly

@@ -66,7 +66,7 @@ THE SOFTWARE.
 
   <j:choose>
     <j:when test="${attrs.title!=null}">
-      <tr class="optional-block-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
+      <tr class="optional-block-start row-group-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
         <td colspan="3">
           <f:checkbox name="${attrs.name}" class="optional-block-control block-control" onclick="javascript:updateOptionalBlock(this,true)"
                       negative="${attrs.negative}" checked="${attrs.checked}" field="${attrs.field}" title="${title}" />
@@ -79,7 +79,7 @@ THE SOFTWARE.
       <tr class="rowvg-start" />
       <d:invokeBody />
       <!-- end marker -->
-      <tr class="${attrs.inline?'':'row-set-end'} rowvg-end optional-block-end" />
+      <tr class="${attrs.inline?'':'row-set-end'} rowvg-end optional-block-end row-group-end" />
     </j:when>
 
     <j:otherwise>

core/src/main/resources/lib/form/radioBlock.jelly

@@ -54,7 +54,7 @@ THE SOFTWARE.
 
   <st:adjunct includes="lib.form.radioBlock.radioBlock"/>
 
-	<tr class="radio-block-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
+	<tr class="radio-block-start row-group-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
 	  <td colspan="3">
       <label>
 	      <input type="radio" name="${name}" value="${value}"
@@ -69,5 +69,5 @@ THE SOFTWARE.
   </j:if>
 	<d:invokeBody />
 	<!-- end marker -->
-	<tr class="${attrs.inline?'':'row-set-end'} radio-block-end" style="display:none" />
+	<tr class="${attrs.inline?'':'row-set-end'} radio-block-end row-group-end" style="display:none" />
 </j:jelly>

core/src/main/resources/lib/form/rowSet.jelly

@@ -43,9 +43,9 @@ THE SOFTWARE.
       <d:invokeBody />
     </j:when>
     <j:otherwise>
-      <tr ref="${attrs.ref}" class="row-set-start" style="display:none" name="${attrs.name}" />
+      <tr ref="${attrs.ref}" class="row-set-start row-group-start" style="display:none" name="${attrs.name}" />
       <d:invokeBody />
-      <tr class="row-set-end" />
+      <tr class="row-set-end row-group-end" />
     </j:otherwise>
   </j:choose>
 </j:jelly>
\ No newline at end of file

war/src/main/js/widgets/config/model/ConfigRowSet.js

@@ -4,17 +4,36 @@ module.exports = ConfigRowSet;
 
 /*
  * =======================================================================================
- * Configuration table row-set.
+ * Configuration table row grouping i.e. row-set-*, optional-block-*,
  * =======================================================================================
  */
-function ConfigRowSet(startRow) {
+function ConfigRowSet(startRow, parentRowSetContainer) {
     this.startRow = startRow;
-    this.rows = [];
+    this.parentRowSetContainer = parentRowSetContainer;
     this.endRow = undefined;
+    this.rows = [];
+    this.rowSets = [];
     this.toggleWidget = undefined;
     this.label = undefined;
 }
 
+ConfigRowSet.prototype.updateVisibility = function() {
+    if (this.toggleWidget !== undefined) {
+        var isChecked = this.toggleWidget.is(':checked');
+        for (var i = 0; i < this.rows.length; i++) {
+            if (isChecked) {
+                this.rows[i].show();
+            } else {
+                this.rows[i].hide();
+            }
+        }
+    }
+    for (var ii = 0; ii < this.rowSets.length; ii++) {
+        var rowSet = this.rowSets[ii];
+        rowSet.updateVisibility();        
+    }
+};
+
 /*
  * Find the row-set toggle widget i.e. the input element that indicates that
  * the row-set rows should be made visible or not.

war/src/main/js/widgets/config/model/ConfigSection.js

@@ -89,16 +89,7 @@ ConfigSection.prototype.updateRowSetVisibility = function() {
     }
     for (var i = 0; i < this.rowSets.length; i++) {
         var rowSet = this.rowSets[i];
-        if (rowSet.toggleWidget !== undefined) {
-            var isChecked = rowSet.toggleWidget.is(':checked');
-            for (var ii = 0; ii < rowSet.rows.length; ii++) {
-                if (isChecked) {
-                    rowSet.rows[ii].show();
-                } else {
-                    rowSet.rows[ii].hide();
-                }
-            }
-        }
+        rowSet.updateVisibility();
     }
 };
 
@@ -112,29 +103,36 @@ ConfigSection.prototype.gatherRowSets = function() {
     // Also seems like you can have these "optional-block" thingies which are not wrapped
     // in 'row-set-start' etc. Grrrrrr :(
 
-    var curRowSet = undefined; // jshint ignore:line
     var rows = this.getRows();
-    for (var i = 0; i < rows.length; i++) {
-        var row = rows[i];
-
-        if (row.hasClass('row-set-start')) {
-            curRowSet = new ConfigRowSet(row);
-            curRowSet.findToggleWidget(row);
-        } else if (curRowSet !== undefined) {
-            if (row.hasClass('row-set-end')) {
-                curRowSet.endRow = row;
-                // Only capture the row-set if we find a 'row-set-end'.
-                // Yeah, this does not handle hierarchical stuff (see above TO-DO).
-                this.rowSets.push(curRowSet);
-                curRowSet = undefined;
-            } else if (curRowSet.toggleWidget === undefined) {
-                curRowSet.findToggleWidget(row);
+    if (rows.length > 0) {
+        // Create a top level "fake" ConfigRowSet just to capture
+        // the top level groupings. We copy the rowSets info out
+        // of this and use it in the top "this" ConfigSection instance. 
+        var rowSetContainer = new ConfigRowSet(rows[0], undefined);
+
+        this.rowSets = rowSetContainer.rowSets;
+
+        for (var i = 0; i < rows.length; i++) {
+            var row = rows[i];
+
+            if (row.hasClass('row-group-start')) {
+                var newRowSet = new ConfigRowSet(row, rowSetContainer);
+                rowSetContainer.rowSets.push(newRowSet);
+                rowSetContainer = newRowSet;
+                newRowSet.findToggleWidget(row);
             } else {
-                // we have the toggleWidget, which means that this row is
-                // one of the rows after that row and is one of the rows that's
-                // subject to being made visible/hidden when the input is
-                // checked or unchecked.
-                curRowSet.rows.push(row);
+                if (row.hasClass('row-group-end')) {
+                    rowSetContainer.endRow = row;
+                    rowSetContainer = rowSetContainer.parentRowSetContainer; // pop back off the "stack"
+                } else if (rowSetContainer.toggleWidget === undefined) {
+                    rowSetContainer.findToggleWidget(row);
+                } else {
+                    // we have the toggleWidget, which means that this row is
+                    // one of the rows after that row and is one of the rows that's
+                    // subject to being made visible/hidden when the input is
+                    // checked or unchecked.
+                    rowSetContainer.rows.push(row);
+                }
             }
         }
     }