MM-13342: Fix dividers showing when menu section is empty.

[grundleborg]

Summary

Fix dividers showing when menu section is empty.

This fix is a little ugly - it checks the children-of-children are not
null to work around connected components themselves not being null but
having the actual component within being null.

Ticket Link

https://mattermost.atlassian.net/browse/MM-13342

Checklist

• Ran make check-style to check for style errors (required for all pull requests)
• Ran make test to ensure unit and component tests passed
• Added or updated unit tests (required for all new features)

[hmhealey]

If you're wanting to avoid adding that extra introspection, perhaps we could actually fix this using CSS? If you look here, we already use .divider + .divider to hide the dividers for empty sections other than the first, so we can add .divider:firstChild to hide that first one as well.

[grundleborg]

I don't think that will work, as we're not successfully hiding any of the dividers currently with the CSS. This fix targets all the unnecessary ones, not just the first one. Then again my CSS-foo isn't great so maybe I'm misunderstanding it?

[grundleborg]

Sigh. Looks like this was a duplicate ticket anyway and Asaad has fixed it here #2152

[hmhealey]

I've merged and cherry picked that PR, so we could test again now to see if it's still an issue

[cometkim]

This is my mistake, obviously a composition-level.

If you change the actual markup and style to suit group composition, would be able to resolve the issue naturally without any CSS/Props hack.

[cometkim]

children.every((child) => child?.props?.children?.length) is much better.

[grundleborg]

Looks fixed to me now with Asaad's changes. Closing this PR.