feat: Sync tag count in units

openedx · Jan 22, 2024 · ad2c813 · ad2c813
1 parent ebcf800
commit ad2c813
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 34 deletions.
diff --git a/cms/djangoapps/contentstore/tests/test_contentstore.py b/cms/djangoapps/contentstore/tests/test_contentstore.py
@@ -49,7 +49,6 @@
     delete_course,
     reverse_course_url,
     reverse_url,
-    get_taxonomy_tags_widget_url,
 )
 from cms.djangoapps.contentstore.views.component import ADVANCED_COMPONENT_TYPES
 from common.djangoapps.course_action_state.managers import CourseActionStateItemNotFoundError
@@ -1416,15 +1415,12 @@ def test_course_overview_view_with_course(self):
             course.location.course_key
         )
 
-        taxonomy_tags_widget_url = get_taxonomy_tags_widget_url(course.id)
-
         self.assertContains(
             resp,
-            '<article class="outline outline-complex outline-course" data-locator="{locator}" data-course-key="{course_key}" data-course-assets="{assets_url}" data-taxonomy-tags-widget-url="{taxonomy_tags_widget_url}" >'.format(  # lint-amnesty, pylint: disable=line-too-long
+            '<article class="outline outline-complex outline-course" data-locator="{locator}" data-course-key="{course_key}" data-course-assets="{assets_url}" >'.format(  # lint-amnesty, pylint: disable=line-too-long
                 locator=str(course.location),
                 course_key=str(course.id),
                 assets_url=assets_url,
-                taxonomy_tags_widget_url=taxonomy_tags_widget_url,
             ),
             status_code=200,
             html=True

diff --git a/cms/djangoapps/contentstore/views/tests/test_block.py b/cms/djangoapps/contentstore/views/tests/test_block.py
@@ -288,19 +288,13 @@ def test_tag_count_in_container_fragment(self, mock_get_object_tag_counts):
         self.assertEqual(resp.status_code, 200)
         usage_key = self.response_usage_key(resp)
 
-        # Get the preview HTML without tags
-        mock_get_object_tag_counts.return_value = {}
-        html, __ = self._get_container_preview(root_usage_key)
-        self.assertIn("wrapper-xblock", html)
-        self.assertNotIn('data-testid="tag-count-button"', html)
-
         # Get the preview HTML with tags
         mock_get_object_tag_counts.return_value = {
-            str(usage_key): 13
+            str(usage_key): 13,
         }
         html, __ = self._get_container_preview(root_usage_key)
         self.assertIn("wrapper-xblock", html)
-        self.assertIn('data-testid="tag-count-button"', html)
+        self.assertIn(f'data-testid="tag-count-button', html)
 
     def test_split_test(self):
         """

diff --git a/cms/static/js/views/course_outline.js b/cms/static/js/views/course_outline.js
@@ -12,11 +12,11 @@ define(['jquery', 'underscore', 'js/views/xblock_outline', 'edx-ui-toolkit/js/ut
     'common/js/components/utils/view_utils', 'js/views/utils/xblock_utils',
     'js/models/xblock_outline_info', 'js/views/modals/course_outline_modals', 'js/utils/drag_and_drop',
     'common/js/components/views/feedback_notification', 'common/js/components/views/feedback_prompt',
-    'js/views/utils/tagging_drawer_utils',],
+    'js/views/utils/tagging_drawer_utils', 'js/views/tag_count', 'js/models/tag_count'],
 function(
     $, _, XBlockOutlineView, StringUtils, ViewUtils, XBlockViewUtils,
     XBlockOutlineInfo, CourseOutlineModalsFactory, ContentDragger, NotificationView, PromptView,
-    TaggingDrawerUtils
+    TaggingDrawerUtils, TagCountView, TagCountModel,
 ) {
     var CourseOutlineView = XBlockOutlineView.extend({
         // takes XBlockOutlineInfo as a model
@@ -28,9 +28,26 @@ function(
             this.makeContentDraggable(this.el);
             // Show/hide the paste button
             this.initializePasteButton(this.el);
+            this.renderTagCount();
             return renderResult;
         },
 
+        renderTagCount: function() {
+            const contentId = this.model.get('id')
+            var countModel = new TagCountModel({
+                content_id: contentId,
+                tags_count: this.model.get('tag_counts_by_unit')[contentId],
+                course_authoring_url: this.model.get('course_authoring_url'),
+            }, {parse: true});
+            var tagCountView = new TagCountView({el: this.$('.tag-count'), model: countModel});
+            tagCountView.setupMessageListener();
+            tagCountView.render();
+            this.$('.tag-count').click((event) => {
+                event.preventDefault();
+                this.openManageTagsDrawer();
+            });
+        },
+
         shouldExpandChildren: function() {
             return this.expandedLocators.contains(this.model.get('id'));
         },
@@ -461,10 +478,8 @@ function(
         },
 
         openManageTagsDrawer() {
-            const article = document.querySelector('[data-taxonomy-tags-widget-url]');
-            const taxonomyTagsWidgetUrl = $(article).attr('data-taxonomy-tags-widget-url');
+            const taxonomyTagsWidgetUrl = this.model.get('taxonomy_tags_widget_url')
             const contentId = this.model.get('id');
-
             TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
         },
 

diff --git a/cms/static/js/views/tag_count.js b/cms/static/js/views/tag_count.js
@@ -42,7 +42,7 @@ define(['jquery', 'underscore', 'js/views/baseview', 'edx-ui-toolkit/js/utils/ht
                     this.$el,
                     HtmlUtils.HTML(
                         this.template({
-                            tags_count: this.model.get('tags_count'),
+                            tags_count: this.model.get("tags_count"),
                         })
                     )
                 );

diff --git a/cms/templates/course_outline.html b/cms/templates/course_outline.html
@@ -29,7 +29,7 @@
 
 <%block name="header_extras">
 <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
-% for template_name in ['course-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'self-paced-due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor', 'unit-access-editor', 'discussion-editor', 'content-visibility-editor', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs', 'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor', 'course-highlights-enable', 'course-video-sharing-enable', 'summary-configuration-editor']:
+% for template_name in ['course-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'self-paced-due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor', 'unit-access-editor', 'discussion-editor', 'content-visibility-editor', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs', 'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor', 'course-highlights-enable', 'course-video-sharing-enable', 'summary-configuration-editor', 'tag-count']:
 <script type="text/template" id="${template_name}-tpl">
     <%static:include path="js/${template_name}.underscore" />
 </script>
@@ -281,7 +281,7 @@ <h3 class="sr">${_("Page Actions")}</h3>
                 assets_url = reverse('assets_handler', kwargs={'course_key_string': str(course_locator.course_key)})
                 %>
                 <h2 class="sr">${_("Course Outline")}</h2>
-                <article class="outline outline-complex outline-course" data-locator="${course_locator}" data-course-key="${course_locator.course_key}" data-course-assets="${assets_url}" data-taxonomy-tags-widget-url="${taxonomy_tags_widget_url}">
+                <article class="outline outline-complex outline-course" data-locator="${course_locator}" data-course-key="${course_locator.course_key}" data-course-assets="${assets_url}">
                 </article>
             </div>
             <div class="ui-loading">

diff --git a/cms/templates/js/course-outline.underscore b/cms/templates/js/course-outline.underscore
@@ -7,7 +7,8 @@ var hasPartitionGroups = xblockInfo.get('has_partition_group_components');
 var userPartitionInfo = xblockInfo.get('user_partition_info');
 var selectedGroupsLabel = userPartitionInfo['selected_groups_label'];
 var selectedPartitionIndex = userPartitionInfo['selected_partition_index'];
-var tagsCount = (xblockInfo.get('tag_counts_by_unit') || {})[xblockInfo.get('id')] || 0;
+var xblockId = xblockInfo.get('id')
+var tagsCount = (xblockInfo.get('tag_counts_by_unit') || {})[xblockId] || 0;
 
 var statusMessages = [];
 var messageType;
@@ -171,14 +172,8 @@ if (is_proctored_exam) {
                     </li>
                 <% } %>
 
-                <% if (xblockInfo.isVertical() && typeof useTaggingTaxonomyListPage !== "undefined" && useTaggingTaxonomyListPage && tagsCount > 0) { %>
-                    <li class="action-item">
-                        <a href="#" data-tooltip="<%- gettext('Manage Tags') %>" class="manage-tags-button action-button">
-                            <span class="icon fa fa-tag" aria-hidden="true"></span>
-                            <span><%- tagsCount %></span>
-                            <span class="sr action-button-text"><%- gettext('Manage Tags') %></span>
-                        </a>
-                    </li>
+                <% if (xblockInfo.isVertical() && typeof useTaggingTaxonomyListPage !== "undefined" && useTaggingTaxonomyListPage) { %>
+                    <li class="action-item tag-count" data-locator="<%- xblockId %>"></li>
                 <% } %>
 
                 <% if (typeof enableCopyPasteUnits !== "undefined" && enableCopyPasteUnits) { %>

diff --git a/cms/templates/js/tag-count.underscore b/cms/templates/js/tag-count.underscore
@@ -1,5 +1,7 @@
+<% if (tags_count && tags_count > 0) { %>
 <button data-tooltip="<%- gettext("Manage Tags") %>" class="btn-default action-button manage-tags-button" data-testid="tag-count-button">
     <span class="icon fa fa-tag" aria-hidden="true"></span>
     <span><%- tags_count %></span>
     <span class="sr action-button-text"><%- gettext("Manage Tags") %></span>
 </button>
+<% } %>
diff --git a/cms/templates/studio_xblock_wrapper.html b/cms/templates/studio_xblock_wrapper.html
@@ -46,9 +46,9 @@
 
 <%static:webpack entry="js/factories/tag_count">
     TagCountFactory({
-        tags_count: ${tags_count},
-        content_id: `${xblock.location}`,
-        course_authoring_url: `${course_authoring_url}`,
+        tags_count: "${tags_count | n, js_escaped_string}",
+        content_id: "${xblock.location | n, js_escaped_string}",
+        course_authoring_url: "${course_authoring_url | n, js_escaped_string}",
     },
         $('li.tag-count[data-locator="${xblock.location | n, js_escaped_string}"]')
     );
@@ -112,7 +112,7 @@
             <ul class="actions-list nav-dd ui-right">
                 % if not is_root:
                     % if can_edit:
-                        % if use_tagging and tags_count:
+                        % if use_tagging:
                             <li class="action-item tag-count" data-locator="${xblock.location}"></li>
                         % endif
                         % if not show_inline: