Tagging UX refinement v2 [FC-0036]

[ChrisChV]

Description

This PR fixes the following issues:

1. the layer over the course outline is too dark when the tag drawer is open.
2. Refresh the count of tags on the unit/outline page(s) after the user makes edits in the tag drawer
   • TagList component updated to allow receiving for the Manage tags drawer and refresh all the tag tree and counts
   • TagCount refactored to use javascript to render the component and allow receiving for the Manage tags drawer and refresh the count.
   • Update new TagCount in units and components

Supporting information

Internal ticket: FAL-3601
Github issue: openedx/modular-learning#167
Related PR: openedx/frontend-app-authoring#800

Testing instructions

Enable contentstore.enable_copy_paste_units and new_studio_mfe.use_tagging_taxonomy_list_page flags.
Before to all you need to run the taxonomy-sample-data.

1. the layer over the course outline is too dark when the tag drawer is open.

• Go to a sample course and go to a unit. Click on Manage tags to open the drawer. Verify the color.

2. Refresh the count of tags on the unit/outline page(s) after the user makes edits in the tag drawer

• Use this branch of frontend-app-course-authoring-
• Go to a sample course and go to a unit. Click on Manage tags to open the drawer.
• Add and remove tags.
• Close the drawer and verify that the TagList is updated.
• Open the manage tags drawer for a component of the unit.
• Add and remove tags.
• Verify that the count of tags is updated.
• Go to a sample course and open the outline.
• Click on the tag count of any unit and open the manage tags drawer.
• Add and remove tags
• Verify that the count of tags is updated.

[openedx-webhooks]

Thanks for the pull request, @ChrisChV! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[yusuf-musleh]

👍 The updated implementation works quite well, just had a suggestion about the messaging format in the related (openedx/frontend-app-authoring#800) for the close message, which would need a small change here as well.

Great work @ChrisChV ! It's great seeing how all of this is coming together.

• I tested this: I confirmed that the dark background color has changed to the lighter one. I also tested that when you open the manage tags drawer for a unit from the course outline, add/remove tags updates automatically on the course outline page, including hiding/showing the tags count when 0 or more that 0 tags applied. I also tested the same for opening the tags drawer for a unit from inside the unit page, and the updated tags are reflected automatically in the TagList on the side of the page. And finally I tested that accessing the manage tags drawer from a component in a unit also reflects the changes on the page when adding/removing tags (including hiding and showing the tags count)
• I read through the code
• I checked for accessibility issues
• Includes documentation
• I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository.

[bradenmacdonald]

@ChrisChV There is some issue with the JS in this PR. When I have it checked out, I can't build the tutor image - it fails with some error in the r.js optimizer. Perhaps you have included some new JS syntax that breaks the (super old) bundling code we have.

Related, I'm seeing this error on the Unit page, even if I run the rebuilt assets command.

[bradenmacdonald]

Ah, these import and export statements are probably the problem - I don't think the build process used in edx-platform supports them. But it could be something else - not sure.

[ChrisChV]

There are other factories that has the same syntax. My tutor is unconfigured, I'm going to try to configure it to try another syntax

[ChrisChV]

That error happened to me, but it was fixed with this line. Maybe clearing the cache?

[ChrisChV]

Nevermind, I found the r.js optimizer error

[bradenmacdonald]

Thx, let me know when you've found a fix.

[ChrisChV]

@bradenmacdonald I fixed the bug. It was an extrra , here You can test it? I still need to configure my tutor with the MFE

[bradenmacdonald]

Hmm, I can see the lighter color, and now the JS build error is resolved, but the auto-refresh isn't working for me. I see that Course-Authoring sends the signals, but the CMS is not refreshing anything.

@yusuf-musleh could you please confirm it's working for you in the latest version?

If so, I'm good to merge this as-is. We're actually going to shift focus to the new MFE versions of these pages very soon, so I don't want to spend too much more time on the "legacy" views.

[yusuf-musleh]

@bradenmacdonald @ChrisChV I tried it out with the latest changes on this PR and the mfe PR, and ran through all the cases and can confirm that they're all working as expected on my devstack.

[openedx-webhooks]

@ChrisChV 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-pipeline-bot]

2U Release Notice: This PR has been deployed to the edX staging environment in preparation for a release to production.

[edx-pipeline-bot]

2U Release Notice: This PR has been deployed to the edX production environment.

[edx-pipeline-bot]

2U Release Notice: This PR has been deployed to the edX production environment.