[groups] Tidy up Info sidebar summary of group selection

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -551,6 +551,7 @@
             "label": "info",
             "node": "Node",
             "type": "Type",
+            "group": "Group",
             "module": "Module",
             "id": "ID",
             "status": "Status",

packages/node_modules/@node-red/editor-client/src/js/ui/group.js

@@ -22,16 +22,7 @@ RED.group = (function() {
             '<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
         '</div>'+
 
-        // '<div class="form-row">'+
+        // '<div class="node-input-group-style-tools"><span class="button-group"><button class="red-ui-button red-ui-button-small">Use default style</button><button class="red-ui-button red-ui-button-small">Set as default style</button></span></div>'+
-        //     '<label>Style</label>'+
-        //     '<span style="display: inline-block; min-width: 140px" id="node-input-row-style-stroke">'+
-        //         '<label style="width: 70px;margin-right: 10px " for="node-input-style-stroke" data-i18n="editor:common.label.line"></label>'+
-        //     '</span>'+
-        //     '<span style="display: inline-block; min-width: 140px; margin-left: 10px"  id="node-input-row-style-fill">'+
-        //         '<label style="width: 70px;margin-right: 10px "  for="node-input-style-fill" data-i18n="editor:common.label.fill"></label>'+
-        //     '</span>'+
-        // '</div>'+
-        '<div class="node-input-group-style-tools"><span class="button-group"><button class="red-ui-button red-ui-button-small">Use default style</button><button class="red-ui-button red-ui-button-small">Set as default style</button></span></div>'+
 
         '<div class="form-row" id="node-input-row-style-stroke">'+
             '<label>Style</label>'+

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js

@@ -163,7 +163,8 @@ RED.sidebar.info = (function() {
             var types = {
                 nodes:0,
                 flows:0,
-                subflows:0
+                subflows:0,
+                groups: 0
             }
             node.forEach(function(n) {
                 if (n.type === 'tab') {
@@ -171,6 +172,8 @@ RED.sidebar.info = (function() {
                     types.nodes += RED.nodes.filterNodes({z:n.id}).length;
                 } else if (n.type === 'subflow') {
                     types.subflows++;
+                } else if (n.type === 'group') {
+                    types.groups++;
                 } else {
                     types.nodes++;
                 }
@@ -190,6 +193,9 @@ RED.sidebar.info = (function() {
             if (types.nodes > 0) {
                 $('<div>').text(RED._("clipboard.node",{count:types.nodes})).appendTo(counts);
             }
+            if (types.groups > 0) {
+                $('<div>').text(RED._("clipboard.group",{count:types.groups})).appendTo(counts);
+            }
         } else {
             // A single 'thing' selected.
 
@@ -220,6 +226,36 @@ RED.sidebar.info = (function() {
                     propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
                     $(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
                 }
+            } else if (node.type === "group") {
+                // An actual node is selected in the editor - build up its properties table
+                propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.group")+"</td><td></td></tr>").appendTo(tableBody);
+                RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
+                if (node.name) {
+                    propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody);
+                    $('<span class="red-ui-text-bidi-aware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]);
+                }
+                propRow = $('<tr class="red-ui-help-info-row"><td>&nbsp;</td><td></td></tr>').appendTo(tableBody);
+                var typeCounts = {
+                    nodes:0,
+                    groups: 0
+                }
+                var allNodes = RED.group.getNodes(node,true);
+                allNodes.forEach(function(n) {
+                    if (n.type === "group") {
+                        typeCounts.groups++;
+                    } else {
+                        typeCounts.nodes++
+                    }
+                });
+                var counts = $('<div>').appendTo($(propRow.children()[1]));
+                if (typeCounts.nodes > 0) {
+                    $('<div>').text(RED._("clipboard.node",{count:typeCounts.nodes})).appendTo(counts);
+                }
+                if (typeCounts.groups > 0) {
+                    $('<div>').text(RED._("clipboard.group",{count:typeCounts.groups})).appendTo(counts);
+                }
+
+
             } else {
                 // An actual node is selected in the editor - build up its properties table
                 propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody);