Library Home - Filter by Tags

[ChrisChV]

Mockups: Figma mid-fi

1. Implement tags filter widget
   
2. Implement tags search widget.
   
   • Reuse the FilterByTags code as much as possible.
   • Shows the list of taxonomies and tags in a hierarchical manner
   • The Clear filter button removes the selected tags.
   • Everything else should work like FilterByTags does:
     • Add, Remove tags.
     • Search tags
     • Apply the filters after add or remove tags
     • Maintain the order and other filters currently applied.
3. For now, it only needs to work on the "Components" tab. But the tags filter widget should be visible on all tabs.
4. Implement filter count
   

[bradenmacdonald]

@ChrisChV I think this should actually be using FilterByTags, not ContentTagsDropDownSelector. Because ContentTagsDropDownSelector is not for filtering - it displays all available tags. Whereas FilterByTags is for filtering search results, and it only shows the tags that are actually used in the library. Plus it's already using the right UI.

[bradenmacdonald]

@ChrisChV For your other questions, it should work the same way as the course search modal that we built.

[ChrisChV]

@bradenmacdonald Thanks for the info!

[ChrisChV]

@bradenmacdonald Could you add this to the milestone?

[bradenmacdonald]

TBA When apply the filter. It must maintain the #1038 and #1049 currently applied

This functionality is already implemented for the course search modal. You can re-use the same components, so you don't have to re-implement this.

Reuse the FilterByTags code as much as possible.

Don't re-use the code - just use FilterByTags directly :) It should already work perfectly for this use case and not need any changes.

[yusuf-musleh]

@ChrisChV @bradenmacdonald There seems to be 2 styles in the Figma for how the filters should look like:

Style 1:

Style 2:

They are next to each other in Figma, however I'm not sure which one is the final one we are going with?

[ChrisChV]

@yusuf-musleh This is the Hifi Header

[bradenmacdonald]

@yusuf-musleh @ChrisChV The filter components already exist - just re-use the existing ones that we have. They look more like "Style 1".

I think they don't have icons though, so adding icons would be a nice addition, but not necessary for the MVP.

[yusuf-musleh]

@bradenmacdonald @ChrisChV Got it, thanks for the clarification.

Yes we're using the existing components, i've added the icons as well, in this PR.

[jmakowski1123]

This seems to work as intended, but it's a little hard to test without much content in the library. I'm going to suggest a new label "needs to be re-tested" so that we can come back to these again later.

[bradenmacdonald]

@jmakowski1123 Can I mark this as Done in the meantime, or do you want me to leave it open in "Ready for AC testing"?

[sdaitzman]

In the current staging build, the click targets are a bit strange for filter and sort #1038. The full area highlighted gray should be a click target for the item:

[jmakowski1123]

Once Sam's comment is addressed, we can move this to done, then circle back to all the done status later for re-testing.

[rpenido]

Hi @sdaitzman! CC @jmakowski1123
The issue was fixed, and the sandbox was updated.

[jmakowski1123]

Looks good to me, thanks for implementing the change!