Sample gallery with extension type, Closes #219

[nicodecleyre]

🎯 Aim

Adding an extra filter to Sample gallery so that we can filter on the extension type. Filter can only be visible when extension type is selected 'Component Type'

📷 Result

✅ What was done

• Added Extension filter dropdown
• Added functionality so that extension filter is only visible when extension is selected in the Component Type dropdown
• Added filter functionality so that samples get filtered based on selected value in extension dropdown
• Added filter functionality so that samples don't get filtered when extensions dropdown has selected values but extension is not selected in component type dropdown

🔗 Related issue

Closes: #219

[Adam-it]

Awesome 👏👏👏👏 I will review it ASAP 🤩
You Rock 😍

[Adam-it]

@nicodecleyre awesome work so far 👏
The implementation is really good and clean and I have only some small details I commented.
The biggest problem I noticed is a small bug that:
I managed to have the extension type filter present not only with extension component type but with webpart as well. Then I selected form customizer type and when I unselected and selected extension component type again it seemed that the form customizer extension type was already selected (the samples were filtered) but it wasn't selected in the picker. Please check the below recording for more details.
https://github.com/pnp/vscode-viva/assets/58668583/0866d980-6d59-4653-8183-745c901cb0eb

[Adam-it]

@nicodecleyre the implementation looks ok but when testing it locally it seems like it is a bit inconsistent with the rest of filters and some behavior is still buggy

Please check below recording for more context.

PR.test.mp4

• it seems the selected extension type filter are not pointed out in the text box and the checkbox are not marked
• the picked option are not shown in the tag below as other filters
• when we 'clear all' the extension gets unselected but the extension type select gets not hidden

[nicodecleyre]

@nicodecleyre the implementation looks ok but when testing it locally it seems like it is a bit inconsistent with the rest of filters and some behavior is still buggy

Please check below recording for more context.

PR.test.mp4

• it seems the selected extension type filter are not pointed out in the text box and the checkbox are not marked
• the picked option are not shown in the tag below as other filters
• when we 'clear all' the extension gets unselected but the extension type select gets not hidden

Thx @Adam-it, indeed a bit inconsistent like you said. Did a couple of changes and tested. Seems to work fine on my end.

Let me know if you find other bugs 🙏

[Adam-it]

Looks and works really good 👍
Added some minor styling tweaks.
Awesome work 👏 You Rock 🤩