From 197737f71fe792856939c83fa14239a1453f89b8 Mon Sep 17 00:00:00 2001
From: Gytis Vinclovas <gytis.vinclovas@gmail.com>
Date: Sun, 3 Nov 2019 18:18:36 +0200
Subject: [PATCH 1/2] Currently if all knobs have a group, we will display no
 knobs text instead of grouped knobs. This fixes it.

---
 addons/ondevice-knobs/src/panel.js | 39 ++++++++++++++++++------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/addons/ondevice-knobs/src/panel.js b/addons/ondevice-knobs/src/panel.js
index 10b57c14d320..1e7644bbfcaa 100644
--- a/addons/ondevice-knobs/src/panel.js
+++ b/addons/ondevice-knobs/src/panel.js
@@ -102,29 +102,38 @@ export default class Panel extends React.Component {
       return null;
     }
 
-    const { knobs, groupId } = this.state;
+    const { knobs, groupId: stateGroupId } = this.state;
 
     const groups = {};
     const groupIds = [];
 
     let knobsArray = Object.keys(knobs);
 
-    knobsArray
-      .filter(key => knobs[key].groupId)
-      .forEach(key => {
-        const knobKeyGroupId = knobs[key].groupId;
-        groupIds.push(knobKeyGroupId);
-        groups[knobKeyGroupId] = {
-          render: () => <Text id={knobKeyGroupId}>{knobKeyGroupId}</Text>,
-          title: knobKeyGroupId,
-        };
-      });
+    const knobsWithGroups = knobsArray.filter(key => knobs[key].groupId);
 
-    if (groupIds.length > 0) {
-      groups[DEFAULT_GROUP_ID] = {
-        render: () => <Text id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</Text>,
-        title: DEFAULT_GROUP_ID,
+    knobsWithGroups.forEach(key => {
+      const knobKeyGroupId = knobs[key].groupId;
+      groupIds.push(knobKeyGroupId);
+      groups[knobKeyGroupId] = {
+        render: () => <Text id={knobKeyGroupId}>{knobKeyGroupId}</Text>,
+        title: knobKeyGroupId,
       };
+    });
+
+    const allHaveGroups = groupIds.length > 0 && knobsArray.length === knobsWithGroups.length;
+
+    const groupId =
+      stateGroupId === DEFAULT_GROUP_ID && allHaveGroups
+        ? knobs[knobsWithGroups[0]].groupId
+        : stateGroupId;
+
+    if (groupIds.length > 0) {
+      if (!allHaveGroups) {
+        groups[DEFAULT_GROUP_ID] = {
+          render: () => <Text id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</Text>,
+          title: DEFAULT_GROUP_ID,
+        };
+      }
 
       if (groupId === DEFAULT_GROUP_ID) {
         knobsArray = knobsArray.filter(key => !knobs[key].groupId);

From fa38fc8c245763685351d1e6eb32100dd550faca Mon Sep 17 00:00:00 2001
From: Gytis Vinclovas <gytis.vinclovas@gmail.com>
Date: Sun, 3 Nov 2019 18:20:49 +0200
Subject: [PATCH 2/2] Added a comment.

---
 addons/ondevice-knobs/src/panel.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addons/ondevice-knobs/src/panel.js b/addons/ondevice-knobs/src/panel.js
index 1e7644bbfcaa..dceafd9e4146 100644
--- a/addons/ondevice-knobs/src/panel.js
+++ b/addons/ondevice-knobs/src/panel.js
@@ -122,6 +122,7 @@ export default class Panel extends React.Component {
 
     const allHaveGroups = groupIds.length > 0 && knobsArray.length === knobsWithGroups.length;
 
+    // If all of the knobs are assigned to a group, we don't need the default group.
     const groupId =
       stateGroupId === DEFAULT_GROUP_ID && allHaveGroups
         ? knobs[knobsWithGroups[0]].groupId