Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Tag List on Unit page [FC-0036] #33645

Merged

Conversation

ChrisChV
Copy link
Contributor

@ChrisChV ChrisChV commented Nov 1, 2023

Description

This adds:

  • a new container subview to show the list of tags of a unit.
  • the "Manage tags" menu item on the component menu.
    Both are under the new_studio_mfe.use_tagging_taxonomy_list_page flag.

image
image

Supporting information

Testing instructions

  • Turn on the new_studio_mfe.use_tagging_taxonomy_list_page flag on studio.
  • Run taxonomy-sample-data script to create sample data.
  • On lms shell run paver update_assets. You need to clear the cache of your browser or use an incognito session
  • Make sure you have the frontend-app-course-authoring repo cloned and checkout the branch of this PR [FC-0036] feat: Add ContentTagsDrawer widget frontend-app-authoring#654
  • Go to a new created unit and check the tag list.
  • Click on "Manage tags" and check that opens the drawer.
  • Open the menu of a component and click on "Manage tags". Check that opens the drawer
  • Turn off the new_studio_mfe.use_tagging_taxonomy_list_page flag on studio.
  • Return to the unit page and verify that the tag list and the "Manage tags" menu item not shown

Additional info

TODO

@openedx-webhooks openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Nov 1, 2023
@openedx-webhooks
Copy link

openedx-webhooks commented Nov 1, 2023

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.

@ChrisChV ChrisChV marked this pull request as draft November 1, 2023 22:46
@open-craft-grove
Copy link

Sandbox deployment started.

@ChrisChV ChrisChV changed the title feat: Tag List component structure [FC-0036] feat: Tag List on Unit page [FC-0036] Nov 2, 2023
@ChrisChV ChrisChV marked this pull request as ready for review November 7, 2023 19:36
@open-craft-grove
Copy link

Sandbox update request received. Deployment will start soon.

@open-craft-grove
Copy link

Sandbox deployment successful.

Sandbox LMS is available at pr-33645-139931.staging.do.opencraft.hosting
Sandbox Studio is available at studio.pr-33645-139931.staging.do.opencraft.hosting

@open-craft-grove
Copy link

Sandbox deployment started.

@open-craft-grove
Copy link

Sandbox deployment successful.

Sandbox LMS is available at pr-33645-139931.staging.do.opencraft.hosting
Sandbox Studio is available at studio.pr-33645-139931.staging.do.opencraft.hosting

Copy link
Member

@yusuf-musleh yusuf-musleh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ChrisChV Overall I think this PR looks good, very clean code! I just had main question regarding the object tags grouping/lineage implementation, would love to hear your thoughts.

Also, I got confused initially because the side section UI changes were not showing. Spent some time figuring out why, it turns out I forgot I needed to run the paver watch_assets and paver compile_sass commands to see the reflected changed.

I think it would be helpful to include those as part of the testing instructions as well, especially if the reviewer hasn't worked major frontend work in this repo for some time.

Get the tags of a Unit and build a json to be read by the UI
"""
# Get content tags from content tagging API
content_tags = get_content_tags(usage_key)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ChrisChV I'm wondering if there is a way to make use of @bradenmacdonald 's updated implementation in the openedx-learning repo that added the lineage information to the object tags and takes care of the grouping under taxonomies as well, rather than re-implementing it here as well we could potentially utilize that as a single source of truth.

Here is a sample of how the data looks like:

{
    "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b": {
        "taxonomies": [
            {
                "name": "LightCastSkillsTaxonomy",
                "taxonomy_id": 15,
                "editable": true,
                "tags": [
                    {
                        "value": "Administrative Functions",
                        "lineage": [
                            "Administration",
                            "Administrative Support",
                            "Administrative Functions"
                        ]
                    }
                ]
            },
            {
                "name": "OpenCanadaTaxonomy",
                "taxonomy_id": 14,
                "editable": true,
                "tags": [
                    {
                        "value": "Verbal Ability",
                        "lineage": [
                            "Abilities",
                            "Cognitive Abilities",
                            "Communication Abilities",
                            "Verbal Ability"
                        ]
                    }
                ]
            },
            ...
        ]
    }
}

Though I think to make use of that, it seems there needs to be some changes made to the openedx-learning repo, namely extracting the logic out of the ObjectTagsByTaxonomySerializer and exposing a python API that can be used in this repo. Since currently It is only available through the rest api.

Any thoughts on this?

Copy link
Contributor

@bradenmacdonald bradenmacdonald Nov 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My thinking was that it's OK to have this duplicated here, because eventually this will be re-implemented in the course-authoring MFE and fetch data using REST (that's out of scope for us now, but at some point ALL of these Studio pages will be using the new MFE only). When that happens, it can use the logic in openedx-learning.

We should definitely put in a comment stating that when this is moved into an MFE it should be simplified to use the REST API which already provides this grouping + sorting logic. But for now since it's already implemented this way, I think it's fine to leave it like this and get it done sooner.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok @bradenmacdonald, that makes sense 👍

@yusuf-musleh Adding another comment, In addition to grouping by taxonomy, it is also necessary to group by parents, to be able to assemble each level of the component.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bradenmacdonald I see, yup, that make sense to me as well!

@ChrisChV Sounds good!

@ChrisChV
Copy link
Contributor Author

ChrisChV commented Nov 8, 2023

Also, I got confused initially because the side section UI changes were not showing. Spent some time figuring out why, it turns out I forgot I needed to run the paver watch_assets and paver compile_sass commands to see the reflected changed.

I think it would be helpful to include those as part of the testing instructions as well, especially if the reviewer hasn't worked major frontend work in this repo for some time.

@yusuf-musleh OMG! Sorry! Yes, I completely forgot to add that the commands must be executed. Thanks, I will add it now.

@ChrisChV
Copy link
Contributor Author

ChrisChV commented Nov 8, 2023

@yusuf-musleh @bradenmacdonald One thing I forgot to mention, The example shows disabled taxonomies. get_ojbect_tags returns object tags with disabled taxonomies. I think that's not the expected behavior, right?

@bradenmacdonald
Copy link
Contributor

@ChrisChV For now we are not going to support disabled taxonomies, so it doesn't really matter. But I think that once the taxonomy is disabled, its tags should not be returned by get_object_tags.

@open-craft-grove
Copy link

Sandbox deployment started.

@open-craft-grove
Copy link

Sandbox deployment successful.

Sandbox LMS is available at pr-33645-139931.staging.do.opencraft.hosting
Sandbox Studio is available at studio.pr-33645-139931.staging.do.opencraft.hosting

@yusuf-musleh
Copy link
Member

Also, I got confused initially because the side section UI changes were not showing. Spent some time figuring out why, it turns out I forgot I needed to run the paver watch_assets and paver compile_sass commands to see the reflected changed.

I think it would be helpful to include those as part of the testing instructions as well, especially if the reviewer hasn't worked major frontend work in this repo for some time.

@yusuf-musleh OMG! Sorry! Yes, I completely forgot to add that the commands must be executed. Thanks, I will add it now.

Thanks @ChrisChV !

@bradenmacdonald
Copy link
Contributor

Is this PR ready for a final review from @yusuf-musleh ? Then please ping me for the second review once it's approved, and I'll give a it a Core Contributor review.

@ChrisChV
Copy link
Contributor Author

@bradenmacdonald It's ready for another review round

@bradenmacdonald
Copy link
Contributor

@ChrisChV That looks great to me now! Just one very minor issue that's hopefully easy to fix and then I'll merge this:

When I put my cursor in this area, the tag changes blue which makes it seems like I can click. But clicking it does not open the tag. Only clicking on the text does. Can you please change it so that clicking here will expand the tag? (Or so that hovering here doesn't turn it blue, but I think that's not as good.) CC @ali-hugo

issue1

@ChrisChV
Copy link
Contributor Author

That looks great to me now! Just one very minor issue that's hopefully easy to fix and then I'll merge this:

@bradenmacdonald Done aa12f5c

Copy link
Contributor

@bradenmacdonald bradenmacdonald left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, sorry @ChrisChV I was just going to approve this but when I went through my checklist, I noticed an a11y issue. I can't open this with the keyboard.

When I tab/focus onto this "Discard changes" link and press TAB, I expect it to highlight "Tags 10" and let me press enter to reveal the tags. But instead it skips over it and goes to the bottom of the page ("Looking for help with Studio?").

Screenshot 2023-11-15 at 10 45 41 AM

So the .wrapper-tag-header needs to have tabindex=0. Also, from reading this page we need a few more a11y tweaks:

  • role=button on the .wrapper-tag-header
  • The .wrapper-tag-header should have aria-expanded=false when tags are collapsed and aria-expanded=true when the tags are shown.
  • The .wrapper-tag-header should have an aria-controls HTML attribute set to the ID of the content DIV (.wrapper-tag-content - you'll need to give it an ID)

Likewise, since the tags in the tree are interactive you should be able to TAB onto them and press ENTER to expand/collapse them.

Sorry for not catching this earlier; I'd prefer to give you everything in a single round of feedback.

@open-craft-grove
Copy link

Sandbox update request received. Deployment will start soon.

@open-craft-grove
Copy link

Sandbox deployment started.

@open-craft-grove
Copy link

Sandbox deployment successful.

Sandbox LMS is available at pr-33645-139931.staging.do.opencraft.hosting
Sandbox Studio is available at studio.pr-33645-139931.staging.do.opencraft.hosting

@ChrisChV
Copy link
Contributor Author

@bradenmacdonald It's ready for another round

Copy link
Contributor

@bradenmacdonald bradenmacdonald left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thanks! I'll merge tomorrow.

👍

  • I tested this: in Studio
  • I read through the code
  • I checked for accessibility issues
  • Includes documentation: will be done separately

@bradenmacdonald bradenmacdonald added the FC Relates to an Axim Funded Contribution project label Nov 17, 2023
@bradenmacdonald bradenmacdonald merged commit 104d42c into openedx:master Nov 17, 2023
64 checks passed
@bradenmacdonald bradenmacdonald deleted the chris/FAL-3527-tags-on-unit-page branch November 17, 2023 18:03
@openedx-webhooks
Copy link

@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.

@open-craft-grove
Copy link

Sandbox update request received. Deployment will start soon.

@rgraber
Copy link
Contributor

rgraber commented Nov 17, 2023

Hello! We think this may have broken a recent 2u build so we're going to revert and check some size issues.

@bradenmacdonald
Copy link
Contributor

@ChrisChV No need to do anything re the above message ^. We don't think there's any issue with your code but 2U will need to revert the PR and re-merge it later.

rgraber pushed a commit that referenced this pull request Nov 17, 2023
@edx-pipeline-bot
Copy link
Contributor

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

@edx-pipeline-bot
Copy link
Contributor

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

1 similar comment
@edx-pipeline-bot
Copy link
Contributor

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

@rgraber
Copy link
Contributor

rgraber commented Nov 20, 2023

Update: I think there actually may have been a bug. We are getting Error: Error: Parse error using esprima for file: /tmp/tmporotiwz5/js/views/utils/tagging_drawer_utils.js Error: Line 12: Unexpected token )
when we try to update assets.
I believe the specific command being run is python manage.py lms --settings=production collectstatic --noinput . I'm surprised checks didn't catch this though, which makes me wonder if we're behind a version on something in our pipeline.

@bradenmacdonald
Copy link
Contributor

Ah yeah @rgraber I've seen this before. Some part of the asset compilation uses esprima, which is not maintained, and the specific version that's used doesn't support trailing commas in function argument signatures.

@ChrisChV can you please re-submit, without the trailing comma in this line: function($,) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FC Relates to an Axim Funded Contribution project open-source-contribution PR author is not from Axim or 2U
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

[Tagging] Access unit/component tags from the Unit page
8 participants