feat: Studio menu/button to display Unit's Tags (feature flagged) (#33563)

cms/static/js/views/course_outline.js

@@ -458,6 +458,43 @@ function(
             event.stopPropagation();
         },
 
+        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');
+
+            // 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) {
             XBlockOutlineView.prototype.addButtonActions.apply(this, arguments);
             element.find('.configure-button').click(function(event) {
@@ -478,6 +515,10 @@ function(
                 event.preventDefault();
                 this.copyXBlock();
             });
+            element.find('.manage-tags-button').click((event) => {
+                event.preventDefault();
+                this.openManageTagsDrawer();
+            });
             element.find('.paste-component-button').click((event) => {
                 event.preventDefault();
                 this.pasteUnit(event);

cms/static/js/views/xblock_outline.js

@@ -114,6 +114,7 @@ function($, _, gettext, BaseView, ViewUtils, XBlockViewUtils, XBlockStringFieldE
                 staffOnlyMessage: this.model.get('staff_only_message'),
                 course: course,
                 enableCopyPasteUnits: this.model.get("enable_copy_paste_units"), // ENABLE_COPY_PASTE_UNITS waffle flag
+                useTaggingTaxonomyListPage: this.model.get("use_tagging_taxonomy_list_page"), // ENABLE_TAGGING_TAXONOMY_LIST_PAGE waffle flag
             };
         },
 

cms/static/sass/_build-v1.scss

@@ -55,6 +55,7 @@
 @import 'elements/uploaded-assets'; // layout for asset tables
 @import 'elements/creative-commons';
 @import 'elements/tooltip';
+@import 'elements/drawer';
 
 // +Base - Specific Views
 // ====================

cms/static/sass/elements/_drawer.scss

@@ -0,0 +1,30 @@
+// studio - elements - side drawers
+// ====================
+
+.drawer-cover {
+  @extend %ui-depth3;
+
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.drawer {
+  @extend %ui-depth4;
+
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 33.33vw;
+  height: 100vh;
+  background-color: $gray-l4;
+}
+
+body.drawer-open {
+  overflow: hidden;
+}