Menu & View All list breaks if pattern name and folder name are identical

[coreylafferty]

I am using Pattern Lab Node v3.0.3 on Windows, with Node v10.15.1, using the Twig Edition.

Expected Behavior

All patterns show on the View All page and are properly nested in their parent item in the navigation.

Actual Behavior

If a filename matches that of the parent folder, the resulting menu shows the item outside the parent folder. The same pattern does NOT show up on the View All page.

Steps to Reproduce

1. Start up a fresh copy of Pattern Lab Node, using the Twig engine and Twig starter kit.
2. Look at the Atoms / Buttons pattern in the menu and file system as an example.
3. Notice that the Buttons item does not show in a Buttons folder (despite the file being 00-atoms/06-buttons/00-buttons.twig) and that Buttons does not show in either the main View All list or the Atoms category View All list.

4. As a clearer test, create the following four files to see how the menu handles similar patterns when the parent folder does and does not match one of them:

Folder name (cats) does NOT match a pattern filename in it since it is plural
/_patterns/01-molecules/cats/cat.twig
/_patterns/01-molecules/cats/cat-special.twig

Folder name (dog) does match a pattern filename in it
/_patterns/01-molecules/dog/dog.twig
/_patterns/01-molecules/dog/dog-special.twig

The two 'cat' files behave as expected, properly nested in a 'Cats' folder. The dog items do not, with the 'dog' folder being created without a toggle to open it and 'dog special' not showing at all -- the other pattern shows outside the dog folder but does not show in the View All list (similar to the buttons example above).

[sghoweri]

CC @bmuenzenmeyer

I’d definitely want to double check the Nav component to make sure there isn’t a logic error however this could potentially be a core PL Node issue as well (I can’t recall seeing this issue using the new UIKit with PL PHP...) 🤔

[bmuenzenmeyer]

i wouldn't be surprised if this was a core issue

[coreylafferty]

This issue was present before the recent UI updates and does not affect the PHP version of PL, so I assume it's an issue in PL Node core. We've dug into it a bit, but so far haven't had much luck tracking down a fix. It's particularly problematic with our theme because all of our patterns are organized according to the BEM class names so most of our folder names match the file names... e.g., /components/button/button.twig, components/button/button--small.twig, etc.

[kryp71c]

The identical folder name issue stems from changes made to core in this commit

To test: comment out this line in objcet-factory.js

The menu structure should now be intact. However, you'll find that the parent links are broken. Reverting object-factory.js to the state before the above commit fixes the menu issues.

[kmonahan]

@coreylafferty and I have been looking into this one, and as @kryp71c notes above, this looks to be related to the work done in PR #992. I've submitted a PR that limits the special handling of patterns that match their directory name to patterns that follow the structure patternType/patternSubType/pattern/pattern.*, which I think should work for both our use case and the one in the original PR. From comparing against a PHP version project with similar folder structures, it looks like that's how that version works as well--folders nested one level deep are treated as pattern subtype groupings and folders two levels deep are treated as patterns.

[zhawkins]

I've also run into this issue as well (with buttons too oddly enough).

Before:

After Patch:

Can confirm #1054 fixes the issue. 🎉

[coreylafferty]

@bmuenzenmeyer see #1054. Thanks!