Tbain/253 add tags count

[tbain]

Description

This implements openedx/modular-learning#253 , the task to add tag usage counts to the tags table under the taxonomies table. The corresponding backend piece is where the aggregation work is done will be in a seperate PR to openedx-core. There are some UX changes that differ from the figmas; namely the figmas show a Cyan/Teal bubble body with black text. The Paragon element we're using does not support this color per se without having to customize it, so were going ahead with using the standard "primary" variant of the bubble tag to keep with Paragon standards, and also this provides better color contrast in support of visual accessibility.

Screenshots of UI changes

Supporting information

Github issue with AC: openedx/modular-learning#253
Paragon Bubble Tag element used to implement this feature: https://paragon-openedx.netlify.app/components/bubble
Figma Mockup(s): https://www.figma.com/design/yE6wmSFnokNM4FG1naasly/Content-Tagging-MVP?node-id=40000158-73422&t=mL0Gi7JcDX2CL2NM-0

Testing instructions

Refer to the AC in the Github Issue as well as reference the Figma mockups for look and feel guidance.

1. Navigate to the "Studio home" page
2. Navigate into an existing Course (or create a course and navigate into it)
3. In the "Course Outline" page, add tags from an existing taxonomy to the course, module, or section
4. Navigate back to the "Studio home" page
5. Click the "Taxonomies" tab to navigate to the Taxonomies page
6. Navigate into the Taxonomy that corresponds to the tag you added in step 3
7. Observe that, if a tag is used, there is now an additional column on the table named "Usage Count" that is populated with bubbles that display the count of tags usages, if applicable
8. Ensure that the tag you added in Step 3 properly associates the incremented count from its usage

Other information

Include anything else that will help reviewers and consumers understand the change.

• Does this change depend on other changes elsewhere?
  • this ticket is backwards compatible with the current implementation in openedx-core, however the original count methodology does not aggregate the counts as build(deps): bump follow-redirects from 1.14.4 to 1.14.8 #253 specifies, so the counts will not be accurate according to that AC
• Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.
  • none at this time, accessibility concerns have been considered; the visual style of the buttons meets WCAG AAA contrast compliance, and verified that screenreaders (MacOs/Voiceover) work correctly with the new data that is displayed.

[bradenmacdonald]

Let me know once you'd like this to me reviewed :) Ideally after someone from your team has done an initial review.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.56%. Comparing base (ec4cd64) to head (50812e2).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2957   +/-   ##
=======================================
  Coverage   95.56%   95.56%           
=======================================
  Files        1349     1349           
  Lines       31155    31159    +4     
  Branches     7064     7067    +3     
=======================================
+ Hits        29773    29777    +4     
  Misses       1320     1320           
  Partials       62       62           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jesperhodge]

Looks good. The frontend seems to be working independently of the backend fix PR, so we can merge this. I can do that tomorrow morning unless someone from Axim wants to look it over, I'll put it in the channel.

[bradenmacdonald]

What's the reason for adding refetchType: 'none', here, and refetchOnMount: 'always', above?

[tbain]

We had observed behavior where the taxonomy data wouldn't refresh when you navigated to the page, you'd have to do a manual browser refresh in order to get updated data. We had explored adding a small method to force it to refresh on mount, but refetchOnMount performs that same functionality without needing a somewhat hacky implementation. The refetchType: 'none' on the invalidate queries will prevent it from trying to refresh immediately upon invalidation and allow it to be refreshed naturally with the mount action.

[bradenmacdonald]

We had observed behavior where the taxonomy data wouldn't refresh when you navigated to the page, you'd have to do a manual browser refresh in order to get updated data.

Isn't that how all web pages normally work though? Or you mean somehow it was displaying stale data after previously displaying "new" data? If the latter, I think the "modes" code is affecting something.

The refetchType: 'none' on the invalidate queries will prevent it from trying to refresh immediately upon invalidation

Normally, we do want things to refresh immediately upon completion of some mutation, and that's how everything else in this MFE works. So this seems a bit unusual to me.

[bradenmacdonald]

@tbain @jesperhodge I think this PR is ready to go, as long as you remove tagTreeError.ts and squash down to a single commit when you merge. I'd appreciate an answer to my other question and a fix to the vertical alignment but those can come later too. Or let me know if you want me to merge.