Fix #4829: render non-grouped knobs in the ALL tab

[Jessidhia]

Issue: #4829

What I did

When there are knobs both with and without a groupId, the knobs without a groupId were not getting rendered at all.

I made them be rendered as part of the content of the (normally contentless) ALL tab.

How to test

• Is this testable with Jest or Chromatic screenshots?
  • I don't know about screenshots but I wrote Jest tests.
• Does this need an update to the documentation?
  • No, this fixes something that is documented to work but doesn't

---

PS: Oops, I only saw the notice about which branch to use as base after I wrote this. I need this to be in master FWIW. What do?

[Jessidhia]

The way TabsState works is, tbh, scary 😓

It's not even possible to refactor the objects with render / title into a component (which would be way cleaner) because that'd break TabsState looking into its children.

I assume it's a relic from a world before render props.

(<TabsState>
  {({ active, selected }) =>
    Object.keys(groups).map(groupName => (
      <KnobsTab
        key={groupName}
        active={active || selected === DEFAULT_GROUP_ID}
        name={groupName}
        knobs={knobsArray.filter(/* ... */)}
        /* ... */
      />
    ))
  }
</TabsState>)

function KnobsTab({ active, name, knobs /* ... */ }) {
  return (
    <Tab id={name} title={name}>
      <TabWrapper active={active}>
        ...
      </TabWrapper>
    </Tab>
  )
}

[ndelangen]

Would be happy to chat about how to improve this, Are you on the Storybook discord by any chance?

[igor-dv]

@tmeasday, @shilman, why does chromatic think there are changes?

[igor-dv]

Also it should be rebased on next

[ndelangen]

I'll rebase this

[codecov]

Codecov Report

Merging #5106 into next will increase coverage by 0.29%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##             next    #5106      +/-   ##
==========================================
+ Coverage   35.02%   35.32%   +0.29%     
==========================================
  Files         596      596              
  Lines        7371     7375       +4     
  Branches     1005     1012       +7     
==========================================
+ Hits         2582     2605      +23     
+ Misses       4277     4260      -17     
+ Partials      512      510       -2

Impacted Files	Coverage Δ
addons/knobs/src/components/Panel.js	81.57% <100%> (+17.69%)	⬆️
addons/knobs/src/components/PropForm.js	84.61% <0%> (+53.84%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a442dba...b31a405. Read the comment docs.

[ndelangen]

OK it's rebased, and I took the liberty of applying the changes for @igor-dv review comments.

@Kovensky we're migrating to typescript, and we're discussing how the future version of addon-knobs is going to look like / function on discord. I'd love your input on it, and help if you can. 🙇