Revert "feat: Tag List on Unit page (feature-flagged) (#33645)" (#33740)

This reverts commit 104d42c67a.
2023-11-17 15:12:47 -05:00
parent c240fd8b52
commit c66ed87f65
13 changed files with 44 additions and 501 deletions
--- a/cms/static/js/models/xblock_info.js
+++ b/cms/static/js/models/xblock_info.js
@@ -173,10 +173,6 @@ 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() {
--- a/cms/static/js/views/course_outline.js
+++ b/cms/static/js/views/course_outline.js
@@ -11,12 +11,10 @@
 define(['jquery', 'underscore', 'js/views/xblock_outline', 'edx-ui-toolkit/js/utils/string-utils',
    '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',],
+    'common/js/components/views/feedback_notification', 'common/js/components/views/feedback_prompt',],
 function(
    $, _, XBlockOutlineView, StringUtils, ViewUtils, XBlockViewUtils,
-    XBlockOutlineInfo, CourseOutlineModalsFactory, ContentDragger, NotificationView, PromptView,
-    TaggingDrawerUtils
+    XBlockOutlineInfo, CourseOutlineModalsFactory, ContentDragger, NotificationView, PromptView
 ) {
    var CourseOutlineView = XBlockOutlineView.extend({
        // takes XBlockOutlineInfo as a model
@@ -460,12 +458,41 @@ function(
            event.stopPropagation();
        },

-        openManageTagsDrawer() {
+        closeManageTagsDrawer(drawer, drawerCover) {
+            $(drawerCover).css('display', 'none');
+            $(drawer).empty();
+            $(drawer).css('display', 'none');
+            $('body').removeClass('drawer-open');
+        },
+
+        openManageTagsDrawer(event) {
+            const drawer = document.querySelector("#manage-tags-drawer");
+            const drawerCover = document.querySelector(".drawer-cover")
            const article = document.querySelector('[data-taxonomy-tags-widget-url]');
            const taxonomyTagsWidgetUrl = $(article).attr('data-taxonomy-tags-widget-url');
            const contentId = this.model.get('id');

-            TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
+            // Add handler to close drawer when dark background is clicked
+            $(drawerCover).click(function() {
+                this.closeManageTagsDrawer(drawer, drawerCover);
+            }.bind(this));
+
+            // Add event listen to close drawer when close button is clicked from within the Iframe
+            window.addEventListener("message", function (event) {
+                if (event.data === 'closeManageTagsDrawer') {
+                    this.closeManageTagsDrawer(drawer, drawerCover)
+                }
+            }.bind(this));
+
+            $(drawerCover).css('display', 'block');
+            // xss-lint: disable=javascript-jquery-html
+            $(drawer).html(
+                `<iframe src="${taxonomyTagsWidgetUrl}${contentId}" onload="this.contentWindow.focus()" frameborder="0" style="width: 100%; height: 100%;"></iframe>`
+            );
+            $(drawer).css('display', 'block');
+
+            // Prevent background from being scrollable when drawer is open
+            $('body').addClass('drawer-open');
        },

        addButtonActions: function(element) {
--- a/cms/static/js/views/pages/container.js
+++ b/cms/static/js/views/pages/container.js
@@ -8,11 +8,10 @@ define(['jquery', 'underscore', 'backbone', 'gettext', 'js/views/pages/base_page
    'js/models/xblock_info', 'js/views/xblock_string_field_editor', 'js/views/xblock_access_editor',
    'js/views/pages/container_subviews', 'js/views/unit_outline', 'js/views/utils/xblock_utils',
    'common/js/components/views/feedback_notification', 'common/js/components/views/feedback_prompt',
-    'js/views/utils/tagging_drawer_utils',
 ],
 function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView, AddXBlockComponent,
    EditXBlockModal, MoveXBlockModal, XBlockInfo, XBlockStringFieldEditor, XBlockAccessEditor,
-    ContainerSubviews, UnitOutlineView, XBlockUtils, NotificationView, PromptView, TaggingDrawerUtils) {
+    ContainerSubviews, UnitOutlineView, XBlockUtils, NotificationView, PromptView) {
    'use strict';

    var XBlockContainerPage = BasePage.extend({
@@ -28,7 +27,6 @@ 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: {
@@ -99,12 +97,6 @@ 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
@@ -133,7 +125,6 @@ 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);
@@ -159,7 +150,6 @@ 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();
@@ -419,13 +409,6 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
            this.duplicateComponent(this.findXBlockElement(event.target));
        },

-        openManageTags: function(event) {
-            const taxonomyTagsWidgetUrl = this.model.get('taxonomy_tags_widget_url');
-            const contentId = this.findXBlockElement(event.target).data('locator');
-
-            TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
-        },
-
        showMoveXBlockModal: function(event) {
            var xblockElement = this.findXBlockElement(event.target),
                parentXBlockElement = xblockElement.parents('.studio-xblock-wrapper'),
--- a/cms/static/js/views/pages/container_subviews.js
+++ b/cms/static/js/views/pages/container_subviews.js
@@ -2,9 +2,8 @@
 * Subviews (usually small side panels) for XBlockContainerPage.
 */
 define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/components/utils/view_utils',
-    'js/views/utils/xblock_utils', 'js/views/utils/move_xblock_utils', 'edx-ui-toolkit/js/utils/html-utils',
-    'js/views/utils/tagging_drawer_utils'],
-function($, _, gettext, BaseView, ViewUtils, XBlockViewUtils, MoveXBlockUtils, HtmlUtils, TaggingDrawerUtils) {
+    'js/views/utils/xblock_utils', 'js/views/utils/move_xblock_utils', 'edx-ui-toolkit/js/utils/html-utils'],
+function($, _, gettext, BaseView, ViewUtils, XBlockViewUtils, MoveXBlockUtils, HtmlUtils) {
    'use strict';

    var disabledCss = 'is-disabled';
@@ -296,175 +295,11 @@ 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',
-            'click .manage-tag-button': 'openManageTagDrawer',
-            'keydown .wrapper-tag-header': 'handleKeyDownOnHeader',
-            'keydown .tagging-label': 'handleKeyDownOnContentTag',
-            'keydown .manage-tag-button': 'handleKeyDownOnTagDrawer',
-        },
-
-        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();
-            }
-        },
-
-        handleKeyDownOnHeader: function(event) {
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                this.expandTagContainer();
-            }
-        },
-
-        handleKeyDownOnContentTag: function(event) {
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                this.expandContentTag(event);
-            }
-        },
-
-        handleKeyDownOnTagDrawer: function(event) {
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                this.openManageTagDrawer();
-            }
-        },
-
-        expandTagContainer: function() {
-            var $content = this.$('.wrapper-tags .wrapper-tag-content'),
-                $header = this.$('.wrapper-tags .wrapper-tag-header'),
-                $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');
-                $header.attr('aria-expanded', 'true');
-            } else {
-                $content.addClass('is-hidden');
-                $icon.removeClass('fa-caret-up');
-                $icon.addClass('fa-caret-down');
-                $header.attr('aria-expanded', 'false');
-            }
-        },
-
-        expandContentTag: function(event) {
-            var contentId = event.target.id,
-                $content = this.$(`.wrapper-tags .content-tags-${contentId}`),
-                $header = this.$(`.wrapper-tags .tagging-label-${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');
-                $header.attr('aria-expanded', 'true');
-            } else {
-                $content.addClass('is-hidden');
-                $icon.removeClass('fa-caret-up');
-                $icon.addClass('fa-caret-down');
-                $header.attr('aria-expanded', 'false');
-            }
-        },
-
-        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 tagging-label-tag-${tag.id}`;
-                tagContentElement.id = `tag-${tag.id}`;
-
-                // Element that contains the tag value
-                tagValueElement.textContent = tag.value;
-                tagValueElement.id = `tag-${tag.id}`;
-                tagValueElement.className = 'tagging-label-value';
-
-                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.tabIndex = 0;
-                    tagContentElement.role = "button";
-                    tagContentElement.ariaExpanded = "false";
-                    tagContentElement.setAttribute('aria-controls', `content-tags-tag-${tag.id}`);
-                    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}`);
-                });
-            }
-        },
-
-        openManageTagDrawer: function() {
-            const taxonomyTagsWidgetUrl = this.model.get('taxonomy_tags_widget_url');
-            const contentId = this.model.get('id');
-
-            TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
-        },
-
-        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,
-        TagList: TagList
+        ContainerAccess: ContainerAccess
    };
 }); // end define();
--- a/cms/static/js/views/utils/tagging_drawer_utils.js
+++ b/cms/static/js/views/utils/tagging_drawer_utils.js
@@ -1,55 +0,0 @@
-/**
- * Provides utilities to open and close the tagging drawer to manage tags.
- * 
- * To use this drawer you need to add the following code into your template:
- * 
- * ```
- * <div id="manage-tags-drawer" class="drawer"></div>
- * <div class="drawer-cover"></div>
- * ```
- */
-define(['jquery'],
-function($,) {
-    'use strict';
-
-    var closeDrawer, openDrawer;
-
-    closeDrawer = function(drawer, drawerCover) {
-        $(drawerCover).css('display', 'none');
-        $(drawer).empty();
-        $(drawer).css('display', 'none');
-        $('body').removeClass('drawer-open');
-    };
-
-    openDrawer = function(taxonomyTagsWidgetUrl, contentId) {
-        const drawer = document.querySelector("#manage-tags-drawer");
-        const drawerCover = document.querySelector(".drawer-cover");
-
-        // Add handler to close drawer when dark background is clicked
-        $(drawerCover).click(function() {
-            closeDrawer(drawer, drawerCover);
-        }.bind(this));
-
-        // Add event listen to close drawer when close button is clicked from within the Iframe
-        window.addEventListener("message", function (event) {
-            if (event.data === 'closeManageTagsDrawer') {
-                closeDrawer(drawer, drawerCover)
-            }
-        }.bind(this));
-
-        $(drawerCover).css('display', 'block');
-        // xss-lint: disable=javascript-jquery-html
-        $(drawer).html(
-            `<iframe src="${taxonomyTagsWidgetUrl}${contentId}" onload="this.contentWindow.focus()" frameborder="0" style="width: 100%; height: 100%;"></iframe>`
-        );
-        $(drawer).css('display', 'block');
-
-        // Prevent background from being scrollable when drawer is open
-        $('body').addClass('drawer-open');
-    };
-
-    return {
-        openDrawer: openDrawer,
-        closeDrawer: closeDrawer
-    };
-});