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 https://github.com/openedx/frontend-app-course-authoring/issues/1038 and https://github.com/openedx/frontend-app-course-authoring/issues/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.