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

cms/djangoapps/contentstore/views/component.py

@@ -25,10 +25,14 @@
 from common.djangoapps.student.auth import has_course_author_access
 from common.djangoapps.xblock_django.api import authorable_xblocks, disabled_xblocks
 from common.djangoapps.xblock_django.models import XBlockStudioConfigurationFlag
-from cms.djangoapps.contentstore.toggles import use_new_problem_editor
+from cms.djangoapps.contentstore.toggles import (
+    use_new_problem_editor,
+    use_tagging_taxonomy_list_page,
+)
 from openedx.core.lib.xblock_utils import get_aside_from_xblock, is_xblock_aside
 from openedx.core.djangoapps.discussions.models import DiscussionsConfiguration
 from openedx.core.djangoapps.content_staging import api as content_staging_api
+from openedx.core.djangoapps.content_tagging.api import get_content_tags
 from xmodule.modulestore.django import modulestore  # lint-amnesty, pylint: disable=wrong-import-order
 from xmodule.modulestore.exceptions import ItemNotFoundError  # lint-amnesty, pylint: disable=wrong-import-order
 from ..toggles import use_new_unit_page
@@ -61,7 +65,7 @@
     "editor-mode-button", "upload-dialog",
     "add-xblock-component", "add-xblock-component-button", "add-xblock-component-menu",
     "add-xblock-component-support-legend", "add-xblock-component-support-level", "add-xblock-component-menu-problem",
-    "xblock-string-field-editor", "xblock-access-editor", "publish-xblock", "publish-history",
+    "xblock-string-field-editor", "xblock-access-editor", "publish-xblock", "publish-history", "tag-list",
     "unit-outline", "container-message", "container-access", "license-selector", "copy-clipboard-button",
     "edit-title-button",
 ]
@@ -178,9 +182,14 @@ def container_handler(request, usage_key_string):
             prev_url = quote_plus(prev_url) if prev_url else None
             next_url = quote_plus(next_url) if next_url else None
 
+            show_unit_tags = use_tagging_taxonomy_list_page()
+            unit_tags = None
+            if show_unit_tags and is_unit_page:
+                unit_tags = get_unit_tags(usage_key)
+
             # Fetch the XBlock info for use by the container page. Note that it includes information
             # about the block's ancestors and siblings for use by the Unit Outline.
-            xblock_info = create_xblock_info(xblock, include_ancestor_info=is_unit_page)
+            xblock_info = create_xblock_info(xblock, include_ancestor_info=is_unit_page, tags=unit_tags)
 
             if is_unit_page:
                 add_container_page_publishing_info(xblock, xblock_info)
@@ -216,6 +225,7 @@ def container_handler(request, usage_key_string):
                 'draft_preview_link': preview_lms_link,
                 'published_preview_link': lms_link,
                 'templates': CONTAINER_TEMPLATES,
+                'show_unit_tags': show_unit_tags,
                 # Status of the user's clipboard, exactly as would be returned from the "GET clipboard" REST API.
                 'user_clipboard': user_clipboard,
             })
@@ -598,3 +608,70 @@ def component_handler(request, usage_key_string, handler, suffix=''):
         )
 
     return webob_to_django_response(resp)
+
+
+def get_unit_tags(usage_key):
+    """
+    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)
+
+    # Group content tags by taxonomy
+    taxonomy_dict = {}
+    for content_tag in content_tags:
+        taxonomy_id = content_tag.taxonomy_id
+        if taxonomy_id:
+            if taxonomy_id not in taxonomy_dict:
+                taxonomy_dict[taxonomy_id] = []
+            taxonomy_dict[taxonomy_id].append(content_tag)
+
+    taxonomy_list = []
+    total_count = 0
+
+    def handle_tag(tags, root_ids, tag, child_tag_id=None):
+        # Group each tag by parent to build a tree
+        if tag.id not in tags:
+            tags[tag.id] = {
+                'id': tag.id,
+                'value': tag.value,
+                'children': [],
+            }
+        if child_tag_id:
+            # Add a child into the children list
+            tags[tag.id].get('children').append(tags[child_tag_id])
+        if tag.parent_id is None:
+            if tag.id not in root_ids:
+                root_ids.append(tag.id)
+        else:
+            # Group all the lineage of this tag
+            handle_tag(tags, root_ids, tag.parent, tag.id)
+
+    # Build a tag tree for each taxonomy
+    for content_tag_list in taxonomy_dict.values():
+        tags = {}
+        root_ids = []
+
+        for content_tag in content_tag_list:
+            if content_tag.tag:
+                handle_tag(tags, root_ids, content_tag.tag)
+
+        taxonomy = content_tag_list[0].taxonomy
+
+        if tags:
+            count = len(tags)
+            # Add the tree to the taxonomy list
+            taxonomy_list.append({
+                'id': taxonomy.id,
+                'value': taxonomy.name,
+                'tags': [tags[tag_id] for tag_id in root_ids],
+                'count': count,
+            })
+            total_count += count
+
+    unit_tags = {
+        'count': total_count,
+        'taxonomies': taxonomy_list,
+    }
+
+    return unit_tags

cms/djangoapps/contentstore/xblock_storage_handlers/view_handlers.py

@@ -1091,6 +1091,7 @@ def create_xblock_info(  # lint-amnesty, pylint: disable=too-many-statements
     course=None,
     is_concise=False,
     summary_configuration=None,
+    tags=None,
 ):
     """
     Creates the information needed for client-side XBlockInfo.
@@ -1383,6 +1384,8 @@ def create_xblock_info(  # lint-amnesty, pylint: disable=too-many-statements
             )
         else:
             xblock_info["ancestor_has_staff_lock"] = False
+        if tags is not None:
+            xblock_info["tags"] = tags
 
         if course_outline:
             if xblock_info["has_explicit_staff_lock"]:

cms/static/js/models/xblock_info.js

@@ -173,6 +173,10 @@ define(
              * True if summary configuration is enabled.
              */
                 summary_configuration_enabled: null,
+                /**
+             * List of tags of the unit. This list is managed by the content_tagging module.
+             */
+                tags: null,
             },
 
             initialize: function() {

cms/static/js/views/pages/container.js

@@ -27,6 +27,7 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
             'click .show-actions-menu-button': 'showXBlockActionsMenu',
             'click .new-component-button': 'scrollToNewComponentButtons',
             'click .paste-component-button': 'pasteComponent',
+            'click .tags-button': 'openManageTags',
         },
 
         options: {
@@ -97,6 +98,12 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
                 });
                 this.viewLiveActions.render();
 
+                this.tagListView = new ContainerSubviews.TagList({
+                    el: this.$('.unit-tags'),
+                    model: this.model
+                });
+                this.tagListView.render();
+
                 this.unitOutlineView = new UnitOutlineView({
                     el: this.$('.wrapper-unit-overview'),
                     model: this.model
@@ -125,6 +132,7 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
                 xblockView = this.xblockView,
                 loadingElement = this.$('.ui-loading'),
                 unitLocationTree = this.$('.unit-location'),
+                unitTags = this.$('.unit-tags'),
                 hiddenCss = 'is-hidden';
 
             loadingElement.removeClass(hiddenCss);
@@ -150,6 +158,7 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
                     // Refresh the views now that the xblock is visible
                     self.onXBlockRefresh(xblockView);
                     unitLocationTree.removeClass(hiddenCss);
+                    unitTags.removeClass(hiddenCss);
 
                     // Re-enable Backbone events for any updated DOM elements
                     self.delegateEvents();
@@ -409,6 +418,10 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
             this.duplicateComponent(this.findXBlockElement(event.target));
         },
 
+        openManageTags: function() {
+            // TODO open manage tags drawer
+        },
+
         showMoveXBlockModal: function(event) {
             var xblockElement = this.findXBlockElement(event.target),
                 parentXBlockElement = xblockElement.parents('.studio-xblock-wrapper'),

cms/static/js/views/pages/container_subviews.js

@@ -295,11 +295,131 @@ function($, _, gettext, BaseView, ViewUtils, XBlockViewUtils, MoveXBlockUtils, H
         }
     });
 
+    /**
+         * TagList displays the tags of a unit.
+         */
+    var TagList = BaseView.extend({
+        // takes XBlockInfo as a model
+
+        events: {
+            'click .wrapper-tag-header': 'expandTagContainer',
+            'click .tagging-label': 'expandContentTag',
+        },
+
+        initialize: function() {
+            BaseView.prototype.initialize.call(this);
+            this.template = this.loadTemplate('tag-list');
+            this.model.on('sync', this.onSync, this);
+        },
+
+        onSync: function(model) {
+            if (ViewUtils.hasChangedAttributes(model, ['tags'])) {
+                this.render();
+            }
+        },
+
+        expandTagContainer: function() {
+            var $content = this.$('.wrapper-tags .wrapper-tag-content'),
+                $icon = this.$('.wrapper-tags .wrapper-tag-header .icon');
+
+            if ($content.hasClass('is-hidden')) {
+                $content.removeClass('is-hidden');
+                $icon.addClass('fa-caret-up');
+                $icon.removeClass('fa-caret-down');
+            } else {
+                $content.addClass('is-hidden');
+                $icon.removeClass('fa-caret-up');
+                $icon.addClass('fa-caret-down');
+            }
+        },
+
+        expandContentTag: function(event) {
+            var contentId = event.target.id,
+                $content = this.$(`.wrapper-tags .content-tags-${contentId}`),
+                $icon = this.$(`.wrapper-tags .tagging-label-${contentId} .icon`);
+
+            if ($content.hasClass('is-hidden')) {
+                $content.removeClass('is-hidden');
+                $icon.addClass('fa-caret-up');
+                $icon.removeClass('fa-caret-down');
+            } else {
+                $content.addClass('is-hidden');
+                $icon.removeClass('fa-caret-up');
+                $icon.addClass('fa-caret-down');
+            }
+        },
+
+        renderTagElements: function(tags, depth, parentId) {
+            const tagListElement = this;
+            tags.forEach(function(tag) {
+                const parentElement = document.querySelector(`.content-tags-${parentId}`);
+                var tagContentElement = document.createElement('div'),
+                    tagValueElement = document.createElement('span');
+
+                // Element that contains the tag value and the arrow icon
+                tagContentElement.style.marginLeft = `${depth}em`;
+                tagContentElement.className = 'tagging-label';
+
+                // Element that contains the tag value
+                tagValueElement.textContent = tag.value;
+                tagValueElement.id = `tag-${tag.id}`;
+
+                tagContentElement.appendChild(tagValueElement);
+                parentElement.appendChild(tagContentElement);
+
+                if (tag.children.length > 0) {
+                    var tagIconElement = document.createElement('span'),
+                        tagChildrenElement = document.createElement('div');
+
+                    // Arrow icon
+                    tagIconElement.className = 'icon fa fa-caret-down';
+                    tagIconElement.ariaHidden = 'true';
+                    tagIconElement.id = `tag-${tag.id}`;
+
+                    // Element that contains the children of this tag
+                    tagChildrenElement.className = `content-tags-tag-${tag.id} is-hidden`;
+
+                    tagContentElement.appendChild(tagIconElement);
+                    parentElement.appendChild(tagChildrenElement);
+
+                    // Render children
+                    tagListElement.renderTagElements(tag.children, depth + 1, `tag-${tag.id}`);
+                }
+            });
+        },
+
+        renderTags: function() {
+            if (this.model.get('tags') !== null) {
+                const taxonomies = this.model.get('tags').taxonomies;
+                const tagListElement = this;
+                taxonomies.forEach(function(taxonomy) {
+                    tagListElement.renderTagElements(taxonomy.tags, 1, `tax-${taxonomy.id}`);
+                });
+            }
+        },
+
+        render: function() {
+            HtmlUtils.setHtml(
+                this.$el,
+                HtmlUtils.HTML(
+                    this.template({
+                        tags: this.model.get('tags'),
+                    })
+                )
+            );
+
+            this.renderTags();
+
+            return this;
+        }
+    });
+
     return {
         MessageView: MessageView,
         ViewLiveButtonController: ViewLiveButtonController,
         Publisher: Publisher,
         PublishHistory: PublishHistory,
-        ContainerAccess: ContainerAccess
+        ContainerAccess: ContainerAccess,
+        TagList: TagList
     };
 }); // end define();

cms/static/sass/elements/_controls.scss

@@ -119,6 +119,34 @@
   }
 }
 
+// inverse primary button
+%btn-primary-inverse {
+  @extend %ui-btn-primary;
+
+  background: theme-color("inverse");
+  border-color: theme-color("primary");
+  color: theme-color("primary");
+
+  &:hover,
+  &:active {
+    background: theme-color("primary");
+    border-color: $uxpl-blue-hover-active;
+    color: theme-color("inverse");
+  }
+
+  &.current,
+  &.active {
+    background: theme-color("primary");
+    border-color: $uxpl-blue-hover-active;
+    color: theme-color("inverse");
+
+    &:hover,
+    &:active {
+      background: theme-color("primary");
+    }
+  }
+}
+
 // +Secondary Button - Extends
 // ====================
 // gray secondary button